Covid19-Global React Hooks、Material-UI、Charts.js和axios数据展示项目
Covid19 的全球数据展示项目，用的是 React Hooks 搭配 Material-UI，再加上 Charts.js 和 axios，整套下来前端逻辑清晰，页面还挺有现代感。
项目结构比较清爽，跑开发环境直接 npm start 就行，改个组件立马刷新，调试效率蛮高。测试部分也准备好了，用 npm test 就能开干，适合边写边测那种。
Material-UI 组件风格统一，还挺容易定制，像卡片、按钮、图表容器这些，用起来顺手又省事。不熟的可以看看 这篇指南，讲得挺明白的。
图表这块用的是 Charts.js，配合 React 用起来还蛮丝滑，做个疫情趋势图、柱状对比都不难。推荐先看看 这个项目，有实际效果图，心里有底。
数据是靠 axios 从外部 API 拉过来的，响应也快，数据格式清晰。注意下跨域问题，开发的时候可以用代理顶一下。
构建发布也安排得明明白白，npm run build 一键打包，压缩加 hash 文件名，部署上去就能跑。实在有需求，也支持 npm run eject 拆包自己玩，不过一般不太推荐。
如果你最近正好在找一个能练手又能上线的小项目，或者想学学 Hooks 搭配 Material-UI 的组合，这个项目还蛮合适的，代码也比较容易看懂。
文件大小：197.77KB
评论区