全棧React: 第3天 我們的第一個組件
本文轉載自：眾成翻譯
譯者：iOSDevLog
鏈接：http://www.zcfy.cc/article/3799
原文：https://www.fullstackreact.com/30-days-of-react/day-3/
這個系列的前兩篇文章是很重要的討論蓬戚。在今天的課程中，我們來看看一些代碼呵曹，并寫下我們的第一個React應用十气。
讓我們重溫第一天介紹的Hello world應用雅倒。這次拷邢，略有不同：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello world</title>
<!-- Script tags including React -->
``<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.min.js">``</script>
``<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.min.js">``</script>
``<script src="https://npmcdn.com/babel-core@5.8.38/browser.min.js">`` </script>
</head>
<body>
<div id="app"></div>
``<script type="text/babel">``
var app = <h1>Hello world</h1>
var mountComponent = document.querySelector('#app');
ReactDOM.render(app, mountComponent);
</script>
</body>
</html>
加載React庫
我們在包含了React的來源作為<script>`標簽在`<head>元素里面香府。在我們開始編寫我們的React應用之前放置我們的<script>加載標簽很重要允趟，以便我們使用ReactReactDOM恼策。
head還有一個script標簽包括在一個babel-core庫。但是什么babel-core潮剪？
Babel
昨天我們談了ES5和ES6涣楷。我們提到對ES6的支持仍然不穩(wěn)定。為了使用ES6抗碰，最好是將ES6 JavaScript轉換為ES5 JavaScript狮斗。
Babel是一個將ES6轉換到ES5的庫。
在body里面我們有一個script弧蝇。在script里我們定義了我們的第一個React應用碳褒。請注意，script標簽具有type的text/babel：
`<script type="text/babel">`
這告訴Babel看疗，我們希望它處理這個script主體內的JavaScript的執(zhí)行沙峻。我們可以使用ES6 JavaScript編寫我們的React應用，并確保Babel將在僅支持ES5的瀏覽器中處理它的執(zhí)行两芳。
### React應用
在Babel script中摔寨，我們定義了我們的第一個React應用尤蛮。我們的應用由一個單一的元素組成<h1>Hello world</h1>挑辆。調用ReactDOM.render()實際上將我們的袖珍React應用放置在頁面上。如果不調用ReactDOM.render()咬清，DOM中不會呈現(xiàn)任何內容竖螃。ReactDOM.render()的第一個參數是呈現(xiàn) 什么淑廊，第二個是 哪里：
`ReactDOM.render(<what>, <where>)`
我們寫了一個React應用。我們的“app”是一個代表一個h1 標簽的React元素斑鼻。但這不是很有趣蒋纬。富Web應用接受用戶輸入，根據用戶交互更改其形狀坚弱，并與Web服務器通信蜀备。讓我們通過構建我們的第一個React組件來開始接觸這個力量。
組件和更多
我們在本系列的開頭提到荒叶，所有React應用的核心是組件碾阁。理解React組件的最好方法是編寫它們。我們將把React組件寫成ES6類些楣。
Let's look at a component we'll call App. Like all other React components, this ES6 class will extend the React.Component class from the React package:
讓我們來看一個我們要調用的組件App脂凶。像所有其他React組件一樣宪睹，這個ES6類將擴展（繼承）React包中的React.Component 類：
class App extends React.Component {
render() {
return <h1>Hello from our app</h1>
}
}
所有React組件至少需要一個
render()函數。此render()函數應返回瀏覽器DOM元素的虛擬DOM表示形式蚕钦。有多種方法來編寫React組件亭病。在本系列中，我們將介紹幾種編寫方法嘶居。我們將使用的最常見的形式是上面使用的ES6類表示罪帖。
另一種編寫我們的
App組件的方式是使用該React.createClass()函數。
> var App = React.createClass({
> render: function() {
> return <h1>Hello from our app</h1>
> }
> });
>
到目前為止邮屁，社區(qū)一直采用ES6類聲明整袁。但是這兩種方法都產生具有相同特性的React組件。
在我們的index.html佑吝，我們用之前的新App 組件替換我們的JavaScript坐昙。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello world</title>
<!-- Script tags including React -->
``<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.min.js">``</script>
``<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.min.js">``</script>
``<script src="https://npmcdn.com/babel-core@5.8.38/browser.min.js">``</script>
</head>
<body>
<div id="app"></div>
``<script type="text/babel">``
class App extends React.Component {
render() {
return <h1>Hello from our app</h1>
}
}
</script>
</body>
</html>
然而，什么都不會在屏幕上呈現(xiàn)芋忿。你還記得為什么嗎炸客？
我們沒有告訴React我們要在屏幕上渲染任何東西，或者在什么地方渲染它盗飒。我們需要再次使用ReactDOM.render() 函數來表達React我們想要呈現(xiàn)的內容和位置嚷量。
添加ReactDOM.render() 函數將在屏幕上呈現(xiàn)我們的應用：
var mount = document.querySelector('#app');
ReactDOM.render(<App />, mount);
請注意，我們可以使用App類來渲染我們的React應用逆趣，就像它是一個內置的DOM組件類型（像<h1 />和<div />標簽一樣）蝶溶。這里我們使用它，就像它是一個帶尖括號的元素：<App />宣渗。
我們的React組件的行為就像我們頁面上的任何其他元素一樣抖所，我們可以像構建一個本地瀏覽器樹一樣構建一個組件樹。
雖然我們現(xiàn)在渲染一個React組件痕囱，我們的應用仍然缺乏豐富性或交互性田轧。很快，我們將看到如何使React組件數據驅動和動態(tài)鞍恢。但首先傻粘，在本系列的下一期中，我們將探討如何對圖層組件進行分層帮掉。嵌套組件是豐富的React Web應用的基礎弦悉。
