react脚手架初始化项目及ts的应用（react+ts）

1. 安装react脚手架

npm install -g create-react-app
或是
yarn add -g create-react-app
1
2
3

2. 初始化项目

快速构建出项目名为my-app的react+ts项目

create-react-app my-app --template typescript
1

拓展：

npx

npx create-react-app my-app
1

(npx附带npm 5.2+及更高版本，请参阅旧版本npm的说明)

npm

npm init react-app my-app
1

支持在 npm 6+版本以上

Yarn

yarn create react-app my-app
1

Yarn 0.25+ 以上支持

3. 配置路径别名

• 在引入文件时如果都是…/ …/…/这种相对路径方式引用可读性很差
• 安装依赖

npm install react-app-rewired customize-cra --save-dev
1

在项目根路径下创建config-overrides.js文件，添加如下配置

const { override, addWebpackAlias } = require('customize-cra')
const path = require('path')
module.exports = override(
  addWebpackAlias({
    // 指定@符指向src目录
    '@': path.resolve(__dirname, 'src'),
  })
)

1
2
3
4
5
6
7
8
9

4. 路由配置

1.src下index引入

import { Router, Route } from 'react-router-dom';
import history from './history';
1
2

2.自建history路由中间件history.js

import {createBrowserHistory} from 'history';
export default createBrowserHistory();
1
2

3.src下index加路由

• 每一个Link只能在Router中
• 自己配置history这样在接下来的项目中就可以直接使用
  history.push(‘/cart’)

ReactDOM.render(
  
    
      
      
      
    ,
  ,
  document.getElementById('root')
);
1
2
3
4
5
6
7
8
9
10

5.引入Ant-Design组件库

1.安装依赖

npm install antd --save
1

2.在App.tsx文件中引入两个按钮
查看效果，按钮正常显示说明就是成功了；
在这里插入图片描述