React开发管理后台实践1

要开发后应用，第一步是选择一个优雅的后台页面模板，大家可以有很多种选择，这里我向大家推荐的是一款在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