搭建react项目 搭建ts react项目 使用vite搭建react项目

简介: 搭建react项目 搭建ts react项目 使用vite搭建react项目

创建react 项目


注意: 网上有一些生成react 的方法,但是也有一些是过时的。


使用官方脚手架creact-react-app


全局安装 creact-react-app 这个脚手架


这个脚手架和 vue 的 vue-cli是一样的,都可以全局安装,命令: npm install -g creact-react-app , 安装好了后,直接使用 create-react-app <项目名> 就可以创建一个react 项目了


直接使用npx


npx create-react-app <项目名>, 注意,npx 不是拼写错误,是 npm 在 5.2版本之后,推出了一个执行指定代码的一个指令,


20210121105018497.png


这种方式创建,感觉比较慢,想要快的同学可以使用vite, 接下来的文章中会有相关的描述.


使用vite 进行搭建


vite 到现在应该都不陌生,是一个比较新的构建工具。在开发速度的热加载中是快的惊人。


语法: npm init @vitejs/app my-react-app --template react 更多指令,查看官方文档,可以把react 替换成 vue vue-ts 或者是下面图片中的任何一个


20210121105736674.png


搭建react + ts 的项目


方式一: 使用官方的脚手架


注意: npx create-react-app <项目名> --scripts-version=react-scripts-ts 网上大部分的这种方法已经过时


20210121110055310.png


npx create-react-app <项目名> -- typescript: 这个方法也没有了,只能创建js 的react

正确的做法:

npx create-react-app <项目名> --template typescript 跟多的react 结合 查看文档


20210121110317530.png


ps: 安装的时间比较久,想要快速,使用 vite


效果: 这个是本人删除了原来的一点内容,准备拿来练手,然后觉得写篇文章,给自己的学习留下点足迹。


20210121110513600.png


方式二: 使用vite


语法: npm init @vitejs/app <项目名称>--template react-ts


20210121110628160.png


效果:


2021012111073519.png


方式三: 使用webpack 每一个包独立安装


待续。。。

相关文章
|
资源调度 JavaScript 前端开发
使用vite+react+ts+Ant Design开发后台管理项目(二)
使用vite+react+ts+Ant Design开发后台管理项目(二)
|
JSON 前端开发 JavaScript
使用vite搭建一个React项目!真香!
【8月更文挑战第13天】使用vite搭建一个React项目!真香!
2691 3
使用vite搭建一个React项目!真香!
|
前端开发
React使用useRef ts 报错
【8月更文挑战第17天】
382 4
|
前端开发 C++
使用 Vite 创建 React+TS+SW 项目并整合 AntDesign 、Scss 等组件或插件
本文记录了如何使用Vite创建一个React+TypeScript+Service Workers(SW)项目,并整合AntDesign组件库和Scss等插件,包括项目的创建、配置问题解决、AntDesign和Scss的整合方法。
1347 1
|
Web App开发 JavaScript 前端开发
react18【系列实用教程】搭建开发环境(2024版)Vite+React (官方推荐)(含@配置,react-developer-tools 和 Redux DevTools 下载安装)
react18【系列实用教程】搭建开发环境(2024版)Vite+React (官方推荐)(含@配置,react-developer-tools 和 Redux DevTools 下载安装)
1718 1
|
运维 JavaScript 前端开发
发现了一款宝藏学习项目,包含了Web全栈的知识体系,JS、Vue、React知识就靠它了!
发现了一款宝藏学习项目,包含了Web全栈的知识体系,JS、Vue、React知识就靠它了!
455 2
|
存储 JSON 前端开发
react保姆级搭建新项目
此文主要以ts+vite+router6+antd 快速搭建一个react项目,适用于初学者,用于学习交流
703 2
|
移动开发 JavaScript 前端开发
vue/react项目刷新页面出现404的原因以及解决办法
vue/react项目刷新页面出现404的原因以及解决办法
1638 0
|
前端开发 JavaScript 容器
前端vw自适应解决方案,适用pc端以及移动端,适用webpack以及vite,适用vue以及react
前端vw自适应解决方案,适用pc端以及移动端,适用webpack以及vite,适用vue以及react
1254 0
|
前端开发 JavaScript 测试技术
从零开始搭建react+typescript+antd+redux+less+vw自适应项目
从零开始搭建react+typescript+antd+redux+less+vw自适应项目
638 0