前言
React是Facebook推出的一个前端框架，之前被用于著名的社交媒体Instagram中，后来由于取得了不错的反响，于是Facebook决定将其开源。出身名门的React也不负众望，成功成为当前最火热的三大前端框架之一。相比于Angular，React更加轻量。而相对于另一个轻量级前端框架Vue来说，React虽然学习和使用起来难度稍微大一些，但是React的社区相对来说人气更旺，而且在移动端的开发上面，大名鼎鼎的React Native更是尽显优势，在代码性能上要好过Vue框架。今天我们就来对React进行一个入门的学习。
这里还要用到的是一个UI设计语言，Ant Design。Ant Design同样出身名门，是阿里巴巴旗下蚂蚁金融服务集团（旗下拥有支付宝、余额宝等产品）所设计的一个前端UI组件库。目前支持了React， 并且有一个对Vue支持的测试版本。
配置
sublime Text编辑器（其他）
node（npm）或者yarn命令
搭建项目
1、我们需要在想要安装的位置打开cmd程序执行命令，安装 create-react-app 脚手架工具：
cnpm install -g create-react-app yarn
2、对create-react-app这个脚手架进行全局安装：
create-react-app antd-demo && cd antd-demo
3、运行程序是否安装成功
cd antd-demo（enter）回车cnpm start
此时浏览器会访问 http://localhost:3000/ ，看到 Welcome to React 的界面就算成功了。
4、实现管理系统需要react-router-doml路由依赖包
cnpm i react-router-dom -D
安装好组件后看一下package.json配置文件都有哪些，看看有没有遗漏，你所安装的都在这里面
如果项目中我们需要css编译看起来更加得简洁有技术含量，可以使用creact-react-app自带得scss插件，我们只需要
cnpm i sass-noder node-sass -S
在该引入得页面新建style.scss，然后就可以根据scss特性来进行编译
接下来我们还要做几件事就是引入ant design框架
执行命令：
yarn add antd
这样就算是将ant design框架引进来了，现在就可以使用里面的组件进行开发了
修改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(<BrowserRouter><div><SiderDemo className="wangzhijie" content={<div><Switch><Route exact path='/' component={HomePage} /><Route path="/Guanli" component={nemberPage} /><Route path="/Baojin" component={CallThePolice} /><Route path="/Tianjia" component={AddTo} /><Route path="/AddSchool" component={AddSchool} /></Switch></div>} /> </div></BrowserRouter>)}ReactDOM.render(<Web />, document.getElementById('root'))
App.js页面实现过程，这里是内容
import React from 'react';import ReactDOM from 'react-dom';import { Layout, Menu, Breadcrumb, Icon } from 'antd';import { NavLink, hashHistory } from 'react-router-dom';import 'antd/dist/antd.css';import './App.css';const { Header, Content, Footer, Sider } = Layout;class SiderDemo extends ponent {state = {collapsed: false,mode: 'inline',};toggle = () => {this.setState({collapsed: !this.state.collapsed,});this.state.collapsed?document.querySelector(".ant-layout.ant-layout-has-sider > .ant-layout, .ant-layout.ant-layout-has-sider > .ant-layout-content").style.left="200px":document.querySelector(".ant-layout.ant-layout-has-sider > .ant-layout, .ant-layout.ant-layout-has-sider > .ant-layout-content").style.left="80px";};handleClick = (item,key,selectedKeys) => {this.setState({current: item.key});}render() {console.log(this.state.current)return (<Layout><Sider trigger={null} collapsible collapsed={this.state.collapsed} style={{position: 'absolute', bottom: 0, top: 0}}><div><div className="logo">幼儿园监控系统</div></div><Menu style={{background:'#868686', borderRight:0}} theme="light" mode="inline" selectedKeys={[this.state.current]} onSelect={this.handleClick}><Menu.Item key="1"><NavLink to="/" activeClassName="active" exact><i className="iconfont icon-tubiaozhizuomoban-"></i><span className="nav-text">幼儿园监控</span></NavLink></Menu.Item><Menu.Item key="2"><NavLink to="/Guanli" activeClassName="active" exact><i className="iconfont icon-chengyuan"></i><span className="nav-text">成员管理</span></NavLink></Menu.Item><Menu.Item key="3"><NavLink to="/Baojin" activeClassName="active" exact><i className="iconfont icon-baojingguanli"></i><span className="nav-text">设备报警</span></NavLink></Menu.Item><Menu.Item key="4"><NavLink to="/Tianjia" activeClassName="active" exact><i className="iconfont icon-tianjiawenjian"></i><span className="nav-text">设备添加</span></NavLink></Menu.Item><Menu.Item key="5"><NavLink to="/AddSchool" activeClassName="active" exact><i className="iconfont icon-tianjiafangyuanyuding"></i><span className="nav-text">添加幼儿园</span></NavLink></Menu.Item></Menu><div className="ant-aside-action" onClick={this.toggle}>{this.state.collapsed ? <Icon type="right" /> : <Icon type="left" />}</div></Sider><Layout><Header><span style={{color:'#fff', paddingLeft:'2%', fontSize:'1em'}}>欢迎登陆监控管理系统！</span><span className="signOut"><NavLink to="/AddSchool" activeClassName="selected" exact><i className="iconfont icon-tuichu" style={{paddingRight:5}}></i><span className="nav-text">退出登录</span></NavLink></span></Header><Content style={{ margin: '0 16px' }}><div style={{ padding: 24, background: '#fff', minHeight: 780 }}>{this.props.content}</div></Content></Layout></Layout>);}}export default SiderDemo;
其他几个子页面实现过程我是直接将ant design框架的组件直接复制进去用的，我就不一一贴出来了，实现过程很简单。
给你们来一张项目结构图，一目了然。
进过多次的调试，现在我们打开运行已经实现该功能
一个简单的后台管理系统就完成了，有什么问题可下方留言。
