React 導讀（一）

前言

寫這篇文章的主要目標是讓初學者更快的上手 React 的項目開發，能有一個循循漸進的理解過程。須要有必定的 JavaScript 基礎和 NPM 的使用經驗。很少說了，下面會按這個順序進行介紹：

1. React 如何編寫 Hello World!
2. React 中三個最基礎、最重要的東西
3. React 中的 JSX
4. 你的第一個 Web 組件
5. React 中最開始須要關注的生命週期
6. React 一個組件集合的簡單交互
7. React 開始一個項目的一點建議
8. React 簡單的項目結構組織

開始前須要安裝的環境：node.js、yarn

1、React 如何編寫 Hello World!

1.使用腳手架直接避開環境搭建的問題

// 安裝腳手架
➜ npm install -g create-react-app

2.使用腳手架建立項目

// react-study 是項目的根文件夾
➜ create-react-app react-study

// 執行後的第一行提示語，會提示建立的完整路徑
Creating a new React app in /Users/lulin/Desktop/react-study.

// 安裝成功後會提示下面的內容
Success! Created react-study at /Users/lulin/Desktop/react-study
Inside that directory, you can run several commands:

// 使用 yarn 啓動項目
yarn start
    Starts the development server.
// 要發佈項目的時候運行
yarn build
    Bundles the app into static files for production.
// 作測試的時候執行，目前沒用
yarn test
    Starts the test runner.
// 能夠自定義配置，目前也不用
yarn eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:
  cd react-study
  yarn start

Happy hacking!

3.使用 Visual Studio Code 打開 react-study

先只須要關注 src 目錄中的 index.js，以下：

├── src
│   ├── App.css
│   ├── App.js
│   ├── App.test.js
│   ├── index.css
│   ├── index.js // 代碼的入口文件
│   ├── logo.svg
│   └── registerServiceWorker.js

4.修改 index.js

刪除 index.js 中全部的內容，貼如下代碼運行：

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
    <h1>Hello World!</h1>,
    document.getElementById('root')
);

ReactDOM.render 方法2個參數，第一個參數就是要渲染的界面結構或者一個 React 組件，第二個參數是要把這個結構渲染到真實網頁 DOM 的什麼位置。因此這份代碼的結果就是在 id=root 的DOM節點下渲染出來 Hello World!。

2、React 中三個最基礎、最重要的東西

一中介紹了 React 可以渲染一個 HTML 到指定的 DOM 中，可是 React 發明出來主要不是作這個事情的，由於這個事情能夠直接經過 原生 JavaScript 的 innerHTML 也能實現。

React 主要做用能夠認爲是如下幾點：
(1) 使用數據來驅動界面更新；
(2) 使用單向變化的數據來讓 BUG 更好調試一點；
(3) 更方便、更聲明式的編寫 Web 組件；

那麼這節主要介紹三個東西：
(1) state
(2) props
(3) setState 方法

若是要實現一個簡單的加法器，這三個東西已經能夠很好實現：

根據上面標的數字：
(1) this.state 裏面有一個屬性叫 count，這個屬性可以經過 this.setState 方法從新傳入一個對象來從新賦值。賦值的同時 render() 方法中 this.state.count 也會跟隨自動變化，最後體現到網頁上。這就是 state 屬性的做用。
(2) this.setState() 方法接收一個新對象來從新賦值 this.state。
(3) this.setState() 也接收一個函數，這個回調函數這裏我默認有一個 prevState 參數，表示以前的 this.state 的值，這個函數的返回值就是最新的 this.state。

你們還應該注意 button 上綁定的 onClick 事件，這就是跟 DOM 上直接綁定事件的寫法同樣(目前先這樣理解)，不過須要都寫成駝峯標識。

那麼 state 和 setState 都介紹了，props 又是什麼呢？你能夠暫時理解成一個組件外面傳遞的屬性。
仍是以計數器的代碼爲例子，簡單修改一下：

