A new way to create desktop applications: Tauri + React

Welcome to this article. If you a programmer, you must have heard about electron.js, by using which, whatsapp, slack, skype, discord desktop application has been created. But, then why am I saying that Tauri is a new way to create desktop applications ? Let's look into some of the pros and cons of it.

Electron vs Tauri:

Performance

Tauri is designed to be more lightweight and faster than Electron, as it uses less memory and CPU resources

Security

Tauri is built with security in mind and aims to be more secure than Electron by using a Rust-based native layer instead of a JavaScript-based layer

Size

Tauri apps have smaller binary sizes than Electron apps because it’s using rust instead of javascript and other web technologies

Access to native APIs

Tauri apps have access to more system-level APIs than Electron apps, because of the use of rust

You can have a look at the below table, to compare Tauri and Electron Completely.

NOTE: As I am using Linux, so headers of the app and the icon are a little different. It will look different for Windows and Mac.

I cleaned everything in the App.tsx, App.css and index.css files, and the application will be blank for me.

import './App.css'



function App() {



  return (

    <>



    </>

  )

}



export default App

Now, Let's start creating the Todo Application.

I created a Components folder and store in the src folder and created two files, one inside the Components folder and one in the store folder.

src

|-- Components

    |-- Input.tsx

    |-- TodoList.tsx

|-- store

    |-- store.ts

Input.tsx: The input component is for the input box where we can type the todo app.

TodoList.tsx: This component will be used to show the list of the todos.

store.ts: This file is being handled to create the global store.

//store.ts

import { atom } from "jotai";



export const inputDataStore = atom<String[]>([])

Here, we are initializing the store using jotai Atom and giving it a type of Array of strings.

// Input.tsx

import { useAtom } from "jotai"

import { inputDataStore } from "../store/store"

import { useState } from "react"



const Input = () => {

  const [_, setData] = useAtom(inputDataStore)

  const [inputData, setInputData] = useState('')





  return (

    <div className="input-container">

        <input type="text" onChange={(e) => {

          setInputData(e.target.value)

        }} />

        <button onClick={() => {

          setData((el) => [...el, inputData])

        }}>

          Add Todo

        </button>

    </div>

  )

}



export default Input

As you can see, in the above code, I created an input box, and a button to add the entered value in the input box to move to the global todo list array.

// TodoList.tsx



import { useAtom } from 'jotai'

import { inputDataStore } from '../store/store'



const TodoList = () => {

  const [data] = useAtom(inputDataStore)



  return (

    <ul>

        {data?.map((item, index) => {

            return (

                <li key={index}>

                    {item}

                </li>

            )

        })}

    </ul>

  )

}



export default TodoList

The above code represents the list of the todo, which has been entered in the Input.tsx file.

// App.tsx

import './App.css'

import Input from './Components/Input'

import TodoList from './Components/TodoList'



function App() {



  return (

    <div className='app-container'>

      <Input />

      <TodoList />

    </div>

  )

}



export default App

Finally, all the components are combined and added to the App.tsx file.

Build the Electron App

To build the electron app, please run the below command.

yarn build

The above command will build the code and also create a folder named, release which has the build of the app to run on a desktop, according to your OS.

As I am running Linux, it created an AppImage for me, for 102.2 MB.