Build the React+TypeScript admin project step by step

1. Create a typescript-based project using create-react-app

$ npx create-react-app myApp --typescript

Copy the code

2. Enter the project and start it

$ cd myApp

$ npm start

Copy the code

3. Introduce the antd

$ npm install antd --save

Copy the code

Styles are introduced in the index.css file, and components are introduced as needed

import 'antd/dist/antd.css';

Copy the code

Refer to the sample

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>

< / a >,

  mountNode,

);

Copy the code

4. Download the react – the router

$ npm install react-router-dom

Copy the code

Example code for configuring a route:

• Route is for each Route.
• Switch matches a unique route,
• Redirect Route redirection,
• <HashRouter>The URL format is Hash routing component

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>    );  }}

Copy the code

5. The project references ReDUx. Since reDUx involves a lot of content, we will write a separate article next time

Download reference examples

$ npm install --save redux

Copy the code

Define a store folder and create a new file main.ts

import {createStore} from 'redux';

import reducer from './reducer';



const store = createStore(reducer);



export default store;

Copy the code

6. Define file state, props interface

The sample

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> uses ts double happiness </div>

  );  

  }

  }

Copy the code

7. Components use routes, which are similar to route redirection in Vue

• The Vue: this. The router. The replace (‘/home ‘)
• React: this. Props. History. Push (“/home “);
• The difference is that every component class in React must be wrapped by withRouter

Not on ts

import React from "react";

import { withRouter } from 'react-router-dom'



class Home extends React.Component {

  public render() {    return</div> </div>); }}

export default withRouter(Home);

Copy the code

Ts, using the decorator

import React from "react";

import { withRouter } from 'react-router-dom'



@(withRouter as any)

class Home extends React.Component {

  public render() {

    return (      

<div> uses ts double happiness </div>

    ); 

  }

}

export default Home;

Copy the code

8. Attach a rendering

End of the 9.

Self-introduction:

• Ts has become a front-end development essential skills, want to learn it; Attach a document address: www.tslang.cn/docs/home.h…
• Vue heavy user, used TS in the inside, the experience is very poor, almost as, personal advice before 3.0 do not use, really 8 too good
• When USING React, I tried the same thing and found React was friendlier. I still vote React for the two frameworks’ embrace of TS
• Source code address: github.com/YYDBBA/Reac…
• Like to give a star, progress together duck