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链接
下载下来先安装依赖:
$yarn没问题就可以运行了，开启服务器
$yarn start本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2019.07.16 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
