我們的代碼還沒有任何輸出，因為還沒有讓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來渲染文檔。
還不錯，不過這才剛剛開始……
