DEV Community

Cover image for React Js roadmap - 2022
Samuel Lucas
Samuel Lucas

Posted on

React Js roadmap - 2022

It's so exhausting trying to figure out where to start or head to while learning something, something like React Js, so much tutorials(videos and PDFs) out there but where exactly is the starting point and what are the things needed to learn so that I can be very good at React Js?

Hello πŸ‘‹, I'm Lucas and I'll be walking you through the React Js roadmap for 2022 - here you'll know so what you should learn to become a real react developer, and what you need to apply for the next job.

The best way to become a pro in this profession is by constantly keeping yourself up-to-date by reading docs of whatever technology you wish to learn. Take for example, if I were to post a tutorial on React, in the next few months it will be outdated because a newer version would be out and surely better, but then the docs would be updated. That's why you should learn to read docs first.

To develop yourself in React Js, you need certain level of knowledge in JavaScript itself. Let's see what you should know:

  1. Variables
  2. Functions
  3. Data Types(objects & arrays)
  4. Dom manipulation
  5. Asynchronous

Knowing these I can assure you success on your journey to learning React Js.

One of the best places to learn all these from is MDN

What you're expected to know as a React Js developer are:

  1. Components
  2. Routing
  3. Props
  4. States
  5. Inspecting/developer's tools
  6. Hooks(useState, useEffect, useContext...)
  7. Redux
  8. Styling UI (chakra UI, tailwind...)
  9. Testing(jest...)
  10. API consumption (a good recommendation)

A very good place to learn is from the documentation

Ensure you add every of your project to github.

Some cool projects you can work on are:

  1. Weather app (teaches you to fetch api)
  2. To-do app(teaches you how to pass props and other things)
  3. E-commerce(teaches you to fetch api and use stores - such as redux. Instead of writing the backend, simply use Commerce Js

While doing all these, don't be afraid of applying for jobs. Do not be afraid. Follow good resumẹ́ template. No matter how many times you get turned down, DO NOT GIVE UP

Don't be afraid to take on projects(not free, but paid). Why should I take paid projects/contract offers? The moment you collect part payment upon accepting the project, you'll know you've got to just finish it. But if it's unpaid, you might never complete or do it as supposed.

Talking about projects, how do you start building one? Consider this: I'm a react js developer but projects always seem complex to me, how do I go about with that?

The most important thing is this; no matter how small or huge the project is, always break it down into components. Example, let's create our very own Facebook.

What are the features you'll ask?

  1. View posts
  2. Create post

Let's assume this is all what it does.

Knowing this info already, all you need to do is very simple:

  1. Create a component that fetches (GET) from the API and display the results.
  2. Create a component that sends (POST) via API - within that component, you'll have input button for the post and send button.

Building with react is very easy if you learn to break things down into components

Quickly, take this test. Break Twitter home page into components and comment your answer.

If this post really does help, kindly leave a like and share. Thanks.

Top comments (12)

Collapse
 
vchiranjeeviak profile image
Chiranjeevi Tirunagari

I started learning react recently. I already built todo app. Hosted here: vchiranjeeviak.github.io/tasks-todo/
I learnt almost everything u mentioned except for redux and testing.

Collapse
 
sam_lukaa profile image
Samuel Lucas

I checked it out and I can say you've done a very good job. Please keep it up and remember to add it to your portfolio. πŸ‘

Collapse
 
vchiranjeeviak profile image
Chiranjeevi Tirunagari

Thank you 😊

Collapse
 
yazan_qarabash profile image
Yazan Qarabash

This was inspiring!

Collapse
 
cyberpunktrial profile image
Cyberpunk Trial

Planning to start . Thanks for the article

Collapse
 
matiasriveroctrl profile image
MatΓ­as Rivero

Thanks a lot! This article has everything I need to keep improving as a Frontend Dev.

Collapse
 
sam_lukaa profile image
Samuel Lucas

I'm really happy I could help someone.

Collapse
 
kbalthom profile image
Petter_Nicely

You light myself heat.
Thanks for your amazing advice.

Collapse
 
saksham147 profile image
saksham147

Best resource for learning

Collapse
 
syafiq1331 profile image
Syafiq Rizky Fauzi

thanks

Collapse
 
arsalannury profile image
ArsalanNury

I needed this post, good luck

Collapse
 
ritvikbithub profile image
Ritvik Github

Wow Thank You So Much