全棧React: 第1天 什么是 React?
本文轉(zhuǎn)載自：眾成翻譯
譯者：iOSDevLog
鏈接：http://www.zcfy.cc/article/3765
原文：https://www.fullstackreact.com/30-days-of-react/day-1/
今天，我們從一開始就開始。讓我們看看React是什么，是什么讓React運轉(zhuǎn)起來。我們將討論為什么要使用它。
在接下來的30天內(nèi)，您可以體驗到React網(wǎng)頁框架及其生態(tài)系統(tǒng)的各個部分。
我們的30天冒險中的每一天都將建立在前一天的材料上，所以在系列結(jié)束之后，您不僅可以了解框架如何工作的術(shù)語，概念和基礎(chǔ)，而且可以在您的 下一個Web應(yīng)用程序
讓我們開始吧。 我們將從在零開始因為它是一個非常好的開始的地方。
什么是React？
React是一個用于構(gòu)建用戶界面的JavaScript庫。它是Web應(yīng)用程序的視圖層。
所有React應(yīng)用程序的核心是組件(components)。組件是一個自包含的模塊，它提供一些輸出。我們可以將類似按鈕或輸入字段的接口元素作為React組件。組件是可組合的。組件可以在其輸出中包括一個或多個其他組件。
一般來說，為了編寫React應(yīng)用程序，我們編寫了對應(yīng)于各種接口元素的React組件。然后，我們將這些組件組織在定義應(yīng)用程序結(jié)構(gòu)的更高級組件中。
例如，拿到一個表單。表單可能包含許多界面元素，例如輸入字段，標(biāo)簽或按鈕。窗體中的每個元素都可以寫為React組件。然后我們寫一個更高級的組件，形式組件本身。表單組件將指定表單的結(jié)構(gòu)，并在其中包括每個這些接口元素。
重要的是，React應(yīng)用程序中的每個組件都遵守嚴(yán)格的數(shù)據(jù)管理原則。復(fù)雜的交互式用戶界面通常涉及復(fù)雜的數(shù)據(jù)和應(yīng)用程序狀態(tài)。React的表面區(qū)域是有限的，目的是給我們提供工具，以便能夠預(yù)測我們的應(yīng)用程序在給定的情況下的外觀。我們在后面的課程中探討這些原則。
好吧，那么我們?nèi)绾问褂媚兀?/h2>
React是一個JavaScript框架。使用框架就像在我們的HTML中包含一個JavaScript文件一樣簡單，并在我們JavaScript的應(yīng)用程序中使用React 導(dǎo)出。
例如，React網(wǎng)站的Hello world示例可以如下簡單：
<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">``
ReactDOM.render(
<h1>Hello world</h1>,
document.querySelector('#app')
);
</script>
</body>
</html>
雖然它可能看起來有點可怕，JavaScript代碼是一行動態(tài)添加Hello world的頁面。注意，我們只需要包括一些JavaScript文件，以使一切工作。
它是如何工作的？
與許多其前身不同，React不是直接在瀏覽器的文檔對象模型（DOM）上運行，而是在虛擬DOM(virtual DOM)上運行。也就是說，而不是document 在更改我們的數(shù)據(jù)之后在瀏覽器中操作（這可能很慢），它解決了其虛擬DOM中的更改。在更新虛擬DOM之后，React會智能地確定對實際DOM所做的更改。
虛擬DOM 完全存在于內(nèi)存中，并且是網(wǎng)絡(luò)瀏覽器的DOM的表示。因此，當(dāng)我們寫一個React組件時，我們不是直接寫入DOM，而是寫一個虛擬組件，React將變成DOM。
在下一篇文章中，我們將看看這對我們構(gòu)建React組件和跳到JSX并編寫我們的第一個真正組件意味著什么。
下一章:
什么是JSX？
本教程系列的完整源代碼可以在 GitHub repo, 上找到，其中包含所有樣式和代碼示例。
如果在任何時候你感到困擾，有進一步的問題，請隨時通過以下方式與我們聯(lián)系：
在文章末尾評論這篇文章
發(fā)送電子郵件至 [email protected]
加入我們的 gitter room
發(fā)推文給我們 @fullstackreact
