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

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

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

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

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

今天要聊的网格系统不是CSS Grid Layout，而要聊的是类似960gs。到止前为止类似于960gs的网格系统成熟的系统有很多套了。

我本来觉得应该从介绍CSS中引入变量的用途开始讲起，但事实上，很多流行的CSS预处理/后处理程序已经做了很好的诠释。当然，手动地去搜索或者查找/替换依然能满足你的需求，但这就像是不在JS中使用变量一样--很痛苦。事实上，CSS变量的动态性和作用域能够为你的实践和应用提供更加强大的能力--你可以非常高效的读取、设置和更新这些变量！同时，就像Webkit的小伙伴们在审查工具中做的那样，你也可以避免在你的代码中出现重复的代码片段（冗余）。

昨天我在An Event Apart上看了@Rachel Andrew分享的CSS Grid Layout。Grid是CSS一个强大的特性，而且离到来的一天越来越近，它将是一个强大的Web布局模式。当然，那一天还没到，到目前没有稳定的浏览器支持Grid规范。

最近，我不得不在一个网站大量使用倾斜角度作为其设计指南的一部分。倾斜角，是指一个区域它的顶部或底部边缘不是完全水平而是倾斜的。实现这种效果有很多种方法。例如可以将base64编码的图片应用为背景，但这会使得它很难自定义（颜色，角度等）。另一种方法是倾斜或旋转绝对定位的伪元素，然而倾斜变换是我最不愿意处理的一件事。

“Card”这样的UI组件在现在的Web中经常可见，但我们制作这方面的UI组件方式仍然受到一定的限制。直到现在，通过CSS Grid和Flexbox的组合，可以使卡整齐对齐，响应性更好，并适应其中的内容。接下来看看我们是如何制作的。