react+TypeScript+Ant（笔记一）

一、编辑器：VsCode

安装必要的前端插件，不多介绍。注意的是，如果之前有过安装vue或者angualr插件，这时又想使用一个干净的react开发环境。使用VsCode工作区的功能，添加一下 react+Typescript 工作区，例如在新的工作区，禁用Eslint插件启用Tslint插件。

二、官方文档

  • 官方的文档是最好的学习资料
  • 学习react基本的概念
  • 链接

三、Create React App

官方推荐的React 创建单页面应用的最佳方式，配置好了开发环境。可以说CLI工具极大的降低了学习react的成本曲线。

  • 创建支持TS的React项目： npx create-react-app my-app --typescript

四、Ant Design of React

  • 文档链接
  • 安装antd,利用官方学到的知识，快速搭建一个登陆页面。
  • 在 TypeScript 中使用ant form 表单 this.props报错解决
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import { Form } from 'antd';
import { FormComponentProps } from 'antd/lib/form';

interface UserFormProps extends FormComponentProps {
  age: number;
  name: string;
}

class UserForm extends React.Component<UserFormProps, any> {
  // ...
}

const App = Form.create<UserFormProps>({
  // ...
})(UserForm);

五、React Router

下面继续搭建单应用主页面，安装React Router(4.x版本)来控制主应用的页面导航

  • 文档链接
  • 版本4以上的react-router有比较大的改动，分为以下几种
  • 安装web版的 npm install react-router-dom
  • 实现从登陆页登陆成功后 跳转到下面主页面
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// app.tsx
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import React, { Suspense, lazy } from 'react';

const Home = lazy(() => import('./routes/home/home'));
const Login = lazy(() => import('./routes/login/login'));
const NoMatch = lazy(() => import('./routes/no-match/no-match'));

const App = () => (
  <Router>
    <Suspense fallback={<div>Loading...</div>}>
      <Switch>
        <Route  path="/home" component={Home}/>
        <Route exact path="/" component={Login}/>
        <Route component={NoMatch} />
      </Switch>
    </Suspense>
  </Router>
);
1
2
3
4
5
6
7
8
9
10
11
12
//login.tsx
import {withRouter} from 'react-router';

@(withRouter as any)
class NormalLoginForm extends React.Component<any,any> {
    //表单内容
   if(isLogin){
    const {history} = this.props;
    history.push({
              pathname:'/home'
    })      
}

现在已经有了基础的框架，后面集成Redux。