基本操作
# ★★★前提条件(可以运行create-react-app和yarn)★★★
# 创建项目(后面的操作记住进入项目根目录)
create-react-app 项目名 --template typescript
# 添加antd和axios
yarn add [email protected] [email protected]
# 配置mobx(在TS中使用注解需要根据提示配置)
# 安装改变 create-react-app 中 webpack 配置插件
yarn add -D react-app-rewired customize-cra @babel/plugin-proposal-decorators
# 在项目根目录下创建 config-overrides.js 并写入以下内容
const { override, addDecoratorsLegacy } = require("customize-cra")
module.exports = override(
addDecoratorsLegacy()
)
# 修改 package.json 文件中 scripts 脚本
#原本配置
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
#新配置
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test --env=jsdom",
# end 修改 package.json 文件中 scripts 脚本
# 添加mobx和mobx-react
yarn add [email protected] [email protected]
# end 配置mobx
...其他配置...
# end 创建项目
目录结构
#React项目规范
src
*components
*models
*pages
*stores
constants
utils
#详解:
components 存放公共组件,每个组件一个文件(首字母大写)
models 存放后端接口
pages 存放展示页面,每个页面一个文件(首字母大写)
stores 保存全局状态,里面文件(首字母大写)
constants 存放常量
utils 存放工具类
#React项目文件结构说明 end
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。
