React roadmap ( with explanations and resources, all in one place)
Tags: webdev, react, learning, programming
Published: 2023-10-27 05:01:36


Hello everyone! I made a *roadmap* with concepts I wish I knew earlier when I started to learn React, the resources I found were either too simple or too complicated, both leading to problems further down the line, I tried to make it so this resource is valuable for everyone. Throughout my time as a React developer, I've delved into its fascinating aspects as well as its challenges. I hope this post provides value to you!

&#x200B;

**Why?**

For those who are just starting out or looking to *enhance* their React skills, I hope you find this resource helpful. *For a long time, I've wanted to create something that brings together all the missing pieces of knowledge I needed.* Here is the visual version of the React [roadmap](https://navigolearn.com/roadmap/react-32), it has the complete documentation and is nicer to navigate.

&#x200B;

​ **If you want to help**

For those who are already well-versed in React, this resource goes beyond simple React some of these concepts may prove to be useful even to you. I'd greatly appreciate your feedback on what I should add or remove. *I want all of us to contribute to this roadmap in order to make the best resource possible for others to learn.* The resource I pinned above includes a discord where we can talk or you can directly create pull requests on [GitHub](https://github.com/NavigoLearn/RoadmapsMarkdown/tree/master/web/frontend/React/Chapters) on the resource.

This is the knowledge I built over the years, without further ado **let's dive in**.

&#x200B;

1.**Why react?**

* Mature simple-to-grasp dev workflow
* Ultimate flexibility and compatibility
* Component based architecture
* JSX - easier DOM manipulation

2.**Set up**

