+
+
+所有的组件都必须实现 render 方法，我们先回顾一下模板引擎，基本都是返回字符串，然后在数据填充进去，替换掉里面的变量，然后在把这段 HTML 片段 append 到 document 中。而 React 的 render 方法不是返回字符串， 是返回 view 的描述，是一颗 React 组件树，这棵树最终将会渲染成 HTML，render 方法是一个 pure function，就是说只负责纯粹的渲染逻辑，不涉及具体的业务逻辑和其他其他事情，这样可以使服务器端渲染更加切实可行，也使组件更容易被理解。
+
+添加组件属性，有一个地方需要注意，就是 class 属性需要写成 className ，for 属性需要写成 htmlFor ，这是因为 class 和 for 是 JavaScript 的保留字。
+
+## 获取真实的DOM节点
+组件并不是真实的 DOM 节点，而是存在于内存之中的一种数据结构，叫做虚拟 DOM （virtual DOM）。只有当它插入文档以后，才会变成真实的 DOM 。根据 React 的设计，所有的 DOM 变动，都先在虚拟 DOM 上发生，然后再将实际发生变动的部分，反映在真实 DOM上，这种算法叫做 DOM diff ，它可以极大提高网页的性能表现。
+但是，有时需要从组件获取真实 DOM 的节点，这时就要用到 ref 属性。
+
+ var Greeting = React.createClass({
+ handleClick: function() {
+ alert('Greeting, ' + this.refs.username.value);
+ },
+ render: function() {
+ return (
+
+ Details For
+ 8888
+
+
+
+
+
+ );
+ }
+ });
+
+ ReactDOM.render(
+
+ {
+ this.state.list.map(function (item, i) {
+ return
+ )
+ }
+ });
+ ReactDOM.render(
+ {item}
+ })
+ }
+
+
+ )
+ }
+ });
+
+ var CommentBox = React.createClass({
+ render: function() {
+ return (
+
+ 评论
+
+ )
+ }
+ });
+
+具体到每个组件，Header 和 Story 都比较简单，只是呈现数据。
+
+ var Header = React.createClass({
+ getDefaultProps: function() {
+ return {
+ data: {}
+ };
+ },
+ render: function() {
+ return (
+ {this.props.data.name}
+导演：{this.props.data.director}
+ {this.props.data}
+ )
+ }
+ });
+
+Poster 稍微复杂一点。
+
+ var Poster = React.createClass({
+ getDefaultProps: function() {
+ return {
+ data: []
+ };
+ },
+ render: function() {
+ return
+ {
+ this.props.data.map(function(item, index){
+ return
+ 
+
+ })
+ }
+
+ }
+ });
+
+评论列表和评论框也会复杂一点。
+
+ var CommentList = React.createClass({
+ render: function() {
+ return (
+
+ {this.props.data.map(function(item, i) {
+ return (
+
+ )
+ }
+ });
+
+ var CommentForm = React.createClass({
+ onClick: function(e) {
+ e.preventDefault();
+ var comment = this.refs.commentInput.value;
+ this.props.onSubmit(comment);
+ this.refs.commentInput.value = '';
+ },
+ render: function() {
+ return (
+
+ {item}
+
+ )
+ })}
+
+
+ )
+ }
+ });
+
+完整的代码在[这里](https://github.com/ingf/React-Tutorial/blob/master/level1/src/pages/details/index.jsx)。
+
+通过这种方式，每个组件的UI和逻辑都定义在组件内部，和外部完全通过 API 来交互，通过组合的方式来实现复杂的功能。React 认为一个组件应该具有如下特征：
+
+- 可组合（Composeable）：一个组件易于和其它组件一起使用，或者嵌套在另一个组件内部。如果一个组件内部创建了另一个组件，那么说父组件拥有（own）它创建的子组件，通过这个特性，一个复杂的 UI 可以拆分成多个简单的 UI 组件；
+- 可重用（Reusable）：每个组件都是具有独立功能的，它可以被使用在多个 UI 场景；
+- 可维护（Maintainable）：每个小的组件仅仅包含自身的逻辑，更容易被理解和维护；
+- 可测试（Testable）：因为每个组件都是独立的，那么对于各个组件分别测试显然要比对于整个 UI 进行测试容易的多。
+
+React 是一个全新思路的前端 UI 框架，它完全接管了 UI 开发中最为复杂的局部更新部分，擅长在在复杂场景下保证高性能；同时，它引入了基于组件的开发思想，从另一个角度来重新审视 UI 的构成。通过这种方法，不仅能够提高开发效率，而且可以让代码更容易理解，维护和测试。
+
+## 工具
+
+[React Developer Tools](https://github.com/facebook/react-devtools)
+
+## 编写可预测，符合习惯的代码
+
+所谓可预测（predictable），即容易理解的代码。我们上面已经说了很多了，为什么这里还要加一节呢？其实我是想问大家一个问题，大家觉得 React 最大的价值究竟什么？
+
+高性能虚拟 DOM？
+JSX？
+封装过的事件机制？
+调试机制？
+
+尽管这些都足以重要，但是 Tom Occhino 指出 React 最有价值的是声明式的，直观的编程方式。
+
+软件工程向来不提倡高深莫测的技巧、复杂的算法去编程，相反，如何写出可理解可阅读可预测的代码才是质量和效率的关键。
+
+前面这种绑定事件的方式是不是很熟悉，因为上世纪90年代就是这么做的：
+
+
+
+顺便我们在看一下 jQuery 时代的做法：
+
+ foo
+
+ $('#foo').click(function(e) {alert('你点了我')});
+
+我们在看看 React 的实现：
+
+
+
+是不是很简单，返璞归真，任何以为了解过前端的同学都能看懂这段代码，同时也能写出这样的代码！UNIX 的发明者里奇设定了 UNIX 的设计原则为 Keep it simple & stupid（大道至简）。
+
+## 将来
+
+至此，React 的基本点都已经提到了，但是社区还有大量的知识点需要学习，比如react-router, react-hot-reload, Redux 或者 Flux 的 N 种实现，CSS in JS 及其 N 种实现，Immutable-js，webpack...
+
+虽然有点多，但是每个都很好玩，真的。
diff --git a/src/images/avatars/inf.png b/src/images/avatars/inf.png
new file mode 100644
index 0000000..ed2135f
Binary files /dev/null and b/src/images/avatars/inf.png differ
+
+
+
+ 提 交
+
+