相关命令介绍
全局安装react
yarn global add create-react-app
创建react应用
create-react-app 应用名称
创建支持ts语法的react应用
create-react-app 应用名称 --template typescript
创建成功的目录
demo报错信息整理
解决方案:
变成import ContentPage from './others/content’即可
报错二:this.state的属性报错=》类型“Readonly<{}>”上不存在属性“collapsed”
解决办法
这里有一个内容需要注意
React.Component有两个可选的参数分别为props和state(React.Component<PropsType,StateType>)
报错三:Cannot invoke an object which is possibly ‘undefined’.
解决方案:加上判断即可
报错四:Could not find a declaration file for module ‘react-router-dom’
解决方案: 安装ts支持的react-router-dom (这里我用的是版本5)
yarn add @types/react-router-dom@5
报错五:
第一步npm run eject展示webpack的配置
第二步在webpack.config.js中添加如下配置
解决方法:
至此 demo初始化已完成,效果展示如下
demo 实例中的一些介绍
1.react-router-dom的简单应用
import { Component, ReactNode } from "react";
import {BrowserRouter as Router,Route} from 'react-router-dom'
import App from '../App'
class Routers extends Component<any,any>{
constructor(props:any) {
super(props)
}
render(): ReactNode {
return(
<Router>
<Route path="/" component={App}/>
</Router>
)
}
}
export default Routers
由于本案例使用的react版本低于18,故而入口文件有所调整
import ReactDOM from 'react-dom'
// import ReactDOM from 'react-dom/client';
import './index.css';
import Routers from './routers';
// import reportWebVitals from './reportWebVitals';
// const root = ReactDOM.createRoot(
// document.getElementById('root') as HTMLElement
// );
// root.render(
// <React.StrictMode>
// <App />
// </React.StrictMode>
// );
// 当react版本低于18时使用如下方式
ReactDOM.render(
<Routers/>,
document.getElementById('root') as HTMLElement
)