前言

一、React是Facebook推出的一個前端框架，之前被用于著名的社交媒體Instagram中，后來由于取得了不錯的反響，于是Facebook決定將其開源。出身名門的React也不負眾望，成功成為當前最火熱的三大前端框架之一。相比于Angular，React更加輕量。而相對于另一個輕量級前端框架Vue來說，React雖然學習和使用起來難度稍微大一些，但是React的社區(qū)相對來說人氣更旺，而且在移動端的開發(fā)上面，大名鼎鼎的React Native更是盡顯優(yōu)勢，在代碼性能上要好過Vue框架。今天我們就來對React進行一個入門的學習。?

這里還要用到的是一個UI設計語言，Ant Design。Ant Design同樣出身名門，是阿里巴巴旗下螞蟻金融服務集團（旗下?lián)碛兄Ц秾?、余額寶等產(chǎn)品）所設計的一個前端UI組件庫。目前支持了React， 并且有一個對Vue支持的測試版本。而excharts也是出身名門，是百度數(shù)據(jù)可視化實驗室所設計的前端可視化數(shù)據(jù)組件庫。

二、介紹用到的各種IDE、框架和組件

編譯器Webstrom

框架React

UI框架Ant Design

數(shù)據(jù)可視化框架excharts

?

正文

一、安裝webstrom

官網(wǎng)下載安裝最新版本

官網(wǎng)地址：https://www.jetbrains.com/webstorm/

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

?

二、安裝node.js（安裝后自帶npm）

官網(wǎng)下載安裝最新版本

官網(wǎng)地址：http://nodejs.cn/download/

?

三、安裝create-react-app主流腳手架和yarn

1.什么是腳手架：

在開發(fā)react應用時，應該沒有人用傳統(tǒng)的方法引入react的源文件(js)，然后在html編輯吧。

大家都是用webpack + es6來結合react開發(fā)前端應用。

這個時候，我們可以手動使用npm來安裝各種插件，來從頭到尾自己搭建環(huán)境。

雖然自己搭建的過程也是一個很好的學習過程，但是有時候難免遇到各種問題，特別是初學者，而且每次開發(fā)一個新應用，都要自己從頭搭建，未免太繁瑣。

于是，有人根據(jù)自己的經(jīng)驗和最佳實踐，開發(fā)了腳手架，避免開發(fā)過程中的重復造輪子和做無用功，從而節(jié)省開發(fā)時間。

眾多腳手架中最突出的是create-react-app。

它是后來居上，他的開發(fā)時間都晚于前兩個，但關注量卻比他們還大，而且他還是facebook官方開發(fā)的。

簡單來說腳手架就是幫你一次將運行需要的運行環(huán)境搭建并且優(yōu)化好

詳細參見https://blog.csdn.net/qtfying/article/details/78665664

2.安裝方法

打開webstrom左下角的Terminal命令行工具輸入

?1 npm install -g create-react-app yarn?

?

三、創(chuàng)建項目（環(huán)境搭建好開始創(chuàng)建項目）

?1 create-react-app antd-demo?

于是創(chuàng)建了一個名字為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

現(xiàn)在從 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; }...

如圖：

?

好了，現(xiàn)在你應該能看到頁面上已經(jīng)有了 antd 的藍色按鈕組件，接下來就可以繼續(xù)選用其他組件開發(fā)應用了。

?

七、引入echarts可視化組件

?

?

我們真的需要react-echarts插件嗎？

?

NO！！！

?

導入echarts，最煩人的是什么？配置option是其一，其二就是極其龐大的echarts！特別是管理后臺使用到echarts的時候，如果需要同個頁面展示數(shù)十種圖表類型，你就該好好考慮性能問題了。

?

插件版本號

?

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

?

實現(xiàn)了哪些圖表組件

?

1、餅圖
2、柱狀圖
3、折線圖
4、散點圖
5、地圖
6、雷達圖
7、k線圖

?

我們不總是需要插件

?

實現(xiàn)這些echarts-react組件的目的，是告訴大家，react可以不需要引入第三方插件，使用echarts，不要懼怕react組件！

?

看過很多人說react難寫，因為他們習慣了在jQuery開發(fā)模式下導入echarts、swiper、d3等插件。而突然切換到react中，就產(chǎn)生了不知所措的感覺。
如何在react中導入第三方插件，成為了他們心中的痛點，所以一些人就認為需要別人封裝好的echarts-react插件或者其他react插件，才能使用，這種想法是錯的。

?

echarts體積太大，使用模塊化加載

?

以柱狀圖為例子，我們根據(jù)需要渲染的插件采取模塊導入，不渲染的組件不導入，最大程度減小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'

?

?

組件化開發(fā)的福音，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

?

實現(xiàn)方案介紹

?

1、每個圖表單獨封裝成一個組件，通過參數(shù)傳遞數(shù)據(jù)，你會發(fā)現(xiàn)，圖表內部代碼幾乎完全一樣，只有import的類型不同。

?

2、異步加載是提高圖表加載性能的最佳方式，不管是服務端還是客戶端渲染。

?

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

?

?

八、推薦一波react入門課：（我1.25倍速看了一遍后感覺真的挺不錯，理解更加透徹啦，推薦大家看看）

? ? ? ?網(wǎng)址： https://www.imooc.com/learn/1023

轉載于:https://www.cnblogs.com/piaobodewu/p/9382340.html

總結

以上是生活随笔為你收集整理的【React自制全家桶】一、Webstrom+React+Ant Design+echarts搭建react项目的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。