【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命令行工具輸入

 npm install -g create-react-app yarn 

 

三、創建項目（環境搭建好開始創建項目）

 create-react-app antd-demo 

於是創建了一個名字為antd-demo的項目

 

四、運行項目

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

 cd antd-demo 

2.運行項目

 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 的按鈕組件。

import React, { Component } from 'react';  2 import Button from 'antd/lib/button';  3 import './App.css';  4 
class App extends Component {  6  render() {  7     return (  8       <div className="App">
        <Button type="primary">Button</Button>
      </div>
 ); 12  } 13 } 14 
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組件普遍偏大，即使壓縮也效果不明顯，所以異步加載是最好的方式。

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