1. 安装react脚手架
npm install -g create-react-app
或是
yarn add -g create-react-app
2. 初始化项目
快速构建出项目名为my-app的react+ts项目
create-react-app my-app --template typescript
拓展:
npx
npx create-react-app my-app
(npx附带npm 5.2+及更高版本,请参阅旧版本npm的说明)
npm
npm init react-app my-app
支持在 npm 6+版本以上
Yarn
yarn create react-app my-app
Yarn 0.25+ 以上支持
3. 配置路径别名
- 在引入文件时如果都是…/ …/…/这种相对路径方式引用可读性很差
- 安装依赖
npm install react-app-rewired customize-cra --save-dev
在项目根路径下创建config-overrides.js文件,添加如下配置
const { override, addWebpackAlias } = require('customize-cra')
const path = require('path')
module.exports = override(
addWebpackAlias({
// 指定@符指向src目录
'@': path.resolve(__dirname, 'src'),
})
)
4. 路由配置
1.src下index引入
import { Router, Route } from 'react-router-dom';
import history from './history';
2.自建history路由中间件history.js
import {createBrowserHistory} from 'history';
export default createBrowserHistory();
3.src下index加路由
- 每一个Link只能在Router中
- 自己配置history这样在接下来的项目中就可以直接使用
history.push(‘/cart’)
ReactDOM.render(
<React.StrictMode>
<Router history={history}>
<Route path="/" component={Index}/>
<Route path="/myPersonal" component={MyPersonal}/>
<Route path="/otherPersonal" component={OtherPersonal}/>
</Router>,
</React.StrictMode>,
document.getElementById('root')
);
5.引入Ant-Design组件库
1.安装依赖
npm install antd --save
2.在App.tsx文件中引入两个按钮
查看效果,按钮正常显示说明就是成功了;
在这里插入图片描述