React如何操作？ react從零開始的製作一個案例的整個過程

本篇文章主要講述了一個react從零開始的做一個案例的詳細步驟，我們一起來看看文章的具體內容吧

#範例說明

接下來我們要透過一個簡單的案例，詳細的學習React的內容

#如上圖所示，兩個按鈕，點選加號按鈕，數字加一，點選減號按鈕，數字減一

程式碼結構

##使用

create-react-app建立一個工程，將其中的程式碼結構刪減到最簡單的模式

修改index.js

index.js中的程式碼就很簡單了，只要引入App元件，執行渲染即可

import React from &#39;react&#39;;import ReactDOM from &#39;react-dom&#39;;import App from &#39;./components/App&#39;ReactDOM.render(<App/>, document.getElementById(&#39;root&#39;));

元件的基本內容

App .js中的內容才是我們要真正實現的邏輯,我們將使用ES6的方式創建一個React的元件，步驟如下

1. 引入react

import React from 'react'

2.建立元件，並讓元件繼承

React.Component,同時實作render函數

class App extends React.Component{
    render(){        return (
            <p>
            </p>
        )
    }
}

3.為元件指定預設輸出

export default App

完整程式碼如下：

import React from 'react';class App extends React.Component{
    render(){        return (
            <p>
            </p>
        )
    }
}
export default App;

• React.Component是react的一個抽象基類，單獨引用它毫無意義，我們通常用其來實現子類，實現子類的時候必須要實現其render函數

• render函數的所用是返回組件的內容，而渲染的過程是有react框架來完成的，在

  return()中只能有一個頂級的標籤元素

• export default指定了目前元件輸出的預設模組

功能實作

範例中的內容可分為四個部分

#1.加號按鈕

 2.減號按鈕
 3.簡單文字
4.滑鼠點擊按鈕變化的數字

其中按鈕和文字都非常簡單，但是數字需要滑鼠點擊進行改變的，假如我們沒有學習過任何的前端框架，我們就要使用document對象，取得頁面的內容，然後將其裝換為數字，再對數字進行規劃，然後將計算結果寫入頁面。而使用react來實現，我們需要知道，react的核心目標

組件化，組件中可變換的內容稱之為狀態（想看更多就到PHP中文網React參考手冊欄位中學習）

元件中的資料來源有兩種，

內部宣告和#外部傳入，分別用state和prop進行區別和表示，在es6元件中，可以透過constructor建構函式中接收外部傳來的prop和宣告內部使用的狀態數據，在在本文的範例中，我們需要用到一個在滑鼠點擊後不斷變化的數字

constructor(props){
    super(props);
    this.state = {
        count:0
    }}

我們已經聲明了內部狀態，並接收了外部傳入的數組，下面我實現頁面的展示內容,即實作render函數中的內容

    render(){
        return (            <p>
                <button>+</button>
                <button>+</button>
                <span>当前点击次数</span>
                <span>{this.state.count}</span>
            </p>
        )
    }

渲染效果如圖1-3所示

內容美化

從頁面效果來看，各個元素緊靠在一起，不太好看，我們透過簡單的css來美化，要達到的目標是：

- 整個內容增加上邊距和左邊距
- 按鈕、文字、數字相互之間有一定的間距

在react中，使用css的方式與傳統的方式有不同的地方

- 引入外部樣式檔案
新建
style/App.css

.box{    margin-left: 50px;    margin-top: 50px;}.box *{    margin:auto 5px;}

在App.js引入這個css檔案

import '../style/App.css'

在這裡要值得注意的是，在react中，class屬性要寫成className，因為class是JavaScript 的保留字

    render(){
        return (            <p className="box">
                <button>+</button>
                <button>-</button>
                <span>当前点击次数</span>
                <span>{this.state.count}</span>
            </p>
        )
    }

