摘要：都會造成錯誤，注意一定一定嚴格的用，所以我建議直接復制我的。因為用的話他會轉義代碼，寫不寫其實一個樣。不可避免的，構建肯定是要用到的。這個時候一般用的是在外面保存然后里面調用第二個坑更隱蔽。

獻給熟悉基礎的React語法的剛接觸React的同學~

如果你已經寫過半年以上的React那也不用看了，畢竟我水平并不高

React 是一個不存在的網絡公司Facebook出的JavaScript視圖框架。

他們官網寫著

JUST THE UI
VIRTUAL DOM
DATA FLOW

這三個特性。

當我第一次看到的時候在想，這丫的弱爆了，人家動輒就MVC，MVVM的框架，你竟然只寫了一個UI？

當然，當時我的想法肯定是錯的。

React擁有非常高的性能，結合單向數據流還有組件化思想，可以很舒服的做出現代化的前端產品。

首先，得有開發環境。

Node的安裝推薦用nvm，我在上一篇《編譯我的開發環境》里有寫。

主要是在項目里得加入編譯jsx到正常的js

$ npm install --save gulp browserify babelify vinyl-source-stream babel-core

在gulpfile.babel.js里加上任務

import gulp from "gulp";
import browserify from "browserify";
import babelify from "babelify";
import source from "vinyl-source-stream";

gulp.task("jsx", () => {
  return browserify("src/app.js")
    .transform(babelify.configure({
        stage:0
    }))
    .bundle()
    .pipe(source("bundle.js"))
    .pipe(gulp.dest("dist/"));
});

這樣，開發環境就大功告成了。

然而，然而。

起初的時候要寫React這種代碼是比較痛苦的。

平常就是寫HTML，然后主要通過jQuery調整頁面，完成一些顯示的功能。

而React是強迫組件化，強制性的用組件化來構造前端。

這里寫我的Live template吧，直接復制粘貼到WebStorm就可以啦

import React from "react";

class $className$ extends React.Component {

  render() {
    return (
        $content$
      );
  }
}

export default $className$;

看到這里，如果同學你不熟悉ES2015的語法可能就感覺看不懂這是什么了，這還是JavaScript么？

如果真的對ES2015語法不太熟悉，可以看看阮一峰老師的書：ECMAScript 6入門

我非常的喜歡ES6的語法，因為寫起來非常的清晰明了。看著舒服。

只是絕大部分瀏覽器現在并不能完全支持ES6，所以需要babel轉義。

上面的gulp的jsx task就是完成這樣的轉義。

這個問題和中文有關。

當初我因為英文不過關，老是把Component寫成Components或者component或者components。

這幾種都是不行的。都會造成錯誤，注意一定一定嚴格的用Component，所以我建議直接復制我的Live template。

其實挺糾結的。因為用babel的話他會轉義代碼，寫不寫"use strict"其實一個樣。

然而我還是建議加上"use strict"。

如果放棄babel，那么我們也可以寫出嚴格的js代碼，這樣多好。

這里有些很奇怪的問題。有一些情況下這樣寫會出錯

class App extends React.Component {

  handleChange(e) {
    console.log(this);
  }

  render() {
    return (
      
    );
  }
}

對，這個this，有時候不知道為什么this指向就會變。

如果你碰到了這樣的問題，可能加一個綁定當前this會有效：

這個問題并沒有深究，留待再碰到再解決吧。

不可避免的，構建SPA肯定是要用到Ajax的。

我有時候也想用fetch，但是，這次我慫了。 瀏覽器兼容性實在是太差了。

chrome 42 才支持。不能指望其他瀏覽器跟上了。

言歸正傳，一般情況下Ajax數據是要傳到state里面的，所以一般是這樣的：

class App extends React.Component {

  fetchSomething() {
    $.ajax({
      url: "http://foo.com",
      dataType: "json",
      method: "GET",
      success: function(res) {
        this.setState({ res: res });
        }
      });
  }

