前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >React+TypeScript开发--环境搭建

React+TypeScript开发--环境搭建

作者头像
用户6094182
发布2019-08-23 17:41:58
2.5K1
发布2019-08-23 17:41:58
举报
文章被收录于专栏:joealzhou

React+TypeScript开发--环境搭建

学习文档

React

TypeScript

一、node环境安装

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

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

二、初始化项目

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

代码语言:javascript
复制
$ 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 项目:

代码语言:javascript
复制
$ npx create-react-app my-app --typescript

//或者

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

接下来,将任何文件重命名为 TypeScript 文件(例如 src/index.js 重命名为 src/index.tsx )

三、开发工具

VSCode

四、运行项目

在vscode中打开项目后,开启本地服务器:

代码语言:javascript
复制
$ yarn start

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

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

五、react-router-dom路由

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

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

代码语言:javascript
复制
$ npm install --save react-router-dom
  • 在App.tsx中添加路由
代码语言:javascript
复制
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。路径从上到下匹配满足就会渲染对应界面。
代码语言:javascript
复制
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: {传递到下一个界面的值}})
代码语言:javascript
复制
// 普通传值 匹配路由/detail 
history.push({ pathname: '/detail', state: { number: 123 }})
          
// 路径传值     匹配路由/user/:name
history.push({pathname: '/user/joeal'})
  • 获取参数
代码语言:javascript
复制
//普通传值 从location.state里面获取
let number = history.location.state.number

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

六、demo链接

github链接

下载下来先安装依赖:

代码语言:javascript
复制
$yarn

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

代码语言:javascript
复制
$yarn start
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019.07.16 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • React+TypeScript开发--环境搭建
    • 学习文档
      • 一、node环境安装
        • 二、初始化项目
          • 三、开发工具
            • 四、运行项目
              • 五、react-router-dom路由
                • 六、demo链接
                领券
                问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档