React Components 簡介
component 意為組件蛉顽、零件，React帶給我們的并不是像jQuery那樣的眾多方便方法，而是一個全新的概念——組件化咪橙，我們的網(wǎng)站（或者 Web App）可以分化成一個個組件聂宾，就像現(xiàn)在修高樓一樣果善，先把各種龍骨在工廠生產(chǎn)好，再組裝系谐。例如巾陕，一個網(wǎng)站有導(dǎo)航欄，主體纪他，我們就把這兩個東西分開鄙煤，不在一個html中全部寫完，而是分開“制作”茶袒，甚至主體中的文章有標(biāo)題欄和正文梯刚，我們也可以將其組件化。
你問組件化有什么好處薪寓，至少在我們學(xué)習(xí)的過程中亡资，沒有好處澜共，甚至?xí)哟髮W(xué)習(xí)成本，但是試想锥腻，在一個大型項(xiàng)目嗦董，是不是組件化后更能檢測出問題和BUG呢，畢竟不需要在一個龐大的頁面中尋找錯誤了瘦黑。
第一個 React 組件
做一些小改變
開始寫組件之前展懈，我們先將之前的index.html中的JSX部分分離，以方便后續(xù)步驟：
Step1：在public目錄下新建app.jsx文件供璧；
Step2：將原index.html中的JSX代碼移動到進(jìn)app.jsx存崖；
Step3：將index.html的<script>標(biāo)簽修改為：<script type="text/babel" src="app.jsx"></script>;
修改完成后，index.html文件應(yīng)該如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>React-1</title>
<script src="https://unpkg.com/react@latest/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@latest/dist/react-dom.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/babel" src="app.jsx"></script>
</body>
</html>
我們新建的app.jsx應(yīng)該如下：
ReactDOM.render(
<h1>Hello React</h1>,
document.getElementById("app")
);
React.createClass();
現(xiàn)在我們開始編寫第一個React組件睡毒，React組件并不是由什么神奇的技巧變成的来惧，而是通過調(diào)用React.createClass();方法，生成一個組件演顾，并且將其賦給一個變量供搀，而那個變量就代表了我們的組件，（注意：React.createClass();中的React是React眾多模塊的一個钠至，它有很多方法給我們使用葛虐，與我們之前使用的ReactDOM模塊等同。） 例如我們在app.jsx中這樣寫：
var Words = React.createClass({
render:function(){
return (
<div>
<h1>Hello React Component</h1>
</div>
);
}
});
ReactDOM.render(
<Words/>,
document.getElementById("app")
);
我們使用React.createClass();創(chuàng)建了一個組件棉钧，我們想讓這個組件有內(nèi)容屿脐，只需要在此方法中返回一個對象（Object），這個對象中使用render成員宪卿，并且給這個成員賦一個方法的诵，這個方法使用JSX返回一些內(nèi)容。這樣后佑钾，這個組件會準(zhǔn)備渲染(render)一個<div><h1>Hello React</h1></div> 西疤，這就是一個小組件，雖然沒用休溶，但是能體現(xiàn)React組件的思想代赁。然后我們把這些都賦給一個變量var Words。
接著我們在ReactDOM.render()中使用這個組件兽掰，非常簡單芭碍，只需要使用<Words/>這樣既代表Words組件。我們在終端中使用node server.js禾进，開啟服務(wù)器監(jiān)聽3000端口豁跑，出現(xiàn)圖圖示則第一個組件創(chuàng)建成功！
現(xiàn)在我們在
React.createClass();中添加一個<p>標(biāo)簽：
var Words = React.createClass({
render:function(){
return (
<div>
<h1>Hello React Component</h1>
<p>This is a paragraph</p>
</div>
);
}
});
刷新瀏覽器，出現(xiàn)如下：
我們并沒有在
ReactDOM.render(
<Words/>,
document.getElementById("app")
);
中添加任何內(nèi)容艇拍，而頁面卻渲染了p標(biāo)簽的內(nèi)容狐蜕，這是因?yàn)槲覀冊?code>React.createClass();的render方法中添加了，而我們在渲染<Words/>組件時卸夕，內(nèi)容就會自動被渲染层释。這就是組件的好處，我們要修改頁面的內(nèi)容或者功能時快集，只需要在相應(yīng)的組件中修改贡羔，這樣能大大提高我們的效率，雖然在這個很小的項(xiàng)目中還看不出來个初。
在 React.createClass(); 中需要注意的地方
創(chuàng)建組件中的render成員方法中乖寒，只允許返回一個根標(biāo)簽，你不能返回多個根標(biāo)簽院溺。
//正確楣嘁，只有一個根標(biāo)簽<div>
var Words = React.createClass({
render:function(){
return (
<div>
<h1>Hello React Component</h1>
<p>This is a paragraph</p>
</div>
);
}
});
//錯誤，根標(biāo)簽不唯一
var Words = React.createClass({
render:function(){
return (
<h1>Hello React Component</h1>
<p>This is a paragraph</p>
);
}
});
如果我們非要渲染兩個標(biāo)簽的內(nèi)容珍逸，那么我們只需要將他們放進(jìn)一個<div>標(biāo)簽即可逐虚；
