DEV Community

loading...
Cover image for โš›๏ธ React Developer Roadmap - beginners guide ๐Ÿš€

โš›๏ธ React Developer Roadmap - beginners guide ๐Ÿš€

โš›๏ธ๐ŸฆŠ Atomic Fox โš›๏ธ
Iโ€™m Mรณnica, a Front end developer graduated in marine biology. We are always on time to reinvent ourselves.
ใƒป4 min read

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

Discussion (18)

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!

Collapse
deepaktmd profile image
Deepak Kumar Thangavel

Mern stack front to back by brad traversy.

Collapse
monicafidalgo profile image
โš›๏ธ๐ŸฆŠ Atomic Fox โš›๏ธ Author

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
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
โš›๏ธ๐ŸฆŠ Atomic Fox โš›๏ธ Author

I also enjoy Vue a lot!

Collapse
adiks profile image
Anton Dikson

Context !== State manager

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
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
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
eullerpeixoto profile image
Euller Peixoto

Hey! Thanks for sharing!

Collapse
coolscratcher profile image
CoolScratcher

Woah! Definitely using this sometime.

Collapse
fersa profile image
Ferhat

Great introduction and flow. Thank you :)

Collapse
matjs profile image
matjs

Amazing!

Collapse
devmedtz profile image
DevMed • Edited

Thanks for great tutorial, I real enjoyed