React入门（构建一个评论系统）
我们将构建一个简单但真实的博客评论框,一个基本的版本提供的实时评论类似于Disqus，LiveFyre或Facebook评论。
这个教程会提供
- 评论的所有视图
- 一个可以提交的评论框
- 后端数据的钩子
以及其它优雅的特性
- 比较合理的评论是这样的：评论在保存到后台数据库之前在列表里显示，会让人又很快的感觉，
- 实时更新：其它用户的评论可以实时被取出展示
- markdonw格式：用户可以使用markdown格式来评论
查看源码
React 教程源码 http://git.oschina.net/leinov/myreact
服务端
为了完成这个教程，我们需要服务端的配合，这个服务端是一个纯粹的可获取保存好的数据的API，为了更容易的实现，我们创建一个很简单的几行脚本但已足够支持，你可以下载源码查看，
这个服务端会使用json文件当作数据库，你可以把这个json文件当作正式的API使用，当你启动后段服务，它会支持我们的API以及静态页面
开始
在这个教程里，我们会讲解的尽量简单，包含在上面讨论的服务器包是我们工作在一个HTML文件，用你常用的编辑器打开public/index.html 你会看到如下代码
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>React Tutorial</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.5/marked.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>在余下的教程里，我们会编写自己的javascript代码，我们没使用任何高端的实时加载器，所以你需要在保存代码后手动刷新你的浏览器查看效果，然后在浏览器里打开http:localhost:3000(启动node服务后)
注意：这里是用jquery是因为在获取数据的时候使用ajax更方便 非react必须依赖
你的第一个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语法 简单的说就说在javascript中使用xml语法让javascript编写的标签更具语意化JSX Syntax article
我们使用javascript对象的React.createClass() 创建来一个新的React组件的一些方法，这些方法中最重要的一个就是render方法，它会返回一个React组件树最终会返回html
< div >标签不是实际的DOM节点;它们实例REact div组件。你可以认为这些是react可以处理的标记或片段。React是安全的。我们不生成HTML字符串XSS保护是默认的
你不需要返回基本的HTML标签 你可以返回组件树结构， 这就是React组件：可维护的前端组件
ReactDOM.render() 实利化根组件，