摘要：并根據(jù)官網(wǎng)文檔的語法順序，寫了對應(yīng)的的語法，并附一個教程。和受限元素一樣，使用事件可以監(jiān)聽值的變化。有一個初始值，但這個值用戶可以改變并會反應(yīng)到界面上。

以前寫Vue寫慣了，心血來潮，寫起了react。并根據(jù)Vue官網(wǎng)文檔的語法順序，寫了對應(yīng)的React的語法，并附一個教程demo。

教程的github地址：Close2React

項目使用框架版本主要有 react(15.4.1) + react-dom(15.4.1) + webpack(1.13.3) + axios(0.15.3) + node(6.2.2), 詳情具體可見下文的【環(huán)境配置】

目前該項目有兩個分支, half-es6 + master

half-es6和master實現(xiàn)的功能一樣, 實現(xiàn)了CURD + Axios + Others

half-es6的寫法并沒有完全使用es6的class的概念, master是完善了它

寫react就需要先配置webpack還有jsx

首先，新建一個項目，npm init

然后在package中加入下面這些依賴

  "dependencies": {
    "react": "^15.4.1",
    "react-dom": "^15.4.1",
  },
  "devDependencies": {
    "axios": "^0.15.3",
    "babel-core": "^6.18.2",
    "babel-loader": "^6.2.8",
    "babel-preset-es2015": "^6.18.0",
    "babel-preset-react": "^6.16.0",
    "babel-preset-react-hmre": "^1.1.1",
    "bootstrap": "^4.0.0-alpha.2",
    "css-loader": "^0.26.1",
    "file-loader": "^0.9.0",
    "html-webpack-plugin": "^2.24.1",
    "node-sass": "^3.13.0",
    "open-browser-webpack-plugin": "0.0.3",
    "sass-loader": "^4.0.2",
    "style-loader": "^0.13.1",
    "url-loader": "^0.5.7",
    "webpack": "^1.13.3",
    "webpack-dev-server": "^1.16.2"
  }

有兩個比較重要的指令

  "scripts": {
    "dev": "webpack-dev-server --progress --profile --hot",
    "build": "webpack --progress --profile --colors"
  },

在webpack的配置中，我想要的目錄結(jié)構(gòu)是橫向目錄(自創(chuàng)詞 ???，即所有index頁面要用到的東西，包括sass和js都寫在index目錄下,底下會有目錄示意圖)，目的是達到，我在src下編輯我想要的文件，打包后生成到public下去。
寫在配置最前面的是路徑的配置

var ROOT_PATH = path.resolve(__dirname);
var SRC_PATH = path.resolve(ROOT_PATH, "src");
var PUBLIC_PATH = path.resolve(ROOT_PATH, "Public");

配合著入口文件和輸出文件的配置

entry: {
    index: path.resolve(SRC_PATH, "index/index.js"),
},
output: {
    path: PUBLIC_PATH,
    filename: "[name].bundle.js",
},

主要的插件就是這個html生成的插件和自動打開瀏覽器的插件，還有babel的配置，不管三七二十一都把他們的等級開到最大

plugins: [
    new HtmlwebpackPlugin({
        title: "My first react-webpack"
    }),
    new OpenBrowserPlugin({
        url: "http://localhost:8200"
    })
],
babel: { //配置babel
    "presets": ["es2015","stage-0", "react"],
},

npm run dev，會自動打開localhost:8200,就可以在瀏覽器上看到初始化的頁面

當你開始要寫js的時候發(fā)現(xiàn)，怎么這么多警告，

不用擔心 google 一下都能解決。

在這里下載react 和 react-native：

并勾選對應(yīng)項，保存：

警告會少很多，但是還是有一些警告，怎么辦呢

點擊這個小燈泡，然后選擇configure

把這兩項勾選掉，保存，就一片清凈了。

Public是打包后生成的目錄，src是寫目錄

