手挽手帶你學(xué)React：一檔 React環(huán)境搭建，語(yǔ)法規(guī)則，基礎(chǔ)使用

BicycleWarrior 發(fā)布于2019-08-23 15:11 / 3088人閱讀

摘要：當(dāng)屬性是一個(gè)回調(diào)函數(shù)時(shí)，函數(shù)接收底層元素或類實(shí)例取決于元素的類型作為參數(shù)。

手挽手帶你學(xué)React入門第一期,帶你熟悉React的語(yǔ)法規(guī)則,消除對(duì)JSX的恐懼感,由于現(xiàn)在開(kāi)發(fā)中都是使用ES6語(yǔ)法開(kāi)發(fā)React，所以這次也使用ES6的模式進(jìn)行教學(xué)，如果大家對(duì)ES6不熟悉的話,先去看看class相關(guān)內(nèi)容吧，這里我也慢慢帶大家一步一步學(xué)會(huì)React。

視頻教程

視頻教程可移步我的個(gè)人博客：http://www.henrongyi.top

什么是React

React是Facebook的一群{{BANNED}}們開(kāi)發(fā)的一個(gè)特別牛X的框架。它實(shí)際上是一個(gè)虛擬DOM，然后在這個(gè)DOM中，要用什么組件就能飛速加載進(jìn)來(lái)，不要的時(shí)候，馬上給刪咯（實(shí)際上就是個(gè)前端框架，都是這么個(gè)意思，VUE，NG都是，只不過(guò)他們的數(shù)據(jù)流向不同而已，React區(qū)別就在于，單向數(shù)據(jù)流。），React 扮演著 MVC 結(jié)構(gòu)中 V 的角色，后面我會(huì)用到基于FLUX架構(gòu)的Redux讓我們的整個(gè)項(xiàng)目變成MVC架構(gòu)。總之，React也是hie牛X的。

React的好處都有啥

React是一款非常牛X的前端框架，它的衍生物React-Native可以讓你開(kāi)發(fā)接近原生體驗(yàn)的NativeApp,它適合的范圍相當(dāng)廣泛，前端，后端，手機(jī)端，都有很好的兼容性。總而言之，hie牛X。

React基礎(chǔ)入門

現(xiàn)在的開(kāi)發(fā)中React項(xiàng)目實(shí)際上都是使用ES6語(yǔ)法來(lái)編寫，并且，我們現(xiàn)在有很多成熟的腳手架可以使用（create-react-app,dva等），不過(guò)國(guó)際慣例，我們要從最基礎(chǔ)的用法開(kāi)始編寫。我們采用ES6寫法來(lái)進(jìn)行教學(xué),同時(shí)使用webpack工具，這里會(huì)用到很多相關(guān)配置，大家可以在這個(gè)過(guò)程中體驗(yàn)ES6的精妙。

開(kāi)始HelloWord

配置基礎(chǔ)webpack環(huán)境

這里大家可以不去深入理解，先跟著我一步一步配置出來(lái)

開(kāi)始之前，大家可以去官網(wǎng)：https://reactjs.org/ 下載最新的React(當(dāng)前版本v16.7.0) 中文地址：https://react.docschina.org/

由于我們不使用腳手架，所以我們需要先創(chuàng)建我們自己的webpack包，第一步

mkdir helloReact
cd helloReact

首先大家命令行輸入

webpack v

如果正常出現(xiàn)版本號(hào) 并且是 3.6.0版本，那么我們就可以按照教程繼續(xù)走下去了
如果沒(méi)有的話那么我們就需要命令行繼續(xù)

cnpm i webpack@3.6.0 -S -g

到這里應(yīng)該可以正常使用webpack了

接下來(lái) 我們命令行輸入

npm init -y  // 這實(shí)際上是 初始化一個(gè)項(xiàng)目 并且全部默認(rèn) 當(dāng)然如果你想看看里面有啥的話 就把-y拿掉就好了
npm i  //這里是把webpack依賴安裝到本包內(nèi)部
npm i webpack-dev-server@2.11.1 --save-dev //安裝本地運(yùn)行服務(wù)器
npm i webpack-cli --save-dev //依賴腳手架

