DEV Community

Cover image for ⚛️ React Developer Roadmap - beginners guide 🚀
The Coding Mermaid 🧜‍♀️
The Coding Mermaid 🧜‍♀️

Posted on

⚛️ React Developer Roadmap - beginners guide 🚀

I was thinking to myself, about the steps I followed to learn React and then I asked myself, why not share with all developers? 😊

👾 Strengthen your JavaScript knowledge

If you are reading this post, I assume you already have HTML, CSS and basic JS knowledge, so I'm going to skip those. To be a React Developer, you have to first have solid foundations of JavaScript.
Let me share with you some resources that you can use to increase your JavaScript development skills:

👩‍💻 Learn map, filter and reduce in JavaScript.

Map, reduce, and filter are all array methods in JavaScript. If you start with React, chances are that you use them in a daily basis.

For this topic, I leave you here 2 articles, which are my favorites:

🎨 CSS Frameworks

It's always handy to have help when building applications and css frameworks are always here to the rescue.

  • Material UI - a library created and kept up by Google with many custom options for many different jsx/html tags you’ll want to use
  • React Bootstrap - React Bootstrap is a set of React components that implement Bootstrap framework
  • Semantic UI - development framework that helps create beautiful, responsive layouts using human-friendly HTML


✈️ API's

To create something which communicates with other application you will need to use APIs like REST

A quick and easy to follow tutorial that I advice to watch is the What Is A RESTful API? Explanation of REST & HTTP

⚛️ Learn React

Now that you’re experienced in Advanced JavaScript and API's, let's skip to React. React as a framework is a great choice because it’s quite easy to learn, it’s improving each day and it has a great community.

There are several courses that you can find out there, I'm going to share some that I think it could be interesting:

Official Documentation

Free

Paid

🚀 State Management

This is an important area for a React developer to focus on. Some of these points are:

And much more...

You can also check the courses from Stephen and Max in what regards to this topic.

🪐 And it continues

There is so much more to learn about React, but I wanted to keep this article simple, for beginners, like me.
I wrote this article as I was writing for myself, so I hope it helps you when starting this new journey
fox wave

Top comments (22)

Collapse
 
migueldevelopez profile image
MiguelDevelopez • Edited

If you recommend the Maximilian Schwarzmüller course in 2021 it is because you didn't start it, I bought it and it was a total waste of money.
40.5 hours where most of it is with classes when you take around 35 hours of the course the hooks start, he didn't update the part of Redux with Redux toolkit, the project that he develops is simply rubbish...
This is my opinion, I think there are other courses that are more worth spending time on.

The rest of the post is nice! Good job!

EDIT:
max updated his course enterily, now is more complete to be honest. At least now is not a scam and there are info about the HOOKS

Collapse
 
deepaktmd profile image
Deepak Kumar Thangavel

Mern stack front to back by brad traversy.

Collapse
 
monicafidalgo profile image
The Coding Mermaid 🧜‍♀️

Thank you for your feedback @migueldevelopez ! That's good to know! I haven't indeed! I did a research for react courses and it seemed nice.

Collapse
 
migueldevelopez profile image
MiguelDevelopez

It's fine!
I bought it and I watched the 35% and it's not bad if you are newbie with front and you don't care about learn something soo deprecated

Check the net ninja course, in 2 hours you will see like 20 hours of maxi course

Thread Thread
 
daliboru profile image
Dalibor Belic

Yes! The net ninja's course is amazing! I recommend it to all beginners!

Thread Thread
 
deepaktmd profile image
Deepak Kumar Thangavel

Actually i learnt react from his modern react playlist. its a great resource to start with react.

Collapse
 
jk_shenoy profile image
JK

hi @migueldevelopez Would you still recommend it to someone who's learning react in May 2022? Would love to know your recommendations as well. Thanks.

Collapse
 
luisitorey profile image
miguel

Sorry for being late.
I think for 10$ is a good way to learn, but you have to practice a lot. Avoid just watch a lot of videos because you won't learn nothing with this approach

Collapse
 
harshjains profile image
Harsh

@migueldevelopez Please suggest then which course should we opt for ?

Collapse
 
migueldevelopez profile image
MiguelDevelopez

max updated his course, now is more complete to be honest. At least is not a scam

Collapse
 
ascensus_mdb profile image
Michal Szymanski • Edited

Nice job, thanks!

For those who are looking for ready to use solutions - I would also recommend this free Bootstrap React UI KIT built with the newest Bootstrap 5 & React 17

mdbootstrap.com/docs/b5/react/

Collapse
 
adiks profile image
Anton Dikson

Context !== State manager

Collapse
 
jenseoul_53 profile image
J

Really useful reading! I've been debating between Vue and React :( as a web dev beginner.
Thank you for sharing

Collapse
 
christiankozalla profile image
Christian Kozalla

Been there. All the hype around react makes it hard to grasp when to use react or compare it with vue for example. I mean, React is great, plus there is a high demand in job market. But when I started Vue it was a lot more straightforward.

So don't hesitate trying Vue - it's really nice

Collapse
 
monicafidalgo profile image
The Coding Mermaid 🧜‍♀️

I also enjoy Vue a lot!

Collapse
 
fersa profile image
Ferhat

Great introduction and flow. Thank you :)

Collapse
 
sbu_05 profile image
Sibusiso Dlamini

I really enjoyed and am still enjoying Stephen grider's Udemy course. I would definitely recommend to anyone who would want to get serious about learning it 😂

Collapse
 
eullerpeixoto profile image
Euller Peixoto

Hey! Thanks for sharing!

Collapse
 
anonymousm profile image
mludovici

thanks, but how did you make it from marine biology into development? I would be interested to know that lol.

Collapse
 
coolscratcher profile image
CoolScratcher

Woah! Definitely using this sometime.

Collapse
 
matjs profile image
matjs

Amazing!

Collapse
 
devmedtz profile image
DevMed • Edited

Thanks for great tutorial, I real enjoyed