【React自制全家桶】一、Webstrom+React+Ant Design+echarts搭建react项目

时间：2021-12-19 15:21:59

前言

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

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

二、介绍用到的各种IDE、框架和组件

编译器Webstrom

框架React

UI框架Ant Design

数据可视化框架excharts

正文

一、安装webstrom

官网下载安装最新版本

官网地址：https://www.jetbrains.com/webstorm/

破解需要的注册码地址：http://idea.lanyus.com/

二、安装node.js（安装后自带npm）

官网下载安装最新版本

官网地址：http://nodejs.cn/download/

三、安装create-react-app主流脚手架和yarn

1.什么是脚手架：

在开发react应用时，应该没有人用传统的方法引入react的源文件(js)，然后在html编辑吧。

大家都是用webpack + es6来结合react开发前端应用。

这个时候，我们可以手动使用npm来安装各种插件，来从头到尾自己搭建环境。

虽然自己搭建的过程也是一个很好的学习过程，但是有时候难免遇到各种问题，特别是初学者，而且每次开发一个新应用，都要自己从头搭建，未免太繁琐。

于是，有人根据自己的经验和最佳实践，开发了脚手架，避免开发过程中的重复造*和做无用功，从而节省开发时间。

众多脚手架中最突出的是create-react-app。

它是后来居上，他的开发时间都晚于前两个，但关注量却比他们还大，而且他还是facebook官方开发的。

简单来说脚手架就是帮你一次将运行需要的运行环境搭建并且优化好

详细参见https://blog.csdn.net/qtfying/article/details/78665664

2.安装方法

打开webstrom左下角的Terminal命令行工具输入

npm install -g create-react-app yarn

三、创建项目（环境搭建好开始创建项目）

create-react-app antd-demo

于是创建了一个名字为antd-demo的项目

四、运行项目

1.先从上层目录进入项目根目录

cd antd-demo

2.运行项目

npm start

敲完这行代码，不要操作，双手离开键盘，等待一会浏览器会启动一个新的标签页。如图

【React自制全家桶】一、Webstrom+React+Ant Design+echarts搭建react项目

五、引入Ant design蚂蚁金服的Ui组件库:

这是 create-react-app 生成的默认目录结构。

├── README.md

├── package.json

├── public

│   ├── favicon.ico

│   └── index.html

├── src

│   ├── App.css

│   ├── App.js

│   ├── App.test.js

│   ├── index.css

│   ├── index.js

│   └── logo.svg

└── yarn.lock

现在从 yarn 或 npm 安装并引入 antd。

 yarn add antd

六、加入antd代码查看运行效果

修改 src/App.js，引入 antd 的按钮组件。

 import React, { Component } from 'react';

 import Button from 'antd/lib/button';

 import './App.css';

 class App extends Component {

   render() {

     return (

       <div className="App">

         <Button type="primary">Button</Button>

       </div>

     );

   }

 }

 export default App;

修改 src/App.css，在文件顶部引入 antd/dist/antd.css。

@import '~antd/dist/antd.css';

.App {

  text-align: center;

}

...

如图：

【React自制全家桶】一、Webstrom+React+Ant Design+echarts搭建react项目

好了，现在你应该能看到页面上已经有了 antd 的蓝色按钮组件，接下来就可以继续选用其他组件开发应用了。

七、引入echarts可视化组件

我们真的需要react-echarts插件吗？

NO！！！

导入echarts，最烦人的是什么？配置option是其一，其二就是极其庞大的echarts！特别是管理后台使用到echarts的时候，如果需要同个页面展示数十种图表类型，你就该好好考虑性能问题了。

插件版本号

  "echarts": "^3.6.2",

  "react": "^15.6.1",

  "react-dom": "^15.6.1"

实现了哪些图表组件

1、饼图
2、柱状图
3、折线图
4、散点图
5、地图
6、雷达图
7、k线图

我们不总是需要插件

实现这些echarts-react组件的目的，是告诉大家，react可以不需要引入第三方插件，使用echarts，不要惧怕react组件！

看过很多人说react难写，因为他们习惯了在jQuery开发模式下导入echarts、swiper、d3等插件。而突然切换到react中，就产生了不知所措的感觉。
如何在react中导入第三方插件，成为了他们心中的痛点，所以一些人就认为需要别人封装好的echarts-react插件或者其他react插件，才能使用，这种想法是错的。

echarts体积太大，使用模块化加载

以柱状图为例子，我们根据需要渲染的插件采取模块导入，不渲染的组件不导入，最大程度减小js

1 import echarts from 'echarts/lib/echarts'

2 import 'echarts/lib/component/tooltip'

3 import 'echarts/lib/component/grid'

4 import 'echarts/lib/chart/bar'

组件化开发的福音，react组件模块化加载

demo中采用单个echarts组件异步打包加载的模式，因为echarts组件普遍偏大，即使压缩也效果不明显，所以异步加载是最好的方式。

 import { pieOption, barOption, lineOption, scatterOption, mapOption, radarOption, candlestickOption } from './optionConfig/options'

 const PieReact = asyncComponent(() => import(/* webpackChunkName: "PieReact" */'./EchartsDemo/PieReact'))  //饼图组件

 const BarReact = asyncComponent(() => import(/* webpackChunkName: "BarReact" */'./EchartsDemo/BarReact')) //柱状图组件

 const LineReact = asyncComponent(() => import(/* webpackChunkName: "LineReact" */'./EchartsDemo/LineReact'))  //折线图组件

 const ScatterReact = asyncComponent(() => import(/* webpackChunkName: "ScatterReact" */'./EchartsDemo/ScatterReact'))  //散点图组件

 const MapReact = asyncComponent(() => import(/* webpackChunkName: "MapReact" */'./EchartsDemo/MapReact'))  //地图组件

 const RadarReact = asyncComponent(() => import(/* webpackChunkName: "RadarReact" */'./EchartsDemo/RadarReact')) //雷达图组件

 const CandlestickReact = asyncComponent(() => import(/* webpackChunkName: "CandlestickReact" */'./EchartsDemo/CandlestickReact')) //k线图组件

启动项目

//安装
npm install


//启动
npm start

打包项目

npm run build

实现方案介绍

1、每个图表单独封装成一个组件，通过参数传递数据，你会发现，图表内部代码几乎完全一样，只有import的类型不同。

2、异步加载是提高图表加载性能的最佳方式，不管是服务端还是客户端渲染。

3、在这些demo中，我认为对你来说最有价值的是react组件异步加载模式，很多人异步加载组件是通过拆分路由的方式，而非路由组件的异步加载，并不多人去尝试。但我想告诉你的是，
非路由组件的异步加载会将你的庞大的父组件拆分的更细，体积更小，加载的更加流畅。

八、推荐一波react入门课：（我1.25倍速看了一遍后感觉真的挺不错，理解更加透彻啦，推荐大家看看）

网址：
https://www.imooc.com/learn/1023

相关文章