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
npm install -g create-react-app
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 .
Use Yarn install React, Run the following command ：
yarn add react react-dom
Use npm install React, Run the following command :
npm install --save react react-dom
Yarn and npm from npm registry Download the package you need .
Enable ES6 and JSX
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';
This code will render to id by root Of DOM In the elements , So in your HTML Somewhere in the file needs
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 .
Like this guide This description will
UglifyJsPlugin Included in the production environment Webpack Configuration in progress .
If you don't want to use it npm Manage client packages ,
react-dom Of npm Wrapped in
dist Distribution of individual files is also provided under the folder , They are in trust CDN On ：
The above version is only suitable for the development environment , Not suitable for production environment . Compressed and optimized React Available production versions in ：
If you want to load a specific version of
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 （ 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 ...
- 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 ...
- React Learning Series
React Learning Series Series learning react Translation address https://scotch.io/tutorials/learning-react-getting-started-and-concepts I'm Chu ...
- 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 , ...
- React In-depth series １：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 ...
- React In-depth series ２： 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 ...
- React In-depth series ３：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 ...
- React In-depth series ４： 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 ...
- React In-depth series ５： 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 ...
- 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 ...
- 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 ...
- 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 # ...
- putty The solution to Chinese disorder
solve putty.exe The problem of Chinese random code export NLS_LANG="AMERICAN_AMERICA.ZHS16GBK"
- 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 ...
- 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 ...
- aix Next java Program running problems
CLASSPATH=/track.jar:/standalone.jar export CLASSPATH nohup /usr/java6_64/bin/java com.TrackMain > ...
- 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 ...
- 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 ...
- [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 ...