react和ant design搭建后台管理系统

前言

React是推出的一个前端框架，之前被用于著名的社交媒体中，后来由于取得了不错的反响，于是决定将其开源。出身名门的React也不负众望，成功成为当前最火热的三大前端框架之一。相比于，React更加轻量。而相对于另一个轻量级前端框架Vue来说，React虽然学习和使用起来难度稍微大一些，但是React的社区相对来说人气更旺，而且在移动端的开发上面，大名鼎鼎的React 更是尽显优势，在代码性能上要好过Vue框架。今天我们就来对React进行一个入门的学习。

这里还要用到的是一个UI设计语言，Ant 。Ant 同样出身名门，是阿里巴巴旗下蚂蚁金融服务集团（旗下拥有支付宝、余额宝等产品）所设计的一个前端UI组件库。目前支持了React， 并且有一个对Vue支持的测试版本。

配置

Text编辑器（其他）

node（npm）或者yarn命令

搭建项目

1、我们需要在想要安装的位置打开cmd程序执行命令，安装 -react-app 脚手架工具：

cnpm install -g create-react-app yarn

2、对-react-app这个脚手架进行全局安装：

create-react-app antd-demo && cd antd-demo

3、运行程序是否安装成功

cd antd-demo（enter）回车
cnpm start

此时浏览器会访问 :3000/ ，看到 to React 的界面就算成功了。

4、实现管理系统需要react--doml路由依赖包

cnpm i react-router-dom -D

安装好组件后看一下.json配置文件都有哪些，看看有没有遗漏，你所安装的都在这里面

如果项目中我们需要css编译看起来更加得简洁有技术含量，可以使用-react-app自带得scss插件，我们只需要

cnpm i sass-noder node-sass -S

在该引入得页面新建style.scss，然后就可以根据scss特性来进行编译

接下来我们还要做几件事就是引入ant 框架

执行命令：

yarn add antd

这样就算是将ant 框架引进来了，现在就可以使用里面的组件进行开发了

修改antd主题颜色官方有一个demo,可以下载下来执行“cnpm i”应该就可以运行了

https://ant.design/docs/react/customize-theme

实现后台管理系统过程

index.js页面

import React from 'react';
import ReactDOM from 'react-dom';
import { Router, BrowserRouter, Route, Switch } from 'react-router-dom'
/* 组件 */
import SiderDemo from './App';
import HomePage from './assembly/home';
import nemberPage from './assembly/memberPage';
import CallThePolice from './assembly/CallThePolice';
import AddTo from './assembly/AddTo';
import AddSchool from './assembly/AddSchool';const Web = () => {return(
} />