此係列文章將整合我的 React 視訊教程與 React Native 書籍中的精華部分，給大家介紹 React 與 React Native 結合學習的方法，此小節主要介紹 React 的底層原理與機制。

目前 React 可以說是前端世界最火熱的框架，具有高效能以及容易上手的特性，而且在掌握了 React 框架後，再學習其他類似 React 的框架也將變得更易上手。

關於 React 框架的高效能原因以及底層的重要概念，我們在後續的章節會陸續展開探討，這一章節我們先來通過一個實際的案例來探究 React 的重要概念與特性。

如果你對 React 框架已非常熟悉，可以選擇性地跳過此章節，直接閱讀後續章節即可。

1. React 框架的安裝

學習 React 框架，我們可以通過如下幾種方式搭建開發環境進行快速地學習。

1.1 使用線上程式碼編輯器編寫學習

線上編輯器中可以靈活地切換 React 的版本以及選擇 Babel 作為 JSX 程式碼到 JavaScript 的預處理轉換。 如官方推薦的線上程式碼編輯器 React 環境：CodePen。

1.2 本地開發環境的搭建

1.2.1 安裝 Node.js

Node.js 是一個基於 Chrome V8 引擎的 JavaScript 執行環境。 Node.js 使用了一個事件驅動、非阻塞式 I/O 的模型，使其輕量又高效。 Node.js 的包管理器 npm，是全球最大的開源庫生態系統。

Node.js 本身不是一個新的開發語言，也不是一個 JavaScript 框架，而是一個 JavaScript 的執行時。底層為 Google Chrome V8 引擎，並在此基礎上進行了封裝，可用於建立快速、高效、可擴充套件的網路應用。Node.js 採用事件驅動與非阻塞 I/O 模型，以使得 Node.js 輕量並高效。

Node.js 中包含了 npm 系統，npm 是 Node.js 的包生態系統，是最大的開源生態系統。你可以理解為基於 Node.js 框架，全世界的開發者提交了各種各樣的功能類庫到 npm 中，其他開發者在開發過程中需要使用的大部分功能都可以在 npm 中找到已存在的庫，完全不需要自己再重複去“造輪子”。

Node.js 框架的安裝只需要去 Node.js 官網 下載你對應平臺的安裝包直接安裝即可。

1.2.2 安裝官方腳手架專案

create-react-app 腳手架專案存在於 npm 包系統中，所以可以直接通過 npm 命令在命令列工具中進行安裝。

npm install -g create-react-app

之後即可通過命令列進行 React 專案的初始化。

create-react-app your-app-project-name

2. React 中的 JSX、state 與 props

JSX、state 與 props 是 React 框架最重要最基礎的三個知識點，而從根本上說，你在掌握了這三個知識點後就可以使用 React 進行專案的開發了，其他的知識點基本上翻看下文件就可以快速掌握。

2.1 元件例項設計介紹

下面我們通過 React 元件化設計了兩個頁面元件：

1. 入口元件定義為 Index；
2. Index 元件中載入了一個子元件，定義為 BodyIndex；
3. Index 元件會向 BodyIndex 元件中傳遞兩個引數：id 和 name；
4. BodyIndex 元件中還有一個自身的屬性 username，並會在元件載入 5 秒後自動修改定義的值。

通過此例項，大家需要注意例項中的如下幾個知識點：

1. React 元件的定義；
2. JSX 程式碼的語法結構；
3. 元件屬性 state 的定義；
4. 元件通過 props 傳遞引數的方法。

2.2 元件例項程式碼實現

2.2.1 元件 Index 的程式碼實現

/**  
* index.js 定義了 React 專案的入口，Index 元件 
*/    
      
var React = require('react');    
var ReactDOM = require('react-dom');    
import BodyIndex from './components/bodyindex';    
class Index extends React.Component {      
      
    //頁面表現元件渲染    
    render() {    
        return (    
            <div>    
                <BodyIndex id={1234567890} name={"IndexPage"}/>    
            </div>    
        );    
    }    
}    
      
ReactDOM.render(<Index/>, document.getElementById('example'));  

2.2.2 子元件 BodyIndex 的程式碼實現

/**  
* bodyindex.js 定義了一個 BodyIndex 子元件  
*/    
      
import React from 'react';    
export default class BodyIndex extends React.Component {    
    constructor() {    
        super();    
        this.state = {    
            username: "Parry"    
        };    
    }    
      
    render() {    
        setTimeout(() => {    
            //5秒後更改一下 state    
            this.setState({username: "React"});    
        }, 5000);    
      
        return (    
            <div>    
              
                <h1>子元件頁面</h1>    
              
                <h2>當前元件自身的 state</h2>    
                <p>username: {this.state.username}</p>    
              
                <h2>父元件傳遞過來的引數</h2>    
                <p>id: {this.props.id}</p>    
                <p>name: {this.props.name}</p>    
          
            </div>    
        )    
    }    
}    

2.3 元件例項的頁面表現與程式碼解釋

瀏覽器中的執行效果如下圖所示，並且在 5 秒後子元件的 state 定義的 username 值由 Parry 變成了 React。

你可以直接在本地編寫程式碼執行測試或直接下載配套原始碼直接執行，執行後，注意此 state 頁面值更新的部分，整個頁面沒有進行任何的重新重新整理載入，而只是進行了區域性的更新。

注意這裡的區域性更新你可能想到了熟悉的 Ajax 頁面無重新整理的更新操作，但是邏輯程式碼部分沒有進行任何的頁面 DOM 元素操作，而這正是 React 的核心以及高效能特性所在，具體的底層原理我們會在後續的章節深入講解。

對於例項程式碼中幾個重要知識點的解釋：

1. 元件定義頭部使用 require 或 import 引入了一些必備的元件，後續 React 開發載入的第三方 npm 框架也使用此方法引入；
2. 元件 Index 中引入的子元件 BodyIndex 在頁面佈局中可以直接按照 HTML 的標籤形式進行引用；
3. 子元件 BodyIndex 中通過 props 獲取父元件傳遞過來的屬性值；
4. 自身的屬性通過 state 進行定義，頁面的顯示也直接通過 state 進行繫結，而後續在邏輯函式中修改了 state 值之後，頁面繫結的值也會隨之變更，並且變更的過程頁面完全是無重新整理的，這正式 React 框架的重要特性，頁面的所有變更都是通過 state 值的變更驅動的。

系列文章其他相關資源

3. 小結

此章節和大家一起通過對 React 開發環境的構建以及一個實際的元件例項學習了 React 中最基礎的三個概念：JSX、state 與 props，並領略到 React 構建的頁面更新完全是通過後臺 state 值的變更驅動的，這有別於我們之前接觸的前臺框架，是通過直接操作 HTML DOM 結構進行頁面的更新。

而 React 框架這樣設計的優勢以及背後的底層原理，我們在接下來的幾個章節會進行逐步深入地探討，以便切合此係列文章的定位，而在使用 React 開發過程中遇到的任何其他細節問題，你都可以通過下方的留言向我提問即可，這裡限於篇幅就不對 React 框架的基本使用展開講解。