Complete road map to learn React

The original post is in Notion. Do checkout.
Here

React is a library (from Facebook) for building composable user interfaces. It encourages the creation of reusable UI components, which present data that changes over time. React abstracts away the DOM from you, offering a simpler programming model and better performance.

Getting Started - React, Hooks & Redux

You could learn React.js from a variety of resources. Pick the best for you.

Learn from the official documentation of React.

React - A JavaScript library for building user interfaces

Take a course from Udemy.

Link to some of the best Courses.

Modern React with Redux Training Course

React 16: The Complete Course (incl. React Router 4 & Redux)

Watch YouTube Tutorials.

Complete React Course (the best on YouTube)

Full React Course 2020 - Learn Fundamentals, Hooks, Context API, React Router, Custom Hooks

Full Modern React Tutorial

Only looking for React Concepts (do watch for clearing concepts)

ReactJS Tutorial for Beginners

React Hooks Tutorial

If you are looking for a quick Crash Course.

Learn React JS - Full Course for Beginners - Tutorial 2019

In this section you must have learned about React along with Redux and other various packages and technologies. Here is a quick link for you on Create React App.

Create React App

Deep dive into Redux

Refer to this websites for in-depth concepts on Redux.

React Redux | React Redux

Redux Toolkit | Redux Toolkit

A complete advanced Redux Course.

The Ultimate Redux Course

Clear you redux concepts with this playlist.

React Redux Tutorial

Firebase with React

Learn how to integrate Firebase with Your App.

React, Redux & Firebase App Tutorial

---

UI Components and Styles

Though you can use CSS, SCSS for your styling but there are some UI components libraries.

UI Libraries

Material-UI: A popular React UI framework

Ant Design - The world's second most popular React UI framework

Design System for React JS

Styled Components

This is one of the most in fact the most powerful styling tool for react.

styled-components

Also look for this awesome CSS framework

Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.

Here is a awesome site to motivate you to develop awesome shits.

React.js Examples

Another site with awesome Libraries for your React project.

React Libraries

Now that you have a complete knowledge on React, Styling and Firebase, have a look at this curated playlist of some awesome react projects.

React Best Tutorials

Also below is a complete React roadmap.

At this point of time you must have made 2, 3 projects and are ready to go on to the next thing. React Frameworks.

React Frameworks

There are two best framework using React.

Gatsby.js

The Fastest Frontend for the Modern Web

Here are some of the best Tutorials available on YouTube

Gatsby Tutorial

Gatsby JS - The Great Gatsby Bootcamp [Full Tutorial]

Next.js

Next.js by Vercel - The React Framework

Here are some of the best Tutorials available on YouTube

Next.js Tutorial for Beginners

Next.js Crash Course 2021

---

GraphQL

This is a awesome Tool for query, specially if you use Gatsby or Next then you must learn it as both of them heavily rely upon this.

A query language for your API

Here are some of the best Tutorials available on YouTube

GraphQL Tutorial

GraphQL Full Course - Novice to Expert

Comments

[Euller Peixoto]

I'm just starting to learn React, this will help me a lot! Thanks sir!

[Piyush Pandey]

See the link to Notion, it's better 😊

[Raghavan alias Saravanan Muthu]

Good compilation. Thanks

[Piyush Pandey]

See the link to Notion, it's better 😊