【全棧React】第3天: 咱們的第一個組件

時間 2019-11-05

原文原文鏈接

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

這個系列的前兩篇文章是很重要的討論。在今天的課程中，咱們來看看一些代碼，並寫下咱們的第一個React應用。react

讓咱們重溫第一天介紹的Hello world應用。此次，略有不一樣：ajax

<!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。npm

head還有一個script標籤包括在一個babel-core庫。可是什麼babel-core？瀏覽器

Babel

昨天咱們談了ES5和ES6。咱們提到對ES6的支持仍然不穩定。爲了使用ES6，最好是將ES6 JavaScript轉換爲ES5 JavaScript。服務器

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

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

<script type="text/babel">`

這告訴Babel，咱們但願它處理這個script主體內的JavaScript的執行。咱們可使用ES6 JavaScript編寫咱們的React應用，並確保Babel將在僅支持ES5的瀏覽器中處理它的執行。dom

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應用的基礎。

相關標籤/搜索

每日一句

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