一篇文章快速入門React框架

視頻教程

本文章在B站配有視頻教程

課程目標

• 了解最常用的React概念和相關術語，例如JSX，組件，屬性（Props），狀態（state）。
• 構建一個非常簡單的React應用程序，以闡述上述概念。

最終效果

創建React應用

helloworld

（1）安裝node.js     官網鏈接

（2）打開cmd 窗口 輸入

npm install --g create-react-app 
npm install --g yarn

（-g 代表全局安裝）

如果安裝失敗或較慢。需要換源，可以使用淘寶NPM鏡像，設置方法為：npm config set registry https://registry.npm.taobao.org，設置完成后，

重新執行

cnpm install --g create-react-app
cnpm install --g yarn

安裝 creat-react-app 功能組件，該組件可以用來初始化一個項目， 即 按照一定的目錄結構，生成一個新項目

（3）在你想創建項目的目錄下  例如 D:/project/ 打開cmd命令 輸入

create-react-app react-tutorial

去使用creat-react-app命令創建名字是react-tutorial的項目

安裝完成后，移至新創建的目錄並啟動項目

cd react-tutorial
yarn start

一旦運行此命令，localhost:3000新的React應用程序將彈出一個新窗口。

項目目錄結構

一個/public和/src目錄，以及node_modules，.gitignore，README.md，和package.json。

在目錄/public中，重要文件是index.html，其中一行代碼最重要

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

該div做為我們整個應用的掛載點

/src目錄將包含我們所有的React代碼。

要查看環境如何自動編譯和更新您的React代碼，請找到文件/src/App.js：
將其中的

        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>

修改為

        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          和豆約翰 Learn React
        </a>

保存文件后，您會注意到localhost:3000編譯並刷新了新數據。

現在刪除/src目錄中的所有文件，我們將從頭開始創建自己的項目文件。

開始我們的mini項目

1.新建文件index.css
我們就拷貝index.css文件的全部內容（css不是我們這次課程的重點）.
2.新建文件index.js
在index.js中，我們將導入React，ReactDOM和CSS文件。
src / index.js

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

創建App組件，在render方法中返回一個div（這里是JSX語法）

src / index.js

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

最后，我們將App渲染到根節點。
src / index.js

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

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，您將看到“你好，React！

JSX：JavaScript + XML

如您所見，我們在React代碼中一直使用看起來像HTML的東西，但它並不是完全HTML。這是JSX，代表JavaScript XML。

使用JSX，我們可以編寫看起來像HTML的內容，也可以創建和使用我們自己的類似XML的標簽。
以下是JSX分配給變量的樣子：

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

編寫React並非必須使用JSX。在幕后，它正在運行createElement，它接受標簽，包含屬性象和組件的后代，並呈現相同的信息。下面的代碼將具有與上面的JSX相同的輸出。

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

JSX實際上更接近JavaScript，而不是HTML，因此在編寫時需要注意一些關鍵區別。

• className用於代替class添加CSS類（classJavaScript中的保留關鍵字）。
• JSX中的屬性和方法為camelCase（駝峰表示法） - onclick將變為onClick。
• 自閉合標簽必須以斜杠結尾-例如
• JavaScript表達式也可以使用大括號（包括變量，函數和屬性）嵌入JSX內。

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

JSX比在原生JavaScript中創建和添加元素更容易編寫和理解，這也是人們如此熱愛React的原因之一。

組件

到目前為止，我們已經創建了一個組件- App組件。React中的幾乎所有內容都由組件組成，這些組件可以是類組件或簡單組件。
大多數React應用程序都有許多小組件，所有內容都加載到主App組件中。
組件經常定義在單個js文件中，
接下來讓我們更改項目。從index.js中刪除App類：
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，並將組件放入其中。

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。將組件分成文件不是強制性的，但是如果不這樣做的話，應用程序將開始變得笨拙和混亂。

類組件

讓我們創建另一個組件。我們將創建一個表格。制作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，我們可以先將表格組件導入，以加載表格組件：
src / App.js

import Table from './Table'

然后將其加載到App類的render()函數中，在此之前我們已經有了“ Hello，React！”。還更改了外部容器的類名。

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

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

export default App

現在，我們已經了解了什么是自定義類組件。我們復用此組件。但是，由於數據已被硬編碼到其中，因此目前它並不太有用。

簡單組件

React中的另一種類型的組件是simple component，它是一個函數。該組件不使用class關鍵字。讓我們為Table組件制作兩個簡單的子組件-一個表頭和一個表主體。

我們將使用ES6箭頭表達式來創建這些簡單的組件。首先，表頭：
src / Table.js

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

然后是表主體。
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.js文件將如下所示。請注意，TableHeader和TableBody組件都在同一個文件中，並由Table類組件使用。
src / Table.js

import React, { Component } from 'react'

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

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


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

export default Table

運行結果不變。如您所見，組件可以嵌套在其他組件中，並且簡單和類組件可以混合使用。

一個類組件必須包含render()，並且return只能返回一個父元素。

作為總結，讓我們比較一個簡單的組件和一個類組件:.

