Original stamp here

Hey, guys!

This guide is written for people who are just learning React. In each section, I collected the best videos and articles carefully to make our study easier.

Note: I have nothing to do with any of the sites mentioned below, it is purely my own opinion

Preliminary knowledge

  1. Basic knowledge of HTML, CSS and JavaScript
  2. Get a basic understanding of ES6 features. Here’s an article about ES6 features. 2.Const; 3.Arrow Functions; 4.Import and Exports; 5.Classes
  3. Basic use of NPM

Ready to start

You can practice using the online code editor, or you can use the Create React App

I built a development environment on JSFiddle and Codepen, respectively

To get to grips with all the basics of React, you can start with the following tutorial:

React official documentation

Kent C. Dodds’ Beginners Guide to React

Samer Buna的Fundamentals of React

By now you should know the basics of React, and that should be enough for us to develop a simple Web application using React

The React Official tutorial is a great tutorial. It covers the basics of React and explains specific topics very clearly

Last but not least, learn how to make the React app connect to the API:

Ethan Jarrell’s Fetching API with React.js

Start writing projects

  1. Simple to-do application
  2. Simple calculator application
  3. Building a shopping cart
  4. Display Github user statistics using Github’s API

React Router

React Router helps you create routes for your single page app. It’s very powerful and easy to use.

Start right away:

React Router Tutorial by Paul Sherman

Learn Code Academy的React Router and intro to SPA

Routing React Apps for Scotch. IO

These articles are enough to get you started using React routing

project

  1. A simple CRUD application
  2. Cloning of Hacker News

If you’re really interested in learning about the Router, check out the following tutorial:

React Training: React Router

Webpack

Webpack is a well-known JavaScript module wrapper that helps your project maintain dependencies in static files without developers having to do it

Along with Webpack come loaders, which help your project run specific tasks

To learn more about Webpack, follow this tutorial:

Andrew Ray’s When and Why to Use Webpack

Learn Code Academy的Webpack tutorial

To set up a local React environment using Webpack, you can look at the Github repository below:

Hanif Roshan的React SPA template

The above tutorial is enough to get you started with Webpack, and if you want to learn more, check out the following tutorial:

The Webpack SurviveJS the introduction

Webpack official docs

Server rendering

Server rendering is one of the coolest features of React, and it can be used by any back-end technology

React server Rendering (SSR) helps you create components on the server and render them as HTML in the browser. When all the JavaScript modules have been downloaded in the browser, React comes into play. Simple!

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

The React the React – DOM API

To learn more, follow these tutorials:

React Server Rendering by Tyler McGinnis

React Router Server Rendering by Roilan Salinas

React Server Side Rendering Guide by Dennis Brotzky

Redux

Redux is a JavaScript library developed to maintain application state. When building complex applications, there is an increased overhead of managing state between components. Redux helps you store all of your state in one source. Of course, React and Redux work well together!

Start:

Learn Code Academy’s Redux tutorial

Valentino Gagliardi的Redux tutorial for beginners

CSS Tricks的React Redux

These tutorials are enough to get you started with Redux. However, I couldn’t resist mentioning the tutorial below. It is well worth:

Getting Started with Redux by Dan Abramov

resources

Awesome React

If you enjoyed this article, please don’t forget to share it