一篇文章快速入門React框架_包裝設計

※自行創業缺乏曝光? 網頁設計幫您第一時間規劃公司的形象門面

網動廣告出品的網頁設計,採用精簡與質感的CSS語法,提升企業的專業形象與簡約舒適的瀏覽體驗,讓瀏覽者第一眼就愛上她。

視頻教程

本文章在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} />

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

完整代碼

本站聲明:網站內容來源於博客園,如有侵權,請聯繫我們,我們將及時處理

※產品缺大量曝光嗎?你需要的是一流包裝設計!

窩窩觸角包含自媒體、自有平台及其他國家營銷業務等,多角化經營並具有國際觀的永續理念。

您可能也會喜歡…