玩轉Reactjs第一篇-構建工程(create-react-app)

一、前言

     前期對vue的使用以及源碼做了一些介紹和分析，vue由於其易用易學，性能高等特點，吸引越來越多的前端開發者在使用。作爲前端框架的三劍客之一的Reactjs，得到了facebook社區大力支持，有着豐富的UI框架組件，用戶羣也大大多於Vue，ng，算是老牌的前端框架。Vue和Reactjs的異同特性，網上也總結了非常多，但大部分都是概念性的泛泛而談，本系列博客在學習Reactjs的同時，也將與Vue在使用方法，實現原理等方面進行比較，通過具體的實例瞭解兩者的差異，故需要各位對Vue基本知識以及原理有一定的瞭解。

  本章節先了解下Reactjs的工程構建。

二、工程構建

reactj的環境搭建有兩種方法，一種是直接引用reactjs

<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>

其中babel是用來編譯JSX的，一般用於開發環境，生產環境需要預先編譯好，這樣速度更快。這個方法適合初學者，做一些demo性的實驗。下面我們重點要講第二個方法，使用npm搭建工程。

1、安裝nodejs

 可以使用“node -v”檢查你的機器上是否安裝過。如果沒有檢測到，則進行安裝，否則跳過下面安裝步驟。從nodejs官網下載安裝文件

安裝完成後，可以檢查安裝是否成功

在您的環境變量中path路徑中，自動添加了安裝node目錄。nodejs安裝完成後，就可以使用npm工具包安裝

在“C:\Users\XXXX\AppData\Roaming\"(XXXX代表當前的用戶)生成npm文件夾，npm工具安裝的組件包都會存儲在這個目錄下。

2、安裝cnpm

由於偉大的牆，npm在國內使用的時候，資源下載非常慢，但淘寶給我們提供了cnpm可以替代npm命令行

輸入以下指令:

$ npm install -g cnpm --registry=https://registry.npm.taobao.org
$ npm config set registry https://registry.npm.taobao.org

執行結果如下：

安裝成功。

3、安裝 create-react-app

通過create-react-app命令行，可以零配置搭建工程

輸入以下指令：

cnpm install -g create-react-app

安裝完成後，可以到“C:\Users\XXXX\AppData\Roaming\npm\node_modules"(XXXX代表當前的用戶)會增加以下兩個文件夾，相關的資源都在該文件下。

4、創建應用

現在可以使用create-react-app創建應用

輸入指令：

create-react-app my-app

以下是部分截屏

這個過程需要下來依賴包，速度會慢些，創建的過程可能會遇到一些問題，可以上網找下解決方法，一般都能搞定。

啓動應用

輸入：http://localhost:3000/，看到久違的react logo，大功告成。

三、工程結構

進入my-app目錄，目前目錄的說明如下：

整個項目是基於webpack搭建的，我們對其中幾個重要的文件進行說明

1.package.json

主要分三個部分

第一部分是應用的描述信息，包括應用名稱，版本等信息。

第二部分，項目相關依賴，這裏配置了基本的依賴，如react，react-dom，其實還有很多其他的依賴插件，後面用到我們再介紹。Reactjs將webapack的相關配置封裝到react-scripts中，對用戶進行隱藏，減少了用戶的配置。

第三部分，相關命令行，比如"npm run start "啓動應用，"npm run build"編譯應用。執行"npm run eject"，會發現根目錄下會增加兩個子目錄config以及scripts。打開這兩個目錄會發現，實際就是將react-scripts中相關webpack的配置開放給用戶了，用戶可以根據需要進行配置。注意這個過程是單向，不可逆的。

其他部分主要和eslint以及browser相關。暫時不做重點分析。

2、index.html

index.html可以理解爲整個工程的web容器，它將配合index.js完成應用框架的渲染，其中

 <div id="root"></div>

是根節點，所有的dom節點都會掛載在此根節點下。

3、index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

//app組件渲染到根節點
ReactDOM.render(<App />, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

導入相關的資源和組件，ReactDOM.render將App組件渲染到root節點下。

4、app.js

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

app方法返回一段JSX代碼，這段代碼渲染後，就是上面展示的demo頁面。後面我們會具體分析Reactjs組件的使用。

四、與VUE比較

vue的工程創建大家可以參考我的VUE探索第二篇-手腳架(vue-cli)，其與reactjs的創建過程非常類似

1、項目默認都是基於webpack+ES6。

2、官方提供手腳架，vue爲vue-cli,reactjs爲create-react-app.

3、工程目錄架構相似，包含主頁面(index.html)，入口js(vue爲main.js,reactjs爲index.js),組件文件(vue爲app.vue,reactjs爲app.js)

當然也有着差異點：

1、reactjs與vue相比較，默認目錄結構沒有webpack相關配置，也沒有路由組件。

2、reactjs的css與js是單獨的文件，而vue是合成在.vue文件中。

3、reactjs的dom是基於JSX的，vue是基於template的。

五、總結

本章節主要介紹了reactjs工程的搭建過程，並與vue的手腳架創建的過程和目錄進行了對比，下面我們將學習Reactjs的JSX語法。