创建一个 React+Typescript 项目

接下来 我们来一起探索一下用TypeScript 来编写react

这也是一个非常好的趋势,目前也非常多人使用

那么 我们就先从创建项目开始

首先 我们先找一个 或者 之前创建一个目录 用来放我们的项目

然后 在这个目录下直接输入

例如 这里 我想创建一个叫 tsReApp 的项目就可以输入

javascript 复制代码
npx create-react-app tsreapp --template typescript

这个没办法 这个命令是不支持大写的 所以 名字就只好将大写部分换成小写了

然后 我们查看目录 发现项目就已经创建好了

这里 大家一定要搞清楚 npx的概念

他的意思是 如果你的项目中有执行这个命令需要的依赖 他就用依赖 如果没有 他就自己先将依赖装好 再创建

然后 我们聊个题外话

官方推荐我们使用 VSCode 一般前端电脑里应该都有 这个工具还是非常好用的

然后 我们用VSCode打开刚刚创建的项目

在 package.json 中 我们可以看到 启动命令是start

我们直接终端执行

javascript 复制代码
npm run start

然后 浏览器端 也正常起来了

但这个不得不承认 Ts项目的编译速度 会比ES项目会稍微慢一些

相关推荐
2501_9219308317 分钟前
基础入门 React Native 鸿蒙跨平台开发:react-native-button三方库适配
react native·react.js·harmonyos
学嵌入式的小杨同学7 小时前
从零打造 Linux 终端 MP3 播放器!用 C 语言实现音乐自由
linux·c语言·开发语言·前端·vscode·ci/cd·vim
weixin_425543737 小时前
TRAE CN3.3.25 构建的Electron简易DEMO应用
前端·typescript·electron·vite·nestjs
Mr Xu_8 小时前
【Vue3 + ECharts 实战】正确使用 showLoading、resize 与 dispose 避免内存泄漏
前端·信息可视化·vue·echarts
0思必得08 小时前
[Web自动化] Selenium设置相关执行文件路径
前端·爬虫·python·selenium·自动化
雯0609~8 小时前
hiprint:实现项目部署与打印1-官网提供普通html版本
前端·html
不绝1919 小时前
UGUI——进阶篇
前端
Exquisite.9 小时前
企业高性能web服务器(4)
运维·服务器·前端·网络·mysql
2501_9445255410 小时前
Flutter for OpenHarmony 个人理财管理App实战 - 账户详情页面
android·java·开发语言·前端·javascript·flutter
2601_9498574310 小时前
Flutter for OpenHarmony Web开发助手App实战:快捷键参考
前端·flutter