查看“React初学者教程”的源代码

==React 简介==

===老式的多页设计===

如果你几年前做过这种应用程序，可能会采用包含多个单页面的方式。

在多页设计方式下，对于大多数改变页面显示的行为，Web 应用会导航到一个完全不同的页面。用户会看到原页面被销毁，然后出来一个新页面，这种用户体验很不尽人意。

===新派的单页应用===

现代的应用程序趋向于采用一种称为单页应用（SPA）的模式。这种模式下，我们不需要导航到不同的页面，甚至不需要重新加载一个页面。应用的不同视图被加载和卸载到同一页面上。

===用来创建真正可组合 UI 的 API===

React 鼓励我们将视觉元素分为更小的组件，而不是一整大块。

http://www.w3cplus.com/sites/default/files/blogs/2016/1611/react_components_composable_72.png

===完全在 JavaScript 中定义 UI===

虽然这听起来有点不可理喻，（我们知道，在　Web 标准年代，崇尚的是结构、表现形式和行为分离，也就是 UI 的结构、表现形式和行为部分分别分离到 HTML、CSS 和 JavaScript 三个文件中。完全在 JavaScript 中定义 UI，岂不是跟 Web 标准背道而驰么？）。但是且听我说完。如果像过去一样采用 HTML 模板的方式定义 UI，除了古怪的语法外，还有另一个主要问题。在模板中，除了只是显示数据，我们被限制做很多事情。例如，如果你想根据特定条件，选择显示哪一块 UI，就不得不在应用中到处写 JavaScript，或者用一些古怪的框架特有的模板语法，才能让它起作用。

而 React 实现的方式就很优雅。UI 完全在 JavaScript 中定义，我们可以利用 JavaScript 提供的强大功能在模板内做各种事情。我们受到的限制只是 JavaScript 支持不支持，而不是模板框架的限制。

==创建第一个 React 应用==

React 的学习曲线相当陡峭，里面大大小小的障碍不少。

===处理 JSX===

除了标准的 HTML、CSS 和 JavaScript 外，很多 React 代码都会用 JSX 编写。JSX 是一门可以让我们很容易混合 JavaScript 和 类似 HTML 的标记，来定义用户界面元素以及其功能的语言。这听起来很酷，但是问题是：浏览器是不知道如何处理 JSX的。

要用 React 创建 Web 应用，我们需要一种方式采用 JSX，并将它转换为浏览器可以理解的标准 JavaScript，如果不这么做，React 应用就无法运行。目前将 JSX 转换为 JavaScript 有两种解决方案：

* 围绕 Node 以及一些构建工具（比如 Webpack）来设置开发环境。
* 让浏览器在运行时自动将 JSX 转换为 JavaScript。

在 React 入门阶段，我们打算用第二种方案。那么为什么我们不一直用第二种方案呢？原因是，浏览器每次要花时间把 JSX 翻译为 JS，这对性能是有影响的。在学习如何使用 React 时，这是完全可以接受的，但是在部署应用程序实际使用时，这肯定是完全不能接受的。所以后面我们会在已经熟悉了 React 后，再用第一解决方案，即设置开发环境。

===上手 React===

首先，我们需要一个空白 HTML 页面作为起点。

<source lang="javascript">
<!DOCTYPE html>
<html>
<head><title>React! React! React!</title>
    <script src="https://unpkg.com/react@15.3.2/dist/react.js"></script>
    <script src="https://unpkg.com/react-dom@15.3.2/dist/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
</head>
<body>
<script></script>
</body>
</html>
</source>

第一行引入 核心 React 库，第二行引入 React DOM 库。如果没有这两个库，我们是没法创建 React 应用的。然后，我们还需要在两个 script 标记下添加对 Babel JavaScript 编译器的引用。

现在如果马上预览页面，我们会注意到页面是空的，什么都看不到。没关系，下面我们就要让它显示点什么。

===显示你的姓名===

你要做的第一件事情就是在屏幕上显示你的姓名。实现的方式是用 render 方法。在 script 标记内，添加如下代码：

<source lang="html">
<script type="text/babel">
ReactDOM.render(
    <h1>Sherlock Holmes</h1>,
    document.body
);
</script>
</html>

此时，不要担心这几行代码到底是什么意思。我们的目标是先在屏幕上显示点什么，不久之后我们就会搞清楚这几行代码到底在做什么。现在，在预览页面看看发生了什么之前，我们需要给这个 script 块标注一下，这样 babel 才能可以发挥其魔力。实现方法是将 script 标记的 type 属性设置为 text/babel：


之后，我们就可以在浏览器预览了。我们会看到单词 'Sherlock Holmes' 在屏幕上用很大的字符打印出来。恭喜！你刚用 React 创建一个 APP。

==React 中的组件==

==在 React 中设置样式==

==创建复杂的组件==

==传递属性==

==深入JSX==

==处理状态==

==从数据到 UI==

==React 中的事件==

==组件生命周期==

==用 React Router 创建单页应用==

==用 React 常见一个简单的 Todo List 应用==

==在 React 中访问 DOM 元素==

==设置 React 开发环境==