使用React做一个后台界面 (还是干货)

React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。由于 React 的设计思想极其独特，属于革命性创新，性能出众，代码逻辑却非常简单。所以，越来越多的人开始关注和使用，认为它可能是将来 Web 开发的主流工具。

既然它那么火我们怎么可以错过它

React与ReactNative有些不一样，后者主要面向的是移动app端，它可以生成安卓APP和IOS APP。

ReactJS官网地址: https://facebook.github.io/react/

Github地址：https://github.com/facebook/react

到目前为止，React的学习文档也已经比较全面了，并且也越来越多的组件，从目前来看已经超过了当年火及一时AngularJS但是...它能活多久呢？我们拭目以待吧...

React的主要几大特点:

1. 组件化
2. 可组合
3. 可重用
4. 可维护

前端是一个大坑，之前v2ex上有篇文章喷得非常好。 前端的技术变化实在太快，当你好不容易掌握这门技术的时候，它却过时了。而程序员们就必须时时刻刻去更新自己的知识，无法停下来，一旦停下就会被淘汰。

传送门: https://www.v2ex.com/t/310767

ps: 然后我就从一名后端城续猿活生生的逼成了一个伪全栈猿...好心累啊...

不扯那么多别的, 直接上手

下面我会基于我做的一个项目进行简单的讲解。

开发之前咱们需要安装nodejs和npm服务，建议使用最新版的node。

node 就相当于 php-fpm

npm 就相当于 composer

npm 包管理的配制文件也是package.json与composer一样，所需依赖的组件都在这里面。

nodejs 及 npm 安装

若本机已经安装过 Homebrew 了，那么直接使用brew命令安装即可。

$ brew install node
$ brew install npm

若没有，那么直接上nodejs官网下载包安装就行了。

NodeJs官网: https://nodejs.org/en/#download

安装方式网上也有很多的教程，这里就以MacOS下为例吧，因为这种环境最终不会运行在服务器上，只有开发的时候用得到。

mac版本的是pkg文件，直接双击安装即可

webpack 工具

为了能实时的看到效果，最后是能够有一款能够动态编译的工具，大多数猿们都选择了webpack。我也就跟差大伙们一起入个坑尝试一下。

Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔，等到实际需要的时候再异步加载。通过 loader 的转换，任何形式的资源都可以视作模块，比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等。

安装 webpack

安装webpack全局环境

$ npm install webpack -g

若已没报错执行 webpack -h 看看效果。

ant.design UI

一款体验还不错的ui，并且有相对于充足的文档，由阿里支持。

• 提炼自企业级中后台产品的交互语言和视觉风格。
• 开箱即用的高质量 React 组件。
• 使用 TypeScript 构建，提供完整的类型定义文件。
• 基于 npm + webpack + babel 的工作流，支持 ES2015 和 TypeScript。

此步骤可忽略，下面框架已经把它包含进

$ npm install antd --save

有了它 你不可以偷懒少很些css了

基于antd-admin 快速搭建

antd-admin 是 xxx 基于ant.design为基础搭建的一个脚手架，里成集成了dvajs, mockjs等组件，可以方便独立于后端接口进行开发。

安装 antd-admin

从github把项目拉下来，并进入

$ git clone https://github.com/zuiidea/antd-admin.git
$ cd antd-admin

安装相关依赖

$ npm install // -g 表示全局, 可不加 ，根据需要吧

安装webpack server并启动

记webpack启动还需要安装一个服务。

$ npm install webpack-dev-server --save-dev

安装好之后再执行:

$ npm run dev

若没报错那就是正常启动了，默认端口是8000，若想改成其他的，则需要编辑package.json文件里的:

{
    ...
    "scripts": {
        "dev": "dora --port 8282 ......"
    }
    ...
}

只需要在 dora 后面加上 --port {端口号} 即可。

antd-admin 目录结构

若不喜欢他这种方式，可以自己进行布局，ant.desion 提供了layout组件，少理代码就可以非常方便的对页面进行布局。

参考: https://ant.design/components/layout-cn/

<Layout>
  <Header>header</Header>
  <Layout>
    <Sider>left sidebar</Sider>
    <Content>main content</Content>
    <Sider>right sidebar</Sider>
  </Layout>
  <Footer>footer</Footer>
</Layout>

所有开发文件全部放在src目录下:

├── /mock/           # 数据mock的接口文件
├── /dist/           # 项目输出目录
├── /src/            # 项目源码目录
│ ├── /components/   # 项目组件
│ ├── /routes/       # 路由组件
│ ├── /models/       # 数据模型
│ ├── /services/     # 数据接口
│ ├── /utils/        # 工具函数
│ ├── route.js       # 路由配置
│ ├── index.js       # 入口文件
│ └── index.html     
├── package.json     # 项目信息
└── proxy.config.js  # 数据mock配置

组件或公用的控件放在components目录下

注意事项

• 生产环境中，已有数据接口，请将src/utils/index.js中的require('./mock.js')注释掉
• 开发环境中，如再mock目录新增文件，请在src/utils/mock.js第二行的mockData数组中添加
• 如需重写antd样式配置，请修改src/theme.js
• 项目配置文件在src/utils/config.js
• 如需重写异步请求函数，请修改src/utils/request.js （关于为什么使用robe-ajax而不是fetch：在一个无服务器的环境中模拟数据请求，Mock不能拦截Fetch，只能拦截XHR，所以我选了一个类似jquery Ajax的库robe-ajax）

MockJs

无需等待，让前端独立于后端进行开发

MockJS有以下最主要的特点:

• 基于 数据模板 生成模拟数据。
• 基于 HTML模板 生成模拟数据。
• 拦截并模拟 ajax 请求。

需要模拟数据的目录都是 /mock/ 目录中

我们可以设置让所有经过mock拦截的数据都存在浏览器本地的仓库里，也可以动态生成模拟数据。

当需要连调或上线的时候只需要把mockjs 去掉就行了，或做一个简单的配制进行区分开发模式和生产模式，build的时间自动过滤掉mock。

具体可以参考框架本身带的demo。

打包

使用命令

$ npm run build

build的过程会比较慢，它需要把所有依赖的文件都打包成几个js文件。当然这跟你使用的机器速度有关系，若是4核8线程的电脑，应该几秒钟就完事了。

build完后会在录前目录生成一个dist/目录，里面存放着的就是咱们打包后的文件, 只要把文件拷贝到项目目录就完成了。

尾巴

React确实是一个好东西，它不仅可以作为web后台使用，也可以打包成MacApp或WindowsAPP甚至LinuxAPP，也就是打包成一个跨平台的应用。若真这样，或许以后就可以不需要学习每个平台的应用开发了。

有了上面一套解决方案，我们可以完全独立开发，可以不依赖后端数据也省去了后端开发套模版的痛苦。在团队中能一定程序上提高应用的开发速度。

React的弊端也很明显，对资源消耗有些大，并且打包后的文件也比较大，并不适合做为web前端来使用，还有seo等问题存在，所以在我看来它适合做内部应用，后台，移动app，或客户端等。

学习是一件很痛苦的事情，若见坚持下来了，或许会有一些意想不到的收获