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

前言css

1、React是Facebook推出的一個前端框架,以前被用於著名的社交媒體Instagram中,後來因爲取得了不錯的反響,因而Facebook決定將其開源。出身名門的React也不負衆望,成功成爲當前最火熱的三大前端框架之一。相比於Angular,React更加輕量。而相對於另外一個輕量級前端框架Vue來講,React雖然學習和使用起來難度稍微大一些,可是React的社區相對來講人氣更旺,並且在移動端的開發上面,大名鼎鼎的React Native更是盡顯優點,在代碼性能上要好過Vue框架。今天咱們就來對React進行一個入門的學習。 html

這裏還要用到的是一個UI設計語言,Ant Design。Ant Design一樣出身名門,是阿里巴巴旗下螞蟻金融服務集團(旗下擁有支付寶、餘額寶等產品)所設計的一個前端UI組件庫。目前支持了React, 而且有一個對Vue支持的測試版本。而excharts也是出身名門,是百度數據可視化實驗室所設計的前端可視化數據組件庫。前端

2、介紹用到的各類IDE、框架和組件node

編譯器Webstromreact

框架Reactwebpack

UI框架Ant Designgit

數據可視化框架exchartses6

 

正文github

1、安裝webstromweb

官網下載安裝最新版本

官網地址:https://www.jetbrains.com/webstorm/

破解須要的註冊碼地址:http://idea.lanyus.com/

 

2、安裝node.js(安裝後自帶npm)

官網下載安裝最新版本

官網地址:http://nodejs.cn/download/

 

3、安裝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 

 

3、建立項目(環境搭建好開始建立項目)

 1 create-react-app antd-demo 

因而建立了一個名字爲antd-demo的項目

 

4、運行項目

1.先從上層目錄進入項目根目錄

 1 cd antd-demo 

2.運行項目

 1 npm start 

敲完這行代碼,不要操做,雙手離開鍵盤,等待一會瀏覽器會啓動一個新的標籤頁。如圖

 

5、引入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

 

6、加入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 的藍色按鈕組件,接下來就能夠繼續選用其餘組件開發應用了。

 

7、引入echarts可視化組件

 

 

咱們真的須要react-echarts插件嗎?

 

NO!!!

 

導入echarts,最煩人的是什麼?配置option是其一,其二就是極其龐大的echarts!特別是管理後臺使用到echarts的時候,若是須要同個頁面展現數十種圖表類型,你就該好好考慮性能問題了。

 

插件版本號

 

"echarts": "^3.6.2", "react": "^15.6.1", "react-dom": "^15.6.1" 

 

實現了哪些圖表組件

 

一、餅圖
二、柱狀圖
三、折線圖
四、散點圖
五、地圖
六、雷達圖
七、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

 

實現方案介紹

 

一、每一個圖表單獨封裝成一個組件,經過參數傳遞數據,你會發現,圖表內部代碼幾乎徹底同樣,只有import的類型不一樣。

 

二、異步加載是提升圖表加載性能的最佳方式,不論是服務端仍是客戶端渲染。

 

三、在這些demo中,我認爲對你來講最有價值的是react組件異步加載模式,不少人異步加載組件是經過拆分路由的方式,而非路由組件的異步加載,並很少人去嘗試。但我想告訴你的是,
非路由組件的異步加載會將你的龐大的父組件拆分的更細,體積更小,加載的更加流暢。

 

 

8、推薦一波react入門課:(我1.25倍速看了一遍後感受真的挺不錯,理解更加透徹啦,推薦你們看看)

       網址: https://www.imooc.com/learn/1023

相關文章
相關標籤/搜索