翻译：《5分钟入手React.js》

原文地址：[Learn React.js in 5 minutes](https://medium.freecodecamp.org/learn-react-js-in-5-minutes-526472d292f4)。
因为想撸一撸 React ，寻思着直接伸手应该比较愉快，就顺便翻译一篇国外的入门好啦。

5分钟入手 React.js ———— 超热门JavaScript库的快速指南

在这篇教程中，你会通过构建一个超简单小应用的方式对于 React.js 有一个基本的理解，我会把其中我个人认为不是特别核心的知识点暂且抛去不谈哈。

当你阅读这篇文章的时候，你也可以点击链接看一下发布在Scrimba的免费React课程，在那你可以通过48个互动视频来相对完整地学习这个库。

废话少说，整！

基础配置

刚开始使用React的时候，我们应该尽量使用最简单的配置来上手：比如像这样只是用<script />标签引入了React和ReactDOM的简单HTML文件：

    <html>
    <head>
    <script src="https://cdn.bootcss.com/react/15.5.4/react.min.js"></script>
    <script src="https://cdn.bootcss.com/react/15.5.4/react-dom.min.js"></script>
    <script src="https://cdn.bootcss.com/babel-standalone/6.15.0/babel.min.js"></script>
    </head>
    <body>
        <div id="root"></div>
        <script type="text/babel">
        
        /* 
        在此处写入React相关代码
        */
        
        </script>
    </body>
    </html>

译者：原作者使用的免费CDN加速是https://unpkg.com/，为了符合国情我全部替换成了https://www.bootcdn.cn/的同类文件，代码可以放心复制~

同时我们引入了Babel，因为我们在React相关代码中要使用一些用JSX语法来描述HTML内容的部分，此时我们需要将JSX来转化成普通的JavaScript，这样浏览器才能正常解析这段程序。

这里有两个地方需要注意一下：

一个是我们标记了#root这个id的<div />标签。它是我们整个应用的根节点，我们程序的编译结果将出现在这个标签中；
还有<script type="text/babel"></script>这个标签。这个标签是我们将要编写React.js代码的地方。

如果你想实验这段代码，可以查看Scrimba playground。

译者：除了Scrimba网站，可以根据2016年10月的这篇文章了解下其他的在线编辑器以及特点。

组件

在React的世界里，一切都是组件，组件通常继承于一个JavaScript类。你可以通过继承React.Component类来创建组件，如下代码所示，我们来创建一个名为“Hello”的组件。

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

然后，我们可以定义组件的方法，不过我们的示例中只定义了一个render()方法。

在render()方法中我们返回了一串希望React渲染到页面中的HTML代码，我们想让React把<h1>Hello world!</h1>代码渲染到根节点中。

然后我们调用ReactDOM.render()来给我们的小应用进行DOM渲染：

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

这段代码是我们让根节点与Hello组件产生关联的关键，结果请点击链接查看。

译者：点击这个CodePen地址查看这个例子。

刚刚出现的与HTML语法很相似的<Hello />就是我们刚刚提到的JSX。它并不是HTML，但是最终会转换成HTML来渲染。

下一步我们来学习数据绑定。

数据绑定

在React中有两种数据：Props 以及 State。最开始我们或许比较难以理解这两者的区别，不用太担心，在开始使用它们之后你就会更容易理解它们的具体意义。

State也可以称之为状态，它是组件所私有的、可以在组件内部修改的；而Props是外部传入的，不受组件本身控制。Props从可以控制数据的高层组件向低层组件传递。

一个组件可以直接地修改它的State，而不能直接修改它被传入的Props。

我们先看一下Props。

Props

我们的“Hello”组件是一个非常基础的组件，它无论如何渲染都智慧渲染出相同的数据。React中一个很重要的部分就是它的复用性，也就是说你可以只编写一次组件、却在各种不同的时候调用它——比如显示不同的信息。

为了给刚刚的组件增加复用性，我们来为它添加 Props 。下面的message="my friend"就是你使用 Props 将数据传递给组件的方式：

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

这个被命名为“message”的prop我们为他赋值为“老铁”，我们在组件内使用this.props.message的语法来调用它：

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

结果请点击链接查看。

译者：点击这个CodePen地址查看这个例子。

我们在代码中用一个大括号来包裹了{this.props.message}代码，这个大括号是用来进行转义操作的，它来标识这段大括号中的JSX为JavaScript表达式。

那么我们现在就有一个可以复用的组件了，它可以让我们给任何宾语喊“Hello”！真牛逼！

那我们该怎么让组件能够拥有自己修改数据的能力呢？那就要使用State了！

State

State是React中的另一种数据形式，它可以在组件内部由组件自己来直接修改，不需要外部传入。

所以你如果需要组件内部能够通过用户交互等形式让数据产生变化，你就需要把它存在组件的State里。

初始化状态

为了将状态进行初始化，我们需要在组件的constructor()方法中简单设置一下this.state参数。在我们的例子中，我们依然是只设置一个“message”属性。

class Hello extends React.Component {
    
    constructor(){
        super();
        this.state = {
            message: "State中的Message"
        };
    }
    
    render() {
        return <h1>Hello {this.state.message}!</h1>;
    }
}

在我们设置State的具体属性的时候，我们需要先在constructor(){}中调用super()方法，只有这样才能在继承父类的子类中正确获取到类型的this 。

更新 State 中的数据

想要修改State里面的值，最简单的做法是调用this.setState()，并把要更新的值放置其中。下面我们在组件中定义一个updateMessage()方法来更新数据。

class Hello extends React.Component {
    
    constructor(){
        super();
        this.state = {
            message: "State中的Message"
        };
        this.updateMessage = this.updateMessage.bind(this);
   }
    updateMessage() {
        this.setState({
            message: "更新过的State中的Message"
        });
    }    
    render() {
        return <h1>Hello {this.state.message}!</h1>;
    }
}

这个时候要注意一下，我们在updateMessage()中胡作非为的时候，必须要确认this已经绑定到了组件方法中，不然我们无法访问到正确的this。

下一步我们在render()中创建一个点击后就能触发updateMessage()的按钮：

render() {
  return (
     <div>
       <h1>Hello {this.state.message}!</h1>
       <button onClick={this.updateMessage}>点我更新State！</button>
     </div>   
  )
}

这样我们就在按钮上挂了一个事件监听器，来监听onClick事件。当事件触发时，组件就会调用updateMessage()方法。如下为完整组件代码：

class Hello extends React.Component {
    
    constructor(){
        super();
        this.state = {
            message: "State中的Message"
        };
        this.updateMessage = this.updateMessage.bind(this);
   }
    updateMessage() {
        this.setState({
            message: "更新过的State中的Message"
        });
    }    
    render() {
        return (
         <div>
           <h1>Hello {this.state.message}!</h1>
           <button onClick={this.updateMessage}>点我更新State！</button>
         </div>   
        )
    }
}

点击按钮后，updateMessage()方法就会调用this.setState()，并通过传值来修改其中的this.state.message。点击之后的效果点击链接查看。

译者：点击这个CodePen地址查看这个例子。

恭喜你！你已经对于React中比较重要的概念有了一个基本的认识啦！

译者：后面作者的感叹、广告、自我介绍都不翻译了，在DocsChina也有类似的React快速入门的中文文档，需要的小伙伴可以自取。

翻译：《5分钟入手React.js》

5分钟入手 React.js ———— 超热门JavaScript库的快速指南

基础配置

组件

数据绑定

Props

State

初始化状态

更新 State 中的数据

添加新评论

最新文章

分类

归档