React 可以让我们把要显示的东西分割成不同的组件，然后可以再把这些组件组合到一块儿去用。比如一个评论功能，可以定义成几个组件，最外面是一个评论的包装，这外包装组件可以叫它 CommentBox .. 包装里面是一个评论列表，它也可以是单独的一个组件，起个名字可以是 CommentList .. 评论列表里是每个评论，这些评论又是一个组件，这个组件可以叫它 Comment ..

另外添加评论用的这个表单也可以单独定义成一个组件 .. 名字可以是 CommentForm ..

下面我们就去创建一个组件 .. 我们把每个组件单独放到一个 js 文件里面 .. 在 app 这个目录的下面，添加一个 js 文件，把它放到 comment 这个目录的下面，文字的名字就是组件的名字 .. CommentBox.js ..

文件的头部用一个 'use strict'; 然后再导入 react 模块 .. 导入进来可以叫它 React ..

import React from 'react';

定义的组件可以是一个类，先用一个 class .. 然后是组件的名字 .. CommentBox .. 让它去继承 React 的 Component ..

class CommentBox extends React.Component

在这个类里面可以去定义这个组件的一些功能，至少你要添加一个 render() 方法，在这里去定义组件要显示的东西 .. 这个方法返回的就是要显示的东西 .. 在这个 return 的后面添加一组括号 .. 这样你可以在多行去定义要显示的东西 .. 这些要显示的东西可以直接使用类似 html 的形式 ..

一组 div 标签 .. 在上面你可以添加一些其它的属性 .. 一般这些属性跟在普通的 html 上是一样的 .. 不过有几个特殊的例子 .. 比如你要在这个标签上添加一个 class .. 因为 class 是 javascript 保留的关键词 .. 所以这里我们可以用一个 className 来表示在 html 上的 class .. 再设置一下这个属性的具体的值 .. ui comments

这组 div 标签里面，再添加一个 h1 标签 .. 添加点文字 .. 这里我们定义的要显示的东西用的是 jsx 的格式 .. 它会被转换成普通的 javascript .. 后面我们会继续介绍 jsx .. 在这个评论的下面，再添加一个 div .. 上面加上 ui 还有 divier 这两个类 ..

现在你看到的就是一个最基本的 React 组件 .. 在文件的底部可以把它作为这个模块默认的东西导出来 .. 这样在其它的地方我们可以导入这个组件的功能 ..

export { CommentBox as default };