⚛️ React Developer Roadmap - beginners guide 🚀
Tags: react, frontend, beginners, javascript
Published: 2021-03-20 22:14:15

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

<h2>👾 Strengthen your JavaScript knowledge</h2>

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:

<ul>
<li><b><a href="https://www.udemy.com/course/javascript-bootcamp-2016/" target="_blank">JavaScript Accelerated Training</a></b> - Noting better to start with reviewing the basics of JavaScript</li>
<li><b><a href="https://www.udemy.com/course/understand-javascript/" target="_blank">JavaScript - Understanding the Weird Parts</a></b> - Grasp how Javascript works and it's fundamental concepts</li>
<li><p><b><a href="https://www.freecodecamp.org/learn" target="_blank">JavaScript Algorithms and Data Structures</a></b> - learn by doing examples and at the end you can get a Freecodecamp certification<br><br><br></p></li>
</ul>

<h2>👩‍💻 Learn map, filter and reduce in JavaScript.</h2>
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: 

<ul>
<li><b><a href="https://medium.com/@joomiguelcunha/learn-map-filter-and-reduce-in-javascript-ea59009593c4" target="_blank">Learn map, filter and reduce in Javascript</a></b> - people who are just starting working with functional Javascript and never heard of map, filter and reduce.</a></li>
<li><p><b><a href="https://www.freecodecamp.org/news/javascript-map-reduce-and-filter-explained-with-examples/" target="_blank">JavaScript Map, Reduce, and Filter</b></a> - JS Array Functions Explained with Code Examples<br><br><br></p></li>
</ul>

<h2>🎨 CSS Frameworks</h2>
It's always handy to have help when building applications and css frameworks are always here to the rescue.

<ul>
<li><b><a href="https://material.io/" target="_blank">Material UI</a></b> - a library created and kept up by Google with many custom options for many different jsx/html tags you’ll want to use</a></li>
<li><b><a href="https://react-bootstrap.github.io/getting-started/introduction" target="_blank">React Bootstrap</b></a> - React Bootstrap is a set of React components that implement Bootstrap framework</li>
<li><p><b><a href="https://semantic-ui.com/" target="_blank">Semantic UI</a></b> - development framework that helps create beautiful, responsive layouts using human-friendly HTML</a><br><br><br></p></li>
</ul>

<h2>✈️ API's</h2>
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 <a href="https://www.youtube.com/watch?v=Q-BpqyOT3a8&t=461s&ab_channel=TraversyMedia" target="_blank">What Is A RESTful API? Explanation of REST & HTTP</a>

<ul>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API" target="_blank">FETCH</a></li>
<li><a href="https://github.com/axios/axios" target="_blank">Axios</a></li>
<li><p><a href="https://visionmedia.github.io/superagent/" target="_blank">SuperAgent</a><br><br><br></p></li>
</ul>


<h2>⚛️ Learn React</h2>
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:

<h4>Official Documentation</h4>
<ul><li><p><a href="https://reactjs.org/docs/getting-started.html" target=_blank>React</a> - getting start<br><br><br></p></li></ul>

<h4>Free</h4>
<ul>
<li><a href="https://egghead.io/courses/the-beginner-s-guide-to-react">The Beginner's Guide to React</a> - egghead</li>
<li><a href="https://www.sololearn.com/learning/1097">React + Redux</a> - SoloLearn</li>
<li><p><a href="https://www.freecodecamp.org/learn/front-end-libraries/#react" target="_blank">React</a> - freecodeCamp<br><br><br></p></li>
</ul>


<h4>Paid</h4>
<ul>
<li><a href="https://www.udemy.com/course/react-redux/">Modern React with Redux</a> - Stephen Grider</li>
<li><p><a href="https://www.udemy.com/course/react-the-complete-guide-incl-redux/" target="_blank">React - The Complete Guide (incl Hooks, React Router, Redux)</a> - Maximilian Schwarzmüller<br><br><br></p></li>
</ul>

<h2>🚀 State Management</h2>

This is an important area for a React developer to focus on. Some of these points are:
<ul>
<li><a href="https://reactjs.org/docs/faq-state.html">Component State</a></li>
<li><a href="https://reactjs.org/docs/context.html">Context API</a></li>
<li><p><a href="https://redux.js.org/">Redux</a></li>
<li><a href="https://redux.js.org/tutorials/fundamentals/part-6-async-logic">Async actions (Side Effects)</a><br><br><br></p></li>
</ul>

<p>And much more...</p>
<p>You can also check the courses from Stephen and Max in what regards to this topic.<br><br></p>


<h2>🪐 And it continues</h2>
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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eiq5z8836lljyb95p8io.gif)