  render() {
    return (...);
  }
}

如果你真的這樣寫，恭喜你，你會碰到兩個坑！

一個是this，在success中的this指向可是XMLHttpRequest的對象哦，并不是App 的class。這個時候一般用的是在外面保存this,然后里面調用

let that = this;

that.setState({});

第二個坑更隱蔽。我當初愣是沒想起來。

異步

即使經常寫原生js也很容易忽視這個問題。

ajax請求默認是異步的，也就是說，數據尚未傳送到客戶端的時候，js就已經跑完了客戶端的所有代碼(好幾遍)。V8那個效率，你懂的。

問題來了。數據沒有到，那么this.setState也就沒有觸發，那么后面用數據怎么辦？

GG

好了，既然原理知道了，那么解決方法也就很簡單了，在Ajax請求的時候改成同步的

$.ajax({
  url: "/foo/bar",
  dataType: "json",
  async: false,
  success: function(res){
    this.setState({res});
  }
});

這里也就造成了一個問題，Ajax請求在了主線程上。網絡堵塞就完蛋了。。。額，再說吧。

constructor是ES6的class的構造函數，在React中用處非常的大

class App extends React.Component {
  constructor(props) {
    super(props);

    // do something

    this.state = {
      author: "Annatar"
    }
  }

  render() {
    return (...);
  }
}

構造函數必須傳入props，并且在第一行就得首先調用父類的構造函數。

state的設置在constructor中并不是setState了，而是變成了賦值。就像上面的那樣

我就在constructor中調用Ajax。。。

這個是深坑啊。埋了我好長時間。。。

你要是老老實實跟著官網寫props，就像這樣

class App extends React.Component {

  static PropTypes = {
    url: React.PropTypes.string.isRequired
  }

  static defaultProps = {
    url: "/foo/bar"
  }

  render() {
    return (...);
  }
}

哈哈，正常情況是會報錯的！

我經過查資料才得知static目前是ES7草案上的屬性，但是React官方已經推薦用了。

默認的babel并沒有開啟ES7的轉義。所以會報錯，不認識。

所以我在gulp配置文件中把babelify的stage改成了0.表示所有屬性都用，

然后就通過了

我目前碰到的最深的坑，沒有之一。

我記得之前的寫法是React.render(, document.body)，嗯，挺正常的。好

后來升級到0.14.0，要引入react-dom，寫成這樣也挺好的：

import ReactDOM from "react-dom";

import App from "./app";
ReactDOM(, document.body);

嗯，挺好的。看著不錯嘛。

但是。。。為毛小版本的升級0.14.2就要換成ReactDOM.render！

最坑的是react-router這個項目里面的readme里寫的是錯誤的寫法！(現在是正確的)

我當時困惑了足足兩個小時。后來哪里都確定了沒有問題。就是找不出原因，后來就輸出ReactDOM才發現里面丫的藏著一個render方法。這才正確。

一定記得，多看文檔。注意，注意，注意，千萬只看官方的文檔，其他的誰都不可靠！

import ReactDOM from "react-dom";
// import {render} from "react-dom"; 也行

import App from "./app";
ReactDOM.render(, document.body);
// render(, document.body);

上面講了react-router的坑爹文檔。這里得說說react-router的坑爹版本號

安裝的時候千萬別懶省事，不然就直接拷貝：

$ npm install --save history react-router@latest

我當時就是懶得打最后的@latest，導致怎么都沒辦法顯示效果。也是找了大半天的問題。后來才發現Router是undefined

別懶省事就成了。

關于Flux理解不夠深，也沒有用。

反正我現在看到react-router就后背涼颼颼的。Redux也是這老大做的吧。感覺菊花一緊。。。

從一開始的別扭，到現在不寫React的別扭，轉變其實還是蠻大的。

關于React的探索，這里并不是終點。

其他的，動畫，Flux，React-Native，Meteor都是未來要研究的東西。

好好學習吧，少年~