你可能已经注意到，在前面的教程中我们用到很多 JSX。但是我们确实还没有认真看看 JSX 到底是什么。它实际上是如何工作的呢？为什么我们不就把它叫 HTML 呢？它到底有哪些怪癖？在本教程中，我们将回答所有这些问题。我们将做一些严肃的回溯（以及一些前溯），来深入看看为了探险，我们需要知道有关的 JSX 的什么。

到目前为止，我们已经创建的组件都是无状态的（stateless）。它们有从它们的父组件传递进来的属性（亦称 props），但是一旦组件活跃起来，就没有什么能改变它们。一旦属性被设置了，就被当作是不可修变的（immutable）。对于很多交互场景来说，你肯定不想这样子。在一些用户交互发生，或者一些数据从服务器或者其它地方返回过来时，你想能改变组件的外观。

在创建应用时，术语 props、state、组件、JSX 标记、render 方法以及其它 React 主义也许是你脑袋中最后考虑的事情。大部分时间，你是处理 JSON 对象、数组以及其它数据结构形式的数据，这些数据与 React 或者界面无关。跨越数据和最终看到的结果之间的鸿沟可能是令人沮丧的！但是不要担心。本文会通过将你将会遇到的一些常见场景都过一遍，来帮助减少这些令人沮丧的时刻。

迄今为止，我们所有的示例都是只在页面加载时执行。你可能会猜到，这是不正常的。在很多应用中，特别是重 UI 类型的应用中，应用程序要做的很多事情只是对某种事情的响应。这里，某种事情可能是被鼠标点击、按键、窗口缩放、或者其它手势操作以及交互。而让所有这一切变得可能的粘合剂是事件。

在开始，我们以一个很简单的视图组件以及他们要做什么开始。随着我们对 React 更多，做了更酷以及更复杂的事情，结果发现组件并非那么简单。它们帮助处理属性、状态、事件，并且经常负责其它组件的幸福。跟踪组件做的所有事情有时可能很难。

现在我们已经熟悉了 React 的基础知识，该提升几个档次了。下面我们要用 React 创建一个单页应用程序（即 SPA）。如同我们在 React 介绍中所言，单页应用程序与传统的多页应用程序是不同的。最大的不同之处在于在单页应用程序中导航是不会进入到一个完全新的页面。单页应用程序中的页面（通常称为视图）通常是在相同页面本身内联加载。

概述：通过学习如何创建经典的 Todo List 应用，将所有学过的 React 技巧投入到实战中。如果说创建 “Hello, World!” 示例是庆祝你开始涉足 React，那么创建一个经典的 Todo List 应用是庆祝你接近掌握 React！在本教程中，我们要把已经学习过的很多概念和技术综合在一起，创建一个如下的应用：

有时我们需要直接访问 HTML 元素上的属性和方法。在 React 的缤纷世界里，JSX 代表纯粹的标记，那么为什么你会想要直接处理可怕的 HTML 呢？因为你会发现，很多时候直接通过 JavaScript DOM API 处理 HTML 元素，比用 React 的方式更简单。

概述：学习如何配置 Node、Babel 和 Webpack 来高效创建 React 应用。最后要学习的是如何设置创建 React 应用的开发环境。回顾一下我们在学习创建第一个 React 应用程序的时候，讨论这种方法时说过：这种方法的负面是性能。因为浏览器除了要加载页面以外，还得把 JSX 转换为实际的 JavaScript。这个转换过程很耗时，最好是在开发期间就转换了。如果应用程序的每个用户都要为这个性能买单，这就不好了。

这是讲CSS模块化系列文章的最后一篇，我将探索如何通过Webpack来建一个静态的React网站。这个静态网站将包含模板：一个主页和一个包含几个React组件的页面。我们来看看他们是怎么运作的。之前的文章中我们用Webpack快速搭建了一个工程来展示了所有依赖是如何被导入到一个文件的以及在打包过程中如何将一个唯一的classname同时在css和html中生成the basics of React。在之前的演示中，我们知道通过js来渲染我们标签，但是我们不清楚如何构建我们项目。在这篇文章中我们将用一个更真实的例子演示如何通过我们新学的Webpack知识来构建我们的项目。我把之前演示的代码放到Github上了 css-modules-react ，你可以通过这个代码开始下面的例子。