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!
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, it has the complete documentation and is nicer to navigate.
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 on the resource.
This is the knowledge I built over the years, without further ado let's dive in.
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
- Module bundlers explained - Fireship
- Create React App
- Vite
- Parcel
- Razzle
- Snowpack
- Manual Setup (Webpack and Babel)
3.ReactDOM
4.JSX (Important)
- What is JSX?
- JSX, syntax extension for JavaScript
- JSX, Syntactic Sugar for JS
- JSX attributes (brief explanation)
5.Style (choose one after checking each one)
- Tailwind
- Bootstrap
- Material UI
- Ant design
6.React Components (Important)
- Component classes vs Functional components
- Components explained
- Events
- Components lifecycle
- Components props
- Clean an reusable components with props
7.Hooks
- Preview
- useState
- useEffect
- Other hooks
- Write custom hooks
8.Router
- React router course
- 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
- Context API (advanced)
- Redux
- Zustand
- Nanostores
10.Pure functions
11.React programming patterns
12.Api usage (choose one)
- Fetch API
- Axios
- Extras
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
- Chakra UI
- Specific picks and experimental
- Formik
- Yup
- React helmet
15.Performance
- Use production builds
- Lazy loading vs eager loading
- Code splitting
- React profiler
- Tree shaking
- Virtualisation for long lists
16.Testing
- How to write clean code
- What is testing?
- Testing tools
- Jest
- Cypress
- Mocha
17.Advanced React patterns
- HOC
- Render props
- Container pattern
- State Initializer Pattern
- React reconciliation
- Debouncing and Throttling
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
- Get a job
Top comments (6)
what a nice post!
Thank you!
Thanks for sharing, I was a little lost on how to study react, this post gave me a great foundation, thank you very much 🦤.
You are welcome, feel free to ask any questions
For tech enthusiasts in Bengaluru, this data science course in Bengaluru is a must-try. It equips you with the skills and knowledge needed to thrive in the competitive tech industry!
The Best Detailed Roadmap!! 👌👌