class Counter extends React.Component {
    state = {
        count: 0
    };
    // 加 1
    onAdd() {
        this.setState({
            count: this.state.count + 1
        });
    }
    // 減 1
    onSub() {
        this.setState(prevState => {
            return {
                count: prevState.count - 1
            };
        });
    }
    render() {
        return (
            <div>
                {/* 這裏的 this.props 屬性 */}
                <h1>{this.props.name}</h1>
                <button onClick={this.onSub.bind(this)}>-</button>
                <span>{this.state.count}</span>
                <button onClick={this.onAdd.bind(this)}>+</button>
            </div>
        );
    }
}

// Counter 組件傳了一個 name 屬性
ReactDOM.render(
    <Counter name="計數器" />,
    document.getElementById('root')
);

這裏注意代碼中的註釋，應該很直觀了，咱們在組件上添加的屬性，都能在組件裏面經過 this.props 屬性獲取到，拿一個其餘方式來比喻，就至關於函數的參數，參數傳遞進函數，函數內部可使用。可是不一樣的是 this.props 在組件內部是只讀的。

看到這裏，其實你已經可以使用 React 來構造一個網頁了，是否是很簡單，就三個東西，加上一個 ReactDOM.render 方法。固然，若是 ES6 不熟悉的話可能仍是麻煩，可是這是必需要去學習和克服的，由於目前已是主流並且是進入了規範的東西。

3、React 中的 JSX

接觸 React 你確定會問爲何要用 JSX，JSX 究竟是什麼。其實非官方的我只想這麼解釋，就是一個編寫視圖的模版而已，語法也不復雜，列下：
(1) 基本上是使用原始的 HTML；
(2) 事件綁定方法使用駝峯方式；
(3) 要插入 JavaScript 代碼須要 {} 包裹，裏面的代碼就是原生的 JavaScript 代碼；
(4) 避開一些 JavaScript 關鍵字，好比：class 要寫成 className。

上面第二節的計數器中，render() 方法就是編寫 JSX 的主要位置，其實 JSX 能夠編寫在 React 代碼中的任意位置，可是推薦不要寫得太過於零散。

其實理解這幾點就已經足夠了，具體能夠看一下官方文檔 JSX-簡介

JSX 最終編譯後也就是原生的 JavaScript 代碼

4、你的第一個 Web 組件

學習了上面這些知識後，其實咱們就已經可以封裝一個簡單的組件的，第一個我這裏先以 CheckBox 爲例子，比較簡單也很經常使用，應該比較適合。先來分析下這個小組件最基礎的功能：就是點擊選中和取消選中，模擬的話能夠經過換圖來實現，就是切換 DOM class。那麼咱們開始動手吧！

class CheckBox extends React.Component {
    state = {
        checked: false // 默認沒有選中
    };
    // 交替(選中/沒有選中)的狀態
    onClickCheckbox() {
        this.setState(prevState => {
            return {
                checked: !prevState.checked
            };
        });
    }
    render() {
        const checkboxClassArr = ['ui-checkbox'];
        // 若是選中，就添加一個 checked class 來給 css 作樣式
        if(this.state.checked) {
            checkboxClassArr.push('checked');
        }

        // 組合最後的 class 結果
        const checkboxClass = checkboxClassArr.join(' ');

        return (
            <div onClick={this.onClickCheckbox.bind(this)}>
                {/* 這裏模擬圖標 */}
                <span className={checkboxClass}>
                    <i className="icon-checkbox"></i>
                </span>
                {/* 這裏模擬圖標內容 */}
                <span>{this.state.checked ? '選中' : '沒有選中'}</span>
            </div>
        );
    }
}

這樣一個簡單的組件就已經完成了！效果以下：

今天就寫到這裏睡覺吧～能夠動手試試，來點感受哦～這基本是最經常使用的一些概念和意義了，有興趣能夠提早閱讀中文官方文檔，已經改版體驗好多了，慢慢讀下來應該很好理解。