How to Learn React.js — A roadmap from beginner to advanced :)

Hey Learner!

This guide is for people who are starting with React. I have carefully curated the best videos and articles in each section to make it easier for learning.

Note: I’m not associated with any of the websites mentioned below. It’s purely my view.

Prerequisites

1. Basic knowledge of HTML, CSS, and JavaScript.

2. Basic understanding of ES6 features.

To get started you should at least know the following features:

• Let
• Const
• Arrow functions
• Imports and Exports
• Classes

3. Basic understanding of how to use npm (node package manager).

Getting started

You can use online code editors to practice.

To grasp all the fundamentals of React, you can start with the following tutorials:

1. React Official tutorial by React.
It’s a well-written article covering the fundamentals of React. And it also explains the specific topics very clearly.

2. YouTube video tutorial on React.

React is an open source JavaScript library for building user interfaces.

React is a project created and maintained by Facebook.

React has more than a 100 thousand stars on GitHub and a huge community behind it.

React has become increasingly popular among developers and is also one of the most sought out skill-sets by companies right now.

https://youtu.be/QFaFIcGhPoM

By now, you should have a basic idea of the fundamentals of React. It’s enough to start developing simple web apps in React.

React Router

React Router helps you create routes to your single page applications. It’s very powerful and easy to use with your React application.

To get started:

React Router tutorial by Paul Sherman

React Router and intro to SPA by Learn Code Academy

Routing React apps by Scotch.io

These articles are more than enough for you to get started with React routing.

Start building some projects

1. Simple todo-app
2. Simple calculator app
3. Build a shopping cart
4. Display GitHub’s user stats using GitHub API.

Webpack

Webpack is a famous JavaScript module bundler. Webpack helps you to maintain dependencies as static files for your project so developers don’t have to do it.
Webpack also comes with loaders. Loaders help run specific tasks around your project.
To learn much more about Webpack, follow the following tutorials.

When and why to use Webpack by Andrew Ray

Webpack tutorial by Learn Code Academy

To setup your local React environment using Webpack, you can refer to the following GitHub repo:

React SPA template by Hanif Roshan

I think the above tutorials are enough to get started with Webpack.

Server rendering

Server rendering is one of the coolest features in React. It can be used with any of the back-end technologies. Server Side Rendering (SSR) in React helps you to create components in the server and render that as HTML in your browser. And when all the JavaScript modules are downloaded in the browser, React takes the stage.

First of all, take a look at the React-DOM API:

React-DOM API by React.

Redux

Redux is a JavaScript library developed for maintaining application states. When you are building a complex application, it will add overhead to manage states across components. Redux helps you store all your states in a single source. And of course, React plays well with Redux :)

To get started:

Redux tutorial by Learn Code Academy.

This is all about the roadmap to learn React from the beginning. We hope this was helpful !!!