【入門】React + Vite 實(shí)現(xiàn)疫情數(shù)據(jù)可視化

最近公司需求堆的些許有點(diǎn)忙，還有一些雜七雜八的事，例如養(yǎng)貓了，有兩周左右時(shí)間都在陪著這小家伙，由于是立秋接回家的，發(fā)現(xiàn)肉墊也是愛(ài)心形狀的，我們就叫她秋咪。

其次，前三個(gè)月試用期還是得好好表現(xiàn)一下，因此關(guān)于 React 相關(guān)文章產(chǎn)出就鴿了一段時(shí)間。

那么，廢話少說(shuō)，直接開(kāi)啟我們的新世界！

本篇文章將會(huì)詳細(xì)講述本項(xiàng)目，包括為什么做這個(gè)項(xiàng)目、會(huì)以怎樣形式講解、技術(shù)選型介紹、開(kāi)發(fā)環(huán)境介紹、項(xiàng)目演示。

為什么做這個(gè)項(xiàng)目？

一方面是工作上的需要，首先來(lái)到一家以技術(shù)驅(qū)動(dòng)的公司，我覺(jué)得還是挺不錯(cuò)的，能夠保持一定的創(chuàng)造力以及新的技術(shù)挑戰(zhàn)。

對(duì)于前端這塊，技術(shù)棧 100% 以 React 為核心，因此學(xué)習(xí) React 對(duì)于前端er 來(lái)說(shuō)尤為重要。本項(xiàng)目全程用 React 語(yǔ)法來(lái)編寫。

第二點(diǎn)，也算是工作方面的一點(diǎn)，那就是開(kāi)篇就介紹過(guò)的「工作之余的產(chǎn)出」，看過(guò)一篇文章的結(jié)尾寫的非常不錯(cuò)：「在你離開(kāi)你這一家公司的時(shí)候，你能帶走的是什么呢？」那位博主的答案是我這些年來(lái)的「沉淀」。

沒(méi)錯(cuò)，也許 1 年、2 年甚至 10 年之后已經(jīng)不在當(dāng)前公司工作了，那么在公司這些年能帶走的或許就是這些年個(gè)人的沉淀了。

第三點(diǎn)，博主是 21 年本科畢業(yè)嘛，當(dāng)初也經(jīng)歷過(guò)大學(xué)的畢業(yè)設(shè)計(jì)，當(dāng)時(shí)的畢業(yè)設(shè)計(jì)就是做的疫情數(shù)據(jù)可視化這方面，不過(guò)前端是通過(guò) uni-app 編寫的，在技術(shù)上的變動(dòng)，現(xiàn)在采用 React 繼續(xù)來(lái)實(shí)現(xiàn)一下。

第四點(diǎn)，這個(gè)項(xiàng)目將進(jìn)行開(kāi)源分享，希望能夠幫助在學(xué)習(xí) React 的小獅子們，關(guān)于技術(shù)的更新與項(xiàng)目迭代這里大家不用太擔(dān)心，我會(huì)逐步完善這個(gè)項(xiàng)目，讓它變得更美觀、技術(shù)方面呢主要是根據(jù)自己所學(xué)來(lái)變動(dòng)，簡(jiǎn)單來(lái)說(shuō)就是學(xué)了啥新知識(shí)就用啥即可。

會(huì)以怎樣形式講解

考慮到文本的表述總會(huì)有一些不足點(diǎn)，配合上視頻的話會(huì)更好一點(diǎn)，因此后續(xù)會(huì)同步更新在 「B 站」 視頻列表。

喜歡的小伙伴們可以提前關(guān)注一下哈，現(xiàn)在關(guān)注以后就是老粉了，對(duì)于老粉而言，我定不辜負(fù)，后續(xù)一定會(huì)有回報(bào)。

技術(shù)選型介紹

本項(xiàng)目目前技術(shù)棧主要如下（技術(shù)名稱之后數(shù)字為版本號(hào)）：

"react":?"^17.0.0",
"react-dom":?"^17.0.0"
"echarts":?"4.4.0",
"echarts-for-react":?"2.0.15-beta.1",
"vite":?"^2.4.0"
//?未完待續(xù)...

可能會(huì)有小伙伴疑問(wèn)，誒，為什么不加入 ts 呢？

我是這么考慮的，一方面 ts 目前本人掌握還不算很扎實(shí)，只會(huì)用基本語(yǔ)法，另一方面是降低起初的學(xué)習(xí)成本，想必會(huì)有一部分小伙伴和我一樣，剛開(kāi)始學(xué)的時(shí)候希望掌握基礎(chǔ)，而不是很多技術(shù)擺在那，然后給人一種從入門到放棄的感覺(jué)。

因此，前期學(xué)習(xí)的話，我希望的是降低一些學(xué)習(xí)的成本，減少一些框架的介入，框架好是好，直接用就好了，但是學(xué)習(xí)過(guò)程不只是會(huì)用就好了，還要懂其中一些原理。

那么，從另一個(gè)角度來(lái)說(shuō)的話，在之后迭代項(xiàng)目過(guò)程中，

開(kāi)發(fā)環(huán)境介紹

個(gè)人使用的是 mac 電腦，大部分可能是 win 系統(tǒng)，但不影響我們的步驟。

• Node.js （必裝，一般 12 版本以上）https://nodejs.org/zh-cn/
• Yarn（mac 裝） https://yarn.bootcss.com/
• npm（npm 已經(jīng)在 Node.js 安裝的時(shí)候順帶裝好了）
• Git 版本控制 https://www.progit.cn/
• Gihub 代碼倉(cāng)庫(kù)
• 未完待續(xù)...

查看 node 版本號(hào)和 npm 版本號(hào)命令：

node?-v
npm?-v

至于具體的安裝方式，大家可以參考上述提供的官網(wǎng)鏈接，對(duì)于初學(xué)不確定每一個(gè)步驟選項(xiàng)的同學(xué)可以搜一搜安裝方式，現(xiàn)在網(wǎng)上解答有許多了，這里就不再贅述了。

項(xiàng)目演示

同步更新在 B 站視頻列表，具體可以查看。

項(xiàng)目介紹本篇就到此結(jié)束了，讓我們期待接下來(lái)的文章吧。

博主 21 屆本科畢業(yè)，可以稱呼我 Chocolate，現(xiàn)開(kāi)通了個(gè)人公眾號(hào)「小獅子前端」，在這里分享我的大廠面試經(jīng)歷，租房攻略，計(jì)算機(jī)領(lǐng)域那些事兒。

喜歡可以關(guān)注一下，還是那句話，現(xiàn)在關(guān)注以后就是老粉了，「加博主微信」可以拉你加入小獅子前端交流｜內(nèi)推群。

希望小伙伴們能夠喜歡我的文章，這里是小獅子前端，保持獅子座的熱情帶給你學(xué)習(xí)的動(dòng)力，愿我們成為最好的自己~

QQ交流群：666151691

-?END -

如下是小獅子春秋招過(guò)程中學(xué)習(xí)整理的思維導(dǎo)圖以及 PDF 文檔，會(huì)不斷更新，目前已有 9?份思維導(dǎo)圖，現(xiàn)在分享給大家，在公眾號(hào)后臺(tái)回復(fù)「小獅子」，關(guān)注領(lǐng)取

學(xué)如逆水行舟，不進(jìn)則退

點(diǎn)贊 + 在看，好文不白嫖嗷~

B站視頻現(xiàn)在已經(jīng)更新了，點(diǎn)擊左下方「閱讀原文」即可跳轉(zhuǎn)，要看到視頻末尾。