運(yùn)行完成以后，我們會(huì)得到一個(gè)package.json文件打開(kāi)看看

{
  "dependencies": {
    "webpack": "^3.6.0"  //依賴包和版本
  },
  "name": "helloreact", //項(xiàng)目名
  "version": "1.0.0",  // 版本號(hào)
  "main": "index.js",  //入口文件
  "scripts": {  //npm run 加這里面的key就可以快速執(zhí)行命令行
    "test": "echo "Error: no test specified" && exit 1"
  },
  "author": "",  // 作者
  "license": "ISC",
  "description": "" //簡(jiǎn)介
}

這里面實(shí)際上是我們項(xiàng)目的一些基礎(chǔ)信息

我們需要自己配置webpack和babel 這里我們需要?jiǎng)?chuàng)建兩個(gè)文件
這里面我們要設(shè)置入口文件，輸出文件，babel，webpackServer等等，這里不做太詳細(xì)的介紹大家可以直接復(fù)制代碼，后面可能會(huì)開(kāi)專門的webpack視頻課程。
小小的介紹一下這些都是干什么用的

babel-core 調(diào)用Babel的API進(jìn)行轉(zhuǎn)碼
babel-loader
babel-preset-es2015 用于解析 ES6
babel-preset-react 用于解析 JSX
babel-preset-stage-0 用于解析 ES7 提案

命令行輸入

npm install --save-dev babel-core babel-loader@7.1.5 babel-preset-es2015 babel-preset-react babel-preset-stage-0

接下來(lái)我們?cè)趆elloReact 文件夾中創(chuàng)建 webpack.config.js 文件

// webpack.config.js 直接復(fù)制即可 
const path = require("path");
module.exports = {
   /*入口*/
   entry: path.join(__dirname, "src/index.js"),
    
   /*輸出到dist文件夾，輸出文件名字為bundle.js*/
   output: {
       path: path.join(__dirname, "./dist"),
       filename: "bundle.js"
   },
    /*src文件夾下面的以.js結(jié)尾的文件，要使用babel解析*/
    /*cacheDirectory是用來(lái)緩存編譯結(jié)果，下次編譯加速*/
    module: {
        rules: [{
            test: /.js$/,
            use: ["babel-loader?cacheDirectory=true"],
            include: path.join(__dirname, "src")
        }]
    },
    plugins : [],
    devServer : {
        disableHostCheck: true,
        inline: true,
        port:9527,
        contentBase: path.join(__dirname, "/"),
    }
}

接下來(lái)我們?cè)趆elloReact 文件夾中創(chuàng)建 .babelrc 文件

{
    "presets": [
      "es2015",
      "react",
      "stage-0"
    ],
    "plugins": []
  }

然后我們?cè)趐ackage.json文件的script中添加

//package.json
{
  "dependencies": {
    "webpack": "^3.6.0"
  },
  "name": "helloreact",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "server": "webpack-dev-server",
    "build": "webpack",
    "test": "echo "Error: no test specified" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "description": "",
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "webpack-cli": "^3.1.2",
    "webpack-dev-server": "^2.11.1"
  }
}

這些配置完了，我們就在helloReact mkdir src 并且在src中創(chuàng)建 index.js文件
在根路徑 helloReact下創(chuàng)建 index.html
因?yàn)檫@里我們要用到 react了所以需要命令行安裝一下 react

cnpm install --save react react-dom

html文件如下




    
    
    
    Document

js 文件如下

import React from "react";  //es6 引入react
import ReactDom from "react-dom"; //es6 引入reactReacrDom

ReactDom.render(  //ReactDom渲染hello React 這個(gè)html標(biāo)簽 到 id="app"這個(gè)標(biāo)簽下
    Hello React!, document.getElementById("app"));

一切都寫完了我們運(yùn)行服務(wù) npm run server 來(lái)看一眼

