在src文件夾下創(chuàng)建新文件夾命名為pages稚疹，pages下創(chuàng)建Detail.js挽荠。當(dāng)開發(fā)React的時(shí)候有些開發(fā)者喜歡用后綴名.jsx有些還是用js香浩，這其實(shí)不要緊。想用哪個(gè)就用哪個(gè)不撑。話雖如此文兢，如果這是你第一次使用react，那你還是用js后綴吧燎孟。
在Detail.js里禽作，我們會(huì)用react渲染一些簡(jiǎn)單的東西，讓你看看為什么我們?cè)缧r(shí)候需要配置那些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代碼，一句是空的，兩句是括號(hào)爆侣，應(yīng)該沒(méi)多大問(wèn)題萍程。有趣的是這段代碼在js中使用了HTML，這樣做是合法的兔仰，同樣也能運(yùn)行茫负。這是react很多特性中的一個(gè)，叫做JSX乎赴，當(dāng)你使用webpack打包的時(shí)候忍法，這段代碼會(huì)自動(dòng)轉(zhuǎn)換為javascript。
jsx和html很像榕吼，不過(guò)有幾處不同饿序，我們會(huì)在用到的時(shí)候講到。下面我們來(lái)看一下上面這段代碼重要的幾句：
*import React from ‘react’加載了react庫(kù)羹蚣，這是我們項(xiàng)目的核心原探。
-
class Detail extends React.Component {聲明了一個(gè)新的react組件。React組件可以像一個(gè)頁(yè)面那么大也可以像一個(gè)html標(biāo)簽?zāi)敲葱⊥缢兀莒`活咽弦。 -
render() {render方法會(huì)在組件需要顯示出來(lái)時(shí)被react調(diào)用，它需要返回html標(biāo)簽胁出。 - 剩下的只是大括號(hào)用來(lái)結(jié)束render和組件class型型。
-
export default Detail;export關(guān)鍵字使這個(gè)組件有一個(gè)接口暴露在外以供應(yīng)用調(diào)用，default表示這個(gè)接口是這個(gè)class唯一會(huì)暴露的接口全蝶。
這個(gè)例子把所有的jsx寫在了一行闹蒜，不過(guò)我們很快就會(huì)寫很多行jsx進(jìn)去了，多行jsx會(huì)有一個(gè)特性你需要知道裸诽，jsx會(huì)自動(dòng)處理行與行之間的空格嫂用，所以如果你按照例子走，但是發(fā)現(xiàn)有些行與行中間的空格不見(jiàn)了丈冬，你可以試著把空格寫在一行嘱函。
寫完上面的代碼后，我們并沒(méi)有得到什么有意義的結(jié)果埂蕊，下一章我們來(lái)寫……
