教程
最后更新于：2022-04-01 20:47:26
我们将构建一个简单却真实的评论框，你可以将它放入你的博客，类似disqus、livefyre、facebook提供的实时评论的基础版。
我们将提供以下内容：
* 一个展示所有评论的视图
* 一个提交评论的表单
* 用于构建自定制后台的接口链接（hooks）
同时也包含一些简洁的特性：
* **评论体验优化：** 评论在保存到服务器之前就展现在评论列表，因此用户体验很快。
* **实时更新：** 其他用户的评论将会实时展示。
* **Markdown格式：** 用户可以使用MarkDown格式来编辑文本。
目录 ：
[TOC]
### 想要跳过所有的内容，只查看源代码？
[所有代码都在GitHub。](https://github.com/reactjs/react-tutorial)
### 运行一个服务器
虽然它不是入门教程的必需品，但接下来我们会添加一个功能，发送 `POST` ing请求到服务器。如果这是你熟知的事并且你想创建你自己的服务器，那么就这样干吧。而对于另外的一部分人，为了让你集中精力学习，而不用担忧服务器端方面，我们已经用了以下一系列的语言编写了简单的服务器代码 - JavaScript（使用Node.js），Python和Ruby。所有代码都在GitHub。你可以[查看代码](ttps://github.com/reactjs/react-tutorial/)或者[下载 zip 文件](https://github.com/reactjs/react-tutorial/archive/master.zip)来开始学习。
开始使用下载的教程，只需开始编辑 `public/index.html` 。
### 开始学习
在这个教程里面，我们将使用放在 CDN 上预构建好的 JavaScript 文件。打开你最喜欢的编辑器，创建一个新的 HTML 文档：
~~~
Hello React
~~~
在本教程其余的部分，我们将在此 script 标签中编写我们的 JavaScript 代码。
> 注意：
>
> 因为我们想简化 ajax 请求代码，所以在这里引入 jQuery，但是它对 React 并不是必须的。
### 你的第一个组件
React 中全是模块化、可组装的组件。以我们的评论框为例，我们将有如下的组件结构：
~~~
- CommentBox
- CommentList
- Comment
- CommentForm
~~~
让我们构造 `CommentBox` 组件，它只是一个简单的 `` 而已：
~~~
// tutorial1.js
var CommentBox = React.createClass({
render: function() {
return (
This is one comment
This is *another* comment
);
}
});
~~~
请注意，我们已经从父节点 `CommentList` 组件传递给子节点 `Comment` 组件一些数据。例如，我们传递了 _Pete Hunt_ （通过一个属性）和 _This is one comment * （通过类似于XML的子节点）给第一个 `Comment`。从父节点传递到子节点的数据称为 *_props**，是属性（properties）的缩写。
### 使用props
让我们创建评论组件。通过 **props**，就能够从中读取到从 `CommentList` 传递过来的数据，然后渲染一些标记：
~~~
// tutorial5.js
var Comment = React.createClass({
render: function() {
return (
);
}
});
~~~
在 JSX 中通过将 JavaScript 表达式放在大括号中（作为属性或者子节点），你可以生成文本或者 React 组件到节点树中。我们访问传递给组件的命名属性作为 `this.props` 的键，任何内嵌的元素作为 `this.props.children`。
### 添加 Markdown
Markdown 是一种简单的格式化内联文本的方式。例如，用星号包裹文本将会使其强调突出。
首先，添加第三方的 **Showdown** 库到你的应用。这是一个JavaScript库，处理 Markdown 文本并且转换为原始的 HTML。这需要在你的头部添加一个 script 标签（我们已经在 React 操练场上包含了这个标签）：
~~~
Hello React
~~~
下一步，让我们转换评论文本为 Markdown 格式，然后输出它：
~~~
// tutorial6.js
var converter = new Showdown.converter();
var Comment = React.createClass({
render: function() {
return (
);
}
});
~~~
我们在这里唯一需要做的就是调用 Showdown 库。我们需要把`this.props.children`从 React 的包裹文本转换成 Showdown 能处理的原始的字符串，所以我们显示地调用了`toString()`。
但是这里有一个问题！我们渲染的评论在浏览器里面看起来像这样：“``This is``another`` comment``”。我们想这些标签真正地渲染成 HTML。
那是 React 在保护你免受 XSS 攻击。这里有一种方法解决这个问题，但是框架会警告你别使用这种方法：
~~~
// tutorial7.js
var converter = new Showdown.converter();
var Comment = React.createClass({
render: function() {
var rawMarkup = converter.makeHtml(this.props.children.toString());
return (
);
}
});
~~~
这是一个特殊的 API，故意让插入原始的 HTML 变得困难，但是对于 Showdown，我们将利用这个后门。
**记住：** 使用这个功能，你会依赖于 Showdown 的安全性。
### 接入数据模型
到目前为止，我们已经在源代码里面直接插入了评论数据。相反，让我们渲染一小块JSON数据到评论列表。最终，数据将会来自服务器，但是现在，写在你的源代码中：
~~~
// tutorial8.js
var data = [
{author: "Pete Hunt", text: "This is one comment"},
{author: "Jordan Walke", text: "This is *another* comment"}
];
~~~
我们需要用一种模块化的方式将数据传入到 `CommentList`。修改 `CommentBox` 和`React.render()` 方法，通过 props 传递数据到 `CommentList`：
~~~
// tutorial9.js
var CommentBox = React.createClass({
render: function() {
return (
{comment.text}
);
});
return (
';
Hello, world! I am a CommentBox.
);
}
});
React.render(
Hello, world! I am a CommentList.
);
}
});
var CommentForm = React.createClass({
render: function() {
return (
Hello, world! I am a CommentForm.
);
}
});
~~~
下一步，更新 `CommentBox` 组件，使用这些新的组件：
~~~
// tutorial3.js
var CommentBox = React.createClass({
render: function() {
return (
Comments
{this.props.author}
{this.props.children}{this.props.author}
{converter.makeHtml(this.props.children.toString())}{this.props.author}
Comments
{commentNodes}
);
}
});
~~~
就是这样！
### 从服务器获取数据
让我们用一些从服务器获取的动态数据替换硬编码的数据。我们将移除数据属性，用获取数据的URL来替换它：
~~~
// tutorial11.js
React.render(