簡單組件

const SimpleComponent = () => {
  return <div>Example</div>
}

類組件

class ClassComponent extends Component {
  render() {
    return <div>Example</div>
  }
}

props

我們的Table組件，數據是硬編碼的。關於React的重要問題之一是它如何處理數據，它使用屬性（props）和狀態（state）來處理數據。現在，我們將專注於使用props處理數據。

首先，讓我們從TableBody組件中刪除所有數據。
src / Table.js

const TableBody = () => {
    return (
        <tbody></tbody>
    )
}

然后，將所有數據定義到一個對象數組中：
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>
    )
  }
}

接下來，我們將通過屬性characterData將數據傳遞給子組件Table，傳遞的數據是characters變量，由於它是JavaScript表達式，因此使用大括號括起來。

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

現在數據已經傳遞到Table組件，我們可以在Table組件通過this.props中訪問到。
src / Table.js

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

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

由於Table組件實際上由兩個較小的簡單組件組成，因此再次通過props 將其傳遞給子組件TableBody

我們將把props作為參數傳遞給簡單組件TableBody ，並通過數組的map方法將數據映射為jsx片段的集合。該jsx片段集合將包含在rows變量中，我們將其作為表達式返回。

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中創建列表時，應始終使用鍵，因為它們有助於識別每個列表項。我們還將在需要操縱列表項的時刻看到這是必要的。

props是將現有數據傳遞到React組件的有效方法，但是該組件無法更改props-它們是只讀的。在下一節中，我們將學習如何使用狀態（state）來進一步控制React中的數據處理。

state

我們將表格數據存儲在數組變量中，並將其作為props傳遞。但是如果我們希望能夠從數組中刪除一個項目，就做不到了。props，是一種單向數據流，子組件不能進行修改。但是有了state，我們就可以更新組件中的私有數據。

您可以將state視為可以在組件內增刪改的而不必添加到數據庫的任何臨時數據-例如，在確認購買之前在購物車中添加和刪除的購物車項目。state改變后，綁定state數據的視圖會自動更新。

首先，我們將創建一個state對象。
src / App.js

class App extends Component {
  state = {}
}

在state對象中定義屬性，保存我們所需的數據。
src / App.js

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

將我們之前創建的對象的整個數組移到中state.characters。

class App extends Component {
  state = {
   characters : [
            {
                name: 'Charlie',
                job: 'Janitor',
            },
            {
                name: 'Mac',
                job: 'Bouncer',
            },
            {
                name: 'Dee',
                job: 'Aspring actress',
            },
            {
                name: 'Dennis',
                job: 'Bartender',
            },
        ]
  }
}

在App.js中，創建removeCharacter方法來刪除一個項目

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

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

您必須使用this.setState()來修改數組。簡單地將新值應用到this.state.property將不起作用。

現在，我們必須將該函數傳遞給組件。我們會將removeCharacter函數作為屬性傳遞給Table。
src/App.js

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

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

由於Table組件，並不需要自己的state數據對象，所以，我們將它改造成簡單組件，並將removeCharacter函數繼續向TableBody 子組件傳遞：
src/Table.js

const Table = props => {
  const { characterData, removeCharacter } = props

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

在TableBody組件中，我們將鍵/索引作為參數傳遞，因為removeCharacter函數知道要刪除的項目索引。我們創建一個按鈕並將其onClick事件綁定removeCharacter函數;
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()方法的函數，否則removeCharacter()將嘗試不等按鈕點擊而自動運行。

新增表格數據

現在我們已經將數據存儲在App.js組件的state對象中，並且可以從state對象中刪除任何項目。但是，如何向state對象中添加數據呢？我們將通過一個表單組件來實現這個需求。

首先，state.characters中刪除所有硬編碼數據：
src / App.js

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

創建新文件Form.js。

import React, { Component } from 'react'

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

  state = this.initialState
}

以前，React類組件有必要包括一個constructor()，但是現在不再需要。

此表單的目標是Form每次更改表單中的字段時都會更新本組件（Form）的state，並且在我們提交表單時，所有數據都將傳遞給App組件的state，然后Table組件會自動更新。

首先定義input控件的onChange事件處理函數：

src / Form.js

handleChange = event => {
  const { name, value } = event.target

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

Form組件的render函數實現如下：
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，導入Form：

import Form from './Form';

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

最后一步是實現提交該數據並更新父組件狀態。我們將創建一個名為handleSubmit()的函數，該函數將使用[ES6擴展運算符]語法來更新狀態。
src / App.js

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

確保我們將其作為參數傳遞給Form。

<Form handleSubmit={this.handleSubmit} />

現在，在Form中，我們將創建一個名為submitForm()的方法，該方法將調用傳進來的handleSubmit函數，並將Form的state作為character參數傳遞。它還將Form的state重置為初始狀態，以在表單提交后清除表單信息。

src / Form.js

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

最后，我們將在Form.js中添加一個提交按鈕以提交表單，點擊將調用我們剛定義的submitForm函數。
src / Form.js

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

就是這樣！該應用程序已完成。

完整代碼