[
  {
    "path": "README.md",
    "content": "# React Developer Roadmap (2024)\n\nA thorough React developer roadmap for 2024 that addresses all aspects of React and beyond.\n\n<details>\n\n<summary>0. Before you start React</summary>\n\nYou should know and be comfortable with **all of the following:**\n\n-   [**Basic HTML**](https://www.w3schools.com/html/default.asp)\n\n    -   HTML Elements, Attributes, Headings, Paragraphs, Colors & Styles\n    -   HTML Links, Images, Tables, Lists, Block & Inline, Div, Classes, Id\n    -   HTML Forms\n    -   HTML Layout, Responsiveness & Semantic\n\n-   [**Basic CSS**](https://www.w3schools.com/css/default.asp)\n\n    -   CSS Basics - Syntax, Selectors, Colors, Backgrounds, Borders, Margin, Padding, Height/Width, Box Model, Outline, Text, Fonts, Links etc.\n    -   CSS More - Lists, Tables, Display, Position, z-index, Overflow, Float, Inline Block, Align, Combinators, Pseudo-classes & elements, Opacity etc.\n    -   CSS Forms & Layouts\n    -   CSS Flexbox\n    -   CSS Grid\n    -   Advanced CSS - CSS Units, Shadows, Gradients, Transitions, Animations, Specificity etc.\n\n-   [**Basic Tailwind CSS**](https://www.youtube.com/watch?v=X7XbjwD6fVY&list=PLHiZ4m8vCp9P23SqlHL0QAqiwS_oCofV2)\n\n    -   Tailwind Utilities\n    -   Responsive Variants\n    -   Hover, focus and other states\n    -   Dark Mode variant\n    -   Tailwind Directives\n    -   Tailwind Configurations\n    -   Theme Configurations\n    -   [Tailwind cn() utility](https://www.youtube.com/watch?v=y7DrXkGj7AU)\n\n-   **Document Object Model (DOM)**\n\n    -   [DOM Basics - Basics, Method, Document, Elements, Forms, CSS, Events, Navigation, Nodes and Collections](https://www.youtube.com/watch?v=mPTkKnL2aNA&list=PLHiZ4m8vCp9OkrURufHpGUUTBjJhO9Ghy)\n    -   [DOM Advanced](https://www.youtube.com/watch?v=XY96d0vEdFk&list=PLHiZ4m8vCp9MJDxMOzhYVuTrO1b5n-Tq_)\n\n-   [**Basic JavaScript**](https://www.youtube.com/watch?v=rePN-VFo1Eo&list=PLHiZ4m8vCp9OkrURufHpGUUTBjJhO9Ghy)\n\n    -   JS Basics - Statements, Expressions, Syntax, Variables, Operators, Data Types, Functions, Objects, Arrays, Events, Array and String Methods, Object Methods, Date, Conditionals, Error Handling, JavaScript OOP - classes and inheritance and Debugging\n    -   JS Web APIs - Forms, History, Geolocation, Storage, Worker and Fetch API\n    -   JS JSON\n\n-   [**JavaScript Advanced**](https://www.youtube.com/watch?v=KuhLGuNxF8U&list=PLHiZ4m8vCp9Nflbo9a0pZuLscG_Xc7DKq)\n\n    -   Solid JS Concepts - Scope, Hosting, Execution Context, Closures, Prototype, Recursion, Primitive vs Reference Data Types, Currying, Intersection Observer, Memoization, Event Propagation, Debounce etc.\n    -   [Asynchronous JavaScript](https://www.youtube.com/watch?v=IUBd76UQb34) - Callbacks, Promises and async-await\n\n-   [**Modern JavaScript**](https://www.youtube.com/watch?v=PWXkYBmlbB4&list=PLHiZ4m8vCp9MFjMRp9EEHWKArbi0wdgXG)\n\n    -   Different ES6+ JS Syntaxes and concepts eg. Arrow function, Truthy/Falsy values, Ternary Operator, Different Array methods like find, filter, map, reduce, slice, splice, push, pop, concat, different looping strategies, Spread & Rest Operator, Array and Object Destructuring, Imports/Exports syntax, Template Literals, Sorting etc.\n\n-   [**Git/GitHub**](https://www.youtube.com/watch?v=PWXkYBmlbB4&list=PLHiZ4m8vCp9MFjMRp9EEHWKArbi0wdgXG)\n\n    -   [Basics of Git](https://www.youtube.com/watch?v=oe21Nlq8GS4)\n    -   [Important Git Commands](https://learnwithsumit.com/rnext/courses/rnext/git-github-refresher)\n\n</details>\n\n<details>\n<summary>1. React Fundamentals</summary>\n\nYou should know and be comfortable with **all of the following:**\n\n-   **Getting Started with React**\n    -   Introduction to React - Why React - Comparison with Vanilla JS\n    -   React Installation & Editor Setup with Vite\n    -   How React works - Virtual DOM\n    -   Basics of React Components\n    -   Basics of JSX: React's Markup\n    -   JavaScript in JSX\n    -   Passing Props to Components\n    -   Conditional Rendering\n    -   Rendering Lists\n    -   Pure Components\n    -   How to split larger components into smaller ones\n-   **Adding Interactivity**\n\n    -   Responding to Events - Event Handlers\n    -   Understanding States - React Component's Memory - useState\n    -   How State works in React\n    -   How Rendering works in React\n    -   Updating complex states immutably in React\n\n-   **React State Management Deep Dive**\n\n    -   Declarative vs Imperative UI\n    -   Thinking UI Declaratively\n    -   Finding & Structuring React States\n    -   Connecting Event Handlers to React\n    -   Sharing State between components\n    -   Lifting State up\n    -   Extracting State Logic into Reducers\n    -   useReducer Hook\n    -   How to use Immer with React for concised immutable State Update\n    -   Passing Data Deeply inside React Components\n    -   Avoiding Prop Drilling - Context API & useContext Hook\n    -   Combine context and reducer to write scalable code\n\n</details>\n\n<details>\n<summary>2. Advanced React</summary>\n\n-   Referencing values with Refs - useRef hook\n-   Manipulating the DOM with Refs\n-   Synchronizing with Effects - useEffect hook\n-   Separating events from Effects\n-   Removing Effect Dependencies\n-   Performance optimization with useCallback and useMemo hook\n-   Reusing logic with Custom Hooks\n-   Calling APIs from Back-end with React\n\n</details>\n\n<details>\n<summary>3. Advanced State Management</summary>\n\n-   [Using Redux / Toolkit](https://learnwithsumit.com/think-in-a-redux-way)\n-   [Using Zustand](https://github.com/pmndrs/zustand)\n-   [Using Jotai](https://jotai.org/)\n-   [Using Recoil](https://recoiljs.org/)\n-   [Using MobX](https://mobx.js.org/README.html)\n\n</details>\n\n<details>\n<summary>4. Styling Solutions</summary>\n\n-   [**Tailwind**](https://tailwindcss.com/)\n-   [**CSS Modules**](https://www.makeuseof.com/react-components-css-modules-style/)\n-   [**Styled Components**](https://styled-components.com/)\n-   React UI Component Library - [Shadcn](https://ui.shadcn.com/)\n-   [React UI Component Library - Keep React](https://youtu.be/mVXNUMBtGEA)\n-   [**Material UI**](https://mui.com/)\n-   [**Chakra UI**](https://chakra-ui.com/)\n-   [**Ant Design**](https://ant.design/docs/react/introduce)\n\n</details>\n\n<details>\n<summary>5. React Ecosystem & Use Cases</summary>\n\n-   [React Router DOM](https://youtu.be/34tjWL9wi4g)\n-   API Request with Axios in React\n-   React Suspense & Error Boundaries\n-   React Lazy Load\n-   React Infinite Scroll\n-   Uncommon React Hooks - useDebugValue, useDeferredValue, useId, useImperativeHandle, useInsertionEffect, useLayoutEffect and useTransition\n-   **React Authentication**\n\n    -   How to handle user sign in (email, password, JWT)\n    -   How to handle access tokens and token refreshes\n    -   Social sign in (Google, Facebook, GitHub, etc.)\n    -   [Using Supabase](https://supabase.com/)\n    -   [Using Firebase](https://firebase.google.com/docs/auth)\n    -   [Using Clerk](https://clerk.com/)\n\n-   **Form Handling in React**\n\n    -   How to validate user input in forms (emails, passwords, etc.)\n    -   How to send form data to server\n    -   How to handle file uploads\n    -   [Using React Hook Form](https://react-hook-form.com/)\n    -   [Using Formik](https://formik.org/docs/overview)\n\n-   [**Accessibility**](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_accessibility)\n    -   Understanding why accessibility is important\n    -   [Using semantic HTML](https://www.semrush.com/blog/semantic-html5-guide/)\n    -   How to implement keyboard navigation\n    -   How to add aria labels\n    -   [Using React Aria](https://react-spectrum.adobe.com/react-aria/)\n-   **Testing**\n    -   [How to implement unit tests](https://www.freecodecamp.org/news/how-to-write-unit-tests-in-react/)\n        -   [Using React Testing Library](https://testing-library.com/docs/react-testing-library/intro/)\n        -   [Using Jest](https://jestjs.io/)\n    -   [How to implement e2e integration tests](https://youtu.be/6BkcHAEWeTU)\n        -   [Using Cypress](https://www.cypress.io/)\n        -   [Using Playwright](https://playwright.dev/)\n\n</details>\n\n<details>\n<summary>6. React Frameworks</summary>\n\nYou should have worked with **one of the following:**\n\n-   [**Vite**](https://vitejs.dev/)\n    -   How to run a simple React application\n-   [**Next.js**](https://nextjs.org/)\n    -   [Understanding file-based routing](https://nextjs.org/docs/app/building-your-application/routing)\n    -   [Understanding Next Auth](https://next-auth.js.org/)\n    -   [Understanding server components](https://nextjs.org/docs/app/building-your-application/rendering/server-components)\n    -   [Understanding server actions](https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations)\n-   [**Remix**](https://remix.run/)\n\n</details>\n\n<details>\n<summary>7. Beyond React</summary>\n\n-   **Team player**\n    -   How to work within a team\n    -   How to perform code reviews\n    -   How to give and receive feedback\n-   **Efficiency**\n    -   How to prioritise tasks\n    -   How to handle tech debt\n    -   How to meet deadlines and goals\n-   **Continuous Learning**\n    -   How to continuously learn and grow\n    -   How to stay up to date with your skills\n-   **Networking & Communication** - Going to meetups or events - Contributing to open source projects - Networking within the company you work in\n</details>\n\n## Resources from Learn with Sumit\n\n> Some free and paid resources from Learn with Sumit that might help you achieve your goal to become a React Developer\n\n-   [Think in a React way: Free React Starter Course](https://www.youtube.com/watch?v=5Xy-t8k_M4A&list=PLHiZ4m8vCp9M6HVQv7a36cp8LKzyHIePr)\n-   [JavaScript Beginners Course](https://www.youtube.com/watch?v=rePN-VFo1Eo&list=PLHiZ4m8vCp9OkrURufHpGUUTBjJhO9Ghy)\n-   [DOM Course](https://www.youtube.com/watch?v=XY96d0vEdFk&list=PLHiZ4m8vCp9MJDxMOzhYVuTrO1b5n-Tq_)\n-   [Think in a JavaScript way - Advanced Conceptual JavaScript Course](https://www.youtube.com/watch?v=KuhLGuNxF8U&list=PLHiZ4m8vCp9Nflbo9a0pZuLscG_Xc7DKq)\n-   [Modern JavaScript Course](https://www.youtube.com/watch?v=PWXkYBmlbB4&list=PLHiZ4m8vCp9MFjMRp9EEHWKArbi0wdgXG)\n-   [CSS Grid](https://www.youtube.com/watch?v=kEFIdXzQXYw)\n-   [CSS Flexbox](https://www.youtube.com/watch?v=kRS5ficucNM)\n-   [Tailwind CSS Course](https://www.youtube.com/watch?v=X7XbjwD6fVY&list=PLHiZ4m8vCp9P23SqlHL0QAqiwS_oCofV2)\n-   [Reactive Accelerator: React-Next.js Course](https://learnwithsumit.com/rnext)\n-   [Think in a Redux way - Redux paid course](https://learnwithsumit.com/think-in-a-redux-way)\n"
  }
]