react開發項目到上線全過程詳解

隨着react的流行，愈來愈多的前端工程師使用react來進行開發，當時用react時，creact-react-app無疑進入了你們的眼簾，本篇文章主要講述如何從無到有的使用creact-react-app開發react應用，而後本地調試，直到最後的上線運行。

 

本篇文章內容結構說明，主要有如下12個部分：

1. 安裝nodejs

2.使用nodejs的npm包安裝create-react-app模塊

3. 使用creat-react-app模塊建立咱們的項目

4. 瞭解控制咱們項目運行測試打包的幾個命令

5. 經過npm start運行咱們的項目

6. 查看生產的項目目錄的結構，並瞭解其做用

7. 開始建立幾個咱們本身的組件

8. 再次運行咱們的項目

9. 開始打包生產環境中須要的代碼

10. 將咱們的代碼部署進入咱們的服務器

11. ok,上線了，咱們可讓用戶正式訪問了

12. 維護調試

1、安裝node:
咱們要用create-react-app來開發react，首先要經過包管理器安裝create-react-app，而包管理器通常安裝了nodejs後會自帶的，因此咱們的第一步是在咱們的電腦上安裝node。

請參考如下nodejs安裝教程：

Node.js安裝配置

2、檢測npm包是否可用：
安裝好後，而且也配置進入了環境變量，而後咱們來檢測下你的npm包是否可用，打開cmd窗口，輸入npm -v 進行檢測，以下所示，若顯示版本號則說明安裝成功，環境變量也配置成功，可用開始安裝creact-react-app進行react開發了。若是，你輸入npm -v後沒有彈出版本號，那麼多是你的環境變量沒有配置好。請參考下面的如何配置環境變量教程。

環境變量是什麼？如何配置環境變量

 

3、使用 create-react-app 快速構建 React 開發環境
create-react-app 是來自於 Facebook，經過該命令咱們無需配置就能快速構建 React 開發環境。

create-react-app 自動建立的項目是基於 Webpack + ES6 。

執行如下命令建立項目：

$ cnpm install -g create-react-app
$ create-react-app project_name
$ cd project_name/
$ npm start
在瀏覽器中打開 http://localhost:3000/ ，結果以下圖所示：

命令解釋：

npm ： 表示調用的隨node一塊兒安裝的npm包

install : 顧名思義，就是安裝的意思

-g : 表示全局安裝,安裝後在系統的任意位置都能使用,這就是全局安裝的意思

create-react-app: 這就是咱們要安裝的模塊

提示：安裝好後，若是你想卸載，能夠直接把install改成uninstal便可，也就是在前面個un就能夠表示卸載了。有時候卸載後在安裝可能會報寫錯，此時你直接定位的create-react-app安裝目錄，而後把這個目錄刪除通常就能解決了。

4、經常使用命令解釋
安裝好後，他給你說了些命令，這些命令大體以下

  npm start

    命令做用：Starts the development server.

  npm run build

     命令做用：構建用於生產的靜態代碼【咱們開發完成後，發佈時就使用此命令得到咱們想要的用於生產的代碼放入服務器】

  npm test

     命令做用：運行測試服務器

  npm run eject

   命令做用：

    複製構建依賴關係，配置文件和腳本進入應用程序目錄。（默認依賴關係是隱藏的，若是你執行此了操做，這你的項目就會出現此依賴關係）

注意：此操做是不可逆的，

   如何開始你的項目：

  cd project_name

  npm start

5、查看項目目錄結構
而後咱們打開項目目錄，能夠看下其目錄結構

大體以下圖所示，共有三個文件夾，四個文件

解釋以下：

三個文件夾

 node_modules  //用來盛放你安裝的全部node模塊的文件夾

public                //用來盛放全部公共資源的文件夾，好比html模板，項目圖標

src                     //用來盛放你本身代碼的文件夾，默認生成app.js代碼也在裏面

四個文件

.gitignore       // 這個是用來定義那些在提交到遠程代碼庫時要忽略的文件

package.json //用來聲明項目的各類模塊安裝信息，腳本信息等

package-lock.json //用來鎖定模塊安裝版本的，能確保你們安裝的模塊版本一致

README.md  //盛放關於這個項目的說明文件（全英文的，有興趣能夠看看）

 

src文件夾

而後咱們來重點看看src文件夾，由於咱們的react組件代碼待會也會寫在裏面。

這裏面的文件也很少，就四部分

一、APP相關的js，css文件   //自動給咱們建立的一個組件

二、index相關的js，css文件

三、一個logo.svg圖標            //默認的一個簡單圖標文件

四、 一個registerServiceWorker.js文件 //此文件能進行緩存一些資源，通常是用到生產環境的，主要是用來加快訪問速度，

 

大體的分析下組件結構

主要說些比較重要的文件

1. 首先是public目錄下盛放着index.html模板，若是開發單頁應用，那麼全部的代碼都會渲染在這裏。【index.html文件中也就三部份內容。1.經過meat標籤引入的主頁一個自適應的viewport聲明。2. 經過link標籤引入的一個項目基本 m配置文件anifest.json和圖標，3. 一個用來讓react組件渲染的div標籤】

2. 也是在public目錄下的manifest.json文件，此文件記錄着這個react的APP應用的基本配置信息，他相似於Android的AndroidManifest.xml

3. 而後就是在scr目錄下的index.js文件，他不是一個react組件，他是連接react與htnl模板的橋樑，全部的react組件最終都是由他進行渲染到html模板中。而後整個文件中引入了一個系統默認生成的組件APP,有index.js進行渲染。

4. registerServiceWorker.js文件，這個文件是用於生產環境的，它能夠緩存些資源，讓用戶在離線模式下也能訪問緩存的內容，以給用戶更好的體驗，開發環境中沒什麼用處。。。

