[React] 03 - Intro: react.js in twelve demos

Ref: React 入門實例教程

這算什麼，react學習例子的十二門徒？哈哈

---

 

如何運行別人的react項目?

Ref: 【React全家桶入門之CODE】項目代碼與使用方法

使用git克隆項目到本地：git clone https://github.com/awaw00/react-curd.git。

如今你獲得的是整個項目最新版本的代碼。

(1) 執行npm i roadhog json-server -g 安裝全局工具。

(2) 執行npm i 來安裝項目依賴。

(3) 執行npm run server 啓動服務器，而後再執行npm run dev 啓動客戶端。

 

【npm start啓動服務器便可】

 

HTML 模板，以及ReactDOM.render()

 

能夠將 src 子目錄的 js 文件進行語法轉換，轉碼後的文件所有放在 build 子目錄

$ babel src --out-dir build

 

  

JSX 語法

遇到 HTML 標籤（以 < 開頭），就用 HTML 規則解析；

遇到代碼塊（以 { 開頭），就用 JavaScript 規則解析。

 

 

數組變量

 

 

組件

組件類的第一個字母必須大寫，不然會報錯，好比HelloMessage不能寫成helloMessage。

組件類只能包含一個頂層標籤，不然也會報錯。

由於 class 和 for 是 JavaScript 的保留字，因此：

(1) class 屬性須要寫成 className ;

(2) for 屬性須要寫成 htmlFor ;

 

 

this.props.children

這裏須要注意， this.props.children 的值有三種可能：

(1) 若是當前組件沒有子節點，它就是 undefined ;

(2) 若是有一個子節點，數據類型是 object ；

(3) 若是有多個子節點，數據類型就是 array 。

因此，處理 this.props.children 的時候要當心。

 

 

 

PropTypes

 

 

獲取真實的DOM節點

獲取用戶的輸入，必須獲取真實的 DOM 節點，虛擬 DOM 是拿不到用戶輸入的。

爲了作到這一點，文本輸入框必須有一個 ref 屬性，

而後 this.refs.[refName] 就會返回這個真實的 DOM 節點。 

除了 Click 事件之外，還有 KeyDown 、Copy、Scroll 等，完整的事件清單請查看官方文檔。

 

 

this.state

將組件當作是一個狀態機，(1) 一開始有一個初始狀態，(2) 而後用戶互動，致使狀態變化，(3) 從而觸發從新渲染 UI 。

(1) this.props 表示那些一旦定義，就再也不改變的特性；

(2) this.state 表示會隨着用戶互動而產生變化的特性；【liked】

 

 

表單

用戶在表單填入的內容，因此不能用 this.props 讀取。

textarea 元素、select元素、radio元素都屬於這種狀況，更多介紹請參考官方文檔。

 

 

組件的生命週期

will 函數在進入狀態以前調用，did 函數在進入狀態以後調用。

componentWillMount()
componentDidMount()

componentWillUpdate(object nextProps, object nextState)
componentDidUpdate(object prevProps, object prevState)

componentWillUnmount() 

此外，React 還提供兩種特殊狀態的處理函數。

componentWillReceiveProps(object nextProps)：已加載組件收到新的參數時調用
shouldComponentUpdate(object nextProps, object nextState)：組件判斷是否從新渲染時調用

 

 

Ajax

組件的數據來源，一般是經過 Ajax 請求從服務器獲取，

能夠使用 componentDidMount 方法設置 Ajax 請求，等到請求成功，再用 this.setState 方法從新渲染 UI。

上面代碼使用 jQuery 完成 Ajax 請求，這是爲了便於說明。React 自己沒有任何依賴，徹底能夠不用jQuery，而使用其餘庫。

 

咱們甚至能夠把一個Promise對象傳入組件。

ReactDOM.render(
 // 從Github的API抓取數據，而後將Promise對象做爲屬性，
 // 傳給 組件 <RepoList
    promise={$.getJSON('https://api.github.com/search/repositories?q=javascript&sort=stars')}
  />,
  document.body
);RepoList

組件代碼：

var RepoList = React.createClass({
  getInitialState: function() {
    return { loading: true, error: null, data: null};
  },

  componentDidMount() {
    this.props.promise.then(
      value => this.setState({loading: false, data: value}),
      error => this.setState({loading: false, error: error}));
  },

  render: function() {

　　// 若是Promise對象正在抓取數據（pending狀態），組件顯示"正在加載"；
　　// 若是Promise對象報錯（rejected狀態），組件顯示報錯信息；
　　// 若是Promise對象抓取數據成功（fulfilled狀態），組件顯示獲取的數據。

    if (this.state.loading) {
      return <span>Loading...</span>;
    }
    else if (this.state.error !== null) {
      return <span>Error: {this.state.error.message}</span>;
    }
    else {
      var repos = this.state.data.items;
      var repoList = repos.map(function (repo) {
        return (
          <li>
            <a href={repo.html_url}>{repo.name}</a> ({repo.stargazers_count} stars) <br/> {repo.description}
          </li>
        );
      });
      return (
        <main>
          <h1>Most Popular JavaScript Projects in Github</h1>
          <ol>{repoList}</ol>
        </main>
      );
    }
  }
});