React+TypeScript开发环境搭建

最新推荐文章于 2024-08-17 01:02:02 发布
最新推荐文章于 2024-08-17 01:02:02 发布
阅读量166 收藏
点赞数 1
文章标签： react.js typescript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/panghuangang/article/details/140936251
版权

https://cn.vitejs.dev/guide/

在这里插入图片描述

执行命令npm create vite@latest react-ts-pro -- --template react-ts:
在这里插入图片描述

切换到刚创建的项目目录下面，执行npm i安装包：
在这里插入图片描述

打开package.json文件，看可执行的命令：
在这里插入图片描述

执行npm run dev，运行后启动了本地server：
在这里插入图片描述

打开http://localhost:5173/
在这里插入图片描述

出现了上述界面，证明我们的项目已经跑起来了，环境就是React+TS的环境。

在这里插入图片描述

清理下暂时用不到的文件：
在这里插入图片描述

文件也清理下：
在这里插入图片描述

在这里插入图片描述

到浏览器中查看：
在这里插入图片描述

听海边涛声
关注
创建 TypeScript & React 项目
iamxuqianqian的博客
04-28 1072
项目需求 一个简单的员工管理系统，分为两部分功能：员工管理和系统设置。在员工管理部分，可以通过员工的姓名和部门进行查询员工的信息；在系统设置部分，进行简单的系统配置。 有两种初始化方案 我们可以通过两种方式创建项目：手动配置和使用脚手架；手动配置为了对项目的配置有一个基本了解，之后的开发还是基于脚手架开展。 手动配置 创建 基本的 ts 环境 安装 react 及其声明文件 npm i react react-dom npm i -D @types/react @types/react-dom .
「使用 webpack 5 从0到1搭建React + TypeScript 项目环境」1. React 与 TypeScript 集成
p1967914901的博客
12-22 1125
「使用 webpack 5 从0到1搭建React + TypeScript 项目环境」1. React 与 TypeScript 集成 本篇文章会带大家使用 webpack 5集成 React 与TypeScript，同时为了提高我们的代码质量，我们会在构建中添加类型检查和代码规范校验。 创建项目结构 首先我们新建一个项目，结构如下： 由于很多配置在生产环境和开发环境中存在不一致的情况，比如开发环境没有必要设置缓存，生产环境还需要设置公共路径等等。所以这里我们分开发环境和生产环境，让打包更灵活。 w
如何搭建TS的React项目
weixin_43867229的博客
04-19 394
10.运行验证： 现在你可以访问 http://localhost:3000/home 查看效果了。
最全的 ESLint 配置流程来了！
最新发布
m0_69239579的博客
08-17 761
ESLint 是什么？简单来说，它是一个可插拔的 JavaScript 代码检查工具。它能够帮助我们发现并修复 JavaScript 代码中的问题，包括潜在的错误、不规范的写法，甚至是不符合团队编码规范的代码。
react: typescript-webpack项目基本配置
weixin_34356138的博客
02-15 174
1、webpack.config.js basic const webpack = require('webpack'); const autoprefixer = require('autoprefixer'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { en...
React项目配置TypeScript环境
weixin_44223345的博客
10-29 543
情况1： 创建一个新项目 用Create React App 去创建一个typescript的项目 npx create-react-app my-app --template typescript # or yarn create react-app my-app --template typescript 注意⚠️：如果你通过npm install -g create-react-app 安装了create-react-app，建议你通过npm uninstall -g create-react-
如何在React项目中应用TypeScript?
rh1289583756的博客
09-28 497
如何在React项目中应用说说如何在反应项目中应用TypeScript?
Typescript编程——如何创建空的Typescript + React 项目
老程的技术笔记
12-29 1311
TypeScript是一种由微软开发的强类型的JavaScript超集，可以在编译时进行类型检查。它在JavaScript的基础上增加了类型系统，并且可以使用JavaScript的所有功能。TypeScript的目标是通过增加类型信息来提高代码的可读性和可维护性。它还支持面向对象编程的特性，如类和接口，以及静态类型检查。TypeScript可以在任何JavaScript框架或库中使用，也可以作为独立的编程语言使用。
Egg+React+TypeScript+AntMoble记账本项目
06-30
在本项目中，“Egg+React+...综上所述，"Egg+React+TypeScript+AntMoble记账本项目"是一个综合运用多种技术的实战项目，涵盖了前后端开发、数据库交互、用户体验设计等多个方面，对于提升开发者全栈能力有极大的帮助。
使用Vite创建React + TypeScript（pro和mobile，含完整的空项目结构资源可供下载）
12-27
在本文中，我们将深入探讨如何使用Vite搭建一个React + TypeScript项目，并且涵盖Pro和Mobile两种版本。Vite是由Vue.js作者尤雨溪开发的一款现代Web应用构建工具，它提供了快速的热重载、按需编译以及优化的开发体验...
React+Typescript+antd 搭建项目
m0_51300418的博客
04-29 688
React+Typescript+antd 搭建项目 初始化项目 开发环境: node: v14.15.0 yarn: 1.22.10 npx: 7.8.0 editor: visual studio code 使用cra进行项目初始化 npx create-react-app my-app --template typescript 如果已经使用cra创建过项目, 执行: npm install --save typescript @types/node @types/react @types/re
新建一个 React TypeScript 项目，并使用 Webpack 进行构建和打包
Chloeeeeeeee的博客
06-19 1044
用 create-react-app 新建一个 React TypeScript 项目，安装 Webpack 和相关插件，使用 Webpack 进行构建和打包。
React+Typescript项目构建
子枫
02-08 807
React手脚架构建+TypeScript
在React项目中使用TypeScript(持续更新)
weixin_41141849的博客
02-01 426
安装脚手架 npm install -g create-react-app 创建项目 create-react-app proName --typescript 小试牛刀 可以把ts的代码注释查看编译器报错提示 Class组件 src文件夹下创建pages/home/Home.tsx import React, { Component } from "react"; // 规定p...
创建React-typescript项目
m0_51105610的博客
12-20 277
1.创建项目 create-react-app myreact-ts --template typescript /* myreact-ts为项目名称 */ 2.过程中出现的问题 网络问题，继续输入第一条命令试试 3.启动项目 cd myreact-ts yarn start 4.效果图
React搭建项目
m0_67011584的博客
12-14 488
yarn create react-app my-app --template typescript 创建React-typescript脚手架。yarn create react-app my-app 创建React脚手架。postcss-px-to-viewport-8-plugin 页面vw适配。在根目录下创建craco.config.js文件，文件内容如下。首先在根目录下创建router.tsx文件，文件内容如下。在App.jsx文件,引入Outlet标签。react-router-dom 路由。
react项目中引入typescript
qq_36154659的博客
07-28 5662
新建项目使用typescript 如果你是要新建一个使用typescript的react项目，并且你用脚手架Create React App去创建，那没就非常的容易，你只需要在创建的时候将命令改为 npx create-react-app "你的项目的名称" --template typescript 已有项目引入typescript 如果你是要在已有的react项目引入typescript或者你想创建一个新的react项目但是不想使用Create React App，那么你必须手动的安装typescri
如何在react中配置typescript
qq_43599049的博客
03-30 662
Getting Started with c-create-react-app 可以直接通过c-create-react-app来自动集成。 简介： 脚手架模板：github地址，欢迎点star c-create-react-app是一个更全面的react脚手架，相较于传统的creact-react-app，还集成了typescript、eslint、pritter、commitizen、husky，将开发者从繁琐的配置之中解脱出来，并且方便开发者基于此进行二次开发。 安装： npm install c-c
react项目中使用typescript
qq_43742385的博客
07-06 439
react项目中使用typescriptreact项目中使用typescript安装`typescript``package.json`中`scripts`出现配置 TypeScript 编译器例如设置使用TS的文件目录以及TS的输出目录文件扩展名类型定义 react项目中使用typescript 安装typescript npm install --save-dev typescript package.json中scripts出现 { // ... "scripts": { "
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值