React is a JavaScript library for building user interfaces. It was voted the most loved in the "Frameworks, Libraries, and Other Technologies" category of Stack Overflow's 2017 Developer Survey.
React是一个用于构建用户界面的JavaScript库。它被Stack Overflow 2017年开发者调查中的"框架,图书馆和其他技术"类别评为最受欢迎。

React is a JavaScript library and React applications built on it run in the browser, NOT on the server. Applications of this kind only communicate with the server when necessary, which makes them very fast compared to traditional websites that force the user to wait for the server to re-render entire pages and send them to the browser.

React is used for building user interfaces - what the user sees on their screen and interacts with to use your web app. This interface is split up into components, instead of having one huge page you break it up into smaller pieces known as components. In more general terms, this approach is called Modularity.
React用于构建用户界面 - 用户在屏幕上看到并与之交互以使用您的Web应用程序。这个界面被分成几个部分,而不是将一个巨大的页面拆分成称为组件的较小部分。更一般地说,这种方法称为模块化。

  • It's declarative: React uses a declarative paradigm that makes it easier to reason about your application.
  • It's efficient: React computes the minimal set of changes necessary to keep your DOM up-to-date.
  • And it's flexible: React works with the libraries and frameworks that you already know.

The Best Tutorials for Learning React {#the-best-tutorials-for-learning-react}

freeCodeCamp has a
freeCodeCamp有一个React tutorial on YouTube that will teach you all the basics in just 5 hours.

We also have a more
我们还有更多in-depth intermediate React tutorial that teaches you how to build an entire social media React app using Firebase. It is 12 hours long, and if you follow along, you will learn a ton of the intricacies of React.

Why learn React? {#why-learn-react}

React involves Composition, that is lots of components wrapping up the functionalities into an encapsulated container.

Many popular websites use React implementing the MVC architectural pattern. Facebook (Partially), Instagram (Completely), Khan Academy (Partially), New York Times (Partially), Yahoo Mail (Completely), Dropbox's new photo and video gallery app Carousel (Completely) are the popular websites known to be using React.
许多流行的网站使用React实现MVC架构模式。 Facebook(部分),Instagram(完全),可汗学院(部分),纽约时报(部分),雅虎邮箱(完全),Dropbox的新照片和视频库应用程序Carousel(完全)是已知使用React的热门网站。

How are these large applications built using React? The simple answer is by building small applications or components. Example:

const Component2 = () => {
  return (
const Component3 = () => {
  return (
const Component1 = () => {
  return (
      <Component2 />
      <Component3 />

  <Component1 />, 

React is Declarative, for the most part, which means we are concerned more with what to do rather than how to do a specific task.

Declarative programming is a programming paradigm that expresses the logic of a computation without describing its control flow. Declarative programming comes with certain advantages such as reduced side effects (occurs when we modify any state or mutate something or make an API request), minimized mutability (as a lot of it is abstracted), enhanced readability, and fewer bugs.

React also has an unidirectional dataflow. UI in React is actually the function of the state. This means that as the state updates it updates the UI as well. So our UI progresses as the state changes.
React也有单向数据流。 React中的UI实际上是状态的功能。这意味着,当状态更新时,它也会更新UI。因此,随着状态的变化,我们的用户界

Advantages of React {#advantages-of-react}

Some reasons to use React are:

  1. Fast. Apps made in React can handle complex updates and still feel quick and responsive.
  2. Modular. Instead of writing large, dense files of code, you can write many smaller, reusable files. React's modularity can be a beautiful solution to JavaScript's maintainability problems.
  3. Scalable. Large programs that display a lot of changing data are where React performs best.
  4. Flexible. You can use React for interesting projects that have nothing to do with making a web app. People are still figuring out React's potential. There's room to explore.

Virtual DOM {#virtual-dom}

React's magic comes from its interpretation of the DOM and its strategy for creating UIs.

React uses the Virtual DOM to render an HTML tree virtually first. Then, every time a state changes and we get a new HTML tree that needs to be taken to the browser's DOM, instead of writing the whole new tree React will only write the difference between the new tree and the previous tree (since React has both trees in memory). This process is known as Tree Reconciliation.
React首先使用Virtual DOM虚拟渲染HTML树。然后,每次状态改变并且我们得到一个需要被带到浏览器DOM的新HTML树,而不是编写整个新树,React只会写出新树和前一棵树之间的区别(因为React同时具有这两者)记忆中的树木)。此过程称为树对帐。

Reconciliation {#reconciliation}

React has a smart diffing algorithm that it uses to only regenerate in its DOM node what actually needs to be regenerated while it keeps everything else as is. This diffing process is possible because of React's virtual DOM.

Using the virtual DOM, React keeps the last DOM version in memory. When it has a new DOM version to take to the browser, that new DOM version will also be in memory, so React can compute the difference between the new and the old versions.

React will then instruct the browser to update only the computed diff and not the whole DOM node. No matter how many times we regenerate our interface, React will take to the browser only the new "partial" updates.

React from Scratch {#react-from-scratch}

Would you like to get started learning the basics of react without getting bogged down creating a development environment? Chances are that if you are new to web development, setting up a development environment can leave you feeling a little intimidated when you are just trying to learn React.

In this article we are going to look at how we can get started with React using only a text editor and a browser and nothing else.

1 --- Set Up Boiler Plate Code with Emmet {#1-set-up-boiler-plate-code-with-emmet}

Let's get started with step 1. We'll begin with a file in our browser called "index.html". We'll begin with the boiler plate HTML code. For a quick start I recommend using Emmet with whatever text editor you have. On the first line, type in
让我们开始第1步。我们将从浏览器中的一个名为"index.html"的文件开始。我们将从锅炉板HTML代码开始。为了快速入门,我建议您使用Emmet和任何文本编辑器。在第一行,输入html:5 then press the shift key to get the code below. Or you can go ahead and copy and paste the code from below.


This will result in the following code:

<!DOCTYPE html>
<html lang="en">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">


We can fill in the title of "Time to React!".

This content will not appear in your webpage. Anything in the head section of the HTML file will be meta data that our browser will user to interpret our code in the body section. This title is going to be what appears on the tab for our page, not actually on the page.
此内容不会显示在您的网页中。 HTML文件的head部分中的任何内容都将是我们的浏览器将用户在body部分中解释我们的代码的元数据。此标题将显示在我们页面的选项卡上,而不是实际显示在页面上。

2 - Get Script Tags to Harness the Power of React and Babel Libraries {#2-get-script-tags-to-harness-the-power-of-react-and-babel-libraries}

Ok, item one is checked off of our list. Let's look at item two. We are going to set up our developer environment by using script tags to bring in React and Babel.

This is not a real life developer environment. That would be quite an elaborate setup. It would also leave us with a lot of boiler plate code and libraries that would take us off subject of learning React basics. The goal of this series is to go over the basic syntax of React and get right into coding. We are going to use
这不是一个真实的开发者环境。那将是一个非常复杂的设置。它还会给我们留下大量的锅炉板代码和库,这些代码和库将使我们不再学习React基础知识。本系列的目标是回顾React的基本语法并直接进入编码。我们打算用<script> tags to bring in the React Library, the React DOM library (why), and the Babel library.
标签引入React库,React DOM库(为什么)和Babel库。

  <!-- REACT LIBRARY -->
  <script src="https://unpkg.com/[\[email protected\]](https://www.freecodecamp.org/cdn-cgi/l/email-protection)/dist/react.js"></script>
  <script src="https://unpkg.com/[\[email protected\]](https://www.freecodecamp.org/cdn-cgi/l/email-protection)/dist/react-dom.js"></script>
  <!-- BABEL LIBRARY -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.25.0/babel.min.js"></script>
  <title>Time to React!</title>

You are free to use more updated versions of these libraries as they come out. They should not create any breaking changes for the content we are covering.

What are we doing here? The HTML
我们在这里做什么? HTML<script> element is used to embed or reference an executable script. The "src" attribute points to the external script files for the React library, ReactDOM library and Babel library.
element用于嵌入或引用可执行脚本。 "src"属性指向React库,ReactDOM库和Babel库的外部脚本文件。

This is like if you have an electric razor. It is literally no good to you no matter how fancy the electric razor unless you can plug it into the wall and gain access to electricity. Our React code we will write will be no good to us if our browser can't plug into these libraries to understand and interpret what we are going.

This is how our application is going to gain the power of React, it is going to be how we insert React into the Dom. We have React and ReactDOM as two different libraries because there are use cases such as React Native where rendering to the DOM isn't needed for mobile development so the library was split so people could decide what they needed depending on the project they were working on.
这就是我们的应用程序如何获得React的功能,它将是我们如何将React插入Dom。我们将React和ReactDOM作为两个不同的库,因为有一些用例,例如React Native,移动开发不需要渲染到DOM,因此库被拆分,以便人们可以根据他们正在处理的项目来决定他们需要什么。

Because we will need our React to make it to the DOM we'll use both scripts. Babel is how we take advantage of ECMA script beyond ES5 and deal with something called JSX (JavaScript as XML) that we will use in React. We'll take a deeper look at the magic of Babel in an upcoming section :)
因为我们需要我们的React来实现它,所以我们将使用这两个脚本。 Babel是我们如何利用ES5之外的ECMA脚本并处理我们将在React中使用的称为JSX(JavaScript as XML)的东西。我们将在接下来的部分深入探讨巴别塔的神奇之处:)

Alright, we have completed steps 1 and 2. We have set up our boiler plate code and set up our developer environment.

3 - Render React to the DOM {#3-render-react-to-the-dom}

Our next two steps will be to choose our location within the DOM that we want to render our React content. And we'll use another script tag for our React content within the body. Generally, as a good separations of concerns practice, this would be in its own file then linked to this html document. We'll do that later in upcoming sections. For now, we'll let this dwell within the body of the html document we are currently in.

Now we are going to look at how simple it is to choose a place on the DOM to render our React content. We'll go within the body. And best practice isn't just to throw React into the body tag to be displayed but to create a separate element, often a div, that you can treat as a root element to insert your React content.

  <div id="app">React has not rendered yet</div>

We'll create a simple
我们将创建一个简单的<div> element and give it an id of "app". We are going to be able to target this location to insert our React content much the same way you might use CSS to target an id for styling of your choice. Any react content will be rendered within the div tags with the id of app. In the meantime we'll leave some text saying that "React has not rendered yet". If we see this when we preview our page it means that somewhere we missed rendering React.

Now, let's go ahead and create a script tag within our body where we will create with React for the first time. The syntax we are going to need for our script tag is to add an attribute of "type". This specifies the media type of the script. Above in our head we used an src attribute that pointed to the external script files for the React library, ReactDOM library and Babel library.

  <div id="app">React has not rendered yet</div>
  <script type="text/babel">

The "type" of script that we are using will be wrapped in quotes and set to
我们正在使用的脚本的"类型"将被包装在引号中并设置为"text/babel". We'll need the ability to use babel right away as we work with JSX.

First, we are going to render React to the DOM. We will use the
首先,我们将把React呈现给DOM。我们将使用ReactDOM.render() method to do this. This will be a method, and remember a method is just a function attached to an object. This method will take two arguments.

  <div id="app">React has not rendered yet</div>
  <script type="text/babel">
  ReactDOM.render(React What, React Where);

The first argument is the "what" of React. The second argument is the "where" of the location you want it to be placed in the DOM. Let's start by calling our ReactDOM.render() method. Our first argument is going to be our JSX.

  <div id="app">React has not rendered yet</div>
  <script type="text/babel">
    <h1>Hello World</h1>, 
    React Where

official react docs state: "This funny tag syntax is neither a string nor HTML. It is called JSX, and it is a syntax extension to JavaScript. We recommend using it with React to describe what the UI should look like. JSX may remind you of a template language, but it comes with the full power of JavaScript. JSX produces React "elements."

Often times, JSX freaks people out who have been developers for a while because it looks like HTML. At a very early age developers are taught separation of concerns. HTML has its place, CSS has its place and JavaScript has its place. JSX seems to blur the lines. You are using what looks like HTML but as Facebook says it comes with the full power of JavaScript.
很多时候,JSX让那些已经成为开发人员的人感到不安,因为它看起来像HTML。在很小的时候,开发人员被教导分离关注点。 HTML有它的位置,CSS有它的位置,JavaScript有它的位置。 JSX似乎模糊了界限。你正在使用看起来像HTML的东西,但Facebook表示它具有JavaScript的全部功能。

This can freak out veterans, so many React tutorials start without JSX which can be quite complex. We won't do that. Because this article is directed towards those who are very young in their careers you may not bring those red flags when you see this syntax.

And JSX is just really intuitive. You can probably quite easily read this code and see that this is going to be the largest header tag displaying the text "Hello World". No mystery and pretty straightforward. Now, let's look at what our second argument would be.
JSX非常直观。您可以非常轻松地阅读此代码,并看到这将是显示文本"Hello World"的最大标头标记。没有神秘感和相当简单。现在,让我们来看看我们的第二个论点是什么。

  <div id="app">React has not rendered yet</div>
  <script type="text/babel">
      <h1>Hello World</h1>, 

This is where we want our React content rendered to the DOM. You've probably done this quite a few times in the past. We'll just type in
这就是我们希望将React内容呈现给DOM的地方。你过去可能已经做了很多次了。我们只需输入document.getElementById(). And we'll pass into the argument of the id of app. And that is it. We will now target the div with the id of app to insert our React content.

We want to make sure our content is saved. Go ahead and open this up in the browser and you should see "Hello World". As you can probably guess, using React is not the quickest or best way to create a Hello World app. We aren't quite seeing the benefits of it yet. But now, we know that everything is working.
我们希望确保保存我们的内容。继续在浏览器中打开它,你应该看到"Hello World"。正如您可能猜到的,使用React并不是创建Hello World应用程序的最快或最好的方法。我们还没有看到它的好处。但现在,我们知道一切正常。

Go ahead and open up the console and look at the "elements". You can do that on a Mac with command + shift + j or on Windows and Linux: Ctrl + Shift + J
继续打开控制台,看看"元素"。您可以在Mac上使用命令+ shift + j或在Windows和Linux上执行此操作:Ctrl + Shift + J.

If you click on the head tag, we can see our script libraries we included. Then we can go down to the body of our document. Let's click on our div with the id of "app". And when we do we see our
如果单击head标签,我们可以看到我们包含的脚本库。然后我们可以深入到我们的文档正文。让我们点击ID为"app"的div。当我们这样做时,我们会看到我们<h1> tag with the content "Hello World".
标记内容为"Hello World"。

View Entire Code Here.

Recap {#recap}

So let's do a quick recap. In our head tag we grabbed the script tags for React, ReactDOM and Babel. These are the tools our browser needs in its meta data to read our React code and JSX in specific.

We then located the position within the DOM that we wanted to insert our React by creating an element div with the id of "app".

Next, we created a script tag to input our React code. We used the ReactDOM.render() method that takes two arguments. The "what" of the React content, in this case our JSX, and the second argument is the "where" that you want to insert the React content into the DOM. In this case it is the location with the id of "app".
接下来,我们创建了一个脚本标记来输入我们的React代码。我们使用了带有两个参数的ReactDOM.render()方法。 React内容的"内容",在本例中为我们的JSX,第二个参数是您希望将React内容插入DOM的"where"。在这种情况下,它是id为"app"的位置。

As an alternative to JSX, you can use ES6 and Javascript's compiler like Babel. https://babeljs.io/
作为JSX的替代品,您可以使用像Babel这样的ES6和Javascript编译器。 https://babeljs.io/

Installing React {#installing-react}

Creating a new React project {#creating-a-new-react-project}

You could just embed the React library in your webpage like so^2^:
您可以在您的网页中嵌入React库,就像这样^ 2 ^:

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.0.0/cjs/react.production.min.js"></script>

Smart programmers want to take the more practical and productive way:
聪明的程序员希望采用更实用,更高效的方式:Create React App

npm install -g create-react-app
create-react-app my-app

cd my-app
npm start

This will set up your development environment so that you can use the latest JavaScript features, provide a nice developer experience, and optimize your app for production.

npm start will start up a development server which allows live reloading^3^.
将启动一个允许实时重新加载的开发服务器^ 3 ^。

After you finish your project and are ready to deploy your App to production, you can just use
完成项目并准备将应用程序部署到生产环境后,您就可以使用了npm run build to create an optimized build of your app in the
在。中创建应用程序的优化版本build folder.

Your first React App {#your-first-react-app}

Installation {#installation}

As specified in the previous section (Installation), run the
如上一节(安装)中所述,运行Create React App tool. After everything has finished,
工具。一切都完成后,cd into the folder of your application and run
进入您的应用程序的文件夹并运行npm start. This will start a development server and you are all set to start developing your app!

npm install -g react-create-app
create-react-app my-first-app

cd my-first-app
npm start

Editing the code {#editing-the-code}

Start up your editor or IDE of choice and edit the
启动您的编辑器或IDE选择并编辑App.js file in the
文件中src folder. When created with the
夹。用the创建时react-create-app tool, there will already be some code in this file.

The code will consist of these parts:

imports {#imports}

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

This is used by
这是用来的webpack to import all required modules so that your code can use them. This code imports 3 modules:

  1. React and Component, which allow us to use React as it should be used. (With components)
  2. logo, which allows us to use logo.svg in this file.
  3. ./App.css, which imports the stylesheet for this file.

classes/components {#classes-components}

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.

React is a library that makes use of Components, which let you split up your UI into independent, reusable pieces, and think about each piece in isolation. There is already 1 component created, the
React是一个使用Components的库,它允许您将UI拆分为独立的,可重用的部分,并独立思考每个部分。已经创建了1个组件App component. If you used the
零件。如果你用过create-react-app tool, this component is the main component in the project and you should build around this central class.

We will look at components in more detail shortly.

exports {#exports}

When creating a class in React, you should export them after declaration, which allows you to use the component in another file by using the
在React中创建一个类时,你应该在声明后导出它们,这允许你使用它在另一个文件中使用该组件import keyword. You can use
关键词。您可以使用default after the
之后export keyword to tell React that this is the main class of this file.

export default App;

View the results! {#view-the-results-}

When you've started the development server by issuing the
当您通过发出启动开发服务器时npm start command, you can view the changes you add to your project live in your browser. After issuing the command, npm should open a browser automatically displaying your app.

React - Components {#react-components}

Components are reusable in React. You can inject value into props as given below:

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;

const element = <Welcome name="Faisal Arkan" />;

name="Faisal Arkan" will give value into
会给予价值{props.name} from the
来自function Welcome(props) and will return the component that has given value by
并将返回已给出值的组件name="Faisal Arkan". After that react will render the element into HTML.

Other ways to declare components {#other-ways-to-declare-components}

There are many ways to declare components when using React. There are two kinds of components,
使用React时,有很多方法可以声明组件。有两种组件, stateless components and
组件和 stateful components.

Stateful {#stateful}

Class Type Components {#class-type-components}

class Cat extends React.Component {
  constructor(props) {

    this.state = {
      humor: 'happy'
  render() {

Stateless Components {#stateless-components}

Functional Components (Arrow Function from ES6) {#functional-components-arrow-function-from-es6-}

const Cat = props => {
  return (  

Implicit Return Components {#implicit-return-components}

const Cat = props =>