一步一步搭建React+TypeScript后台管理项目

1.使用create-react-app创建一个基于typescript的项目

$ npx create-react-app myApp --typescript

2.进入项目并启动

$ cd myApp
$ npm start

3.引入 antd

$ npm install antd --save

index.css文件中引入样式，组件按需引入即可

import 'antd/dist/antd.css';

引用示例

import React from "react";
import { Button } from 'antd';

ReactDOM.render(
  <>
    <Button type="primary">Primary Button</Button>
    <Button>Default Button</Button>
    <Button type="dashed">Dashed Button</Button>
    <br />
    <Button type="text">Text Button</Button>
    <Button type="link">Link Button</Button>
  </>,
  mountNode,
);

4.下载react-router

$ npm install react-router-dom

配置路由示例代码：

• Route为每一个路由，
• Switch匹配唯一路由，
• Redirect路由重定向，
• <HashRouter> URL格式为Hash路由组件

import React from "react";
import { Route, HashRouter, Switch, Redirect } from "react-router-dom";
import Home from "../pages/HomeIndex";
import App from "../App";import Index from "../pages/Home";
import Set from "../pages/Set";import My from "../pages/My";
import Equipment from "../pages/Equipment";
import Login from "../pages/Login";
export default class AppRouter extends React.Component<any, any> {  public render() {    return (      
<HashRouter>        
<Route path="/" component={App} />        
<Switch>          
<Route path="/login" exact component={Login} />          
<Route path="/home">            
<Home /> 
<Switch>             
<Route path="/home/index" exact>         
<Index />          
</Route>         
<Route path="/home/set" exact>    
<Set />          
</Route>        
<Route path="/home/my" exact>      
<My />         
</Route>       
<Route path="/home/equipment" component={Equipment} />    
<Redirect to="/home/index" />      
</Switch>       
</Route>      
<Redirect to="/login" />   
</Switch>   
</HashRouter>    );  }}

5.项目引用redux，由于redux涉及到的内容较多，下次单独开一篇

下载引用示例

$ npm install --save redux

定义一个store文件夹,新建文件main.ts

import {createStore} from 'redux';
import reducer from './reducer';

const store = createStore(reducer);

export default store;

6.定义文件state，props接口

示例

import React from "react";
interface IState<T> {  
menuArr: Array<T>;  
tab: number;  
logo: any;  
visible: boolean;  
rightPx: number;}

interface IProps<T> {  
menuArr: Array<T>;  
tab: number;  
logo: any;  
visible: boolean;  
rightPx: number;}

export default class Home extends React.Component<IProps, IState<object>>{
  public render() {    
  return (      
  <div>用了ts双倍快乐</div>
  );  
  }
  }

7.组件中使用路由，类似Vue里面路由跳转

• Vue中：this.router.replace('/home')
• React中：this.props.history.push(‘/home’);
• 区别在于React中每一个组件类必须要被withRouter包裹

未上ts

import React from "react";
import { withRouter } from 'react-router-dom'

class Home extends React.Component {
  public render() {    return (      <div>用了ts双倍快乐</div>    );  }}
export default withRouter(Home);

上ts，用到装饰器

import React from "react";
import { withRouter } from 'react-router-dom'

@(withRouter as any)
class Home extends React.Component {
  public render() {
    return (      
      <div>用了ts双倍快乐</div>    
    ); 
  }
}
export default Home;

8.附上一张效果图

9.结束

自我介绍：

• ts已经成为前端开发必备技能了，想要恰饭学起来；附上文档地址：www.tslang.cn/docs/home.h…
• Vue重度使用者，在里面使用过ts，体验极差，差不多as了，个人建议3.0之前别用，真的8太行
• 笔者在使用React的时候，同样想尝试一下，发现还是React更友好，目前两大框架对ts的拥抱程度，我还是投React一票
• 源码地址：github.com/YYDBBA/Reac…
• 喜欢的给个star，一起进步鸭