天天看點
傳回

翻譯- React Tutorial：An Overview and WalkthroughReact輔導：概述和演練

原文連結：https://www.taniarascia.com/getting-started-with-react/

React輔導：概述和演練

自從我開始學習JavaScript時，就聽說過React，但是我要承認我看了一眼就被吓到了。我看到它像是一堆混合着JavaScript和思想的HTML，這不是我們要避免的嗎？React有什麼了不起的？

相反，我隻專注于學習原生JavaScript并在專業環境裡使用jQuery。在經曆了幾次失敗的嘗試後，我終于開始使用React，并明白為什麼我可能要使用React，而不是原生JS或者JQuery。

我嘗試把我學到所有東西精簡成一個好的介紹分享給你，以下便是。

前提

在你開始玩React之前，這有一些需要事先知道的。如果你以前從沒有使用過JavaScript或者DOM，舉例來說，我會在使用React之前先熟悉它們

這裡有我認為是使用React的前提條件。

  • 基本熟悉HTML和CSS
  • 對JavaScript和開發基本了解
  • 基本了解DOM
  • 熟悉ES6的文法和特性
  • 全局安裝Nodejs和Npm

目标

  • 學習基本的React概念和相關術語，例如Babel，Webpack,JSX,元件，屬性，狀态和生命周期
  • 建構一個非常簡單的React應用用來示範上面的概念

這裡有最終版本的源碼和線上示範

  • View Source on Github
  • View Demo

什麼是React?

  • React是最流行的JavaScript庫之一，在Github上有超過100，000 stars
  • React不是一個架構（不像Angular，過于頑固）
  • React是Facebook建立的一個開源項目
  • React常用來在前端建構UI
  • React是一個MVC應用的視圖層（Model,View,Controller）

React最重要的一個方面是你可以建立元件，這些元件類似可定制的，可重用的HTML元素，進而快速且高效的建構使用者界面。React還使用了State和Props簡化了資料的存儲和處理。

我們将在文章中詳細讨論這些内容，讓我們開始吧

配置及安裝

有一些設定React的方法，我将展示其中兩種給你，這樣你可以了解到它是如何工作的。

靜态HTML檔案

第一個方法不是建立React的流行方法并且在後面的教程中也不這樣使用，但是如果你使用過類似JQuery的庫，這将是熟悉和容易了解的。如果你不熟悉Webpack，Babel和Node.js，這将是最不可怕的入門方法

讓我們從建立一個基本的Index.html檔案開始。我們将在head裡面讀取3個CDN(資源)-React,React Dom和Babel。我們還将建立一個id為root的div，并在最後我們建立一個Script标簽，你的自定會代碼将在裡面。

<!-- index.html -->

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />

    <title>Hello React!</title>

    <script src="https://unpkg.com/[email protected]^16/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/[email protected]/babel.js"></script>
  </head>

  <body>
    <div id="root"></div>

    <script type="text/babel">
      // React code will go here
    </script>
  </body>
</html>

在撰寫本文的時候，我加載的是最新穩定版本的庫。

  • React —— React最頂級API
  • React Dom —— 添加Dom具體的方法
  • Babel - 一個JavaScript編譯器，然我們能夠在舊的浏覽器中使用ES6

我們應用程式的入口點将是按照習慣命名的id為root的div元素。你将注意到script的腳本類型為text/babel，這讓我們強制使用Babel。

現在，開始寫我們的第一個React代碼塊。我們将使用ES6的類去建立一個叫做APP的React元件。

<!-- index.html -->
class App extends React.Component {
  //...
}

現在我們将添加一個render()方法，在類元件中這是一個唯一且必須要有的方法，它常用來渲染DOM節點

<!-- index.html -->
class App extends React.Component {
  render() {
      return (
          //...
      );
  }
}

return内部，我們将放一些看起來簡單的html元素。注意我們在這裡傳回自負床，是以不要使用引号來包裹元素。這個叫做JSX，我們将會學習到更多關于它的。

<!-- index.html -->
class App extends React.Component {
  render() {
    return <h1>Hello world!</h1>
  }
}

最後，我們将使用ReactDom的render()方法将建立的App類呈現到HTML中的 id為root的 div元素

<!-- index.html -->
ReactDOM.render(<App />, document.getElementById('root'))

這裡是我們index.html的全部代碼

<!-- index.html -->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />

    <title>Hello React!</title>

    <script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
    <script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/[email protected]/babel.js"></script>
  </head>

  <body>
    <div id="root"></div>

    <script type="text/babel">
      class App extends React.Component {
        render() {
          return <h1>Hello world!</h1>
        }
      }

      ReactDOM.render(<App />, document.getElementById('root'))
    </script>
  </body>
</html>

如果你現在在浏覽器中預覽你的index.html，你将會看見我們建立的h1标簽已經渲染到DOM中。

翻譯- React Tutorial：An Overview and WalkthroughReact輔導：概述和演練

酷！現在你已經完成了它，你可以看見入門React并不是非常可怕的。它隻是我們可以加載到html中的一些JavaScript輔助庫。

我們這樣做隻是為了驗屍，但是從這裡開始我們将使用另一種方法：create React app(建立React應用)

create React app(建立React應用)

前面的方法中，我在靜态HTML頁面中加載JavaScript庫并匆忙渲染React和Babel，他并不是非常高效且不易于維護。

幸運的是，Face已經建立了Create React App，它會預先配置你需要建構的React App的所有東西。它将建立一個實時開發伺服器，使用Webpack自動編譯React，JSX和ES6，自動為CSS檔案加字首，并且自動用ESLint測試和警告代碼中出現的錯誤。

使用create-react-app，在你的想要安裝的目錄下，打開終端上運作下面的代碼。

npx create-react-app react-tutorial

安裝完成後，移動到新建立的目錄并啟動項目

cd react-tutorial && npm start

一旦你運作了這個指令，一個新的包含你建立的React應用視窗将會在localhost:3000彈出

翻譯- React Tutorial：An Overview and WalkthroughReact輔導：概述和演練
create React App 對于初學者和大型企業應用程式來說非常适合入門，但他不适合所有的工作流。你可以建立自己的webpack來建立React。

如果你觀察項目結構，你可以看見一個/public和/src目錄，以及正常的node_modules，.gitignore，README.md和package.json

在/public中，我們最重要的檔案是index.html，它和我們之前建立的靜态index.html非常相似—— 隻有一個root div。這次，沒有加載任何庫或者腳本。/src目錄将包含我們所有的React代碼。

要檢視環境是如何自動編譯和更新你的react代碼，在/src/app.js中找到類似這樣的一行代碼。

To get started, edit `src/App.js` and save to reload.

用其他文本将其替換。儲存檔案後，你将注意到localhost:3000編譯并重新整理新資料。

接着删除/src目錄下的所有檔案，并且我們建立自己的樣闆檔案，而不會有任何多餘的。我們隻保留index.css和index.js。

對于index.css，我們僅複制粘貼Primitive Css到檔案中。如果你想，你可以使用Bootstrap 或者任意一個你想要的css架構，或者啥也不用。我發現它很容易工作。

現在在index.js中，我們引入React,ReactDom和css檔案

// src/index.js

import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'

讓我們再一次建立App元件。之前我們僅有一個h1，但是現在我要添加了一個帶有class的div元素。你将注意到我使用了className替代class。這是我們第一個提示，在這裡寫下的是JavaScript，而不是真正的HTML。

// src/index.js
class App extends React.Component {
  render() {
    return (
      <div className="App">
        <h1>Hello, React!</h1>
      </div>
    )
  }
}

最終，我們像之前一樣将App渲染到root

// src/index.js
ReactDOM.render(<App />, document.getElementById('root'))

這裡是我們index.js的全部代碼。這一次我們将元件作為React的屬性加載，是以我們不再需要額外繼承React.Component。

// src/index.js
import React, {Component} from 'react'
import ReactDOM from 'react-dom'
import './index.css'

class App extends Component {
  render() {
    return (
      <div className="App">
        <h1>Hello, React!</h1>
      </div>
    )
  }
}

ReactDOM.render(<App />, document.getElementById('root'))

如果你傳回localhost:3000，和之前一樣，你将看到 “Hello，React”。我們現在有了一個React應用程式。

React Developer Tool(React開發者工具)

這裡有一個叫做React Developer Tool的擴充，它們将讓你在使用React時的更加輕松。下載下傳React DevTools for Chrome，或者其他你更喜歡的浏覽器上運作它。

安裝完後，當你打開開發工具時，你将看到React标簽項。點選它，你将可以在編寫元件時檢查它們了。你可以去Elements(元素)标簽項看實際的Dom輸出。現在看起來可能不是一個好的解決，但是随着app越來越複雜，它将越來越有必要使用。

翻譯- React Tutorial：An Overview and WalkthroughReact輔導：概述和演練

現在我們有了所有工具和設定，我們可以開始真正使用React。

JSX：JavaScript + XML

如你所見，我們已經在React代碼中使用過一個看起來很像HTML的代碼，那是它不是html代碼，它是JSX，它代表着JavaScript XML。

使用JSX，我們可以寫出像HTML的代碼，而且我們可以建立并使用自己的像XML的标簽。下面是指派給一個變量的JSX。

//JSX
const heading = <h1 className="site-heading">Hello, React</h1>

在編寫React時，并不是必須要使用JSX。在引擎中，他将運作CreateElement來擷取标簽，包含屬性的對象，子元件并渲染相同的資訊。下面的代碼和上面的JSX有着同樣的輸出。

//No JSX
const heading = React.createElement('h1', {className: 'site-heading'}, 'Hello, React!')

JSX特别接近于JavaScript，而不是HTML，是以在編寫它的時有一些關鍵的差別需要注意：

  • 使用className替代class添加css類，因為class是JavaScript的保留關鍵詞
  • 在JSX中的屬性和方法使用小駝峰命名 —— onclick 将會變成 onClick
  • 單标簽(閉标簽)必須使用斜杠(/)結束 ——

JavaScript表達式可以在大括号中嵌入JSX，包括變量、方法和屬性。

const name = 'Tania'
const heading = <h1>Hello, {name}</h1>

JSX比使用原生JavaScript建立和添加大量元素更容易編寫和了解，這也是人們如此喜歡React的原因之一。

Components(元件)

目前欸之，我們隻建立了一個元件 —— App元件。在React中幾乎所有東西都由元件構成，這些可以是類元件或者簡單元件。

大多數React應用都有許多元件，并且所有東西都被加載到主App元件中。元件經常要擷取它們擁有的元件，是以我們按照那樣來修改我們的項目。

從index.js中移除App類，它看起來像是這樣：

//src/index.js
import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import './index.css'

ReactDOM.render(<App />, document.getElementById('root'))

我們建立一個新的檔案叫App.js，并将元件放在這裡。

//src/app.js

import React, {Component} from 'react'

class App extends Component {
  render() {
    return (
      <div className="App">
        <h1>Hello, React!</h1>
      </div>
    )
  }
}

export default App

我們到導出了App元件并把它加載到index.js中。将元件分離到檔案中并不是強制的，但是如果你不這麼做，應用将開始變得笨拙且失控。

Class Components(類元件)

讓我們建立另一個元件。我們将要建立一個表格。建立Table.js并用以下代碼填充它。

//src/Table.js
import React, {Component} from 'react'

class Table extends Component {
  render() {
    return (
      <table>
        <thead>
          <tr>
            <th>Name</th>
            <th>Job</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Charlie</td>
            <td>Janitor</td>
          </tr>
          <tr>
            <td>Mac</td>
            <td>Bouncer</td>
          </tr>
          <tr>
            <td>Dee</td>
            <td>Aspiring actress</td>
          </tr>
          <tr>
            <td>Dennis</td>
            <td>Bartender</td>
          </tr>
        </tbody>
      </table>
    )
  }
}

export default Table

我們建立的這個元件是一個自定義的類元件。我們用大駝峰寫法來區分自定義元件和正常的html元素。回到App.js，我們要加載Table，首先要引入它。

//src/app.js
import Table from './Table'

然後将它加載到app的render()函數中，之前這裡我們有“Hello, React!”。我還改變了外部容器的類。

//src/App.js
import React, {Component} from 'react'
import Table from './Table'

class App extends Component {
  render() {
    return (
      <div className="container">
        <Table />
      </div>
    )
  }
}

export default App

如果你檢查了你的生産環境，你将會看到被加載的Table。

翻譯- React Tutorial：An Overview and WalkthroughReact輔導：概述和演練

現在我們已經知道什麼是自定義類元件了。我們可以不斷複用這個元件。然而，由于資料是寫死進去的（寫死在裡面的），是以目前還不是非常有用。

Simple Components（簡單元件）

在React中的另一種元件是簡單元件，他是一個函數。這個元件不适用class關鍵字。讓我們使用table建立兩個簡單元件 —— 一個tabel header，一個table body。

我們将使用ES6的箭頭函數來建立這些簡單元件。首先，這是table header。

// src/Table.js
const TableHeader = () => {
  return (
    <thead>
      <tr>
        <th>Name</th>
        <th>Job</th>
      </tr>
    </thead>
  )
}

然後這是 table body

// src/Table.js
const TableBody = () => {
  return (
    <tbody>
      <tr>
        <td>Charlie</td>
        <td>Janitor</td>
      </tr>
      <tr>
        <td>Mac</td>
        <td>Bouncer</td>
      </tr>
      <tr>
        <td>Dee</td>
        <td>Aspiring actress</td>
      </tr>
      <tr>
        <td>Dennis</td>
        <td>Bartender</td>
      </tr>
    </tbody>
  )
}

現在我們的Table檔案将看起來像這樣子。注意TableHeader和TableBody元件都在通過一個檔案裡，并且被Tabel類元件使用。

// src/Table.js
const TableHeader = () => {
  return (
    <thead>
      <tr>
        <th>Name</th>
        <th>Job</th>
      </tr>
    </thead>
  )
}

然後這是 table body

// src/Table.js
const TableHeader = () => { ... }
const TableBody = () => { ... }

class Table extends Component {
  render() {
    return (
      <table>
        <TableHeader />
        <TableBody />
      </table>
    )
  }
}

一切事物呈現的跟之前一樣。如你所見，元件可以嵌套在其他元件中，并且簡單元件和類元件可以混合使用。

類元件必須包含render()函數，并且隻能傳回一個父元素。

總的來說，讓我們比較一下簡單元件和類元件。

// Simple Component (簡單元件)
const SimpleComponent = () => {
  return <div>Example</div>
}
           
// Class  Component (類元件)
class ClassComponent extends Component {
  render() {
    return <div>Example</div>
  }
}

注意：如果return傳回值包含在一行内，它可以不需要括号。

Props(屬性)

現在，我們有了一個非常酷的Table元件，但是資料是寫死的（寫死的）。React中重要特點之一是如何處理資料，它用被稱為props的屬性和state來處理資料。首先我們先關注于使用props處理資料。

首先，從TableBody元件移除所有資料。

//src/Table.js
const TableBody = () => {
  return <tbody />
}

然後移動所有資料到一個數組對象中，就像我們引入了一個基于JSON的API。我們必須在render()裡建立這個數組。

//src/App.js
class App extends Component {
  render() {
    const characters = [
      {
        name: 'Charlie',
        job: 'Janitor',
      },
      {
        name: 'Mac',
        job: 'Bouncer',
      },
      {
        name: 'Dee',
        job: 'Aspring actress',
      },
      {
        name: 'Dennis',
        job: 'Bartender',
      },
    ]

    return (
      <div className="container">
        <Table />
      </div>
    )
  }
}

現在，我們将要把資料傳遞給帶有屬性的自元件（Table），類似于你可以使用data-屬性傳遞資料。我們可以調用我們想用的任意屬性，隻要他不是一個内置關鍵詞，是以我将使用characterData。我傳遞的資料是characters變量，并且我在它兩邊加上大括号，因為它是一個JavaScript表達式

// src/App.js
return (
  <div className="container">
    <Table characterData={characters} />
  </div>
)

現在資料已經傳遞到了Table，我們必須在另外一邊通路它

// src/Table.js

class Table extends Component {
  render() {
    const {characterData} = this.props

    return (
      <table>
        <TableHeader />
        <TableBody characterData={characterData} />
      </table>
    )
  }
}

如果你打開React開發工具并檢查Table元件，你将會看見在屬性中看到數組資料。存在這裡的資料被稱為虛拟DOM，它是一種快速且高效地将資料與實際DOM同步的方法。

翻譯- React Tutorial：An Overview and WalkthroughReact輔導：概述和演練

不過，這些資料還沒有在實際的Dom裡。在Table中，我們可以通過this.props通路所有屬性。我們隻有傳遞了一個屬性，是以我們将要使用this.props.characterData 來檢索資料。

我将使用ES6簡寫屬性建立包含this.props.characterData的變量。

const {characterData} = this.props

由于我們的Table元件實際由兩個較小的簡單元件組成，我們再一次通過props将其傳遞到TableBody元件中。

// src/Table.js

class Table extends Component {
  render() {
    const {characterData} = this.props

    return (
      <table>
        <TableHeader />
        <TableBody characterData={characterData} />
      </table>
    )
  }
}

現在，TableBody沒有攜帶一個參數并傳回單個标簽

// src/Table.js
const TableBody = () => {
  return <tbody />
}

我們将傳遞props作為參數，和通過周遊數組為數組中每個對象傳回一個表行。這個映射将包含在rows變量，它會作為表達式傳回。

// src/Table.js
const TableBody = (props) => {
  const rows = props.characterData.map((row, index) => {
    return (
      <tr key={index}>
        <td>{row.name}</td>
        <td>{row.job}</td>
      </tr>
    )
  })

  return <tbody>{rows}</tbody>
}

如果你浏覽應用程式的前端，所有的資料都正在加載。

你會注意到我已經給每個表行添加了一個鍵索引，你在React中建立清單時應該使用keys，因為它們幫助你能識别每個清單項。當我們想要操作清單項時，就會明白這将是有必要的。

props是傳遞已有資料到React組建的高效方法，然而元件不能直接修改Props —— 它們隻是隻讀的。在下一節中，我們将在React中學習如何使用狀态進一步控制資料的處理。

State(狀态)

現在，我們要存儲我們的character資料在一個數組變量裡面，将其作為props傳遞。這是一個好的開始，但是想像一下，如果我們想要從數組裡面删除數組項。使用Props，我們就有一個單向的資料流，但是我們可以從元件裡更新私有狀态。

你可以把state考慮作為任意資料，這個資料可以被儲存到和修改且沒有必要添加到資料庫中 —— 例如，在确認你的購買之前，你可以從購物車中添加和删除。

首先，我們建立一個state對象

// src/App.js
class App extends Component {
  state = {}
}

這個對象将包含你想要存儲在狀态裡的所有屬性。對于我們而言，那就是characters。

// src/App.js
class App extends Component {
  state = {
    characters: [],
  }
}

移動整個數組對象到我們新建立的state.characters。

// src/App.js
class App extends Component {
  state = {
    characters: [
      {
        name: 'Charlie',
        // the rest of the data
      },
    ],
  }
}

我們的資料被正式儲存在state裡面。由于我們想要能夠從表格裡面移除字元，我們将在父類APp中建立一個removeCharacter方法。

為了找到這個State，我們使用this.state.characters，這和之前一樣使用的ES6方法一樣。為了更新State，我們将使用this.setState()，一個内置方法來操作state。我們将基于傳遞的index(索引)過濾數組，并傳回新的數組。

你必須使用this.setState()來更新數組。簡單的賦予一個新值給this.state.property将不起作用。 
// src/App.js

removeCharacter = (index) => {
  const {characters} = this.state

  this.setState({
    characters: characters.filter((character, i) => {
      return i !== index
    }),
  })
}

filter 不會發生變化，而是建立一個新數組，并且在JavaScript中這是修改數組的好方法。這個特定的方法是測試一個索引相較于數組内的所有索引，并傳回除傳遞索引之外的所有索引。

現在，我們必須将函數傳遞給元件，并且在每個可以出發函數的字元旁邊渲染一個按鈕。我們将removeCharacter函數作為一個Prop傳遞給Table元件。

// src/App.js
render() {
  const { characters } = this.state

  return (
    <div className="container">
      <Table characterData={characters} removeCharacter={this.removeCharacter} />
    </div>
  )
}

由于我們将它一直從Table傳遞到TableBody，我們必須再一次将它作為prop傳遞，就像我們剛剛操作character資料一樣。

另外，由于在我們的項目中隻有App和Form元件具有自己的狀态，是以最好将Table從目前的類元件轉換成簡單元件。

// src/Table.js
const Table = (props) => {
  const {characterData, removeCharacter} = props

  return (
    <table>
      <TableHeader />
      <TableBody characterData={characterData} removeCharacter={removeCharacter} />
    </table>
  )
}

這就是我們在removeCharacter()函數中定義的索引的位置。在TableBody元件中，我們将 key(鍵)/index(索引)作為參數傳遞，然後filter(過濾)函數就知道哪個清單項需要移除。我們将建立一個綁定了onClick的按鈕并傳遞它。

// src/Table.js

<tr key={index}>
  <td>{row.name}</td>
  <td>{row.job}</td>
  <td>
    <button onClick={() => props.removeCharacter(index)}>Delete</button>
  </td>
</tr>
onClick函數必須傳遞一個傳回removeCharacter() 的函數，否則它将嘗試自動運作。

