步骤一:目录搭建【React项目创建】

812 阅读1分钟

创建项目

这里还是使用create-react-app的官方脚手架创建项目

npx create-react-app react-standard --templete typescript

创建成功后,看下目录结构。结构不缀诉.主要看下版本

目录结构.jpg

我创建的时间是2022年4月,当前执行命令后,关键库的版本:

  • react:v18
  • webpack:v5.64

修改目录

根据需求再src目录下修改和创建了以下目录结构

  • components:无状态的公共组件,不包含业务,可以在其他项目中重用
  • constants:可以复用的公共常量
  • containers:有状态组件,包含业务,可在本项目中重用
  • contexts:存放全局状态的React.contexts
  • models:TS模型
  • network:网络接口,对后端接口的封装,暴露参数和返回值
  • pages:项目的业务逻辑代码
  • reducers:redux
  • utils:公共函数目录

目录2.jpg

总结

到此为止,一个基于TS和React的项目目录已经初步完成

传送门