react系列-react项目实战

发表于 更新于 分类于 ，
本文字数： 1.1k 阅读时长 ≈ 2 分钟

ANTD

官方文档：https://ant.design/docs/react/introduce-cn

github：https://github.com/ant-design/ant-design/

修改默认配置

如果使用常规的手段是需要将 create-react-app 的配置全部暴露出来，进行手动修改配置，会造成后期维护困难等问题。

方案：
  • react-app-rewired + customize-cra（antd 早期推荐的方案）
  • craco（目前 antd 推荐的方案）

优化

antd 是否会将一些没有用的代码（组件或逻辑代码）引入，造成包很大

antd 官网有提到： antd 的 JS 代码默认支持基于 ES modules 的 tree shaking，对于 js 部分，直接引入 import { Button } from 'antd' 就会有按需加载的效果。

ANTD Pro

参考链接：https://ant.design/docs/react/practical-projects-cn

这是一个基于 umi、dva 和 ant design 的开箱即用的中台前端/设计解决方案。

umi

umi 则是一个可插拔的企业级 react 应用框架。umi 以路由为基础的，支持类 next.js 的约定式路由，以及各种进阶的路由功能，并以此进行功能扩展，比如支持路由级的按需加载。然后配以完善的插件体系，覆盖从源码到构建产物的每个生命周期，支持各种功能扩展和业务需求，同时提供 Umi UI 通过可视化辅助编程（VAP）提高开发体验和研发效率。

使用

初始化

# 使用 npm
npx create-umi myapp
# 使用 yarn
yarn create umi myapp

网易云音乐 web

真实项目：

https://music.163.com/#

项目参考：

https://github.com/coderwhy/hy-react-web-music

https://github.com/wanguano/Music163-React

React + TypeScript 打造自己的组件库

课程文档：https://vikingship.xyz/

参考文档：ts in jsx - https://www.typescriptlang.org/docs/handbook/jsx.html

完成一个组件库需要考虑的问题