When I was new and less experienced, was working on a project and would eventually realize that the size of the project had increased and also had problems on running or building the project. So, started to work on Webpack and confused, and then switched to Vite and faced other issues like conflicting with other libraries and so on.
Once upon a time was reading here and found out we could create react app without create-react-app 😂.
On the other hand, working with Redux on small projects or websites becomes somewhat boring. Ohh, we might have lightweight state management as well. Jotai would be one of them.
Let's do it. Creating a react app with Parcel that is "Blazing fast, zero configuration web application bundler" and Jotai that "takes an atomic approach to global React state management with a model inspired by Recoil".
Step 1. Create a new folder for your project
Easy enough.
Step 2. Create your package.json file
In terminal, cd into the folder you've created and run:
yarn init -y or npm init -y
These commands automatically create the package.json file.
Step 3. Install Parcel as a dev dependency
yarn add -D parcel or npm i -D parcel
Step 4. Install React, ReactDOM, Jotai
yarn add react react-dom jotai or npm i react react-dom jotai
Step 5. Create index.html file
At the root of your project create "src" directory and also create index.html file with the content below:
<!-- src/index.html -->
<html>
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
/>
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>React app with Parcel and Jotai</title>
</head>
<body>
<div id="root"></div> <!-- our React app will be inserted here -->
<script type="module" src="index.js"></script><!--will create next-->
</body>
</html>
Step 6. Create index.js file for React Rendering
into src folder, create another file called index.js and enter your bare bones React code:
// src/index.js
import { createRoot } from "react-dom/client";
import App from "./App"; // will create next
const container = document.getElementById("root");
const root = createRoot(container)
root.render(<App />);
Step 7. Create App.js file and enter everything you want to see on the page:
// src/App.js
const App = () => {
return (
<h1>Hello From Parcel!</h1>
)
}
export default App;
Step 8. Add "scripts" to package.json file
add a start script to package.json :
// package.json
{
"name": "react-parcel-jotai",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"scripts": {
//here (--open will open browser after runniong)
"start": "parcel src/index.html --open"
},
"devDependencies": {
"parcel": "^2.8.3",
"process": "^0.11.10"
},
"dependencies": {
"jotai": "^2.0.3",
"react": "^18.2.0",
"react-dom": "^18.2.0"
}
}
Step 9. Start it up
That's it! Now from the terminal, run:yarn start or npm start
That's it.
Parcel supports JSX automatically when it detects you are using React. If you’re using React 17 or later, it also automatically enables the modern JSX transform, which means you don't even need to import React for JSX to work, as you can see in App.js in the above example.
Step 10. Add state management (Jotai)
as an instance, we will create three components called ComponentA.js, ComponentB.js and ComponentC.js, and will try to use the state values into them.
10-1. First, create a primitive atom:
create a new directory into src folder called stores and put the states below:
(of course, we could create states in separate files or locate them all into one, it depends on what we will do with the values)
// src/stores/stores.js
import {atom} from 'jotai'
export const user = atom({ // an object
fullName: 'Hamid Mohamadi',
email: "mohamadihamit@gmail.com"
})
export const count = atom(0) // number
export const country = atom('Iran') // string
10-2. Use the atom into components:
It can be used like React.useState:
create another directory into src, call it ComponentA.js:
// src/components/ComponentA.js
import {useAtom} from 'jotai';
import {initialCount} from "../stores/stores";
const ComponentA = () => {
// use the state with useAtom hook
const [count, setCount] = useAtom(initialCount)
return (
<>
<h1>Component A</h1>
<div>Count {count}</div>
<br/>
// update the state
<button onClick={() => setCount(c => c + 1)}>Increment</button>
</>
)
}
export default ComponentA;
the others would be like:
// src/components/ComponentB.js
import {useAtom} from "jotai";
import {defaultCountry} from "../stores/stores";
const ComponentB = ()=>{
const [country,setCountry] = useAtom(defaultCountry);
return (
<>
<h1>Component B</h1>
<div>Country: {country}</div>
<br/>
<button onClick={()=>setCountry('Japan')}>
Set Country To Japan
</button>
</>
)
}
export default ComponentB;
// src/components/ComponentC.js
import {useAtom} from "jotai";
import {loggedInUser} from "../stores/stores";
const ComponentC = () => {
const [user,] = useAtom(loggedInUser);
return (
<>
<h1>Component C</h1>
<div>You are logged in as
<strong>{user.fullName}</strong>
</div>
</>
)
}
export default ComponentC;
so, our App.js after import components would be looks like this:
// src/App.js
import ComponentA from "./components/ComponentA";
import ComponentB from "./components/ComponentB";
import ComponentC from "./components/ComponentC";
const App = () => {
return (
<>
<h1>Hello From Parcel!</h1>
<ComponentA/>
<hr/>
<ComponentB/>
<hr/>
<ComponentC/>
</>
)
}
export default App;
and done, Wasn't it great? !!! I love Jotai. It is just 388 kb.
Thanks for your time.
Source Code:https://github.com/hamitmohamadi/react-with-parcel-and-jotai