• 使用JavaScript物件來宣告樣式

    render(){
        const style={
            marginLeft:'50px',
            marginTop:'50px'
        }
        const item = {
            margin:'auto 5px'
        }
        return (            <p style={style}>
                <button style={item}>+</button>
                <button style={item}>-</button>
                <span style={item}>当前点击次数</span>
                <span style={item}>{this.state.count}</span>
            </p>
        )
    }

運作效果與圖1-4一樣

使用物件宣告樣式時，要使用

camelCase，也就是#駝峰式命名法

##將樣式物件直接寫到html中

•     render(){
          return (            <p style={{marginLeft:&#39;50px&#39;,marginTop:&#39;50px&#39;}}>
                  <button style={{margin:&#39;auto 5px&#39;}}>+</button>
                  <button style={{margin:&#39;auto 5px&#39;}}>-</button>
                  <span style={{margin:&#39;auto 5px&#39;}}>当前点击次数</span>
                  <span style={{margin:&#39;auto 5px&#39;}}>{this.state.count}</span>
              </p>
          )
      }

可以看到，style屬性中的內容使用了兩層大括號，其中外層的大括號是

React表達式，內層的大括號是JavaScript物件上述三種css的書寫方式的效果是一樣的，在後續的範例中，為了讓程式碼簡單直觀，採用引入外部css檔案的方式

按钮事件

接下来为两个按钮增加点击事件，react中的点击事件为onClick，它与html中的onclick有一些区别，在这里不进行详细描述。我们为加号按钮增加事件处理函数increment，为减号增加事件处理函数decrement。在increment,让state中的count的值加1,在decrement中，让state中count的值减1

注意点：

事件函数绑定this
 修改state的方式

import React from 'react';
import '../style/App.css'class App extends React.Component{

    constructor(props){        super(props);        this.state = {            count:0
        }        this.increment = this.increment.bind(this);        this.decrement = this.decrement.bind(this);
    }
   increment(){        this.setState({count:this.state.count+1})
    }
    decrement(){        this.setState({count:this.state.count-1})
    }
    render(){        return (
            

                +
                -
                当前点击次数
                {this.state.count}
            
        )
    }
}
export default App;

• 修改state中的数据，要调用setState函数来进行设置

• 定义普通的的函数来处理事件，需要在构造函数中与this进行绑定，否则在函数内部，this为undefined

此时我们在页面点击按钮，就能看到效果了

让绑定this的方式完美一些

在上面的代码中，我们可以看到，事件处理函数要在构造函数中调用bind函数来绑定this，在这里我们只有两个函数，在复杂引用中可能有更多的函数，要是每一个函数都要这么绑定一次，对于有强迫症或者洁癖的开发人员来说是一件非常闹心且痛苦的事情。因此我们要使用更加简洁的方式

请看代码

import React from 'react';
import '../style/App.css'class App extends React.Component{
    constructor(props){        super(props);        this.state = {            count:0
        }
    }
    increment  = () => {        this.setState({count:this.state.count+1})
    }
    decrement = () => {        this.setState({count:this.state.count-1})
    }
    render(){        return (
            

                +
                -
                当前点击次数
                {this.state.count}
            
        )
    }
}

export default App;

点击按钮效果完全一样，整个世界都干净了！

从外部传入数据

在前面我们说到，props是用来从外部传递数据的，那么它是如何传递的呢？

在index.js中我们为App标签添加属性name

ReactDOM.render(<App name="当前点击次数"/>, document.getElementById(&#39;root&#39;));

然后修改App.js中的render函数

    render(){
        return (            <p className="box">
                <button onClick={this.increment}>+</button>
                <button onClick={this.decrement}>-</button>
                <span>{this.props.name}</span>
                <span>{this.state.count}</span>
            </p>
        )
    }

运行效果与之前是一样的！

到这里呢，这个简单而又覆盖到react的大部分内容的范例就说完了！上手试试，其实很简单的！

本篇文章到这就结束了（想看更多就到PHP中文网React使用手册栏目中学习），有问题的可以在下方留言提问。

以上是React如何操作？ react從零開始的製作一個案例的整個過程的詳細內容。更多資訊請關注PHP中文網其他相關文章！