React Components 簡介
component 意為組件、零件，React帶給我們的并不是像jQuery那樣的眾多方便方法，而是一個全新的概念——組件化，我們的網(wǎng)站（或者 Web App）可以分化成一個個組件，就像現(xiàn)在修高樓一樣，先把各種龍骨在工廠生產(chǎn)好，再組裝。例如，一個網(wǎng)站有導航欄，主體，我們就把這兩個東西分開，不在一個html中全部寫完，而是分開“制作”，甚至主體中的文章有標題欄和正文，我們也可以將其組件化。
你問組件化有什么好處，至少在我們學習的過程中，沒有好處，甚至會加大學習成本，但是試想，在一個大型項目，是不是組件化后更能檢測出問題和BUG呢，畢竟不需要在一個龐大的頁面中尋找錯誤了。
第一個 React 組件
做一些小改變
開始寫組件之前，我們先將之前的index.html中的JSX部分分離，以方便后續(xù)步驟：
Step1：在public目錄下新建app.jsx文件；
Step2：將原index.html中的JSX代碼移動到進app.jsx；
Step3：將index.html的<script>標簽修改為：<script type="text/babel" src="app.jsx"></script>;
修改完成后，index.html文件應該如下：
<!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應該如下：
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)容。這樣后，這個組件會準備渲染(render)一個<div><h1>Hello React</h1></div> ，這就是一個小組件，雖然沒用，但是能體現(xiàn)React組件的思想。然后我們把這些都賦給一個變量var Words。
接著我們在ReactDOM.render()中使用這個組件，非常簡單，只需要使用<Words/>這樣既代表Words組件。我們在終端中使用node server.js，開啟服務器監(jiān)聽3000端口，出現(xiàn)圖圖示則第一個組件創(chuàng)建成功！
現(xiàn)在我們在
React.createClass();中添加一個<p>標簽：
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標簽的內(nèi)容，這是因為我們在React.createClass();的render方法中添加了，而我們在渲染<Words/>組件時，內(nèi)容就會自動被渲染。這就是組件的好處，我們要修改頁面的內(nèi)容或者功能時，只需要在相應的組件中修改，這樣能大大提高我們的效率，雖然在這個很小的項目中還看不出來。
在 React.createClass(); 中需要注意的地方
創(chuàng)建組件中的render成員方法中，只允許返回一個根標簽，你不能返回多個根標簽。
//正確，只有一個根標簽<div>
var Words = React.createClass({
render:function(){
return (
<div>
<h1>Hello React Component</h1>
<p>This is a paragraph</p>
</div>
);
}
});
//錯誤，根標簽不唯一
var Words = React.createClass({
render:function(){
return (
<h1>Hello React Component</h1>
<p>This is a paragraph</p>
);
}
});
如果我們非要渲染兩個標簽的內(nèi)容，那么我們只需要將他們放進一個<div>標簽即可；
