DEV Community

arking115
arking115

Posted on

React roadmap ( with explanations and resources, all in one place)

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

3.ReactDOM

4.JSX (Important)

5.Style (choose one after checking each one)

6.React Components (Important)

7.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

10.Pure functions

11.React programming patterns

12.Api usage (choose one)

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)

15.Performance

16.Testing

17.Advanced React patterns

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

Top comments (6)

Collapse
 
ramanur28 profile image
Ramadhani

what a nice post!

Collapse
 
arking115 profile image
arking115

Thank you!

Collapse
 
raulferreirasilva profile image
Raul Ferreira

Thanks for sharing, I was a little lost on how to study react, this post gave me a great foundation, thank you very much 🦤.

Collapse
 
arking115 profile image
arking115

You are welcome, feel free to ask any questions

Collapse
 
vineetjadav73 profile image
vineetjadav

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!

Collapse
 
neeraj30 profile image
Neeraj30

The Best Detailed Roadmap!! 👌👌