5. 最後還有個app.test.js文件，主要是用來組件測試的，有興趣能夠取好好了解下，這裏就很少講這個。

 

6、建立咱們本身的組件
1. 整個項目文件基本分析完了，而後咱們就能夠建立本身的組件了。

2. 咱們在src下新建一個目錄：myselfComponent,用來盛放咱們新建立的組件

3. 咱們分別建立兩個組件C1,C2,他們分別各顯示一句話便可，

4. 而後咱們在index.js裏面引入C1,C2組件，

5. 而後在瀏覽器查看運行效果

C1.js

import React, { Component } from 'react';

import './C1.css';

 

class C1 extends Component {

  render() {

    return (

      <div className="c1">

        Hello,我是在src/myselfComponent目錄下的C1.js文件中的C1組件 我引入了相同目錄下的 C1.css 文件，用來給我包含的文字設爲紅色

      </div>

      );

  }

}

 

export default C1;

C2.js

import React, { Component } from 'react';

import './C2.css';

 

class C2 extends Component {

  render() {

    return (

      <div className="c2">

        Hello,我是在src/myselfComponent目錄下的C2.js文件中的C1組件 我引入了相同目錄下的 C2.css 文件，用來給我包含的文字設爲藍色

      </div>

      );

  }

}

 

export default C2;

index.js

import React from 'react';

import ReactDOM from 'react-dom';

import './index.css';

import App from './App';

import C1 from './myselfComponent/C1.js';

import C2 from './myselfComponent/C2.js';

import registerServiceWorker from './registerServiceWorker';

 

ReactDOM.render(

  <div>

    <C1/>

    <App />

    <C2/>

  </div>,

 

  document.getElementById('root'));

registerServiceWorker();

ok，css文件就不展現了，省得讓大家眼睛看花了

 

 在瀏覽器中的運行效果

能夠看到，運行的很是完美

 

 再複雜點

上面中，咱們是把全部組件所有引入了index.js文件中，而後統一渲染的。可是在實際開發中組件間必然存在嵌套關係，就是一個組件裏面嵌套着另外一個組件，

如今咱們就來在寫個組件C3,而後把他嵌套進APP組件中。

C3.js

import React, { Component } from 'react';

import './C3.css';

 

class C3 extends Component {

  render() {

    return (

      <div className="c3">

        Hello,我是在src/myselfComponent目錄下的C3.js文件中的C3組件 我引入了相同目錄下的 C3.css 文件，用來給我包含的文字設爲粗體黃色

      </div>

      );

  }

}

 

export default C3;

APP.js

 

import React, { Component } from 'react';

import logo from './logo.svg';

import './App.css';

import C3 from './myselfComponent/C3.js';

 

class App extends Component {

  render() {

    return (

      <div className="App">

        <header className="App-header">

          <img

               src={ logo }

               className="App-logo"

               alt="logo" />

          <h1 className="App-title">Welcome to React</h1>

        </header>

        <C3 />

        <p className="App-intro">

          To get started, edit <code>src/App.js</code> and save to reload.

        </p>

      </div>

      );

  }

}

 

export default App;

 

7、打包爲生產版
ok,基本上仍是很簡單的，而後咱們的項目開發演示完成了，如今咱們來開始進行生成生產環境的代碼（所謂生產環境就是值用來發布到服務器裏面的代碼，是根據咱們開發環境的代碼生成）

執行命令：

num run build

執行此命令後，他會在咱們的項目目錄下建立一個build文件夾，裏面存放的就是生產環境須要的代碼了

 

 

8、將其放在服務器中執行
生成環境中的代碼生成後就要開發發佈了，也就是放到咱們的服務器上，供用戶訪問使用

這部就比較簡單了，直接將build裏面的全部文件複製到服務器的根目錄下便可，以下（這裏我是直接複製到我本地搭建的apach服務器的根目錄裏面的）

 

 在看瀏覽器裏面的運行結果（個人apach服務器的端口爲8087）

 

 9、將其放到遠程服務裏面部署
剛剛演示的是本地服務器，如今我再將其放到遠程服務器裏面進行部署

若是你不知道如何將文件上傳到遠程服務器，請參考這一篇文章

怎麼把H5上傳到服務器

在瀏覽器中訪問，ok,一切正常

注意：若是你不想將文件複製到根目錄，那麼你須要修改inde.html文件中對js和css文件的路徑，否則沒法正常訪問。

 

 10、部署到服務器上後的維護
當咱們項目上線後可能還要開發新功能，也可能項目運行期間會出bug，此時該怎麼辦呢？

1. 當要開發新功能時，咱們直接在本地開發好，而後打包生產文件，最後直接放到遠程服務器裏面就能夠了

2. 當出問題後，咱們能夠直接在瀏覽器裏面訪問，而後在線的打開控制檯調試，並修改運行中的html代碼，當改好後，再在本地修改便可。固然若是bug很複雜的話，那就須要認真思考了，不過要相信沒有解決不了的bug

再總結下：流程以下

1. 安裝nodejs

2.使用nodejs的npm包安裝create-react-app模塊

3. 使用creat-react-app模塊建立咱們的項目

4. 瞭解控制咱們項目運行測試打包的幾個命令

5. 經過npm start運行咱們的項目

6. 查看生產的項目目錄的結構，並瞭解其做用

7. 開始建立幾個咱們本身的組件

8. 再次運行咱們的項目

9. 開始打包生產環境中須要的代碼

10. 將咱們的代碼部署進入咱們的服務器

11. ok,上線了，咱們可讓用戶正式訪問了

12. 維護調試