组件是让 React 变得美好的事情之一，它是定义人们在使用应用程序时所看到的视觉和交互的主要方式之一。假如我们要完成的 app 是下面这个样子：
这是完成了的界面。在开发期间，从 React 项目的角度看，就不那么动人了。这个应用的视觉的几乎每一个部分都被封装在在一个称为组件的自包含模块内。这里为了突出 “几乎每一个” 的含义，我们来看看如下的图：
每个虚线代表一个独立的组件，该组件负责视觉界面以及交互。不要让这吓到你。虽然它看起来很复杂，但是很快你会看到，一旦我们有机会用组件的方式开发，一切就会开始变得很有意义。
> 原文地址：https://www.kirupa.com/react/building_your_first_react_app.htm
通过前面一章的学习，我们已经了解了有关 React 的基本信息，以及它是如何帮助我们轻松创建即使是最复杂的用户界面。但是对于 React 提供的所有精彩来说，刚开始学习它可不是最简单的事情。React 的学习曲线相当陡峭，里面大大小小的障碍不少。
本章会从创建一个简单的 React 应用开始。在学习中，会直接遇到一些障碍，有些障碍我们现在姑且略过。在本教程末尾，我们不仅可以创建一些可以骄傲地展示给朋友和家人看的东西，还可以为后面的教程中 深入 React 打下良好的基础。
今天的 Web 应用程序除了外观比过去更好看以外，应用程序的架构和创建方式已经和过去有很大的不同。为突出这点，我们来看看如下的应用：
这是一个简单的商品目录浏览应用程序，它和这种类型的其它应用程序一样，通常包含一个主页、一个搜索结果页、一个详情页等等。
以下教程翻译自微软印裔资深程序经理 Kirupa Chinnathambi 的博客，个人认为是最浅显易懂的 React 入门教程之一，所以就花时间翻译出来了。我们在实际教学中也用此教程入门，效果还不错。推荐 React 初学者用本教程入门。
12：在 React 中用 React Router 创建单页应用
13：用 React 创建一个简单的 Todo List 应用
大编辑 - 李松峰 - 对，就是那个《JavaScript 高级程序设计》第三版的译者。