React開發管理後臺實踐1

最老程式設計師閆濤發表於2018-09-01
React

要開發後應用，第一步是選擇一個優雅的後臺頁面模板，大家可以有很多種選擇，這裡我向大家推薦的是一款在Github上開源的Html5模板：https://adminlte.io/themes/AdminLTE/index.html，大家可以在左側選單“Documentation”裡面找到安裝文件。當然這套模板是用HTML5+CSS（Bootstrap3）寫成的，我們需要通過JSX將其轉換為React可以使用的方式，這點我們將在後面章節向大家介紹。

安裝React應用框架程式

依次執行如下命令安裝React應用框架程式：

npm install -g create-react-app
create-react-app szysadmin

這兩個命令會安裝一些依賴庫，所以會花費一些時間。當命令執行成功後，我們就建立了一個名為szysadmin的後臺應用。其會在當前資料夾下建立szysadmin目錄，進入該目錄，可以看到該目錄內容如下所示：
這裡寫圖片描述
這裡寫圖片描述
如上兩幅圖所示，系統為我們生成的應用程式框架的檔案，主要在public和src目錄下。
程式的主要入口點是public/index.html，但是該頁面中只有一個空的ID為root的div元素，React程式就是向這個div中填充內容。程式業務邏輯的入口點是src/App.js檔案，裡面是按基本的JSR語法來編寫的介面顯示程式碼。
下面我們來做一個試驗，進入到szysadmin目錄，執行：

npm start

系統會自動啟動預設的瀏覽器並訪問：http://localhost:3000/，介面如下所示：
這裡寫圖片描述
我們開啟src/App.js檔案，將頁面中Welcome to React變為“歡迎來到隨診醫生後臺”：

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

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">歡迎來到隨診醫生後臺</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
    );
  }
}

export default App;

然後儲存檔案，就可以直接在瀏覽器中看到如下圖的結果：
這裡寫圖片描述
從上面的操作可以看出，React是實時更新的。
新生成的React工程包括如下檔案：

szysadmin
|--README.md            介紹檔案
|--node_modules         專案依賴的第三方node庫
|--package.json         專案依賴庫配置檔案
|--public               公共資源目錄
|  |--index.html        專案首頁含空的id=root的div
|--src                  原始碼目錄
|  |--App.css           專案整體樣式檔案
|  |--App.js            專案程式入口檔案
|  |--index.js          系統程式入口檔案
|  |--logo.svg          網站圖示

接下來我們安裝第三方依賴庫，如下所示：

npm install redux --save

執行這條命令成功之後，會在package.json檔案的dependencies下面新增redux依賴，如下所示：

{
  "name": "szysadmin",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.4.2",
    "react-dom": "^16.4.2",
    "react-scripts": "1.1.5",
    "redux": "^4.0.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

我們在實際編寫專案的過程中，需要更復雜的配置，系統預設配置往往不能滿足我們的需求，因此需要切換到手工配置狀態，執行如下命令：

npm run eject

執行完這個命令之後，專案目錄下會多出config和scripts子目錄，並向package.json中新增很多內容，這些內容暫時不用關心，在用到時我們再來講解。
接下來我們將更新react至16版本，執行：

npm install --save react@next react-dom@next

相關文章