【全棧React】第3天: 我們的第一個元件

全棧講師_金雲龍發表於2017-08-02
全棧React元件

本文轉載自：眾成翻譯
譯者：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的支援仍然不穩定。為了使用ES6，最好是將ES6 JavaScript轉換為ES5 JavaScript。

Babel是一個將ES6轉換到ES5的庫。

在body裡面我們有一個script。在script裡我們定義了我們的第一個React應用。請注意，script標籤具有type的text/babel：

<script type="text/babel">`

這告訴Babel，我們希望它處理這個script主體內的JavaScript的執行。我們可以使用ES6 JavaScript編寫我們的React應用，並確保Babel將在僅支援ES5的瀏覽器中處理它的執行。

React應用

在Babel script中，我們定義了我們的第一個React應用。我們的應用由一個單一的元素組成<h1>Hello world</h1>。呼叫ReactDOM.render()實際上將我們的袖珍React應用放置在頁面上。如果不呼叫ReactDOM.render()，DOM中不會呈現任何內容。ReactDOM.render()的第一個引數是呈現 _什麼_，第二個是 _哪裡_：

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>
  }
});

到目前為止，社群一直採用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>

然而，什麼都不會在螢幕上呈現。你還記得為什麼嗎？

我們沒有告訴React我們要在螢幕上渲染任何東西，或者在什麼地方渲染它。我們需要再次使用ReactDOM.render() 函式來表達React我們想要呈現的內容和位置。

新增ReactDOM.render() 函式將在螢幕上呈現我們的應用：

var mount = document.querySelector(`#app`);
ReactDOM.render(<App />, mount);

請注意，我們可以使用App類來渲染我們的React應用，就像它是一個內建的DOM元件型別（像<h1 />和<div />標籤一樣）。這裡我們使用它，就像它是一個帶尖括號的元素：<App />。

我們的React元件的行為就像我們頁面上的任何其他元素一樣，我們可以像構建一個本地瀏覽器樹一樣構建一個元件樹。

雖然我們現在渲染一個React元件，我們的應用仍然缺乏豐富性或互動性。很快，我們將看到如何使React元件資料驅動和動態。但首先，在本系列的下一期中，我們將探討如何對圖層元件進行分層。巢狀元件是豐富的React Web應用的基礎。

相關文章