如果你看到屏幕顯示出 Hello React! 那么恭喜你環(huán)境配置完了咱們可以開(kāi)始學(xué)習(xí) React 了

如果你配置了半天還沒(méi)配置成功

到我的github下載代碼吧。。。https://github.com/piexlmax/h...

React的Hello World

我們看到上面的代碼

import React from "react";  //es6 引入react
import ReactDom from "react-dom"; //es6 引入reactReacrDom

ReactDom.render(  //ReactDom渲染hello React 這個(gè)html標(biāo)簽 到 id="app"這個(gè)標(biāo)簽下
    Hello React!, document.getElementById("app"));

這是一個(gè)簡(jiǎn)單的渲染是不是根本看不到 React的組件化模式呢？

所以這里我們需要寫一個(gè)根部組件，以后的組件都放跟組件里面，這個(gè)JS就理所當(dāng)然成了一個(gè)入口文件了

這里我們?cè)?src下面創(chuàng)建一個(gè)app.js文件

app.js

import React, {Component} from "react";
// 這里我們引入 react 和 react的Component 
// 創(chuàng)建 Hello 這個(gè)class（class屬于ES6內(nèi)容） 然后繼承 Component 我們就成功地創(chuàng)建了一個(gè) react組件

export default class App extends Component {
    render() {
        return (
            
                Hello,World!
            
        )
    }
}

index.js 我們需要改寫為這樣

import React from "react";
import ReactDom from "react-dom";

import App from "./app.js"  //引入我們的根組件App
ReactDom.render( //把App 渲染到 id=app的dom中
    , document.getElementById("app"));

到這里我們已經(jīng)實(shí)現(xiàn)了一個(gè)真正意義上的Hello World了！

傳說(shuō)中的jsx

開(kāi)始玩React了，那就必須要用到j(luò)sx語(yǔ)法，什么是jsx呢？

JSX是一種JavaScript的語(yǔ)法擴(kuò)展。JSX與模板語(yǔ)言相似，但它具有JavaScript的全部功能。JSX會(huì)被編譯為React.createElement()方法調(diào)用，將返回名為“React elements”的普通JavaScript對(duì)象。

上面代碼里我們看到我們的html實(shí)際上是在js中的render函數(shù)中書寫的，是一個(gè)React擴(kuò)展，允許我們編寫看起來(lái)像 HTML的JavaScript 。

切記自定義組件一定要大寫字母開(kāi)頭 return加括號(hào) 并且左括號(hào)要和return在同一行只能return一個(gè)標(biāo)簽，其余內(nèi)容都要在這個(gè)標(biāo)簽內(nèi)部

export default class App extends Component {
    render() {
        return (
            
                Hello,World!
            
        )
    }
}

像是這樣一段代碼，實(shí)際上我們真正使用的時(shí)候，已經(jīng)經(jīng)過(guò)了一次編譯，編譯過(guò)后它長(zhǎng)這樣。

export default class App extends React.Component {
  render() {
    return (
      React.createElement(
        "div",
        "Hello,World!"
      )
    );
  }
}

下面的這一段代碼是不是就不容易理解了？這實(shí)際上是js可以幫我們?nèi)鴮慸om的代碼。
在React中JSX你可以理解為我們可以在js中寫HTML代碼了更通俗一點(diǎn)

export default class App extends Component {
    // 方法 生命周期 state 等
    render() {
        return (
        //    HTML模板
        )
    }
}

React的基本使用方法

state

我們之前學(xué)過(guò)VUE，VUE中每個(gè)組件的數(shù)據(jù)存在自己的data中，那么在React中，數(shù)據(jù)存在哪里呢？沒(méi)錯(cuò)狀態(tài)state中。
由于我們這里用的是ES6的class 所以我們子類constructor中必須先調(diào)用super才能引用this。
所以我們這里應(yīng)該這么寫state

export default class App extends Component {
    constructor(){
        super()
        this.state={
            hello:"hello World"
        }
    }
    render() {
        return (
            
                {this.state.hello}
            
        )
    }
}