* [ES modules explained](https://www.youtube.com/watch?v=qgRUr-YUk1Q)
* [Module bundlers explained - Fireship](https://www.youtube.com/watch?v=5IG4UmULyoA)
* *Create React App*
   * [Create react app](https://www.youtube.com/watch?v=HWpjpq2ux04)
* *Vite*
   * [Vite in 100 seconds](https://www.youtube.com/watch?v=KCrXgy8qtjM&t=18s)
   * [Vite + React Setup - Video](https://www.youtube.com/watch?v=agpZsCUllqc)
   * [Vite + React Setup - Article](https://vitejs.dev/guide/)
   * [Use Vite](https://www.youtube.com/watch?v=9OmnmouE6tw)
* *Parcel*
   * [Parcel Guide](https://www.youtube.com/watch?v=U7CQE1TFMkg)
* *Razzle*
   * [Razzle Guide](https://www.youtube.com/watch?v=u1J9De4bHmU)
* *Snowpack*
   * [Snowpack Setup](https://www.snowpack.dev/tutorials/quick-start)
* *Manual Setup (Webpack and Babel)*
   * [Create app manually (much to learn)](https://www.youtube.com/watch?v=h3LpsM42s5o)

3.**ReactDOM**

* [What is the DOM?](https://www.youtube.com/watch?v=KShnPYN-voI)
* *Virtual DOM*
   * [Simple Virtual DOM explanation](https://www.youtube.com/watch?v=RquK3TImY9U)
   * [Why is it import and better](https://www.geeksforgeeks.org/difference-between-virtual-dom-and-real-dom/)

4.**JSX (Important)**

* [What is JSX?](https://www.youtube.com/watch?v=9GtB5G2xGTY&t=257s)
* *JSX, syntax extension for JavaScript*
   * [Examples of usage](https://en.wikipedia.org/wiki/JSX_(JavaScript))
   * [Conditional rendering](https://www.youtube.com/watch?v=Rr5AqASIyxw)
   * [Cheat sheet](https://www.codecademy.com/learn/bwa-intro-to-react/modules/react-101-jsx-u/cheatsheet)
* *JSX, Syntactic Sugar for JS*
   * [JS Syntactic Sugar](https://sophiali.dev/syntactic-sugar-examples-javascript)
   * [JSX is Syntactic Sugar for JS](https://fettblog.eu/jsx-syntactic-sugar/)
* *JSX attributes (brief explanation)*
   * [Brief explanation](https://www.youtube.com/watch?v=BvBf8GjsYdw)

5.**Style (choose one after checking each one)**

* *Tailwind*
   * [Installer Video](https://www.youtube.com/watch?v=1WdL1TLfkYo)
   * [Installer text](https://tailwindcss.com/docs/installation)
   * [Full tailwind course youtube](https://www.youtube.com/watch?v=bxmDnn7lrnk&list=PL4cUxeGkcC9gpXORlEHjc5bgnIi5HEGhw)
* *Bootstrap*
   * [Installation and a little show off video](https://www.youtube.com/watch?v=xdXd8BJwJ-U)
   * [Use installation with npm document](https://getbootstrap.com/docs/3.4/getting-started/)
   * [Bootstrap course youtube](https://www.youtube.com/watch?v=-qfEOE4vtxE)
* *Material UI*
   * [Installation and use example video](https://www.youtube.com/watch?v=LD4-UTFXtwA)
   * [Installer text](https://mui.com/material-ui/getting-started/installation/)
   * [Material UI course youtube](https://www.youtube.com/watch?v=BHEPVdfBAqE&list=PLC3y8-rFHvwh-K9mDlrrcDywl7CeVL2rO&index=1)
* *Ant design*
   * [Installer Video and examples video](https://www.youtube.com/watch?v=m96DTtTpGpA)
   * [Installer text](https://ant.design/docs/react/introduce)
   * [Ant design course](https://www.youtube.com/watch?v=03rzGKtEZmw&list=PL-JTnqZPF5z2qTGwNkYln3m0pA0qfgHFR&index=1)

6.**React Components (Important)**

* *Component classes vs Functional components*
   * [Brief state understanding](https://www.youtube.com/watch?v=g8-Xrpl_Uhk)
   * [Class Components vs Functional Components](https://www.youtube.com/watch?v=yc6elaGOoGQ)
* *Components explained*
   * [Components explained video](https://www.youtube.com/watch?v=JtB_tippTUQ&t=488s)
* *Events*
   * [Events](https://www.youtube.com/watch?v=0XSDAup85SA)
* *Components lifecycle*
   * [Lifecycles explained](https://www.youtube.com/watch?v=qnN_FuFNq2g)
* *Components props*
   * [Props simple explanation](https://www.youtube.com/watch?v=kHJSNFU7H4U)
* [Clean an reusable components with props](https://www.youtube.com/watch?v=Ib-80HIjuZ4&t=639s)

7.**Hooks**

* [Preview](https://www.youtube.com/watch?v=TNhaISOUy6Q)
* *useState*
   * [useState explained](https://www.youtube.com/watch?v=O6P86uwfdR0)
   * [More in depth](https://blog.logrocket.com/guide-usestate-react/)
* *useEffect*
   * [useEffect explained](https://www.youtube.com/watch?v=0ZJgIjIuY7U)
   * [More in depth](https://blog.logrocket.com/useeffect-hook-complete-guide/)
* *Other hooks*
   * [useRef](https://www.youtube.com/watch?v=t2ypzz6gJm0)
   * [useContext (simple form)](https://www.youtube.com/watch?v=HYKDUF8X3qI)
   * [useMemo](https://www.youtube.com/watch?v=vpE9I_eqHdM)
   * [useCallback](https://www.youtube.com/watch?v=MxIPQZ64x0I)
* *Write custom hooks*
   * [Simple explanation](https://www.youtube.com/watch?v=Jl4q2cccwf0)
   * [In depth logical example](https://blog.logrocket.com/create-your-own-custom-react-hooks/)

8.**Router**

* [React router course](https://www.youtube.com/watch?v=OMQ2QARHPo0&list=PL4cUxeGkcC9iVKmtNuCeIswnQ97in2GGf&index=1)
* *Are there more?*
* While there are several libraries for routing in React, React Router serves as the foundational library for many of them. When working with different frameworks, routing mechanisms may vary, with some offering server-side routing, client-side routing, or a combination of both. Examples of such frameworks include Next.js, Astro, Remix, and others.

9.**Advanced Props and State management**

* *Prop drilling*
   * [Prop Drilling](https://www.youtube.com/watch?v=QLO64jkGkRg)
* *Context API (advanced)*
   * [Context Api](https://www.youtube.com/watch?v=t9WmZFnE6Hg)
   * [Context Hack](https://www.youtube.com/watch?v=I7dwJxGuGYQ)
* *Redux*
   * [Redux course](https://www.youtube.com/watch?v=zrs7u6bdbUw)
* *Zustand*
   * [Zustand vs Redux](https://www.youtube.com/watch?v=DK-S4ZcmDcE)
   * [Zustand course](https://www.youtube.com/watch?v=fZPgBnL2x-Q)
   * [Usage example](https://refine.dev/blog/zustand-react-state/#build-a-to-do-app-using-zustand)
* *Nanostores*
   * [Nanostores explanation](https://github.com/nanostores/nanostores)
   * [Video explanation](https://www.youtube.com/watch?v=gVTAZOryDAo)

10.**Pure functions**

* [Learn pure functions](https://www.youtube.com/watch?v=fYbhD_KMCOg)
* [Pure functions article](https://www.geeksforgeeks.org/understanding-the-difference-between-pure-and-impure-functions-in-javascript/)

11.**React programming patterns**

* [React programming patterns course](https://www.youtube.com/watch?v=eyh04fR9z2g&list=PLgeETUaEEds5HE2uGWezJxYeZwpBonHr-&index=6)

12.**Api usage (choose one)**

* *Fetch API*
   * [Fetch API](https://www.youtube.com/watch?v=cuEtnrL9-H0)
   * [Fetch API article](https://www.geeksforgeeks.org/how-to-use-the-javascript-fetch-api-to-get-data/)
* *Axios*
   * [Axios](https://www.youtube.com/watch?v=qM4G1Ai2ZpE)
   * [Axios & React examples](https://www.digitalocean.com/community/tutorials/react-axios-react)
* *Extras*
   * [Asynchronous javascript](https://www.youtube.com/watch?v=8aGhZQkoFbQ)
   * [Stateful vs Stateless components](https://medium.com/@darshana_18428/understanding-stateful-and-stateless-components-in-reactjs-8f7cee2bf43e)

13.**React frameworks**

* While I can't delve into the details of each framework, as they each deserve a roadmap of their own, it's worth noting that frameworks represent the 'new' way of building React applications. They offer additional utilities and many out-of-the-box features that were not readily available before. I'll briefly highlight when you should consider using each framework and their notable features. When building your next React app, you can evaluate which one best suits your project and make an informed choice.
* Next.js
* Astro
* Query
* Remix
* Gatsby
* etc

14.**React libraries (not mentioned yet)**

* *Storybook*
   * [Storybook why and how](https://www.youtube.com/watch?v=BySFuXgG-ow&list=PLC3y8-rFHvwhC-j3x3t9la8-GQJGViDQk)
* *Chakra UI*
   * [Chakra UI Course](https://www.youtube.com/watch?v=iXsM6NkEmFc&list=PL4cUxeGkcC9hcnIeryurNMMcGBHp7AYlP)
   * [Chakra UI compared to other libraries](https://chakra-ui.com/getting-started/comparison)
* *Specific picks and experimental*
* *Formik*
   * [Why should you use Formik](https://blog.openreplay.com/doing-forms--react-hook-form-vs-formik/)
   * [Formik course](https://www.youtube.com/watch?v=a94FOvaBomQ&list=PLC3y8-rFHvwiPmFbtzEWjESkqBVDbdgGu)
* *Yup*
   * [Yup create validation](https://medium.com/@olivier.trinh/how-to-create-form-validation-with-yup-library-in-reactjs-4846f045957a)
* *React helmet*
   * [React Helmet usage explained and examples](https://www.scaler.com/topics/react/react-helmet/)

15.**Performance**

* *Use production builds*
   * [Production build explained](https://www.youtube.com/watch?v=BbncM2nzCso)
   * [Production build vs development build](https://www.linkedin.com/pulse/webpack-production-build-vs-development-prasenjit-sutradhar/)
* *Lazy loading vs eager loading*
   * [Lazy loading vs eager loading](https://www.imperva.com/learn/performance/lazy-loading/)
   * [React router lazy loading](https://www.youtube.com/watch?v=MJn4W7pR6RU)
   * [Lazy load for images & explanation](https://www.youtube.com/watch?v=hJ7Rg1821Q0)
* *Code splitting*
   * [Code splitting explained & usage](https://www.youtube.com/watch?v=JU6sl_yyZqs)
   * [Advanced code splitting](https://edvins.io/react-code-splitting-techniques)
* *React profiler*
   * [React profiler tutorial](https://www.youtube.com/watch?v=Qwb-Za6cBws)
   * [Full concept](https://legacy.reactjs.org/blog/2018/09/10/introducing-the-react-profiler.html)
* *Tree shaking*
   * [Bundle size problem](https://www.youtube.com/watch?v=kwUfeWe7DCw)
   * [Tree shaking on webpack](https://www.telerik.com/blogs/tree-shaking-basics-for-react-applications)
* *Virtualisation for long lists*
   * [Virtualisation explained](https://web.dev/articles/virtualize-long-lists-react-window)
   * [Virtualisation usage video](https://www.youtube.com/watch?v=UrgfPjX97Yg)

16.**Testing**

* [How to write clean code](https://www.youtube.com/watch?v=MSq_DCRxOxw)
* [What is testing?](https://www.guru99.com/application-testing.html)
* Testing tools
   * *Jest*
      * [Presentation](https://www.youtube.com/watch?v=FgnxcUQ5vho)
      * [Full course](https://www.youtube.com/watch?v=7r4xVDI2vho)
   * *Cypress*
      * [Cypress in 100 seconds](https://www.youtube.com/watch?v=BQqzfHQkREo)
      * [Cypress course](https://www.youtube.com/watch?v=u8vMu7viCm8)
   * Mocha
      * [Mocha simple course](https://www.youtube.com/watch?v=CoQNtq5z7Bo&list=PLgbtO1Bcz4C-vU0JLfDBsZGbSUdNX4mQ8&index=6)

17.**Advanced React patterns**

* *HOC*
   * [HOC explained text](https://www.freecodecamp.org/news/higher-order-components-in-react/)
   * [Simple example](https://www.youtube.com/watch?v=J5P0q7EROfw)
   * [More complex example](https://www.youtube.com/watch?v=eyh04fR9z2g)
* *Render props*
   * [Render Props and HOC](https://www.youtube.com/watch?v=axL59Dc5rZA)
   * [Render props example](https://www.youtube.com/watch?v=ix4z_jUrQpQ)
* *Container pattern*
   * [What is container pattern?](https://medium.com/@vitorbritto/react-design-patterns-the-container-presentational-pattern-775b91aa0c49)
   * [Container pattern usage](https://blog.openreplay.com/understanding-the-container-component-pattern-with-react-hooks/)
* *State Initializer Pattern*
   * [Explanation & usage](https://www.dhiwise.com/post/for-better-performance-state-initializer-pattern-in-react)
* *React reconciliation*
   * [React reconciliation](https://www.educative.io/answers/what-is-the-concept-of-reconciliation-in-react)
* *Debouncing and Throttling*
   * [Debouncing and Throttling in 16 mins](https://www.youtube.com/watch?v=cjIswDCKgu0)

&#x200B;

*Final words,*

With this, I conclude my React roadmap, along with the knowledge I've built over the years about this amazing framework. Feel free to come back to it whenever you want to level up your React game. With React, HTML, CSS, JavaScript, and knowing a bunch of the libraries mentioned in this roadmap, you can build anything; there is no limit."

* What's next?
   * Get a job
      * We both know a good step forward would be working alongside talented people and learning from them day in and day out. You can build a portfolio of some personal projects, create a resume, and try to apply to jobs, all while continuing to expand your knowledge of React.
   * Expend knowledge
      * React here, React there, all I do is talk about React, but the truth is, whether you like it or not, you will have to expand your knowledge towards new technologies. That's what programming is all about. The more you know, the better you are. Maybe try these roadmaps next.And remember"Experience is the name everyone gives to their mistakes." – Oscar Wilde