Original address : original text

This series is aimed at React Translation of documents , Because I'm learning react When , At the beginning, by reading Chinese materials such as blogs or forums , Some of the content is scattered reception , It didn't bring good effect to itself , So I decided to read the original document from beginning to end . So far, the original document is almost the same , My English level is also limited , I don't understand , But it's better than the scattered effects from blogs or other channels , And the original document is up to date , And the Chinese materials found are some solutions that others have translated or written for the previous documents , The updated content has not been updated , Based on this idea , I am also in the spirit of being able to learn more deeply , So I decided to make a general translation of the document , Doing these things for the first time , I don't know how long I can hold on , I don't know how far I can translate , I hope you can correct the mistakes , I hope we can stick to it . I don't say much nonsense , Get to the point .


React It's flexible , And can be applied to a variety of projects . You can use it to create a new project , however , You can also do it without rewriting it , Gradually introduce it into the existing code base .

First taste React

If you're just right about React Interested in , You can use CodePen. Try this from this Hello World Example Let's get started . You don't have to install anything , Just change the code , And see if it works .

If you prefer to use your own text editor , Can download This HTML file , Edit it , Then open it locally through a browser . It performs a slow run-time code conversion , So don't use it in a production environment .

Create a single page app

Create React App( translator's note :facebook Provides a tool set ) It's about starting to create React One of the best ways of single page application . It has set up the development environment for you , So you can use the latest Javascript characteristic , Provide a good development experience , And can optimize your production environment applications .

npm install -g create-react-app

create-react-app hello-world

cd hello-world

npm start

Create React App It doesn't handle back-end logic or databases ; It just creates a front-end build pipeline , So you can use it with any backend you want to use . Its bottom layer is the use of webpack,Babeland ESLint, But it's already configured for you .

Add... To existing applications React

You don't have to start using React And rewrite the original application .

We recommend that you will React Add to a small part of your app , Like a personal widget , So you can see if it works well in your application scenario .

Even though React Can be in No pipes built (build pipeline) In case of use , However, we recommend that you configure the build pipeline to increase productivity . A typical modern structural pipeline consists of the following parts :

  • A package manager , such as Yarn perhaps npm. It allows you to leverage a huge ecosystem of third-party software packages , Easily install or update them .
  • A build tool , such as webpack perhaps Browserify. It allows you to write modular code and bundle it together into packages to optimize load time .
  • A compiler , such as Babel, It allows you to write modern JavaScript Code .

install React

We recommend using Yarn perhaps npm To manage front-end dependencies . If you're new to package management tools ,Yarn file It's a good place to start .

Use Yarn install React, Run the following command :

yarn init

yarn add react react-dom

Use npm install React, Run the following command :

npm init

npm install --save react react-dom

Yarn and npm from npm registry Download the package you need .

Enable ES6 and JSX

For your Javascript The code uses ES6 and JSX, We recommend cooperation Babel Use React.ES6 It's a group of modernizations that make development easier JavaScript characteristic ,JSX It's right React It's very good JavaScript Language extension .

Babel Setting instructions Explains how to configure... In many different build environments Babel. Make sure you have installed babel-preset-react and babel-preset-es2015 And it's already in your .babelrc To configure They're in use , So you're ready .

Use ES6 and JSX Of Hello World

We suggest using something like webpack or Browserify Such a builder , So that you can write modular code , And package them together into small packages , To optimize the loading time .

The smallest React An example is like this :

import React from 'react';
import ReactDOM from 'react-dom';
<h1>Hello, world!</h1>,

This code will render to id by root Of DOM In the elements , So in your HTML Somewhere in the file needs <div id="root"></div>.

Allied , You can also use other Javascript UI Somewhere in an existing application written by the library , Will a React Component rendering to a DOM Element .

Development environment version and production environment version

default ,React It includes a lot of useful warnings . These warnings are very useful in the development environment . However , They will make React It's getting big and slow , So make sure to use the production environment version when deploying the application .


Want to use Brunch Create an optimized production build , Just add... To the build command -p identification . See... For more details Brunch docs.


function Browserify, take NODE_ENV The environment variable is set to production, Use UglifyJS As the last step in the build , In this way, the code that only works in the development environment will be stripped out .

Create React App

If you use Create React App,npm run build It will be applied in the future build Generate an optimized code under the folder .


Use rollup-plugin-replace and rollup-plugin-commonjs Together ( In order ) Remove development specific code . here There are complete setup cases .


Like this guide This description will DefinePlugin and UglifyJsPlugin Included in the production environment Webpack Configuration in progress .


If you don't want to use it npm Manage client packages , react and react-dom Of npm Wrapped in dist Distribution of individual files is also provided under the folder , They are in trust CDN On :

<script src="https://unpkg.com/react@15/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>

The above version is only suitable for the development environment , Not suitable for production environment . Compressed and optimized React Available production versions in :

<script src="https://unpkg.com/react@15/dist/react.min.js"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>

If you want to load a specific version of react and react-dom, Can be 15 Replace with the version number of the version you want to load .

If you use Bower,React Can pass react The bag gets .

React Document translation series ( One ) Install more related articles

  1. React Document translation series ( Two )Hello World

    This is a React The second part of the document translation series , The previous article described how to install react, This paper mainly introduces react The knowledge system of , Master the basic knowledge system , To learn better React. Hello World Start React The simplest way ...

  2. React Document translation series ( 3、 ... and )JSX brief introduction

    # React Document translation series ( 3、 ... and )JSX brief introduction Let's take a look at the following variable declaration : ``` const element = Hello world! ``` This interesting tag syntax is neither a string nor HTML. This shape ...

  3. React Learning Series

    React Learning Series Series learning react Translation address  https://scotch.io/tutorials/learning-react-getting-started-and-concepts I'm Chu ...

  4. Robotframework-Appium series : Installation configuration

    1.   Robotframework-android series : Installation configuration 1.1. Installation environment 64 position win10 Family Chinese 1.1. Installation instructions online robotframework-appium There are a lot of installation information , ...

  5. React In-depth series 1:React The elements in 、 Components 、 Instances and nodes

    writing : Xu Chao ,<React Advanced road > author Authorized release , Please indicate the author and source of reprint React In-depth series , In depth explanation of React The key concepts in . Features and patterns, etc , It aims to help you deepen your understanding of React The understanding of the , And in the project ...

  6. React In-depth series 2: Component classification

    writing : Xu Chao ,<React Advanced road > author Authorized release , Please indicate the author and source of reprint React In-depth series 2: Component classification React In-depth series , In depth explanation of React The key concepts in . Features and patterns, etc , To help you add ...

  7. React In-depth series 3:Props and State

    writing : Xu Chao ,<React Advanced road > author Authorized release , Please indicate the author and source of reprint React In-depth series 3:Props and State React In-depth series , In depth explanation of React The key concepts in . Features and patterns ...

  8. React In-depth series 4: Life cycle of components

    writing : Xu Chao ,<React Advanced road > author Authorized release , Please indicate the author and source of reprint React In-depth series 4: Life cycle of components React In-depth series , In depth explanation of React The key concepts in . Features and patterns, etc , To help ...

  9. React In-depth series 5: Event handling

    writing : Xu Chao ,<React Advanced road > author Authorized release , Please indicate the author and source of reprint React In-depth series 5: Event handling React In-depth series , In depth explanation of React The key concepts in . Features and patterns, etc , To help you add ...

Random recommendation

  1. adb shell Use

    adb shell Can be used to manipulate the database 1. stay cmd Interface Input adb shell Get into adb shell 2. Use cd Switch to working directory : Use ls see file 3. Use sqlite3+ Database name Open a data ...

  2. jquery How to remove select Control repeated option

    This is not very easy to use , If id Values are different ,text It's the same , It will be removed too <input type="button" class="btn" id="bt ...

  3. UIImageView Load network pictures asynchronously

    stay iOS Development process , We often encounter the use of UIImageView Showing pictures from the Internet , The simplest way is as follows : To download https://github.com/rs/SDWebImage Put it in your project , Add header file # ...

  4. putty The solution to Chinese disorder

    solve putty.exe The problem of Chinese random code export NLS_LANG="AMERICAN_AMERICA.ZHS16GBK"

  5. Python-Day2 Python Basic advanced data types

    One . data type Python3 There are six standard data types in : Number( Numbers ) String( character string ) List( list ) Tuple( Tuples ) Sets( aggregate ) Dictionary( Dictionaries ) Python ...

  6. asp.net in webservice And android Of json Data interaction mode settings

    One . Server settings 1. modify web.config stay web.config Inside system.Web Node add <webServices> <protocols> <add ...

  7. aix Next java Program running problems

    CLASSPATH=/track.jar:/standalone.jar export CLASSPATH nohup /usr/java6_64/bin/java com.TrackMain > ...

  8. PHP Of SQL Injection technology implementation and preventive measures

    SQL attack (SQL injection, Taiwan is called SQL Data cryptanalysis ), Short for injection attack , Is a security vulnerability in the database layer of an application . In short , Is injected into the input string SQL finger Make , In the process of poor design, the inspection is ignored ...

  9. Integrate spring+springmvc+mybatis

    development environment : jdk 1.8 eclipse 4.7.0 (Oxygen) tomcat 8.5.29 mysql 5.7 Preparation before development : spring Framework of the jar package , What is used here is spring-5.0 ...

  10. [USACO16OPEN] Diamond collector Diamond Collector

    Because the difference is not more than k Can be put together , It is necessary to judge that it is not more than k This condition , Obviously we need to sort First we need one f Array ,f[i] Look at the comments at the beginning of the code , Let's say that a certain interval we can choose is a[l]~a[r]( Sorted and optimal ( The longest meaning ...