這里我們可以看出，我們想要在render中使用js 就需要用一個(gè){} 這里面的內(nèi)容同樣可以書寫簡(jiǎn)單的js表達(dá)式。

rander函數(shù)中使用state和JS表達(dá)式

export default class App extends Component {
    constructor(){
        super()
        this.state={
            hello:"hello World"
        }
    }
    render() {
        return (
            
                
                    展示state中的數(shù)據(jù)：{this.state.hello}
                    三元，短路等，這里用三元示例{this.state.hello?"存在hello":"不存在hello"}
                    簡(jiǎn)單計(jì)算{1+1}
                    JS表達(dá)式{Math.floor(Math.random()*10)}
                
            
        )
    }
}

方法的聲明以及修改state

聲名方法我們有兩種模式，一種是直接書寫方法名(參數(shù)){代碼段}模式，這樣的模式在調(diào)用的時(shí)候需要手動(dòng)bind(this)
還有一種就是使用es6的箭頭函數(shù)，讓其this指向自身

修改state數(shù)據(jù)需要調(diào)用 this.setState()方法內(nèi)部接收一個(gè)對(duì)象要修改哪個(gè)key 就在對(duì)象內(nèi)部填寫這個(gè)key，并且后面的值就是你要修改的內(nèi)容，如果，key在state中不存在，則會(huì)在state中增加這個(gè)key

export default class App extends Component {
    constructor(){
        super()
        this.state={
            hello:"hello World"
        }
    }
    bye(){
        this.setState({
            hello:"bye world"
        })
    }
    byebye=()=>{
        this.setState({
            helloo:"bye world"
        })
    }
    render() {
        return (
            
                
                    非箭頭函數(shù)：{this.state.hello}
                    箭頭函數(shù):{this.state.helloo}
                
                  
                {/* 這里使用bind來(lái)綁定this 如果傳參的話this.bye.bind(this,參數(shù)1，參數(shù)2) */} 
                
                 {/* 這里是箭頭函數(shù)的默認(rèn)屬性來(lái)搞定了this問(wèn)題 如果傳參的話()=>{this.byebye(參數(shù)1，參數(shù)2)*/}}
            
        )
    }
}

這里需要注意，只有觸發(fā)了state的變化，才會(huì)導(dǎo)致組件的重新渲染

循環(huán)語(yǔ)句，條件語(yǔ)句的使用

大家在vue中使用v-for 就能夠完成循環(huán)生成組件這樣的操作了，在react中我們應(yīng)該怎么做呢？

循環(huán)語(yǔ)句
我們說(shuō)過(guò) jsx 里面是可以自由自在地使用js的一般情況下我們使用map循環(huán)

在循環(huán)的時(shí)候，每一個(gè)return出來(lái)的標(biāo)簽都需要添加 key={鍵值} “鍵值”是創(chuàng)建元素?cái)?shù)組時(shí)需要包含的特殊字符串屬性。鍵值可以幫助React識(shí)別哪些元素被更改，添加或刪除。因此你應(yīng)當(dāng)給數(shù)組中的每一個(gè)元素賦予一個(gè)確定的標(biāo)識(shí)

export default class App extends Component {
    constructor(){
        super()
        this.state={
            arr:[{text:"qm"},{text:"奇淼"},{text:"大帥逼"}]
        }
    }
    
    render() {
        return (
            
            {/* 我們說(shuō)過(guò) jsx 里面是可以自由自在地使用js的 這里我們來(lái)玩一個(gè)循環(huán)生成li */}
                
                   {this.state.arr.map((item,key)=>{
                       return({item.text})
                   })}
                
            
        )
    }
}

判斷語(yǔ)句
判斷語(yǔ)句我們一般使用短路表達(dá)式三元表達(dá)式來(lái)展示我們想要展示的內(nèi)容，但是如果需要復(fù)雜的條件判斷，那么我們最好是寫一個(gè)自執(zhí)行函數(shù)，然后再函數(shù)體內(nèi)你就可以為所欲為了，記住一定要return你想要得到的dom標(biāo)簽。

