简单易懂的React魔法(04):用es6语法引入react组件

我们的代码还没有任何输出，因为还没有让index.js包含我们的Detail.js。修改index.js包含以下代码：

src/index.js

import React from 'react';
import ReactDOM from 'react-dom';

import Detail from './pages/Detail';

ReactDOM.render(
    ,
    document.getElementById('app')
);

保存index.js和detail.js，回到浏览器，会看到页面上的“This is React rendering HTML !“。
在我介绍这些代码是做什么的之前，你可以试着回到detail.js修改它的render方法，使它输出 “This is JSX being converted to HTML!” 如果你这么做了，保存之后，你会发现浏览器自动更新了文字。

不需要手动重新运行webpack来更新修改，webpack dev server 会自动检查这些修改后重新渲染页面，这被称为热加载(hot loading)。希望你现在明白了最开始的时候为什么要花费时间在配置webpack上。如果你发现浏览器没刷新，那你自己手动刷新一下看看。
现在我们解释一下index.js里每行代码的用处:

• import React from ‘react’引入react，之前你应该看到过。
• import ReactDOM from ‘react-dom’;这行是新的，这是react操纵dom的工具。
• import Detail from ‘./pages/Detail’把detail.js里的组件包含到app中。
• ReactDOM.render()是开始渲染我们整个app的方法，需要连个参数，JSX元素和渲染它的地方。
• 是我们需要渲染的元素，作为render的第一个参数，这也是我们Detail组件的名字。
• document.getElementById(‘app’) 是render的第二个参数。作为react组件的根节点。在这个例子里，我们render在id为app的div中，这个div可以在index.html里找到。

当我们的应用被渲染，会被自动转换为我们在Detail.js里创建的组件。调用的是detail的render方法。

现在，在我们继续之前你可能有些问题。我来回答一些：

为什么Detail.js是大写的？

这不是必须的，但是我们习惯这样写，因为react定义组件必须大写首字母。如果在detail.js里声明Detail组件可能会混淆。

JSX怎么知道的意思？

我们在Detail.js里不声明组件的名称，而是在它被引入的时候起名字。如果你这样引入import Bob from './pages/Detail'那之后就可以用表示这个组件，但是最好别这么用，那样会很混乱。

我能放很多组件在Detail.js里么？

你要想这么做也可以，不过这样也很混乱，最好还是一个文件里面声明一个组件。

我必须渲染组件里的东西么？

不是必须的，不过react确实需要你渲染一些东西。等你react用的多了你就会了解。

总的来说，到目前为止，你已经学会了：

1. 如何安装webpack，babel和react来用es6语法开发应用。
2. 如何创建基本react组件并放入应用。
3. 如何写简单的JSX来渲染文档。

还不错，不过这才刚刚开始……