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