export default class App extends Component {
    constructor(){
        super()
        this.state={
            arr:[{text:"qm"},{text:"奇淼"},{text:"大帥逼"}]
        }
    }
    
    render() {
        return (
            
            {/*簡(jiǎn)單的三元和短路實(shí)例*/}
            {this.state.arr.length==3?我是三元判斷的三個(gè)
:我是三元判斷的不是三個(gè)}
            {this.state.arr.length==3&&我是短路判斷的三個(gè)}
            {/* 我們說(shuō)過(guò) jsx 內(nèi)部支持簡(jiǎn)單的表達(dá)式 如果我們使用 if條件句的話 會(huì)導(dǎo)致報(bào)錯(cuò)*/}
                {/*
                    if(this.state.arr.length==3){
                        return(有三個(gè))
                    }
                */}
            {/* 我們說(shuō)過(guò) jsx 這已經(jīng)是js代碼段而不是簡(jiǎn)單語(yǔ)句了，我們簡(jiǎn)單判斷可以使用三元或者短路表達(dá)式來(lái)進(jìn)行，但是復(fù)雜一點(diǎn)的，我們可以使用如下方法*/}
            {(()=>{
                if(this.state.arr.length==3){
                    return(數(shù)組有三個(gè)元素)
                }else{
                    return(數(shù)組有不是三個(gè)元素)
                }
            })()}
            
        )
    }
}

循環(huán)判斷嵌套
有些時(shí)候我們需要根據(jù)特定條件去循環(huán)，然后渲染出篩選過(guò)后的數(shù)據(jù)，這時(shí)候就需要循環(huán)和判斷嵌套使用了，其實(shí)也相當(dāng)簡(jiǎn)單，我們的循環(huán)實(shí)際上是一個(gè)簡(jiǎn)單的js表達(dá)式，內(nèi)部的function中可以隨意書寫js，記得return就好了

export default class App extends Component {
    constructor(){
        super()
        this.state={
            arr:[{text:"qm"},{text:"奇淼"},{text:"大帥逼"}]
        }
    }
    
    render() {
        return (
            
                {this.state.arr.map((item,key)=>{
                    if(key%2==0){
                        return(我是可以余2的{item.text})
                    }else{
                        return(我是不能余2的{item.text})
                    }
                })}
            
        )
    }
}

獲取DOM（Refs）

有些時(shí)候我們不得不去操作DOM，那這時(shí)候我們需要用到 ref 屬性

React支持一個(gè)可以附加到任何組件的特殊屬性ref。ref屬性可以是一個(gè)字符串或一個(gè)回調(diào)函數(shù)。當(dāng)ref屬性是一個(gè)回調(diào)函數(shù)時(shí)，函數(shù)接收底層DOM元素或類實(shí)例（取決于元素的類型）作為參數(shù)。這使你可以直接訪問(wèn)DOM元素或組件實(shí)例。

另外這里應(yīng)該注意不要過(guò)度使用 Refs。

export default class App extends Component {
    constructor(){
        super()
        this.state={
            arr:[{text:"qm"},{text:"奇淼"},{text:"大帥逼"}]
        }
    }
    
    render() {
        return (
            
                {this.state.arr.map((item,key)=>{
                    if(key%2==0){
                        return(我是可以余2的{item.text})
                        {/* 這樣我們可以通過(guò) this.refs.link 獲取到這個(gè)dom 并且操作dom了 */}
                    }else{
                        return(我是不能余2的{item.text})
                    }
                })}
            
        )
    }
}

總結(jié)

到這里我們已經(jīng)學(xué)會(huì)了React的基本組件內(nèi)部的操作了，React相對(duì)于Vue來(lái)說(shuō)更加靈活，但是唯一的缺點(diǎn)是數(shù)據(jù)流是單向的，必須通過(guò)setState來(lái)修改，對(duì)于處理表單來(lái)說(shuō)會(huì)有些麻煩，不過(guò)有些UI框架，插件幫我們處理了這些大麻煩。寫寫玩玩吧React還是比較簡(jiǎn)單的。