react typescript 单页应用项目如何组织?

个人单页应用,主要是画图应用。
包含了核心库及界面操作

核心库打算用typescript开发,打算在windows下面挂一个实例
界面打算用react进行开发,包括按钮/菜单栏/状态栏等,页准备用typescript开发

项目应该如何组织和编译呢呢?有没有类似的starter项目或者类似思路的项目可以参考一下?

谢谢

阅读 2.1k
1 个回答

我之前做了个首页,技术栈选型跟你的需求有点类似,虽然不完善,但可以提供一个思路给你: anran758.github.io

主要技术栈:react / typescript / webpack

大致的项目结构设计如下:

/build            # project 构建相关的脚本与配置
/build/**           # 略
/config           # 网站通用配置
/config/**          # 略
/src              # 源码目录
/src/components     # 公共组件
/src/constant       # 公共常量
/src/hooks          # hooks
/src/images         # 公共图片
/src/layout         # 全局布局
/src/pages          # 页面
/src/router         # 路由
/src/static         # 静态文件,会被 webpack copy 到输出目录
/src/styles         # 全局/公共样式
/src/utils          # 工具类
/src/.eslintrc.js   # eslint 的配置
/src/index.tsx      # React App entry
/src/typing.d.ts    # typescript global type

因为我个人有一些想要展示的 demo 打算也在网站中一起打包,因此 pages 下不是单纯的 SPA, 而是做了区分。

/src/pages/App    # React APP page
/src/pages/demos  # 多页面 HTML,下面每个目录都是单独的 Page

路由方面兼容多页面路由,React APP 使用哈希路由,多页面就按照正常路径访问。对应的路径名可以通过 webpack 进行修改。

公共的组件可以放在 /src/components, 很多基础的 UI 组件都是自己实现了,主要是用了练练手。也可以直接引入第三方的 UI 库,例如 Antd

该项目的状态并不算复杂,状态管理的选型就看个人喜好咯~

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题