5分钟学会React （一个对于当前流行的JavaScript库的快速梳理）

5分钟学会React

（一个对于当前流行的JavaScript库的快速梳理）

这个说明通过一个非常简单的应用给你一个对于React.js的基本了解，我会省略非重点的内容。

当你开始阅读这篇文章，你可以检查Scrimba网站上的免费React课程，那里你可以通过48个视频学习这个库。

体制

当开始学习React的时候，你应该尽可能的使用最简单的模板，一个使用script标签导入React和ReactDOM库的HTML，就像这个：

我们也导入babel，作为React使用JSX去写，我们也需要翻译JSX去解释JavaScript，可以让浏览器了解它。

这有两点我希望你们去关注一下：

1. 根节点拥有id的div标签，这是我们app启动的入口，是我们整个app项目工作起来。
2. Body中的<script type="text/babel">标签，这里我们将会去写上我们的React.js代码

如果你想检验这些代码是否生效，可以通过Scrmba检查。

组件

React中的每件都是一个组件，这些通常都以JavaScript类的形式展现，你可以在React-Component上通过extending创建了一个组件。让我们创建一个名叫Hello的组件。

然后你为这个组建定义一个方法，在我们的例子里，我们仅拥个有一个名叫render（）的方法。

在render（）里你可以返回一种你想要React去渲染在页面上的画面（描述），在这个例子上，我们简单的想要去展示一个内容是Hello World！的h1标签。

为了让我们的小应用展示在屏幕上，我们也必须去使用ReactDOM.render()；

所以这就是我们为了这个app（<div id="root"></div>）连接的这个Hello组件的入口点，下图是其结果展示：

我们看(<h1> and <Hello/>)有点HTML语法的是我之前提到的JSX语法，他不是真正的HTML，只是你要写在DOM中以HTML标签结尾。

接下来是使用我们的app处理数据。

数据处理

在React中有两种类型的数据：props和state。两者之间的不同是可能刚开始理解有一些困难，所以如果你有一些迷惑不要担心，一旦你开始用它们工作后就会变得简单。

最关键的差异就是state是私有的并且能被组件本身改变，props是外部的，也不会因为组件本身而被控制，它从更高层次的控制着数据的组件传下来。

一个组件可以直接改变它自己内部的state，但它不能直接改变它的props。

让我们走近一点看props。

Props

我们的Hello组件是静态的，不管怎么样都会渲染出同样的信息，React一大部分都是拥有复用性的，意味着一旦你有能力写一个组件，在不同的情况下它都是可以复用的，比如展示不同的信息。

为了完成这种拥有复用性的类型，我们增加了props，这部分（粗体高亮）就是你如何通过props到达一个组件：

这里的props被称作message和它的值“my friend”。我们可以通过在Hello组件内部调用this.props.message来使用这个props，就像这样：

其结果渲染在屏幕上是这样：

我们利用花括号写下{this.props.message}的原因是你必须要告诉JSX我们想要去添加一个JSX表达式，这就叫escaping。

所以现在我们拥有了一个可以渲染任何信息在页面上的复用性组件。

然而，要是我们想要我们的组件改变它自己的数据，我们该怎么办？我们就必须要使用state了。

State

在React中想要存储数据的另一个方法就是组件的state，不同于props，它不能被组件直接改变，但state可以。

所以你想要你app里面的数据比如基于用户的效果而改变，它必须被存储在app的组件的state中。

初始化state

为了初始化state，简单的设置类中的constructor()方法中的this.state，我们的state在我们的例子中是一个对象，其拥有一个message属性。

在我们设置state之前，我们必须在constructor函数方法中使用super() 方法，这是因为this在未使用super（）之前是未初始化的。

改变state

为了改变state，可以通过一个新的state对象this.state()设置它的参数，我们将会通过一个被叫做updateMessage方法完成它。

笔记：为了让这个过程工作，我们也要将this关键字绑定到updateMessage方法上，否则我们不能再这个方法里使用this。

接下来的一步是创建一个按钮可以点击，我们用它来触发updateMessage()方法。

所以让我们加一个按钮到render()方法上：

这里，我们可以挂一个event事件监听再按钮上，监听这个onClick事件，当它被触发，我们就开始调用updateMessage方法了。

以下是这个组件全部代码：

updateMessage()就改变了this.setState()中的this.state.message的值，然后我们点击这个按钮，会打印出来：

 

恭喜你，你现在对于React中一大部分的内容已经拥有了基本了解。

更多请观看Scrimba上的免费React课程。

原文：https://medium.freecodecamp.org/learn-react-js-in-5-minutes-526472d292f4