太棒了。現在我們有了一個删除按鈕，而且我們可以通過删除character來修改我們的State。

翻譯- React Tutorial：An Overview and WalkthroughReact輔導：概述和演練

我删除了MAC

現在你應該明白如何初始化state，并且如何修改它了。

Submitting Form Data（送出表單資料）

現在我們的資料存儲在state（狀态）中，我們可以從state中移除任意資料項。但是，如果我們想要添加新的資料到state怎麼辦？ 在現實世界中的應用程式，你更有可能從空的state開始并向其添加資料，比如一個待辦事項清單或者購物車。

首先，我們從state.characters中移除所有寫死資料，我們會通過表單更新它。

// src/App.js

class App extends Component {
  state = {
    characters: [],
  }
}

現在讓我們在一個叫做Form.js的新檔案中建立一個Form元件。

我們将設Form中的state初始值為帶有空屬性的對象，并将其初始state指派給this.state。

// src/Form.js

import React, {Component} from 'react'

class Form extends Component {
  initialState = {
    name: '',
    job: '',
  }

  state = this.initialState
}
以前，必須在React類元件上包含constructor()，但現在不需要了

這個表單的目标是每當表單中的字段發生改變時，更新表單的State（狀态），并且當我們送出時，所有資料将傳遞給app的state，之後将修改Table。

首先，我們将建立函數，它将在每次對input(輸入框)進行更改時運作。event(時間)将被傳遞，我們設定表單的狀态，使之具有name(key)和value

// src/Form.js
handleChange = (event) => {
  const {name, value} = event.target

  this.setState({
    [name]: value,
  })
}

讓我們在送出表單前完成它。在渲染時，我們從state中擷取兩個屬性，并将其作為值指派給對應的表單建。我們将運作handleChange()方法作為input的onChange屬性，最後我們将會導出Form元件。

// src/Form.js
render() {
  const { name, job } = this.state;

  return (
    <form>
      <label htmlFor="name">Name</label>
      <input
        type="text"
        name="name"
        id="name"
        value={name}
        onChange={this.handleChange} />
      <label htmlFor="job">Job</label>
      <input
        type="text"
        name="job"
        id="job"
        value={job}
        onChange={this.handleChange} />
    </form>
  );
}

export default Form;

在App.js中，我們可以将表單渲染到表格下面。

// src/App.js
import Form from './Form'

           
// src/App.js
return (
  <div className="container">
    <Table characterData={characters} removeCharacter={this.removeCharacter} />
    <Form />
  </div>
)

現在如果我們去應用的前端，我們可以看到一個尚未送出的表單。更新一些字段後，你将看将表單的本地狀态（state）正在更新。

翻譯- React Tutorial：An Overview and WalkthroughReact輔導：概述和演練

太酷了。最後允許我們實際地送出表單資料并更新父級狀态（state）。我們将在app裡面建立一個叫handleSubmit() 的函數，它将通過擷取現有的this.state.characters來更新狀态，并且使用ES6的展開運算符添加新的character參數

// src/App.js
handleSubmit = (character) => {
  this.setState({characters: [...this.state.characters, character]})
}

讓我們在Form元件中確定作為一個參數傳遞。

現在在Form中，我們建立了一個叫做submitForm()的函數，将通過調用這個函數，将表單狀态作為前面定義的字元參數傳遞。他還将state重置為初始狀态，確定在送出後清除表單。

// src/Form.js

submitForm = () => {
  this.props.handleSubmit(this.state)
  this.setState(this.initialState)
}

最後，我們在表單中添加一個送出按鈕用來送出表單。由于我們不能使用标準送出功能，是以我們使用onClick替代onSubmit來送出。單擊将調用我們剛剛建立的submitForm。

// src/Form.js
<input type="button" value="Submit" onClick={this.submitForm} />

這就是React!。這個應用已經完成了。我們可建立、添加并且移除表格中的使用者。由于Table和TableBody已經從State中擷取到值，它将正常顯示.

翻譯- React Tutorial：An Overview and WalkthroughReact輔導：概述和演練

如果你在旅途中迷失了方向，你可以在github上檢視完整的源代碼。

Pulling in API Data （擷取API中的資料）

React的一個非常常見的用法就是從API中拉取資料。如果你不熟悉API是什麼或者如何連接配接它，那麼我推薦你閱讀

JavaScript怎樣連接配接API，這能讓你了解API是什麼，并如何使用原生javaScript使用它。

