# **Week 10 - 10.1 | React Part 2 (SPAs, Routing)**


## [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 complete guide to routing in React**](https://hygraph.com/blog/routing-in-react)
-   [**How to Use Nested Routes in React Router**](https://dev.to/tywenk/how-to-use-nested-routes-in-react-router-6-4jhd)
-   [**React Router 6: Nested Routes**](https://www.robinwieruch.de/react-router-nested-routes/)
-   [**How to Use React Router to Build Single Page Applications**](https://www.freecodecamp.org/news/use-react-router-to-build-single-page-applications/)
-   [**How to create a multilevel dropdown menu in React**](https://blog.logrocket.com/how-create-multilevel-dropdown-menu-react/)
-   [**Why is React Js called as Single Page Application**](https://stackoverflow.com/questions/62529631/why-is-react-js-called-as-single-page-application)
-   [**How To Create A Layout Component: React**](https://chrisdevcode.hashnode.dev/how-to-create-a-layout-component-react)
-   [**React Design Patterns: Layout Components Pattern**](https://medium.com/@vitorbritto/react-design-patterns-layout-components-pattern-455c98e0bf92)
-   [**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/)
-   [**The Best File Structure for Your React Components**](https://www.freecodecamp.org/news/best-file-structure-for-react-components/)
-   [**How to Use React Hooks**](https://www.freecodecamp.org/news/full-guide-to-react-hooks/)
-   [**Understanding the React useRef Hook**](https://refine.dev/blog/react-useref-hook-and-ref/#using-refs-to-access-dom-elements-in-react)
-   [**React useRef Hook**](https://medium.com/trabe/react-useref-hook-b6c9d39e2022)
-   [**useRef**](https://react.dev/reference/react/useRef)
-   [**React State vs Refs – Differences and Use Cases**](https://www.freecodecamp.org/news/react-state-vs-ref-differences-and-use-cases/)
-   [**React Hooks Cheat Sheet: The 7 Hooks You Need To Know**](https://www.freecodecamp.org/news/react-hooks-cheatsheet/)


## Official Website Link:
-   [**React**](https://react.dev/)
-   [**Vite**](https://vite.dev/)
-   [**React Router**](https://reactrouter.com/en/main)
-   [**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)
