# **Week 10 - 10.2 | React Part 3 (Context API, Rolling Up The State)**


## [Notes/Slides Link](https://petal-estimate-4e9.notion.site/React-Part-1-1177dfd1073580069172fc54e33929c0)


## Articles/Blogs Link:
-   [**Learn React – A Handbook for Beginners**](https://www.freecodecamp.org/news/react-for-beginners-handbook/#:~:text=React%20is%20a%20very%20popular,operation%20and%20should%20be%20minimized)
-   [**A Complete Beginner's Guide to React Router**](https://www.freecodecamp.org/news/a-complete-beginners-guide-to-react-router-include-router-hooks/)
-   [**A Better Way to Structure React Projects**](https://www.freecodecamp.org/news/a-better-way-to-structure-react-projects/)
-   [**React Best Practices – Tips for Writing Better React Code**](https://www.freecodecamp.org/news/best-practices-for-react/)
-   [**How State Works in React – Explained with Code Examples**](https://www.freecodecamp.org/news/what-is-state-in-react-explained-with-examples/)
-   [**What Is "Lifting State Up" in React?**](https://www.freecodecamp.org/news/what-is-lifting-state-up-in-react/)
-   [**Sharing State Between Components**](https://react.dev/learn/sharing-state-between-components)
-   [**React State is rolling back to previous value**](https://stackoverflow.com/questions/65088390/react-state-is-rolling-back-to-previous-value)
-   [**React re-renders guide: why components re-render**](https://adevnadia.medium.com/react-re-renders-guide-why-react-components-re-render-a4efab132c10)
-   [**What is prop drilling in React?**](https://dev.to/codeofrelevancy/what-is-prop-drilling-in-react-3kol)
-   [**Prop Drilling in React Explained with Example**](https://www.freecodecamp.org/news/prop-drilling-in-react-explained-with-examples/)
-   [**How to Avoid Prop Drilling in React**](https://www.freecodecamp.org/news/avoid-prop-drilling-in-react/)
-   [**React Context API: A deep dive with examples**](https://blog.logrocket.com/react-context-api-deep-dive-examples/)
-   [**React Context API Explained with Examples**](https://www.freecodecamp.org/news/react-context-api-explained-with-examples/)
-   [**How to Use the React Context API in Your Projects**](https://www.freecodecamp.org/news/context-api-in-react/)
-   [**7 Top React State Management Libraries**](https://trio.dev/7-top-react-state-management-libraries/)
-   [**Exploring Recoil: Simplifying State Management in React Projects**](https://medium.com/@vikasipar/exploring-recoil-simplifying-state-management-in-react-projects-b19adbe3445b)
-   [**Recoil is the Samurai Sword of React State Management**](https://dev.to/codeofrelevancy/recoil-is-the-samurai-sword-of-react-state-management-5h3c)
-   [**Recoil**](https://recoiljs.org/docs/basic-tutorial/intro/)
-   [**React State Management — using Zustand**](https://medium.com/globant/react-state-management-b0c81e0cbbf3)
-   [**How to use Zustand**](https://refine.dev/blog/zustand-react-state/#introduction)
-   [**How to Use Redux Toolkit to Manage State in Your React Application**](https://www.freecodecamp.org/news/use-redux-toolkit-to-manage-state-in-react-apps/)
-   [**Mastering State Management in React with Redux and Redux Toolkit**](https://medium.com/@aysunitai/mastering-state-management-in-react-with-redux-and-redux-toolkit-d8e6f09d5393)
-   [**How to Use Redux and Redux Toolkit**](https://www.freecodecamp.org/news/redux-and-redux-toolkit-for-beginners/)
-   [**Difference Between Redux and Redux Toolkit**](https://medium.com/@Has_San/difference-between-redux-and-redux-toolkit-7e1e5431546d#:~:text=Redux%20is%20a%20state%20management,in%20an%20application%20over%20time.)
-   [**Recoil vs. Zustand vs. Redux**](https://medium.com/@rashmipatil24/recoil-vs-zustand-vs-redux-ddd4f4f20a92)
-   [**Comparing React State Management Libraries: Redux, Zustand, Recoil, and MobX**](https://javascript.plainenglish.io/comparing-react-state-management-libraries-redux-zustand-recoil-and-mobx-945402dc0cb)
-   [**How to Build Your Own React Hooks: A Step-by-Step Guide**](https://www.freecodecamp.org/news/how-to-create-react-hooks/)
-   [**How to create your own custom React Hooks**](https://blog.logrocket.com/create-your-own-custom-react-hooks/)
-   [**React Custom Hooks With Real-Life Examples**](https://betterprogramming.pub/react-custom-hooks-with-real-life-examples-c259139c3d71)
-   [**A Guide to React Custom Hooks**](https://dev.to/rasaf_ibrahim/a-guide-to-react-custom-hooks-2b4h)
-   [**15 Useful React Custom Hooks That You Can Use In Any Project**](https://dev.to/arafat4693/15-useful-react-custom-hooks-that-you-can-use-in-any-project-2ll8)
-   [**Passing Data from Child to Parent Components in React**](https://medium.com/@ozhanli/passing-data-from-child-to-parent-components-in-react-e347ea60b1bb)
-   [**Passing Data from a Child Component to Parent**](https://www.shecodes.io/athena/1930-passing-data-from-a-child-component-to-parent)
-   [**How to Pass Data and Events Between Components in React**](https://www.freecodecamp.org/news/pass-data-between-components-in-react/)
-   [**How to Work with useMemo in React – with Code Examples**](https://www.freecodecamp.org/news/how-to-work-with-usememo-in-react/)


## Official Website Link:
-   [**React**](https://react.dev/)
-   [**Vite**](https://vite.dev/)
-   [**React Router**](https://reactrouter.com/en/main)
-   [**Recoil - State Management Library**](https://recoiljs.org/)
-   [**Zustand - State Management Library**](https://zustand-demo.pmnd.rs/)
-   [**Zustand NPM - State Management Library**](https://www.npmjs.com/package/zustand)
-   [**Redux**](https://redux.js.org/)
-   [**Redux Toolkit**](https://redux-toolkit.js.org/)
-   [**Tailwind CSS**](https://tailwindcss.com/)
-   [**React - NPM**](https://react.dev/)
-   [**Node.js**](https://nodejs.org/en)
-   [**Express**](https://expressjs.com/)
-   [**Express - NPM**](https://www.npmjs.com/package/express)
-   [**Express Middleware**](https://expressjs.com/en/guide/using-middleware.html)
-   [**Express Routing**](https://expressjs.com/en/guide/routing.html)
-   [**Express Error Handling**](https://expressjs.com/en/guide/error-handling.html)
-   [**NPM**](https://www.npmjs.com/)
-   [**JWT**](https://jwt.io/)
-   [**JWT - NPM**](https://www.npmjs.com/package/jsonwebtoken)
-   [**MongoDB**](https://www.mongodb.com/)
-   [**MongoDB - NPM**](https://www.npmjs.com/package/mongodb)
-   [**MongoDB Cloud | MongoDB**](https://www.mongodb.com/products/platform/cloud)
-   [**Mongoose**](https://mongoosejs.com/docs/)
-   [**Mongoose - NPM**](https://www.npmjs.com/package/mongoose?azure-portal=true)
-   [**Bcrypt**](https://www.npmjs.com/package/bcrypt)
-   [**Bcrypt - NPM**](https://www.npmjs.com/package/bcrypt)
-   [**Zod**](https://zod.dev/)
-   [**Zod - NPM**](https://www.npmjs.com/package/zod)
-   [**Dotenv**](https://www.dotenv.org/docs/)
-   [**Dotenv - NPM**](https://www.npmjs.com/package/dotenv)
-   [**EJS**](https://ejs.co/)
-   [**EJS - NPM**](https://www.npmjs.com/package/ejs)