作為一個小測試，我們可以建立一個新的Api.js檔案，并在這裡建立一個新的App。我們可以測試一個公共的Api是維基百科的API，我還有一個URL端點是用來随機搜尋的。你可以進傳入連結接檢視API——請確定你在浏覽器裡安裝了JSONView

我們将使用JavaScript内置的Fetch方法來從url端點擷取資料并展示它。你可以通過更改index.js-import App from ‘./Api’;中的url來切換我們建立的應用和這個測試檔案。

我不想一行一行解釋，是以我們已經學習了關于建立一個元件、渲染、并且周遊傳遞的state數組。現在這個代碼有一個新的方面是componentDidMount()，一個React的生命周期方法。

Lifecycle（生命周期）是在React中調用方法的順序。Mounting是指正在插入Dom中的項。

當我們從API中拉取資料，我希望使用componentDidMount，因為我們希望在引入資料前，確定元件已經渲染Dom。在下面的片段中，你将看到我們如何從維基百科API中引入書，并展示到頁面上的。

// Api.js
import React, {Component} from 'react'

class App extends Component {
  state = {
    data: [],
  }

  // Code is invoked after the component is mounted/inserted into the DOM tree.
  componentDidMount() {
    const url =
      'https://en.wikipedia.org/w/api.php?action=opensearch&search=Seona+Dancing&format=json&origin=*'

    fetch(url)
      .then((result) => result.json())
      .then((result) => {
        this.setState({
          data: result,
        })
      })
  }

  render() {
    const {data} = this.state

    const result = data.map((entry, index) => {
      return <li key={index}>{entry}</li>
    })

    return <ul>{result}</ul>
  }
}

export default App

在本地伺服器中儲存并運作此檔案，你見看到顯示在Dom中的維基百科資料。

翻譯- React Tutorial：An Overview and WalkthroughReact輔導：概述和演練

還有其他的生命周期方法，但是對它們的讨論超出了本文的範圍。你可以在這裡閱讀更多關于React元件内容

*維基百科的查詢選擇可能不是随機的，這可能是我們2005年帶頭寫的一篇文章。

Building and Deploying a React App (編譯并部署React應用)

到目前為止，我們所做的一切都是在開發環境完成的。我們一直在編譯，熱重載和更新。對于生産環境，我們希望加載靜态檔案 —— 不包含源代碼。我們可以通過建構并部署它來實作這一點。

現在，如果你想要編譯所有React代碼，并将其放在根目錄下某個地方，你需要運作下面一行代碼：

npm run build

這将建立build檔案夾并且将你的應用包含在裡面。将該檔案夾的内容放到任何地方，就完成了。

我們還可以再更進一步，用npm為我們部署。我們去建構Github頁面，是以你必須熟悉Git并且從github上擷取你的代碼。

請確定你退出了你本地的React環境，即代碼沒有正在運作。首先我們添加一個Homepage字段到packge.json，其中包含我們希望應用程式運作的url。

// package.json

"homepage": "https://taniarascia.github.io/react-tutorial",

我們再添加這兩行到scripts屬性中。

// package.json

"scripts": {
  // ...
  "predeploy": "npm run build",
  "deploy": "gh-pages -d build"
}

在你的項目裡，将gh-pages添加到開發依賴庫裡面。

npm install --save-dev gh-pages

我們将建立build檔案夾，它将有所有的編譯好的靜态檔案。

npm run build

最後我們将部署到gh-pages

npm run deploy

大功告成。應用已經在連結https://taniarascia.github.io/react-tutorial裡了。

結論

希望這篇文章能給你很好的介紹了React、簡單/類元件、state、props，處理表單資料，從API中擷取資料和部署應用程式。關于React還有許多要學習和實踐的事情，但是我希望你有資訊去鑽研和玩React。

  • 檢視Github源碼
  • 檢視項目

如果有什麼不明白的地方，或者你想在本文或後續文章中看到什麼，請讓我知道。

老規矩寫的不清晰的地方，可以指出，我會不定時更新和修改。一起加油.

所有的偉大，都來自于一個勇敢的開始。

翻譯 react javascript 線上翻譯 reactjs
上一篇: java十進制傳二進制_JAVA中的十進制轉換為二進制
下一篇: python怎麼程式設計十進制轉化成二進制_Python實作十進制和二進制之間互相轉換

繼續閱讀