React-redux-react-router Train

Simple description

This article is my study react one months of summary, starting from the basics (including editor settings, build tools), step by step toward react development. Believe me, after reading this article, follow the steps of the article go, to ensure that you get started react and love react, Master React-router,redux. This article follows the principle of being more basic.

First, the editor starts

Described here is the sublime TEXT3 configuration react development environment, support ES6 JSX react Auto-completion.

Tutorial:
Sublime3 Topsy Es6+reactjs

Second, Webpack artifact

I believe that you can follow this tutorial to hit an article, you will be able to get started and go deep

Webpack Demo

If you really don't want to build Webpack
I have a very good thing to introduce to you, absolutely no better than the master himself to build webpack development environment Poor!!
On the document code:

12345678910111213141516171819202122232425

{"name": "Yourappname", "version": "0.0.1", "Private": true, "Devdependencies": { " enzyme": "^2.4.1", " react-addons-test-utils": "^15.3.0", " react-scripts": "^0.4.0 "},"dependencies": { " react": "^15.3.0", " react-dom": "^15.3.0", " React-redux": "^4.4.5", " Redux": "^3.5.2 "},"Scripts": { "Start": "react-scripts start", "Build": "react-scripts build", " Eject": "react-scripts eject", "test": "react-scripts test "},"Eslintconfig": { " extends": "./node_modules/react-scripts/config/eslint.js" }}

Save the above document as Package.json in the root directory of your project and run NPM install (NPM I can also be a shorthand for NPM install)
The key is react-scripts this package for you do all Webpack build work, package address for (https://www.npmjs.com/package/react-scripts)

Third, react basic 1, JavaScript

Before you learn, you should be aware of JavaScript, or at least JavaScript under the ES5 standard. But if you know very little, then you should stop the work and learn the basic part before you can move forward.

But if you are already familiar with the new features that ES6 brings, please continue. Because, as you can see, the React API interface has a large difference between the ES5 and ES6 two standards. So it's important for you to be familiar with the different characteristics of the two standards. Despite the anomalies, you can find a wide range of valid answers by switching between the two standards.

Recommended Es5,es6 Tutorials for Nanyi:

• JavaScript standard Reference Tutorial (Alpha)
• ECMAScript 6 Getting Started

2. NPM

NPM is the king of Software Management in the JavaScript world. However, here you don't need to learn too much about NPM itself. As soon as you install it (along with node. js), learn how to use it to install the software. ( npm install <package name> )

Recommended NPM's official website: https://www.npmjs.com/

3, react

To learn a new programming technique, we tend to start with the familiar Hello World tutorial. First, we can do this by using the native HTML file shown in the official React tutorial, which contains some script tags. Second, we can also get started quickly by using tools like React heatpack.

Try the three-minute tutorial that runs Hello world.

Recommended Tutorials:

• English good, direct react official website react
• Reading English is difficult to see
  • React official website Translation React-china
  • Beginner's tutorial react react-tutorial
  • Demo Combat Nanyi "React Tutorial" (recommended to read React document in hands-on operation)

Iv. React-router Articles

When it comes to router, we all know the meaning of routing, but it's not the kind of routing at home. The React Router here is a routing solution designed for React, where routing is required when using React to develop a SPA (single page application) project, and React Router should be the most current utilization.

React Router was not developed by Facebook's React official team, but is said to have been involved in the development of official personnel. React Router design ideas from Ember routing, if the original useful Ember routing and development of the backend, then React Router should not be unfamiliar.

Article read recommendation: Talk about the routes from React Router.

Tutorials Recommended:

• React Router Documentation
• React Router Demo

V. Redux articles

Dan Abramov, as the creator of Redux, will tell you not to contact Redux prematurely. In fact, this is a reason for the--redux its complexity in the early learning process, will bring disastrous effects.

Although the underlying principle behind Redux is quite simple, it is a great span to leap from understanding to practice.

So, repeat the second step: Build a one-time application. Through a little Redux experience, to gradually understand the working principle behind it.

Recommended Tutorials:

• Redux documentation
• Redux-style tutorial really recommended, this young man wrote really well, from the source analysis, understanding in-depth
• Redux Demo

At last

For React, although there are a lot of learning plans to take, and there is a lot of things to learn-but everything needs to follow the rules, one step at a foot. Go through the tutorials I've listed and I'm sure you'll benefit from it.

I've compiled a document of the tutorials and demos listed above react-tutorial welcome star to keep up to date, to Exchange learning

Author: CLL

React-redux-react-router train