React+TypeScript开发--环境搭建

React+TypeScript开发--环境搭建

学习文档

React

TypeScript

一、node环境安装

打开Node.js的官网，它会自动识别所在的环境，推荐你下载相应版本，左侧是持久支持的稳定版本，右侧是最新版本。我用的是Mac所以这里进入下载的是Mac版。

屏幕快照 2019-07-16 15.23.09.png

二、初始化项目

要将 TypeScript 添加到 Create React App 项目，请先安装它：

$ npm install --save typescript @types/node @types/react @types/react-dom @types/jest
$ # 或者
$ yarn add typescript @types/node @types/react @types/react-dom @types/jest

完成以上步骤后，创建一个新的文件夹，终端cd到路径下，使用 TypeScript 启动新的 Create React App 项目：

$ npx create-react-app my-app --typescript

//或者

$ yarn create react-app my-app --typescript

接下来，将任何文件重命名为 TypeScript 文件（例如 src/index.js 重命名为 src/index.tsx ）

三、开发工具

VSCode

四、运行项目

在vscode中打开项目后，开启本地服务器：

$ yarn start

你应该就能看到如下日志了，并且打开了一个网页。

屏幕快照 2019-07-16 15.43.31.png

五、react-router-dom路由

屏幕快照 2019-07-16 16.55.03.png

将上面的初始项目运行起来后，我加入了路由写了一个简单的网页跳转demo。添加依赖：

$ npm install --save react-router-dom

• 在App.tsx中添加路由

import React from 'react'
import { Router } from 'react-router-dom'
import Routes from './routes'
import { createBrowserHistory } from 'history';

export const history = createBrowserHistory()

const App: React.FC = () => {
  return (
  <Router history={history}>
    <Routes/>
  </Router>
  );
}

export default App;

• 路由配置

  这个demo里面我添加了三个界面Home、DetailPage、User。路径从上到下匹配满足就会渲染对应界面。

import React from 'react'
import {Route, Switch} from 'react-router-dom'
import Home from '../pages/home';
import DetailPage from '../pages/detail';
import NoMatch from '../pages/404';
import User from '../pages/user';

export default () => {
    return (
    <Switch>
        <Route exact path="/detail" component={DetailPage}/>
        <Route exact path="/user/:name" component={User}/>
        <Route exact path="/" component={Home} />
        <Route component={NoMatch} />
    </Switch>
    )
}

• 路径传参、普通传参

  history.push({pathname: '打开的界面', state: {传递到下一个界面的值}})

// 普通传值 匹配路由/detail 
history.push({ pathname: '/detail', state: { number: 123 }})
          
// 路径传值     匹配路由/user/:name
history.push({pathname: '/user/joeal'})

• 获取参数

//普通传值 从location.state里面获取
let number = history.location.state.number

//从属性里面拿
let { match } = this.props
const name = match.params.name

六、demo链接

github链接

下载下来先安装依赖:

$yarn

没问题就可以运行了，开启服务器

$yarn start