我们将建造一个简单但是实用的评论框，你可以把它用在博客或者作为一个基础版的实时评论组件，比如淘宝、微博。
我们将提供：
- 所有评论的查看
- 一个提供评论功能的表单
- 将你定制的后端与之关联
它还有一些优雅的特性
- 积极的评论：提交之后的评论会马上出现在评论列表，因此它看起来很快。
- 动态更新：其它用户的评论将会实时出现。
- Markdown 支持：用户可用MarkDown语法给自己的评论排版。
想跳过所有步骤仅仅查看代码？
启动一个服务器
为了开始我们的教程，我们需要一个运行中的服务器。它仅仅提供一个用来获取和提交数据的 API 端点服务。为了做起来更加简单，我们用简单的脚本语言来搭建服务。你可以查看源码或者下载压缩文件来包含一切我们需要的环境并开始我们的教程。
开始搭建
我们致力于让本教程变得相对简单，在我们上文提到的服务器的包中，包含着一个 HTML 文件，我们将用它来开始工作。在你喜欢的编辑器中打开 public/index.html，它看起来应该像下面这样：
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>React Tutorial</title>
<script src="https://npmcdn.com/react@15.3.1/dist/react.js"></script>
<script src="https://npmcdn.com/react-dom@15.3.1/dist/react-dom.js"></script>
<script src="https://npmcdn.com/babel-core@5.8.38/browser.min.js"></script>
<script src="https://npmcdn.com/jquery@3.1.0/dist/jquery.min.js"></script>
<script src="https://npmcdn.com/remarkable@1.6.2/dist/remarkable.min.js"></script>
</head>
<body>
<div id="content"></div>
<script type="text/babel" src="scripts/example.js"></script>
<script type="text/babel">
// To get started with this tutorial running your own code, simply remove
// the script tag loading scripts/example.js and start writing code here.
</script>
</body>
</html>
在接下来的教程中，我们将在 script 标签中编写JavaScript代码，我们没有任何先进的动态加载功能因此你只需在保存后刷新你的浏览器就可以看到你的更新。通过在浏览器中打开http://localhost:3000来跟进你的进度（在启动服务器之后）。当你第一次加载这个文件并且没有做任何改动时，你将会看到我们要打造功能的最终样子。当你准备好接下来的教程了，只需要删除<script>标签。
备注：
我们包含进了JQuery库因为我们想要简化将来用到的AJAX代码，但是它并不是强制地为React工作。
你的第一个组件
React 是模块化的，由组件构成的。拿我们的评论框举例，我们将会有如下的几个组件：
- CommentBox
- CommentList
- Comment
- CommentForm
让我们建造一个CommentBox组件，它仅仅是一个简单的<div>：
// tutorial1.js
var CommentBox = React.createClass({
render: function() {
return (
<div className="commentBox">
Hello, world! I am a CommentBox.
</div>
);
}
});
ReactDOM.render(
<CommentBox />,
document.getElementById('content')
);
注意到原生的 HTML 元素采用小驼峰命名法，同时定制的 React 类名采用大驼峰命名法。
JSX 语法
你第一个注意到的会是 XML 语法联合在你的JavaScript 中。我们有一个前置编译器来将这种语法糖转化为朴素的JS语法：
// tutorial1-raw.js
var CommentBox = React.createClass({displayName: 'CommentBox',
render: function() {
return (
React.createElement('div', {className: "commentBox"},
"Hello, world! I am a CommentBox."
)
);
}
});
ReactDOM.render(
React.createElement(CommentBox, null),
document.getElementById('content')
);
语法的选择是可选的但我们发现JSX语法比朴素的JS语法更加好用。在JSX 语法文章中阅读更多。
接下来做什么
我们通过在JS类中的一些方法如 React.createClass()来创建一个 React 组件。最重要的方法是调用 render()，该方法返回一个组件树，该树用来渲染成HTML。
<div>标签并不是真实的 DOM 节点，他们是实例化的 React div组件。你可以把它们想象成React用来处理数据的标记。React 是安全的，我们不生成 HTML 字符串，所以默认有 XSS 跨站脚本攻击的防护。
你不用返回一个基本的 HTML。你可以返回一个自己或他人的组件树。这就是React的组成:前端可维护的信条。
ReactDOM.render() 实例化根组件，启动框架，把标记映射成新的DOM 元素。
重要的是ReactDOM.render放在脚本的最底部，ReactDOM.render应该确保等所有组件被初始化完毕再调用。
拼装组件
让我们创建CommentList和CommentForm的骨骼，同样采用简单的<div>，添加这两个组件到你的文件中，保持CommentBox的定义和ReactDOM.render的调用:
// tutorial2.js
var CommentList = React.createClass({
render: function() {
return (
<div className="commentList">
Hello, world! I am a CommentList.
</div>
);
}
});
var CommentForm = React.createClass({
render: function() {
return (
<div className="commentForm">
Hello, world! I am a CommentForm.
</div>
);
}
});
接下来，更新CommentBox来使用新的组件：
// tutorial3.js
var CommentBox = React.createClass({
render: function() {
return (
<div className="commentBox">
<h1>Comments</h1>
<CommentList />
<CommentForm />
</div>
);
}
});
注意我们是怎么把HTML 标签和我们自定义的组件混用的。HTML 组件是正规的 React 组件，就像你自己定义的一样，有一点不同的是。JSX编译器会自动地把HTML标签替换成React.createElement(tagName)表达式并且把它们单独放置。这样可以避免全局命名空间内的垃圾数据。
使用属性
让我们创建 Comment组件，它依靠父组件传递给他的数据。从父组件传递过来的数据通过属性的方式传递给子组件。这些属性通过this.props访问。通过属性，我们可以读取通过CommentList传递给Comment的数据，并实施一些标记：
// tutorial4.js
var Comment = React.createClass({
render: function() {
return (
<div className="comment">
<h2 className="commentAuthor">
{this.props.author}
</h2>
{this.props.children}
</div>
);
}
});
花括号中的JS表达式被嵌套在JSX中，你可以把文本或者React组件放入树中，我们通过命名的属性访问传递过来的数据，并且访问元素中的数据。
组件的属性
既然我们定义了Comment属性，我们希望传递一些属性给它。这可以允许我们对代码进行复用。现在，让我们给CommentList中加一些评论。
// tutorial5.js
var CommentList = React.createClass({
render: function() {
return (
<div className="commentList">
<Comment author="Pete Hunt">This is one comment</Comment>
<Comment author="Jordan Walke">This is *another* comment</Comment>
</div>
);
}
});
注意，我们通过CommentList组件传递一些数据给了Comment组件。比如，我们传递了 Pete Hunt和This is one comment给Comment。如上文那样，Comment组件通过this.props.author和this.props.children来访问这些属性。
添加Markdown 支持
Markdown是格式化你的文本的一种简单的方法。比如，用幸好环绕文本会让它加重。
在本教程中，我们使用第三发的库remarkable来实现。在初始的页面中，我们已经包含了这个库，所以我们可以直接使用它。
// tutorial6.js
var Comment = React.createClass({
render: function() {
var md = new Remarkable();
return (
<div className="comment">
<h2 className="commentAuthor">
{this.props.author}
</h2>
{md.render(this.props.children.toString())}
</div>
);
}
});
我们在这里做的事情就是调用 remarkable 库，我们需要把 this.props.children 的React的文字换行格式转化成未加工的字符串以使 remarkable 很好的工作。
问题出现了，我们的加工过的字符串成了这样子<p>This is <em>another</em> comment</p>，我们希望这些标签编程HTML。
这是因为React为了防止XSS 攻击所做的工作。有一种方法摆脱这种防护，但是框架会警告你最好不要这么做。
// tutorial7.js
var Comment = React.createClass({
rawMarkup: function() {
var md = new Remarkable();
var rawMarkup = md.render(this.props.children.toString());
return { __html: rawMarkup };
},
render: function() {
return (
<div className="comment">
<h2 className="commentAuthor">
{this.props.author}
</h2>
<span dangerouslySetInnerHTML={this.rawMarkup()} />
</div>
);
}
});
这是一个特殊的API 故意使插入一个未加工的HTML变得困难，但是为了使用 remarkable 我们可以利用这个后门。
联系数据模型
目前为止，我们直接在源代码中插入了评论。现在，让我们用json格式的数据来填充评论列表。事实上这些数据将来自服务器，但是现在我们先把它写入源码中。
// tutorial8.js
var data = [
{id: 1, author: "Pete Hunt", text: "This is one comment"},
{id: 2, author: "Jordan Walke", text: "This is *another* comment"}
];
我们需要以一种模块化的方式将这个数据传入到 CommentList。修改 CommentBox 和 ReactDOM.render() 方法，以便于通过 props 传入数据到 CommentList：
// tutorial9.js
var CommentBox = React.createClass({
render: function() {
return (
<div className="commentBox">
<h1>Comments</h1>
<CommentList data={this.props.data} />
<CommentForm />
</div>
);
}
});
ReactDOM.render(
<CommentBox data={data} />,
document.getElementById('content')
);
既然现在数据在 CommentList 中可用了，让我们动态地渲染评论：
// tutorial10.js
var CommentList = React.createClass({
render: function() {
var commentNodes = this.props.data.map(function(comment) {
return (
<Comment author={comment.author} key={comment.id}>
{comment.text}
</Comment>
);
});
return (
<div className="commentList">
{commentNodes}
</div>
);
}
});
就是这样！
从服务器获取数据
让我们用一些来自服务器的动态数据替换硬编码的数据。我们将移除数据的prop，用获取数据的URL来替换它：
// tutorial11.js
ReactDOM.render(
<CommentBox url="/api/comments" />,
document.getElementById('content')
);
这个组件不同于和前面的组件，因为它必须重新渲染自己。该组件将不会有任何数据，直到请求从服务器返回，此时该组件或许需要渲染一些新的评论。
注意： 此代码在这个阶段不会工作。
Reactive state
迄今为止,基于它自己的props，每个组件都渲染了自己一次。props 是不可变的：它们从父级传来并被父级“拥有”。为了实现交互，我们给组件引进了可变的 state。this.state 是组件私有的，可以通过调用 this.setState() 改变它。每当state更新，组件就重新渲染自己。
render() 方法被声明为一个带有 this.props 和 this.state 的函数。框架保证了 UI 总是与输入一致。
当服务器获取数据时，我们将会改变我们已有的评论数据。让我们给 CommentBox 组件添加一组评论数据作为它的状态：
// tutorial12.js
var CommentBox = React.createClass({
getInitialState: function() {
return {data: []};
},
render: function() {
return (
<div className="commentBox">
<h1>Comments</h1>
<CommentList data={this.state.data} />
<CommentForm />
</div>
);
}
});
getInitialState() 在生命周期里只执行一次，并设置组件的初始状态。
