[译]5分钟学习React.js

本教程将通过构建一个非常简单的应用程序，让你对React.js有基本的了解。我会抛弃所有我认为不是核心的东西。

如果你喜欢我的教学风格，在我们即将推出免费的React.js课程时你想收到通知，可以在此留下电子邮件。

设置

在开始使用React时，你应该使用最简单的设置：在html文件中使用script标签导入React和ReactDOM库，如下所示：

<html>
<head>
<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>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
    <div ></div>
    <script type="text/babel">
    /* 
    在这里添加React代码 
    */
    </script>
</body>
</html>

我们还导入了Babel，因为React使用JSX来编写标签。我们需要将此JSX转换为纯JavaScript，以便浏览器可以理解它。

我希望你注意到另两件事情：

id为#root的<div>。这是应用程序的入口点。这是整个应用程序将要运行的位置。
正文中的<script type="text/babel">标签。这是我们编写React.js代码的地方。

如果你想体验代码，看看这个Scrimba示例。

组件

React中的所有内容都是一个组件，通常使用JavaScript的类来编写。你可以扩展React-Component类来创建组件。我们来创建一个名为Hello的组件。

class Hello extends React.Component {
    render() {
        return <h1>Hello world!</h1>;
    }
}

然后定义组件的方法。在我们的例子中，我们只有一个方法，它被称为render()。

render()方法返回你想要React在页面上展示的描述。在上面的例子中，我们只是希望它显示带有文本Hello World的h1标签！

为了让我们的小应用程序在屏幕上呈现，我们还必须调用ReactDOM.render()：

ReactDOM.render(
    <Hello />, 
    document.getElementById("root")
);

所以这就是我们将Hello组件连接到应用程序入口点（<div ></ div>）的地方。结果如下：

我们刚才看到的HTML'ish语法（<h1>和<Hello />）是我前面提到的JSX代码。它实际上不是HTML，尽管你在那里编写的HTML最终会作为HTML中的标签。

下一步是让我们的应用程序来处理数据。

数据处理

React中有两种类型的数据：属性（props）和状态（state）。两者之间的区别在一开始就有点棘手，所以如果你觉得有点混乱，请不要担心。一旦开始使用它们，它会变得更容易。

关键的区别在于，state是私有的，可以在组件内部对它更改。 props是外部的，不受组件本身的控制。它从更高级别的组件传递下来，控制数据。

组件可以直接更改其内部state。它不能直接改变它的props。

我们先来仔细看看props。

Props

我们的Hello组件很静态，它始终呈现出相同的消息。 React的一大特点是可重用性，意味着可以编写一次组件，然后在不同的用例中重用它 - 例如，显示不同的消息。

为了实现这种可重用性，我们添加props。这就是我们如何将props传递给组件（粗体字部分）：

ReactDOM.render(
    <Hello message="my friend" />, 
    document.getElementById("root")
);

这个属性名称为message，值为"my friend"。我们可以在Hello组件中使用this.props.message访问属性messag，如下所示：

class Hello extends React.Component {
    render() {
        return <h1>Hello {this.props.message}!</h1>;
    }
}

它在屏幕呈现如下：

我们用花括号写{this.props.message}的原因是因为我们需要告诉JSX我们想添加一个JavaScript表达式。这被称为转义。

所以现在我们有一个可重用的组件，它可以在页面上呈现我们想要的任何消息。哇噢！

但是，如果我们希望组件能够修改自己的数据呢？那么我们必须改用状态state！

State

在React中存储数据的另一种方式是使用组件内的state。与props不同 - 组件不能直接修改props - state可以。

因此，如果你希望修改应用程序中的数据（例如，基于用户交互），则必须将其存放在应用程序组件的状态中。

初始化状态

要初始化状态，只需在类的构造函数()方法中设置this.state即可。我们的State是一个对象，在我们的例子中只有一个叫做message的键。

class Hello extends React.Component {
    constructor(){
        super();
        this.state = {
            message: "my friend (from state)!"
        };
    }
    render() {
        return <h1>Hello {this.state.message}!</h1>;
    }
}

在我们设置状态之前，我们必须在构造函数中调用super()。这是因为在super()被调用之前是未初始化的。

修改状态

要修改状态，只需调用this.setState()，传入新的状态对象作为参数。我们将在updateMessage的方法里面实现。

class Hello extends React.Component {
    constructor(){
        super();
        this.state = {
            message: "my friend (from state)!"
        };
        this.updateMessage = this.updateMessage.bind(this);
   }
    updateMessage() {
        this.setState({
            message: "my friend (from changed state)!"
        });
    }    
    render() {
        return <h1>Hello {this.state.message}!</h1>;
    }
}

注意：为了实现这个功能，我们还必须将关键字this绑定到updateMessage方法。否则，我们不能在方法中访问到this。

下一步是创建一个按钮来点击，这样我们就可以触发updateMessage()方法。

我们在render()方法中添加一个按钮：

render() {
  return (
     <div>
       <h1>Hello {this.state.message}!</h1>
       <button onClick={this.updateMessage}>Click me!</button>
     </div>   
  )
}

在这里，我们将一个事件监听器挂载到按钮上，监听onClick事件。当这被触发时，我们调用updateMessage方法。

这是整个组件：

class Hello extends React.Component {
    constructor(){
        super();
        this.state = {
            message: "my friend (from state)!"
        };
        this.updateMessage = this.updateMessage.bind(this);
    }
    updateMessage() {
        this.setState({
            message: "my friend (from changed state)!"
        });
    }
    render() {
         return (
           <div>
             <h1>Hello {this.state.message}!</h1>
             <button onClick={this.updateMessage}>Click me!</button>
           </div>   
        )
    }
}

updateMessage方法会调用this.setState()来更改this.state.message的值。当我们点击按钮时，如下所示：

恭喜！你现在对React中最重要的概念有了非常基本的了解。

原文：Learn React.js in 5 minutes

秒客网