src采用橫向目錄結(jié)構(gòu)(自創(chuàng)詞 ???)，即所有index頁面要用到的東西，包括sass和js都寫在index目錄下。

npm i

npm run build 生成打包后的文件

npm run dev

1 文本插值

{text}

2 html 插值

balabalabalabala.......
"}} />

3 屬性賦值

4 帶js表達式的插值 xxx = {三元表達式}

5 事件綁定

事件綁定和屬性綁定一樣

// 如果沒有使用class繼承的寫法的話
getInitialState() {
    return {
        tabTxt: ["CURD", "Axios", "Others"],
        choice: 0,
    }
},
    
switchChoice(idx){
        this.setState({
            choice: idx
        })
    },
    
renderTabInit(text, idx) {
    return ({text})
},

有可能會遇到一些BOOM爆炸的bug，請看react父子組件間的事件綁定

1 className

className={this.props.idx == this.props.choice? "tab on" : "tab"}

2 style

第一個括號是插值，第二個括號表示style對象

style={{color: "#FEC264", fontSize: "40px"}}

在getInitalState中定義了一個數(shù)組tabTxt

getInitialState() {
        return {
            tabTxt: ["CURD", "Axios", "Others"],
            choice: 0,
        }
    },

循環(huán)渲染這個子組件，每個子組件有自己的唯一的key，作用和track-by（或v-bind:key）的作用類似

renderTabInit(text, idx) {
        return ({text})
    },

列表渲染的v-for 在react中使用map

v-if 的條件渲染可用三元，如復(fù)雜判斷則需要在return前寫邏輯代碼

render() {
    let currentPage = null;
    if(this.state.choice == 0) {
        currentPage = 
    } else if (this.state.choice == 1){
        currentPage = 
    } else {
        currentPage = 
    }
    return (
        

            

                {this.state.tabTxt.map(this.renderTabInit)}
            
            

                {currentPage}
            
        
    )
}

表單組件有幾個受用戶影響的屬性：

value，用于input、textarea組件
checked， 用于類型為 checkbox 或者 radio 的 input 組件
selected，用于option組件

每個表單控件都有一個onChange事件用來監(jiān)聽組件的變化:

當 input 或 textarea 的value 發(fā)生變化時
input 的 checked 狀態(tài)改變時
option 的 selected 狀態(tài)改變時

    //es5
    render: function() {
        return ;
     }
    // 在渲染出來的元素里輸入任何值都不起作用，因為 React 已經(jīng)賦值為 Hello!

如果要讓用戶修改的值有用，則需要：

  getInitialState() {
    return {value: "Hello!"};
  },
  handleChange(event) {
    this.setState({value: event.target.value});
  },
  render() {
    let value = this.state.value;
    return ;
  }

    //es5
   render: function() {
      return (
          

             Option 1
             Option 2
            
              Apple
              Banana
              Cranberry
            
          
      );
    }    
    // 用戶輸入將立即反應(yīng)到元素上。
    // 和受限元素一樣，使用 onChange 事件可以監(jiān)聽值的變化。
    // default 有一個初始值，但這個值用戶可以改變并會反應(yīng)到界面上。  

// 父組件，相當于最大的組件
// 子組件是一個tab，和三個page，切換tab 就能切換 page
const Content = React.createClass({
    getInitialState() {
        return {
            tabTxt: ["CURD", "Axios", "Others"],
            choice: 0, // 當前選中的tab下標
        }
    },
    
    switchChoice(idx){
        this.setState({ // 修改state    
            choice: idx
        })
    },
    
    renderTabInit(text, idx) {
        return ({text})
    },
    
    render() {
        let currentPage = null;
        if(this.state.choice == 0) { // 條件判斷
            currentPage = 
        } else if (this.state.choice == 1){
            currentPage = 
        } else {
            currentPage = 
        }
        return (
            

                

                    {this.state.tabTxt.map(this.renderTabInit)} //循環(huán)輸出
                
                

                    {currentPage}
                
            
        )
    }
});

