【全棧React】第1天: 什麼是 React?

時間 2019-11-05

原文原文鏈接

本文轉載自：衆成翻譯
譯者：iOSDevLog
連接：http://www.zcfy.cc/article/3765
原文：https://www.fullstackreact.com/30-days-of-react/day-1/html

今天，咱們從一開始就開始。讓咱們看看React是什麼，是什麼讓React運轉起來。咱們將討論爲何要使用它。react

在接下來的30天內，您能夠體驗到React網頁框架及其生態系統的各個部分。git

咱們的30天冒險中的每一天都將創建在前一天的材料上，因此在系列結束以後，您不只能夠了解框架如何工做的術語，概念和基礎，並且能夠在您的下一個Web應用程序github

讓咱們開始吧。咱們將從在零開始由於它是一個很是好的開始的地方。ajax

什麼是React？

React是一個用於構建用戶界面的JavaScript庫。它是Web應用程序的視圖層。npm

全部React應用程序的核心是組件(components)。組件是一個自包含的模塊，它提供一些輸出。咱們能夠將相似按鈕或輸入字段的接口元素做爲React組件。組件是可組合的。組件能夠在其輸出中包括一個或多個其餘組件。瀏覽器

通常來講，爲了編寫React應用程序，咱們編寫了對應於各類接口元素的React組件。而後，咱們將這些組件組織在定義應用程序結構的更高級組件中。babel

例如，拿到一個表單。表單可能包含許多界面元素，例如輸入字段，標籤或按鈕。窗體中的每一個元素均可以寫爲React組件。而後咱們寫一個更高級的組件，形式組件自己。表單組件將指定表單的結構，並在其中包括每一個這些接口元素。網絡

重要的是，React應用程序中的每一個組件都遵照嚴格的數據管理原則。複雜的交互式用戶界面一般涉及複雜的數據和應用程序狀態。React的表面區域是有限的，目的是給咱們提供工具，以便可以預測咱們的應用程序在給定的狀況下的外觀。咱們在後面的課程中探討這些原則。app

好吧，那麼咱們如何使用呢？

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並編寫咱們的第一個真正組件意味着什麼。

相關標籤/搜索

react+webpack+redux+react

webpack+react+redux+react

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。