react脚手架初始化项目及ts的应用(react+ts)

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文件中引入两个按钮

查看效果,按钮正常显示说明就是成功了;

在这里插入图片描述

相关推荐
无尽夏_1 小时前
HTML5(前端基础)
前端·html·html5
Jagger_1 小时前
敏捷开发流程-精简版
前端·后端
FIN66682 小时前
昂瑞微冲刺科创板:创新驱动,引领射频芯片国产化新征程
前端·安全·前端框架·信息与通信·芯片
GISer_Jing2 小时前
ByteDance——jy真题
前端·javascript·面试
睡美人的小仙女1272 小时前
浏览器为何屏蔽本地文件路径?
前端
真的想不出名儿2 小时前
Vue 中 props 传递数据的坑
前端·javascript·vue.js
FIN66682 小时前
昂瑞微:深耕射频“芯”赛道以硬核实力冲刺科创板大门
前端·人工智能·科技·前端框架·信息与通信·智能
阳光阴郁大boy2 小时前
星座运势网站技术解析:从零打造现代化Web应用
前端·javascript
烛阴2 小时前
武装你的Python“工具箱”:盘点10个你必须熟练掌握的核心方法
前端·python
sorryhc2 小时前
如何设计一个架构良好的前端请求库?
前端·javascript·架构