在使用事件綁定choose={this.switchChoice} 的時候，因為沒有采用class的學法所以不用bind
class的寫法的時候需要bind: choose={this.switchChoice.bind(this)}
不用class的寫法的時候不綁定不會導(dǎo)致子組件的this指向錯誤，如果綁定了還會報錯（如綁定this會有警告） 
使用了class的寫法的時候則需要手動bind, 這個在文章最后會詳細解說

// tab 子組件
const Tab = React.createClass({
    chooseTab() {
        this.props.choose(this.props.idx); //一定要將父組件的方法在子組件中做一個中轉(zhuǎn)
    },
    
    render(){
        return (
            {this.props.children}
        )
    }
});

當你的組件還沒有掛載在容器上，可以用this.refs訪問
已經(jīng)掛載完畢，通過react-dom提供findDOMNode方法拿到組件對應(yīng)的dom
另外：
如果ref是設(shè)置在原生HTML元素上，它拿到的就是DOM元素;
如果設(shè)置在自定義組件上，它拿到的就是組件實例，這時候就需要通過 findDOMNode來拿到組件的DOM元素。

//es5
var MyComponent = React.createClass({
  handleClick: function() {
    this.refs.myTextInput.getDOMNode().focus(); // 通過this.refs.xxxxx拿到元素
  },
  render: function() {
    return (
      

         // 給輸入框命名ref 
        
      
    );
  }
});

第一步，把所有createClass 換成 class xxx extends Component。

我們用一半的es6的姿勢寫出來的代碼如下：

// half-es6
import React from "react";
const List = React.createClass({ // 用createdClass創(chuàng)建一個組件
    getInitialState() { // 初始化數(shù)據(jù)state    
        return { // 在函數(shù)的return里定義state
            status: false, 
        }
    }, // 這里一定寫逗號
    saveLiValue() { // 組件內(nèi)要調(diào)用的function
        this.setState({
            status: false
        })
    },
    ....
})

我們用完整的es6的姿勢寫出來的代碼如下：

// master
// 利用class姿勢的es6
import React, {Component} from "react";
class List extends Component{
    constructor(props){
        super(props);
        this.state = { 
            status: false, 
        }
    } // 沒有逗號
    
    saveLiValue() {
        this.setState({
            status: false
        })
    }
    ....
}    

第二步，在父組件中，給所有需要傳遞給子組件的方法加bind(this)。

這句話有點繞口，但一定要理解。
1、第一層意思是在父組件上加bind(this)
2、加的目的是防止子組件在調(diào)用方法的時候this指向錯誤

例如下面這個初始化列表的函數(shù)

// half-es6
// 如果在這種寫法下bind(this)，編譯后的頁面會報警告
// 大概是說react已經(jīng)提供了豐富的方法可以避免指向錯誤，不需要手動bind
initListLi(val, idx) {
    return (
        
    )
},

render() {
    return (
        

            
List總條數(shù): {this.state.list.length}
            
目前完成條數(shù): {this.state.didCount}
            

                {
                    this.state.list.map(this.initListLi)
                }
            
            
        
    )
}

但是使用了class的寫法之后，就可能會出現(xiàn)警告說 props 是null

這個時候就需要手動bind(this)

// master
// es6的class寫法下的函數(shù)的事件綁定，
// 如果子組件會需要調(diào)用函數(shù)，則在父組件中手動向子組件中bind(this)
initListLi(val, idx) {
    return (
        
    )
}

render() {
    return (
        

            
List總條數(shù): {this.state.list.length}
            
目前完成條數(shù): {this.state.didCount}
            

                {
                    this.state.list.map(this.initListLi.bind(this)) //子組件中會需要調(diào)用函數(shù)
                }
            
            
        
    )
}

github地址：Close2React
我是嘉寶Appian，一個賣萌出家的算法妹紙。