我们的代码还没有任何输出，因为还没有让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(
<Detail />,
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元素和渲染它的地方。 -
<Detail />是我们需要渲染的元素，作为render的第一个参数，这也是我们Detail组件的名字。 -
document.getElementById(‘app’)是render的第二个参数。作为react组件的根节点。在这个例子里，我们render在id为app的div中，这个div可以在index.html里找到。
当我们的应用被渲染，<Detail />会被自动转换为我们在Detail.js里创建的组件。调用的是detail的render方法。
现在，在我们继续之前你可能有些问题。我来回答一些：
为什么Detail.js是大写的？
这不是必须的，但是我们习惯这样写，因为react定义组件必须大写首字母。如果在detail.js里声明Detail组件可能会混淆。
JSX怎么知道<Detail />的意思？
我们在Detail.js里不声明组件的名称，而是在它被引入的时候起名字。如果你这样引入import Bob from './pages/Detail'那之后就可以用<Bob />表示这个组件，但是最好别这么用，那样会很混乱。
我能放很多组件在Detail.js里么？
你要想这么做也可以，不过这样也很混乱，最好还是一个文件里面声明一个组件。
我必须渲染组件里的东西么？
不是必须的，不过react确实需要你渲染一些东西。等你react用的多了你就会了解。
总的来说，到目前为止，你已经学会了：
- 如何安装webpack，babel和react来用es6语法开发应用。
- 如何创建基本react组件并放入应用。
- 如何写简单的JSX来渲染文档。
还不错，不过这才刚刚开始……
网友评论