Zustand Sandbox Setup in React

Hello! Welcome to the third lesson in our series on Zustand.

In our last session, we compared Zustand with Redux and MobX. We concluded that Zustand offers a compelling middle ground, providing the global state capabilities of Redux without the boilerplate, and achieving high performance similar to MobX but with a simpler, hooks-native API.

Today, we move from theory to practice. The goal is to create a clean, working environment where we can experiment with Zustand's features throughout the rest of this course.

Learning Outcome: By the end of this lesson, you will be able to set up a minimal React project with Zustand to serve as a sandbox environment.

1. Scaffolding Your React Project with Vite

For our sandbox, we'll use Vite to scaffold the React application. Given your experience, you're likely familiar with create-react-app, but Vite has become a standard for modern front-end development due to its extremely fast Hot Module Replacement (HMR) and efficient build process, which leverages native ES modules.

The following video provides a concise walkthrough of the initial setup process.

To summarize and formalize the steps, please execute the following commands in your terminal in an empty directory:

1. Create the Vite project:

   npm create vite@latest
   

   When prompted:

   • Enter a project name (e.g., zustand-sandbox).
   • Select React.
   • Select JavaScript. (While the video uses JavaScript, you could also select TypeScript given your background. The dev.to article we'll see next uses TypeScript, so you can refer to it for type definitions if you choose that path.)

2. Navigate into your new project directory:

   cd zustand-sandbox
   

3. Install the project dependencies:

   npm install
   

4. Install Zustand:

   npm install zustand
   

You now have a basic React project with Zustand added as a dependency.

2. Structuring and Cleaning the Sandbox

A clean starting point is essential for focused learning. The default Vite template includes some boilerplate code (logos, CSS, and a counter example) that we should remove. We'll also establish a simple folder structure for our state management code.

The article "Using Zustand with React JS!" provides a good textual reference for this process and introduces a conventional project structure.

Let's apply these ideas to clean up our project:

1. Create a store directory: Inside the src folder, create a new folder named store. This is where we will keep all our Zustand store definitions.

2. Clean up src/App.css: Open this file and delete all of its content.

3. Clean up src/index.css: Open this file and delete all of its content. We can add minimal global styles later if needed.

4. Clean up src/App.jsx: Replace the entire content of App.jsx with the following minimal component:

   function App() {
     return (
       <div>
         <h1>Zustand Sandbox</h1>
       </div>
     )
   }
   
   export default App
   

5. Delete unused assets: You can now safely delete the src/assets folder, as the react.svg logo is no longer referenced.

3. Verifying Your Sandbox Environment

With the project created, dependencies installed, and boilerplate removed, the final step is to ensure everything is working correctly.

Run the development server from your project's root directory:

npm run dev

Open your browser and navigate to the local URL provided by Vite (usually http://localhost:5173). You should see a simple page with the heading "Zustand Sandbox".

Your project structure should now look something like this:

zustand-sandbox/
├── node_modules/
├── public/
│   └── vite.svg
├── src/
│   ├── store/
│   ├── App.jsx
│   └── main.jsx
├── .eslintrc.cjs
├── .gitignore
├── index.html
├── package.json
├── package-lock.json
└── vite.config.js

You have successfully created a clean sandbox environment. This setup is the foundation upon which we will build in the upcoming lessons.

Conclusion

In this lesson, you have:

• Scaffolded a new React project using the modern toolchain provided by Vite.
• Installed zustand as a project dependency.
• Cleaned the default project template and established a simple, scalable folder structure by creating a src/store directory.
• Verified that the minimal application is running correctly.

You are now fully prepared to start building with Zustand.

Next Lesson Preview:
In our next lesson, we will use this sandbox to create a basic store using the create function, defining both state and actions. We'll write our first lines of Zustand code and see how it enables us to manage state outside of our React components.