安装create-react-app
1、使用 npm
npm install -g create-react-app
2、使用 yarn
yarn add -g create-react-app
构建react项目
1、创建项目
create-react-app my-app
2、创建TS项目
create-react-app my-app --template typescript
删除多余的文件,调整后的项目目录结构如下
-
start
指令用于启动开发者服务器 -
build
指令用于打包项目 -
test
指令用于测试 -
eject
指令用于抽离配置文件
react项目默认隐藏了webpack相关配置文件,如果想要暴露在项目当中,需要执行npm run eject,
并且此操作无法回退,此操作根据自行需要执行;
配置@解析别名
不抽离配置文件,需要通过第三方库来修改
npm i @craco/craco -D
npm i @types/node -D
在项目根目录中创建 craco 的配置文件:craco.config.ts
const path = require('path')
module.exports = {
// webpack 配置
webpack: {
// 配置别名
alias: {
// 约定:使用 @ 表示 src 文件所在路径
'@': path.resolve(__dirname, 'src')
}
}
}
export {}
因为是ts项目,tsconfig.json仍然不认识@,所以我们也需要在tsconfig.json中添加配置
更改package.json中的运行命令
"scripts": {
"start": "craco start",
"build": "craco build",
"test": "craco test"
}
跨域问题
只有一个服务器,直接在package.json文件中配置
"proxy": "http://127.0.0.1:8000"
有多个服务器,使用第三方插件 http-proxy-middleware
npm i http-proxy-middleware -S
在src目录下新建setupProxy.js(注意:该文件名不能更改,否则自动识别不了)
const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function (app) {
app.use(
'/api', // 待转发请求的目录名
createProxyMiddleware({
target: 'http://127.0.0.1:8000', // 转发目标地址
changeOrigin: true, // 控制服务器接收到的请求头中host字段的值
pathRewrite: { '^/api': '' } // 去除请求前缀,保证交给后台服务器的是正常请求地址(必须配置)
})
);
app.use(
'/hqwl',
createProxyMiddleware({
target: 'http://27.0.0.1:8085',
changeOrigin: true,
pathRewrite: { '^/hqwl': '' }
})
);
}
封装axios
安装axios
npm i axios
或
yarn add axios
在src/utils目录下新建request.ts
import axios from 'axios'
// 创建 axios 实例
const instance = axios.create({
baseURL: '/api', // api base_url
timeout: 1000 * 60 * 10 // 请求超时时间
})
// 请求拦截器
instance.interceptors.request.use(config => {
//所有请求开始之前先执行请求拦截器中的内容,如设置token
return config
}, error => {
})
// 响应拦截器
instance.interceptors.response.use((response) => {
return response.data
}, error => {
})
// 暴露自定义axios
export default instance;
引入react路由
安装依赖 react-router-dom
npm i react-router-dom
或
yarn add react-router-dom