摘要：需要有一定的基礎和的使用經驗。這就是屬性的作用。方法接收一個新對象來重新賦值。也接收一個函數，這個回調函數這里我默認有一個參數，表示之前的的值，這個函數的返回值就是最新的。但是不同的是在組件內部是只讀的。

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

React 如何編寫 Hello World!

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

React 中的 JSX

你的第一個 Web 組件

React 中最開始需要關注的生命周期

React 一個組件集合的簡單交互

React 開始一個項目的一點建議

React 簡單的項目結構組織

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

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(
    
Hello World!
,
    document.getElementById("root")
);

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

一中介紹了 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 (
            

                {/* 這里的 this.props 屬性 */}
                
{this.props.name}
                -
                {this.state.count}
                +
            
        );
    }
}

// Counter 組件傳了一個 name 屬性
ReactDOM.render(
    ,
    document.getElementById("root")
);

這里注意代碼中的注釋，應該很直觀了，我們在組件上添加的屬性，都能在組件里面通過 this.props 屬性獲取到，拿一個其他方式來比喻，就相當于函數的參數，參數傳遞進函數，函數內部可以使用。但是不同的是 this.props 在組件內部是只讀的。

看到這里，其實你已經能夠使用 React 來構造一個網頁了，是不是很簡單，就三個東西，加上一個 ReactDOM.render 方法。當然，如果 ES6 不熟悉的話可能還是麻煩，但是這是必須要去學習和克服的，因為目前已經是主流而且是進入了規范的東西。

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

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

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

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

學習了上面這些知識后，其實我們就已經能夠封裝一個簡單的組件的，第一個我這里先以 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 (
            

                {/* 這里模擬圖標 */}
                
                    
                
                {/* 這里模擬圖標內容 */}
                {this.state.checked ? "選中" : "沒有選中"}
            
        );
    }
}

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

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