前端创建react-ts应用

Yuan_xii

已于 2022-05-17 21:11:33 修改

阅读量203

点赞数

分类专栏：前端文章标签： react.js 前端 javascript

于 2022-05-17 21:08:20 首次发布

本文链接：https://blog.csdn.net/Yuan_xii/article/details/124829748

版权

前端专栏收录该内容

1 篇文章 1 订阅

订阅专栏

本文档介绍了如何使用Yarn创建一个基于React的项目，选用TypeScript作为模板语言，然后启动项目。接着通过Yarn添加Ant Design库，进一步安装并配置了React Router v6作为路由管理系统。参考文档为React Router官方文档。

摘要由CSDN通过智能技术生成

# 使用node 16版本
yarn create react-app app2word --template typescript

yarn start

yarn add antd

# 安装react-router路由
npm install react-router-dom@6

在这里插入图片描述

参考文档：
react-router

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Yuan_xii

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

使用create-react-app创建ts项目

逆袭的菜鸟X

08-19

8625

1、项目安装运行 create-react-app 你的项目名 --typescript npm start 2、项目首页 import React from 'react'; import logo from './logo.svg'; import './App.css'; import Arrowlist from './home'; const App: React.FC = () => { return ( <div className="App">

React-Hooks 和 React-Redux

luoxiaonuan_hi的博客

09-09

1134

React-Hooks 的使用 React-redux 的使用

参与评论您还未登录，请先登录后发表或查看评论

React使用create-react-app创建react项目

HTML网页设计

08-21

1805

👏欢迎来到我的React系列文章🍭本系列文章从React入门开始，涵盖了React的一切基础，属于是从零开始的一个系列🍭文章会以图文结合-动图-代码实现-解释代码的形式带领大家走进React的世界。

【实战】十、用 react-query 获取数据，管理缓存（下） —— React17+React Hook+TS4 最佳实践，仿 Jira 企业级项目（二十二）

程序边界

08-14

3465

状态提升、组合组件。

React-Native项目工程搭建

mapbar_front的博客

01-16

1737

任何一个项目的搭建，都是考验一个程序员的技术功底，而 React-Native 也不例外。同时，搭建一个 React-Native 的项目工程，其实要比普通的 Web 项目更难一些，因为 React-Native 是一个新的体系，基本它的底层机制和 H5 完全不同，无论是本地存储，还是运行环境，都需要我们熟悉它。

react+react-beautiful-dnd实例代办事项

weixin_64925940的博客

06-10

1124

react实例代办事项，react-beautiful-dnd实现拖拽效果，CSS框架bulma使用，Context应用

【实战】十、用 react-query 获取数据，管理缓存（上） —— React17+React Hook+TS4 最佳实践，仿 Jira 企业级项目（二十一）

程序边界

08-11

3799

接下来去掉之前组合组件的使用，在对应位置直接使用组件并调用。具体配置、操作和内容会有差异，“坑”也会有所不同。查看页面效果，查询功能正常，报错信息展示正常。部分引用笔记还在草稿阶段，敬请期待。参数管理项目模态框状态，在。是一个类型谓词，用来帮助。在之前安装另一个版本的。编译器收窄变量的类型。再次查看页面，功能正常！刷完副本，返回主分支。

React 路由react-router-dom详解

m0_64875238的博客

04-08

9234

React 路由react-router-dom详解(路由嵌套+路由传参+路由权限+路由优化按需导入+404页面)

react-router-dom使用指南

qq_41120857的博客

11-15

277

前端开源库-react-scripts-ts

08-30

"前端开源库-react-scripts-ts" 是一个专门为创建React应用程序而设计的开源工具，它整合了typescript的支持，使得在开发过程中可以享受到类型安全的好处。React是一个由Facebook开发并维护的JavaScript库，专门用于...

react-redux-ts：React样板

02-06

**React-Redux-TS：React...总的来说，"react-redux-ts"是一个集成React、Redux、TypeScript、Redux-Saga、Ducks模式以及Storybook的开发样板，旨在简化和加速开发过程，提供一个强大且类型安全的前端应用基础架构。

react-typescript-mobx-state-tree-mobx-react-lite-boilerplate:Boilerplate是创建React应用程序的理想选择

05-17

带React，TypeScript，MST（mobx-state-...从零开始创建React应用程序的理想选择。包含示例并模拟API的使用。包含 3.5 16.8 16.8 3.14 1.4 4.35 3.7 设置 npm install cd src npm start 执照麻省理工学院

react-ts-utils

02-22

"react-ts-utils" 是一个基于 TypeScript 的 React 开发工具库，专为提升 React 应用程序的开发...通过深入理解和熟练运用这些工具，开发者可以更好地驾驭 React 和 TypeScript 的结合，创建出健壮且高效的前端应用。

React-ts-material-dashboard-template:具有Material UI的React-Typescript的模板

04-19

React-ts-material-dashboard-template 是一个基于React、Typescript和Material UI框架构建的模板项目，用于快速开发功能丰富的管理面板或仪表盘应用。这个模板为开发者提供了一个起点，让他们能够利用现代前端技术...

基于主从Reactor模型实现高并发服务器

m0_65558082的博客

09-21

935

高并发服务器

react父子组件数据传递及相关操作

weixin_44248903的博客

09-24

169

react父子组件数据传递及相关操作

React 启动时webpack版本冲突报错

最新发布

haoranyyy的博客

09-24

255

找到全局webpack的安装路径并cmd。删除全局webpack。

【React】原理

小秀的博客

09-23

516

笔记来源：小满zs。

vite react ts 自适应 pc

09-12

Vite是一个现代化的前端构建工具，它以模块化的开发方式和闪电般的启动速度受到开发者的青睐。Vite提供了原生的ESM支持，可以实现快速的热更新，并且支持多种前端框架，包括React。当你想使用Vite来开发React应用，并且希望应用能够自适应PC（个人电脑）屏幕时，通常需要结合React和TypeScript来实现。这里提供一些基本步骤和要点： 1. **创建项目**：首先，你需要使用Vite的CLI工具创建一个新的React项目，并指定TypeScript作为开发语言。可以使用如下命令： ```bash npm create vite@latest my-react-app --template react-ts ``` 然后进入项目目录： ```bash cd my-react-app ``` 2. **安装依赖**：项目创建完毕后，安装所有必要的依赖项： ```bash npm install ``` 3. **编写React组件**：使用React的JSX语法和TypeScript来编写组件。为了使应用自适应PC屏幕，你需要在CSS中使用媒体查询（Media Queries）来定义不同屏幕尺寸下的样式规则。 4. **样式处理**：可以使用CSS预处理器如Sass或者Less来编写更加复杂的样式，并且利用其提供的功能来组织样式。确保在样式文件中加入媒体查询，以便根据不同的屏幕宽度应用不同的样式。 5. **测试和调试**：使用Vite内置的热更新功能和浏览器开发者工具来测试应用在不同屏幕尺寸下的表现。确保在各种屏幕尺寸下布局都能够自适应，内容显示正常。 6. **构建应用**：开发完成后，使用Vite提供的构建命令来打包你的应用： ```bash npm run build ``` Vite会将你的应用构建为生产环境下的静态资源。