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报错解决
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);
login.png
五、React Router
下面继续搭建单应用主页面，安装React Router(4.x版本)来控制主应用的页面导航
- 文档链接
- 版本4以上的react-router有比较大的改动，分为以下几种
router.png
- 安装web版的
npm install react-router-dom - 实现从登陆页登陆成功后 跳转到下面主页面
// 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>
);
//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'
})
}
home.png
现在已经有了基础的框架，后面集成Redux。
