在src文件夾下創建新文件夾命名為pages，pages下創建Detail.js。當開發React的時候有些開發者喜歡用后綴名.jsx有些還是用js，這其實不要緊。想用哪個就用哪個。話雖如此，如果這是你第一次使用react，那你還是用js后綴吧。
在Detail.js里，我們會用react渲染一些簡單的東西，讓你看看為什么我們早些時候需要配置那些webpack 和 npm。編輯Detail.js使它包含以下代碼：
src/pages/Detail.js
import React from 'react';
class Detail extends React.Component {
render() {
return <p>This is React rendering HTML!</p>;
}
}
export default Detail;
這7行es6代碼，一句是空的，兩句是括號，應該沒多大問題。有趣的是這段代碼在js中使用了HTML，這樣做是合法的，同樣也能運行。這是react很多特性中的一個，叫做JSX，當你使用webpack打包的時候，這段代碼會自動轉換為javascript。
jsx和html很像，不過有幾處不同，我們會在用到的時候講到。下面我們來看一下上面這段代碼重要的幾句：
*import React from ‘react’加載了react庫，這是我們項目的核心。
-
class Detail extends React.Component {聲明了一個新的react組件。React組件可以像一個頁面那么大也可以像一個html標簽那么小，很靈活。 -
render() {render方法會在組件需要顯示出來時被react調用，它需要返回html標簽。 - 剩下的只是大括號用來結束render和組件class。
-
export default Detail;export關鍵字使這個組件有一個接口暴露在外以供應用調用，default表示這個接口是這個class唯一會暴露的接口。
這個例子把所有的jsx寫在了一行，不過我們很快就會寫很多行jsx進去了，多行jsx會有一個特性你需要知道，jsx會自動處理行與行之間的空格，所以如果你按照例子走，但是發現有些行與行中間的空格不見了，你可以試著把空格寫在一行。
寫完上面的代碼后，我們并沒有得到什么有意義的結果，下一章我們來寫……
