处理属性有令人沮丧的一面，在前一个教程中我们已经看到了一点。在只处理一层组件时，将属性从一个组件传递到另一个很简单。但是如果你想将一个属性在多层组件之间传递，事情就开始变得复杂了。事情变得复杂从来不是一件好事情，所以在本教程中，我们来看看我们怎么做才能让在多层组件之间传递属性变得容易。

简介：通过学习如何识别和创建依赖于其它组件的组件，从而轻松创建复杂 UI。即根据组件可组合性，来创建复杂的组件。在前一教程中，我们学习了组件以及组件可以做的很棒的一些事情。我们知道组件是主要的方式，React 允许我们的界面元素像可重用的砖块一样，组件包含自己要运行所需要的所有 HTML、JavaScript 和样式。除了可重用性外，组件还带来另一个主要的优点：允许可组合性。我们可以组合组件来创建更复杂的组件。

长期以来，我们都是用 CSS 格式化 HTML 内容。用 CSS，可以很好地分离内容和表现形式。CSS 的选择器语法给我们很大的灵活性，来选择哪个要格式化，哪个会略过。你甚至找不到太多的问题来憎恨 CSS 的层叠。好了，不要告诉 React 这些。React不会积极地憎恨 CSS，但是它格式化内容时，有一个不同的视角。正如迄今为止我们所看到的，React 的核心思想之一是让应用程序的界面部分可以自包含和重用。这就是为什么组成界面的 HTML 元素和 JavaScript 装到同一个称为组件的桶中的原因。在上一个教程中我们已经品尝过组件。

组件是让 React 变得美好的事情之一，它是定义人们在使用应用程序时所看到的视觉和交互的主要方式之一。在开发期间，从 React 项目的角度看，就不那么动人了。这个应用的视觉的几乎每一个部分都被封装在在一个称为组件的自包含模块内

通过前面一章的学习，我们已经了解了有关 React 的基本信息，以及它是如何帮助我们轻松创建即使是最复杂的用户界面。但是对于 React 提供的所有精彩来说，刚开始学习它可不是最简单的事情。React 的学习曲线相当陡峭，里面大大小小的障碍不少。

今天的 Web 应用程序除了外观比过去更好看以外，应用程序的架构和创建方式已经和过去有很大的不同。这是一个简单的商品目录浏览应用程序，它和这种类型的其它应用程序一样，通常包含一个主页、一个搜索结果页、一个详情页等等。

由于 React 加持了虚拟 DOM 等诸多特性，所以在 React 上实现常规的动画效果有一些特别之处。本文不会深入探讨 React 对动画的处理逻辑，只会简单地演示如何在 React 创建动画效果，因为我也没有做过线上的 React 动画实例，谨以此文抛砖引玉，算是最基础的入门了解。

写 React 组件的时候，应该使用 React.createClass 语法还是 ES6 的 class 语法？或两者都不？这篇文章解释了两者之间的一些差异，希望能帮你做决定。用 ES5 或 ES6 都可以完美地写 React 组件。使用 JSX 意味着你已经需要一个「构建」步骤，也就是 Babel 将 JSX 转译(transpile)为 React.createElement 调用。很多人充分利用这点， 仅仅向 Babel 的转译列表中添加一项 es2015，就可以自由使用 ES6 的全部特性。

对于初学React的同学而言，这并不是一件易事。就拿我自己来说，都不知道从何下手，应该如何去学习才能开始使用React。就算你对React不陌生，学习React也常会碰到一些瓶颈。比如说新颖的概念、开发工具的使用、抽象的名词、快速变化的生态环境等等。也就是说，一旦开始学习React，你会发觉要学的东西越来越多，甚至可能还没开始碰到React就被这些东西给吓跑了(特别是对于初学者，听到这些东东就傻眼了)。

对于没有使用过React的同学总觉得它复杂，但在现实中，使用React并不困难。就我个人而言，学习React应该基于创建项目特定类型的设置细节之上(比如Webpack、Redux、ES6、JSX、Babel等)，而不是一下子就去忙于理解所有的设置项。在这篇文章中列出了有关于React方面的七种设置。大部分的设置我都将会向大家展示，但总的来说，这并不困难。接下来的内容从简单到复杂，介绍React的设置。