React 全家桶构建后台管理平台

分享一下我老师大神的人工智能教程！零基础，通俗易懂！http://blog.csdn.net/jiangjunshow

也欢迎大家转载本篇文章。分享知识，造福人民，实现我们中华民族伟大复兴！

               

React 全家桶实现后台管理界面

一、实验介绍

1.1 实验内容

React 是一个 Facebook 和 Instagram 用来创建用户界面的 JavaScript 库。创造 React 是为了解决一个问题：构建随着时间数据“不断变化”的“大规模”应用程序。本课程虽然使用了前端框架 antd，从零开始构建一个 React 后台管理界面，并结合 React+React-Router+React-Redux 实现页面功能，加深对 React 全家桶的理解及运用。

1.2 实验知识点

• webpack 基础配置及使用
• React 构建项目流程
• Redux 简介及基础使用
• UI框架 antd 的基本使用
• axios 的基本使用
• json-server 模拟后台数据接口

1.3 实验环境

• node.js
• Xfce终端

1.4 适合人群

本课程难度为一般，属于初级级别课程，适合具有React基础的用户，熟悉React基础知识加深巩固。

1.5 代码获取

你可以通过下面命令将代码下载到实验楼环境中，作为参照对比进行学习。

$ wget http://labfile.oss.aliyuncs.com/courses/857/react.zip

代码下载完成后解压并进入项目目录执行一下命令就能项目就能跑起来，打开浏览器输入127.0.0.1:3005,就能看到效果

$ unzip react.zip$ cd react $ npm i   #这步较慢请耐心等待$ npm run dev$ sudo npm install json-server -g$ npm run server

二、实验原理

由于React 中组件间通信是单向数据流， 当项目中组件嵌套复杂时，子组件向父组件通信数据传递就变得非常复杂。所以 Fackbook 提出 Flux 来管理 React 的数据流，后续又出现不同的架构，通过对比发现 Redux 相对其他的更为简化。但 Redux 和 React 是没有必然关系的，Redux 仅仅是用于管理 state。

Redux 主要的组成部分为: Action，Reducer，Store。Redux 的执行流程：首先需要注册一个全局唯一的store对象，用来维护整个应用的state；当要变更state时，我们会dispatch一个action，reducer根据action更新相应的state。

Aciton 它可以理解为一个载体，是数据从应用传递到store的载体，其中 type 是必备的一个字段，用来标识类型。

//在页面中可引入这个函数并调用，产生新的stateexport function GetUserDetail(userDetail,totalElements,currentPage){    return{        type: GET_USER_DETAIL,        userDetail,totalElements,currentPage    }}

Reducer 实际上就是一个函数，需要传入两个参数 state action，用来修改store的状态。本课程新建一个rootReducer.js来统一管理

//定义初始statevar init={    userDetail:[],//保存从后台传递的数据    usercount: 0,    totalElements:0,    currentPage:0,    userOne:'',};export default function user(state=init,action){    switch(action.type){        //case 后的名称必须与action中type保持一致        case GET_USER_DETAIL:            return Object.assign({},state,{
      userDetail:action.userDetail,totalElements:action.totalElements,currentPage:action.currentPage});        default :            return state;    }}

Store 是一个全局对象，用来维护 state 状态的，主要有两个方法 store.getState() 获取最近内部的 state，store.dispatch(action) 连接 action，reducer 与 state。

// 引入总的rootReducerimport rootReducer from "../reducers/rootReducer";// 引入redux，包含中间件import { createStore,applyMiddleware } from 'redux';import thunk from 'redux-thunk';const store=createStore(rootReducer, applyMiddleware(thunk));export default store;

React-Redux 是一个轻量级的库，核心的方法只有 Provider 与 connect。 Provider 的功能主要包含以下两点：

• 包裹原应用组件的最外层，使整个应用成为成为其子组件
• 接收 Redux 的 store 作为 props，通过context对象传递给子孙组件connect 是真正链接 React 和 Redux 的模块

三、开发准备

打开Xfce终端，进入 Code 目录，创建 react 文件夹, npm的下载速度较慢，我们修改npm源，这个步骤比较慢，请大家耐等待(如已经了解安装的同学，可直接下载项目的package.json放到自己的项目，npm install),安装完成之后cnpm -v 查看是否安装成功。

$ mkdir react && cd react$ sudo npm config set registry https://registry.npm.taobao.org$ sudo npm info underscore

初始化 package.json

执行以下命令后，一直按enter键，如果需要对于项目名称，作者等信息进行修改，根据提示做相应的操作。

$ npm init

安装 webpack 并在根目录下创建并配置 webpack.config.js 文件

webpck 需要全局和本地同时安装。

$ sudo npm install webpack -g$ sudo npm install webpack --save-dev

webpack.config.js

var path = require('path');var webpack = require('webpack');//__dirname是node.js中的一个全局变量，它指向当前执行脚本所在的目录module.exports = {    devtool: 'eval-source-map', //生成Source Maps,这里选择eval-source-map    entry:['webpack/hot/dev-server', path.resolve(__dirname, './app/index.js')], //唯一入口文件    output: { //输出目录        path: __dirname + "/build", //打包后的js文件存放的目录        filename: 'bundle.js', //打包后的js文件名    },    module: {        loaders: [{            test: