【React自制全家桶】一、Webstrom+React+Ant Design+echarts搭建react项目
前言
一、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命令行工具输入
1 npm install -g create-react-app yarn
三、创建项目(环境搭建好开始创建项目)
1 create-react-app antd-demo
于是创建了一个名字为antd-demo的项目
四、运行项目
1.先从上层目录进入项目根目录
1 cd antd-demo
2.运行项目
1 npm start
敲完这行代码,不要操作,双手离开键盘,等待一会浏览器会启动一个新的标签页。如图
五、引入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 的按钮组件。
1 import React, { Component } from 'react'; 2 import Button from 'antd/lib/button'; 3 import './App.css'; 4 5 class App extends Component { 6 render() { 7 return ( 8 <div className="App"> 9 <Button type="primary">Button</Button> 10 </div> 11 ); 12 } 13 } 14 15 export default App;
修改 src/App.css
,在文件顶部引入 antd/dist/antd.css
。
@import '~antd/dist/antd.css';.App {text-align: center; }...
如图:
好了,现在你应该能看到页面上已经有了 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组件普遍偏大,即使压缩也效果不明显,所以异步加载是最好的方式。
1 import { pieOption, barOption, lineOption, scatterOption, mapOption, radarOption, candlestickOption } from './optionConfig/options' 2 const PieReact = asyncComponent(() => import(/* webpackChunkName: "PieReact" */'./EchartsDemo/PieReact')) //饼图组件 3 const BarReact = asyncComponent(() => import(/* webpackChunkName: "BarReact" */'./EchartsDemo/BarReact')) //柱状图组件 4 const LineReact = asyncComponent(() => import(/* webpackChunkName: "LineReact" */'./EchartsDemo/LineReact')) //折线图组件 5 const ScatterReact = asyncComponent(() => import(/* webpackChunkName: "ScatterReact" */'./EchartsDemo/ScatterReact')) //散点图组件 6 const MapReact = asyncComponent(() => import(/* webpackChunkName: "MapReact" */'./EchartsDemo/MapReact')) //地图组件 7 const RadarReact = asyncComponent(() => import(/* webpackChunkName: "RadarReact" */'./EchartsDemo/RadarReact')) //雷达图组件 8 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
转载于:https://www.cnblogs.com/piaobodewu/p/9382340.html
【React自制全家桶】一、Webstrom+React+Ant Design+echarts搭建react项目相关推荐
- 视频教程-19年全新React教程全家桶实战redux+antd+dva+Hooks前端js视频-ReactJS
19年全新React教程全家桶实战redux+antd+dva+Hooks前端js视频 7年的开发架构经验,曾就职于国内一线互联网公司,开发工程师,现在是某创业公司技术负责人, 擅长语言有node/j ...
- react 环境 全家桶
Owner brickspert commented on 2 Sep 2017 • edited 从零搭建React全家桶框架教程 源码地址:https://github.com/bricksper ...
- 在Ant Design Pro(React)中使用ECharts
使用Ant Design Pro解决方案可以快速搭建前端框架,而ECharts是前端最流行,功能最强大的前端图表库. 下面将讲解下如何在Ant Design Pro使用ECharts. Ant Des ...
- 【React工作记录二十四】ant design form赋值问题
目录 前言 导语 解决思路 总结 前言 我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大 ...
- Oracle全家桶(VirtualBox+OEL+Oracle11gR2)快捷搭建数据库服务器
最近由于手头项目要用Oracle数据库,前段时间也在CentOS搭过一个数据库服务器,用的还是以前的老办法,安装依赖包->改系统配置.环境变量->创建用户.用户组,最后去安装,当时是因为工 ...
- [Ant Design Vue]Ant Design Vue搭建项目
一.为什么要用Ant Design 1.因为它是蚂蚁金服产出的一套牛逼哄哄的产品 2. 丰富的组件化设计规范 和组件化编码规范 3.它适用于企业级的中后台搭建 二.快速创建项目 1.安装脚手架 npm ...
- 极客Go云监工 — 基于Ant Design的Web React实现
前言 玩客云接口的破解和后端api都已经分析了,那些都是看不见的,而展现在用户面前的是前端的web或者微信的小程序. 由于一开始还不会小程序就先用react写了一个前端,写的比较乱,将就能用,也没有系 ...
- 如何用Ant Design Pro框架做项目省力
1.熟悉React所有语法,以及redux.redux-saga.dva.一类的库的能力 2.灵活运用该框架提供的基础UI组件,想方设法利用现有的UI组件进行组合,尽可能减少工作量 转载于:https ...
- ant design vue input change_Ant-design-vue项目实现动态路由
vue项目实现动态路由的方式大体可分为两种: 1.前端这边把路由写好,登录的时候根据用户的角色权限来动态展示路由,(前端控制路由) 2.后台传来当前用户对应权限的路由表,前端通过调接口拿到路由信息后处 ...
最新文章
- Spring是如何运用设计模式的?
- ubuntu 12.04 添加 IP并配置DNS
- 禁止服务器的协议,Windows 服务器禁用 SSL 2 和 SSL 3 协议
- 第五讲 一阶自治ODE
- 技术内参 | 数据分析,如何解决精度丢失的问题?
- linux 查redis状态_干货:用案例代码详解Redis中的事件驱动模型
- 多种数据形式下智能问答的应用解读
- Project Tango 的一些应用
- LeetCode-Largest Rectangle in Histogram
- ubuntu环境配置之cuda10+tensorflow-gpu
- E人E本的android突破与行业走向
- elasticsearch pinyin 拼音分词器
- MQTT 消息通信工具使用
- android实训报告ppt模板,实训报告ppt模板
- vs项目筛选器显示错乱、只显示部分文件
- BUGKU-CTF-MISC-一个普通的压缩包
- 数据库的数据文件和日志文件
- 创建React + Ts项目
- 一个通过SOAP web service驱动ssh/telnet执行命令的小平台
- 高纬度矩阵运算--NumPy
热门文章
- 解决placeholder兼容性问题
- 水下机器人_相关知识点
- CTFshow 信息收集 web14
- MATLAB中常用的产生随机数的几种函数
- tuple object is not callable解决方案
- 安装Scrapy遇到Comand c:\users\lenovo\appdata\local\programs\python\python35\python.exe
- 第一章:1.1 信号表征
- DIP第二章习题解答
- rust门卡有什么用_Rust能力养成之(10)用Cargo进行项目管理:扩展 调用与优化
- 14-jQuery补充