列表在网站开发和页面设计的时候，会被多次使用。列表不仅仅用于以排列的方式展示数据信息，也会被用来处理页面的布局，在完成这个快速教程后，我会将关注点立刻转向 React Native 移动应用开发，那么在移动 App 的布局中，到处都能看到列表的存在，打开微信后立刻映入眼帘的就是一个大大的列表，所以它的应用非常广泛。

从这期教程开始，默认就不再提示创建文件夹，创建 js 和 css 文件了。这次创建的一个组件起名叫做 List。

Section 1：在组件内渲染列表DOM

index.js

在最外部的 index.js 文件里，在将 List 组件渲染进 DOM 之前，定义了一个字典列表作为外部的数据，然后把这个数据传递进组件 List 中。那么在组件内部，就可以通过 props 来读取到列表的内容了。这种场景在很多时候都可能会碰到。

List.js

Section 2：分析

在组件的构造方法里，通过 state 创建了一个组件自己内部的列表，内容是三个前端框架的名称。

这次的重点在 render 方法里。首先大家应该明确 JavaScript 的 map 函数的原理。在 render 中，首先就是使用 map 函数遍历了 skills 的每一个元素，然后用元素的内容构成了一个 <li> 标签。注意在 <li> 里必须设定一个 key 属性，否则 React 会警告。

另外一段代码，就是利用 props 接收到组件外部传递进来的用户信息，用 map 函数遍历后，每一个用户的信息都是一个字典，那么就 利用 <label> 和 <div> 构建出若干个复杂的DOM。其实 React，或者说 JavaScript 是灵活的，你甚至可以在 render 里现场就开始构建 DOM 列表，但是我建议不要这么做，因为那样会使得代码很混乱，可读性、可维护性会变得非常差，可能还会遭到同事的殴打！所以，将构建好的 DOM 列表保存进一个变量里，比如这里的 skillsList 和 users。

最后，把构建好的 DOM 列表的变量放进 return 里面的大括号即可。