A roadmap from beginner to advanced for React developers 2020

In today post we are going to cover the most asked question i.e how to learn React from zero to become hero. I am going to share best resources that you can follow to learn React from beginner to advanced i.e Roadmap to React.

What is React ?

Reactjs is a frontend library and it is developed by Facebook in year 2013. As the name suggest React is based on javascript. It is used for making single page web application with reusable components.

1. Learn basics first

There is few Prerequisites which is required before starting the React. I highly recommend you to learn the below things even before trying learning the React.

2. React official docs

React official docs are one of the best resource available on the internet to learn React. Most of the beginners try to avoid official docs. Maybe they find official docs too complicated for the beginners but according to my perspective React official docs is best.

You must learn below things in order given from official docs

Some advanced topics as well

3. Routing in React

Routing is nothing but going from one url/page to another url/page within your web app. React doesnโ€™t provide routing functionality out of the box. To handle routing you need to install react-router package.

https://blogreact.com/whats-new-in-react-router-v6/

4. Setup own project from zero

After learning React and routing both its time to setup your project without the use of react-create-app. Now you should learn how to setup your react app from zero using the use of bundlers like webpack, parcel and rollupjs.

Learn React setup with webpack from here.

Learn React setup with parceljs from here.

5. Learn different types of rendering in React

Its type to learn different types of rendering in React like client-side rendering, server-side rendering and pre rendering.

You can learn about SSR and pre rendering from here.

https://blogreact.com/seo-of-react-app/

6. Global State management

Its time to learn about global state management. In big projects you always need to rely on some kind of global state management to avoid props drilling and to avoid complex structure of data.

You can use some global state management solutions like

Redux, Mobx and context.

https://blogreact.com/how-to-use-context-in-react/

7. Best practices

Most important point the best practices for React. Best practices are the things which makes a good developer and a best developer. Even most of the developers forget to learn about best practices. Here is few resources that you must learn.

Best tools to improve your coding from here.

https://blogreact.com/react-best-practices-2020/

8. Extensions for React

Working smart is not a bad thing you should have a look at these amazing extensions that i use in day to day life to improve my productivity.

Vs code extensions

Browse extensions

I hope you have learn about something new today about Roadmap to React. Don’t forget to write your valuable comments. ๐Ÿ™‚

Categories: Reactjs