└── roadmap.md /roadmap.md: -------------------------------------------------------------------------------- 1 | # React Developer Roadmap (2024) 2 | 3 | A comprehensive React developer roadmap for 2024 covering every aspect of React and beyond. 4 | 5 | ## 1. React Fundamentals 6 | 7 | You should know and be comfortable with **all of the following:** 8 | 9 | - **JSX** 10 | - [How to write JSX](https://react.dev/learn/writing-markup-with-jsx) 11 | - [How to conditionally render elements](https://react.dev/learn/conditional-rendering) 12 | - [How to loop over items](https://react.dev/learn/rendering-lists) 13 | - [Adding Javascript in JSX](https://react.dev/learn/javascript-in-jsx-with-curly-braces) 14 | - **Components** 15 | - [How to create components](https://react.dev/learn/your-first-component) 16 | - Component lifecycle (mount, update, unmount) 17 | - The different types of components 18 | - UI components (buttons, inputs, cards, etc) 19 | - Feature components (`SignInForm`, `ProductsFilters`, etc.) 20 | - Page components (`SignInPage`, `ProductsPage`, etc.) 21 | - How to split larger components into smaller ones ([example 1](https://youtu.be/PisA-OPisUY), [example 2](https://youtube.com/shorts/OwXQd6YOySg)) 22 | - **Props** 23 | - [How to pass data through props](https://react.dev/learn/passing-props-to-a-component) 24 | - How components re-render when props change (component lifecycle) 25 | - [Prop drilling and why to avoid it](https://dev.to/codeofrelevancy/what-is-prop-drilling-in-react-3kol) 26 | - **Events** 27 | - [How to react to inputs](https://react.dev/learn/reacting-to-input-with-state) 28 | - [Understanding React events (buttons, inputs, forms)](https://www.knowledgehut.com/blog/web-development/handling-react-events-guide) 29 | 30 | ## 2. Working With Hooks 31 | 32 | You should know and have worked with **all of the following hooks:** 33 | 34 | - [**useState**](https://youtu.be/V9i3cGD-mts) 35 | - How to create and update state 36 | - How state updates trigger re-renders (component lifecycle) 37 | - [Setting state using updater functions](https://react.dev/reference/react/useState#updating-state-based-on-the-previous-state) 38 | - [**useEffect**](https://youtu.be/-4XpG5_Lj_o) 39 | - Understanding the `useEffect` lifecycle (mount, update, cleanup) 40 | - How to correctly set the dependency array 41 | - [When not to use `useEffect`](https://youtube.com/shorts/cKFqwy5PThk) 42 | - [**useCallback**](https://youtu.be/MxIPQZ64x0I) 43 | - When to use `useCallback` 44 | - [How `useCallback` prevents unnecessary re-renders](https://react.dev/reference/react/useCallback#skipping-re-rendering-of-components) 45 | - [How to correctly set the dependency array](https://react.dev/reference/react/useCallback#parameters) 46 | - [**useMemo**](https://youtu.be/vpE9I_eqHdM) 47 | - When to use `useMemo` 48 | - [How `useMemo` prevents unnecessary calculations](https://react.dev/reference/react/useMemo#skipping-expensive-recalculations) 49 | - [How `useMemo` prevents re-rendering of components](https://react.dev/reference/react/useMemo#skipping-re-rendering-of-components) 50 | - [How to correctly set the dependency array](https://react.dev/reference/react/useMemo#parameters) 51 | - [**useRef**](https://youtu.be/42BkpGe8oxg) 52 | - [How to manipulate the DOM with a ref](https://react.dev/reference/react/useRef#manipulating-the-dom-with-a-ref) 53 | - [Referencing a value with a ref](https://react.dev/reference/react/useRef#referencing-a-value-with-a-ref) 54 | - The difference between `useRef` and `useState` 55 | - [**useContext**](https://youtu.be/HYKDUF8X3qI) 56 | - [How to create a context through `createContext`](https://react.dev/reference/react/useContext#passing-data-deeply-into-the-tree) 57 | - How to create a provider component 58 | - How to access context through `useContext` 59 | - **Custom Hooks** 60 | - How to create a custom hook 61 | - How to re-use a custom hook 62 | 63 | ## 3. Implementing Features 64 | 65 | You should be able to implement **some of the following features:** 66 | 67 | - **Client-Side Routing** 68 | - [Using React Router](https://reactrouter.com/en/main) 69 | - [Bundle splitting and lazy-loading per route](https://reactrouter.com/en/main/route/lazy) 70 | - [Using `lazy` from React](https://react.dev/reference/react/lazy) 71 | - [**Data Fetching**](https://youtu.be/00lxm_doFYw) 72 | - Understanding how to fetch data with `useEffect` (loading, errors, caching, race conditions) 73 | - [Using Tanstack Query](https://tanstack.com/query/latest) 74 | - [**Forms**](https://www.w3schools.com/react/react_forms.asp) 75 | - How to validate user input in forms (emails, passwords, etc.) 76 | - How to send form data to server 77 | - How to handle file uploads 78 | - [Using React Hook Form](https://react-hook-form.com/) 79 | - [Using Formik](https://formik.org/docs/overview) 80 | - **State Management** 81 | - [Using Redux / Toolkit](https://redux-toolkit.js.org/) 82 | - [Using Zustand](https://github.com/pmndrs/zustand) 83 | - [Using Jotai](https://jotai.org/) 84 | - [Using Recoil](https://recoiljs.org/) 85 | - [Using MobX](https://mobx.js.org/README.html) 86 | - **Authentication** 87 | - How to handle user sign in (email, password, JWT) 88 | - How to handle access tokens and token refreshes 89 | - Social sign in (Google, Facebook, GitHub, etc.) 90 | - [Using Supabase](https://supabase.com/) 91 | - [Using Firebase](https://firebase.google.com/docs/auth) 92 | - [Using Clerk](https://clerk.com/) 93 | - [**Accessibility**](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_accessibility) 94 | - Understanding why accessibility is important 95 | - [Using semantic HTML](https://www.semrush.com/blog/semantic-html5-guide/) 96 | - How to implement keyboard navigation 97 | - How to add aria labels 98 | - [Using React Aria](https://react-spectrum.adobe.com/react-aria/) 99 | - **Testing** 100 | - [How to implement unit tests](https://www.freecodecamp.org/news/how-to-write-unit-tests-in-react/) 101 | - [Using React Testing Library](https://testing-library.com/docs/react-testing-library/intro/) 102 | - [Using Jest](https://jestjs.io/) 103 | - [How to implement e2e integration tests](https://youtu.be/6BkcHAEWeTU) 104 | - [Using Cypress](https://www.cypress.io/) 105 | - [Using Playwright](https://playwright.dev/) 106 | 107 | ## 4. Styling Solutions 108 | 109 | You should be familiar with **some of the following styling solutions**: 110 | 111 | - [**Tailwind**](https://tailwindcss.com/) 112 | - [**CSS Modules**](https://www.makeuseof.com/react-components-css-modules-style/) 113 | - [**Styled Components**](https://styled-components.com/) 114 | - [**Material UI**](https://mui.com/) 115 | - [**Chakra UI**](https://chakra-ui.com/) 116 | - [**Ant Design**](https://ant.design/docs/react/introduce) 117 | 118 | ## 5. React Frameworks 119 | 120 | You should have worked with **one of the following:** 121 | 122 | - [**Vite**](https://vitejs.dev/) 123 | - How to run a simple React application 124 | - [**Next.js**](https://nextjs.org/) 125 | - [Understanding file-based routing](https://nextjs.org/docs/app/building-your-application/routing) 126 | - [Understanding Next Auth](https://next-auth.js.org/) 127 | - [Understanding server components](https://nextjs.org/docs/app/building-your-application/rendering/server-components) 128 | - [Understanding server actions](https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations) 129 | - [**Remix**](https://remix.run/) 130 | 131 | ## 6. Beyond React 132 | 133 | You should have **all of the following qualities**: 134 | 135 | - **Teamplayer** 136 | - How to work within a team 137 | - How to perform code reviews 138 | - How to give and receive feedback 139 | - **Efficiency** 140 | - How to prioritise tasks 141 | - How to handle tech debt 142 | - How to meet deadlines and goals 143 | - **Continuous Learning** 144 | - How to continuously learn and grow 145 | - How to stay up to date with your skills 146 | - **Networking** 147 | - Going to meetups or events 148 | - Contributing to open source projects 149 | - Networking within the company you work in 150 | --------------------------------------------------------------------------------