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

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

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

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

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

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

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

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

開始之前，大家可以去官網(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)版本號 并且是 3.6.0版本，那么我們就可以按照教程繼續(xù)走下去了
如果沒有的話 那么我們就需要命令行繼續(xù)

cnpm i webpack@3.6.0 -S -g

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

接下來 我們命令行輸入

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

運行完成以后，我們會得到一個package.json文件 打開看看

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

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

我們需要自己配置webpack和babel 這里我們需要創(chuàng)建兩個文件
這里面我們要設(shè)置入口文件，輸出文件，babel，webpackServer等等，這里不做太詳細(xì)的介紹 大家可以直接復(fù)制代碼，后面可能會開專門的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

接下來我們在helloReact 文件夾中創(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是用來緩存編譯結(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, "/"),
    }
}

接下來我們在helloReact 文件夾中創(chuàng)建 .babelrc 文件

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

然后我們在package.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
因為這里我們要用到 react了 所以需要命令行安裝一下 react

cnpm install --save react react-dom

html文件如下

js 文件如下

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

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

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

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

如果你配置了半天還沒配置成功

到我的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
 這個html標(biāo)簽 到 id="app"這個標(biāo)簽下
    
Hello React!
, document.getElementById("app"));

這是一個簡單的渲染 是不是根本看不到 React的組件化模式呢？

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

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

app.js

import React, {Component} from "react";
// 這里我們引入 react 和 react的Component 
// 創(chuàng)建 Hello 這個class（class屬于ES6內(nèi)容） 然后繼承 Component 我們就成功地創(chuàng)建了一個 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)實現(xiàn)了一個真正意義上的Hello World了！

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

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

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

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

export default class App extends Component {
    render() {
        return (
            

                Hello,World!
            
        )
    }
}

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

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

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

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

state

我們之前學(xué)過VUE，VUE中每個組件的數(shù)據(jù)存在自己的data中，那么在React中，數(shù)據(jù)存在哪里呢？沒錯狀態(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 就需要用一個{} 這里面的內(nèi)容同樣可以書寫簡單的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"}
                    
簡單計算{1+1}
                    
JS表達(dá)式{Math.floor(Math.random()*10)}
                
            
        )
    }
}

方法的聲明以及修改state

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

修改state數(shù)據(jù)需要調(diào)用 this.setState()方法 內(nèi)部接收一個對象 要修改哪個key 就在對象內(nèi)部填寫這個key，并且后面的值就是你要修改的內(nèi)容，如果，key在state中不存在，則會在state中增加這個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來綁定this 如果傳參的話this.bye.bind(this,參數(shù)1，參數(shù)2) */} 
                {this.byebye()}}>箭頭函數(shù)
                 {/* 這里是箭頭函數(shù)的默認(rèn)屬性來搞定了this問題 如果傳參的話()=>{this.byebye(參數(shù)1，參數(shù)2)*/}}
            
        )
    }
}

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

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

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

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

export default class App extends Component {
    constructor(){
        super()
        this.state={
            arr:[{text:"qm"},{text:"奇淼"},{text:"大帥逼"}]
        }
    }
    
    render() {
        return (
            

            {/* 我們說過 jsx 里面是可以自由自在地使用js的 這里我們來玩一個循環(huán)生成li */}
                

                   {this.state.arr.map((item,key)=>{
                       return(
{item.text}
)
                   })}
                
            
        )
    }
}

判斷語句
判斷語句我們一般使用短路表達(dá)式 三元表達(dá)式來展示我們想要展示的內(nèi)容，但是如果需要復(fù)雜的條件判斷，那么我們最好是寫一個自執(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 (
            

            {/*簡單的三元和短路實例*/}
            {this.state.arr.length==3?
我是三元判斷的三個
:
我是三元判斷的不是三個
}
            {this.state.arr.length==3&&
我是短路判斷的三個
}
            {/* 我們說過 jsx 內(nèi)部支持簡單的表達(dá)式 如果我們使用 if條件句的話 會導(dǎo)致報錯*/}
                {/*
                    if(this.state.arr.length==3){
                        return(
有三個
)
                    }
                */}
            {/* 我們說過 jsx 這已經(jīng)是js代碼段而不是簡單語句了，我們簡單判斷可以使用三元或者短路表達(dá)式來進(jìn)行，但是復(fù)雜一點的，我們可以使用如下方法*/}
            {(()=>{
                if(this.state.arr.length==3){
                    return(
數(shù)組有三個元素
)
                }else{
                    return(
數(shù)組有不是三個元素
)
                }
            })()}
            
        )
    }
}

循環(huán)判斷嵌套
有些時候我們需要根據(jù)特定條件去循環(huán)，然后渲染出篩選過后的數(shù)據(jù)，這時候就需要循環(huán)和判斷嵌套使用了，其實也相當(dāng)簡單，我們的循環(huá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，那這時候 我們需要用到 ref 屬性

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

另外這里應(yīng)該注意 不要過度使用 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}
)
                        {/* 這樣我們可以通過 this.refs.link 獲取到這個dom 并且操作dom了 */}
                    }else{
                        return(
我是不能余2的{item.text}
)
                    }
                })}
            
        )
    }
}

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