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目录,进入该目录,可以看到该目录内容如下所示:
这里写图片描述
React开发管理后台实践1_第1张图片
如上两幅图所示,系统为我们生成的应用程序框架的文件,主要在public和src目录下。
程序的主要入口点是public/index.html,但是该页面中只有一个空的ID为root的div元素,React程序就是向这个div中填充内容。程序业务逻辑的入口点是src/App.js文件,里面是按基本的JSR语法来编写的界面显示代码。
下面我们来做一个试验,进入到szysadmin目录,运行:

npm start

系统会自动启动默认的浏览器并访问:http://localhost:3000/,界面如下所示:
React开发管理后台实践1_第2张图片
我们打开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">
        
"App-header"> "App-logo" alt="logo" />

"App-title">欢迎来到随诊医生后台

"App-intro"> To get started, edit src/App.js and save to reload.

div> ); } } export default App;

然后保存文件,就可以直接在浏览器中看到如下图的结果:
React开发管理后台实践1_第3张图片
从上面的操作可以看出,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

你可能感兴趣的:(react)