Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/neonsy/react-learning-state-management
This repository holds projects I've created, in order to learn specific things, working with react.
https://github.com/neonsy/react-learning-state-management
dnd-kit jotai learning-react react react-hook-form reactjs typescript vite vitejs zod zustand zustandjs
Last synced: 27 days ago
JSON representation
This repository holds projects I've created, in order to learn specific things, working with react.
- Host: GitHub
- URL: https://github.com/neonsy/react-learning-state-management
- Owner: Neonsy
- License: mit
- Created: 2024-09-17T21:23:12.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2024-10-22T16:58:09.000Z (2 months ago)
- Last Synced: 2024-10-25T12:54:37.283Z (2 months ago)
- Topics: dnd-kit, jotai, learning-react, react, react-hook-form, reactjs, typescript, vite, vitejs, zod, zustand, zustandjs
- Language: TypeScript
- Homepage:
- Size: 4.72 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React State Management Exploration
## **Overview**
Welcome to the third chapter of my journey into the React ecosystem! 🚀 Click [here](#projects) to jump to the project list, where you can also find live demos for the completed projects.
> [!NOTE]
> The Projects are being designed on the fly, without responsiveness in mind.
> Therefore, demo results may vary on different devices.
In my [first repository](https://github.com/Neonsy/React-First-Steps), I dove into the basics of React, exploring it's vanilla form.
Then, in the [second repository](https://github.com/Neonsy/NextJS-Server-Steps), I ventured into the world of Next.js, discovering it's powerful features.
I initially planned to work on my personal portfolio site, but I've decided to put that on hold and take time to gather more knowledge.
Now, it's time to tackle state management, and to put focus on it!
While `useState`, **`useContext`**, and **`useReducer`** are great tools in vanilla React, they can become cumbersome for more complex applications, or even just mid sized ones.
## **Goals**
This repository has two main objectives:
1. **Master State Management**: I aim to gain a deeper understanding of state management techniques.
2. **Working with Zustand and Jotai**: I'm excited to get practical experience with **[Zustand](https://github.com/pmndrs/zustand)** and **[Jotai](https://github.com/pmndrs/jotai)**.
Although Redux is a well-known option, it's verbosity makes it less appealing for smaller or even mid-sized projects.
Instead, I'll be using Zustand for it's simplicity and Jotai for it's atomic state management capabilities.
> [!NOTE]
> Yes, I know that next to Jotai is [Recoil](https://github.com/facebookexperimental/Recoil), developed by Facebook.
## **Approach**
I'm going to create a series of small projects utilizing these packages.
Unlike my earlier **`React First Steps`**, I'll incorporate TypeScript to enhance my coding skills.
Since this project focuses on React, I'll use Vite instead of Next.js, allowing me to experiment with [TanStack/ReactRouter](https://github.com/TanStack/router).
To simulate remote data interactions, I'll likely use JSON-Server and leverage [TanStack/ReactQuery](https://github.com/TanStack/query) for efficient data fetching.
## **Projects**
- [ShopCompare](https://github.com/Neonsy/React-Learning-State-Management/blob/Shop-Compare/Shop%20Compare/README.md)
- [TaskSnapSpace](https://github.com/Neonsy/React-Learning-State-Management/blob/Task-Snap-Space/Task%20Snap%20Space/README.md)