搭建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 每一个包独立安装


待续。。。

相关文章
|
4月前
|
前端开发 JavaScript
React项目路由懒加载lazy、Suspense,使第一次打开项目页面变快
本文介绍了在React项目中实现路由懒加载的方法,使用React提供的`lazy`和`Suspense`来优化项目首次加载的速度。通过将路由组件改为懒加载的方式,可以显著减少初始包的大小,从而加快首次加载速度。文章还展示了如何使用`Suspense`组件包裹`Switch`来实现懒加载过程中的fallback效果,并提供了使用前后的加载时间对比,说明了懒加载对性能的提升作用。
302 2
React项目路由懒加载lazy、Suspense,使第一次打开项目页面变快
|
4月前
|
前端开发 JavaScript Java
SpringBoot项目部署打包好的React、Vue项目刷新报错404
本文讨论了在SpringBoot项目中部署React或Vue打包好的前端项目时,刷新页面导致404错误的问题,并提供了两种解决方案:一是在SpringBoot启动类中配置错误页面重定向到index.html,二是将前端路由改为hash模式以避免刷新问题。
358 1
|
5月前
|
前端开发
React使用useRef ts 报错
【8月更文挑战第17天】
90 4
|
2月前
|
前端开发 JavaScript
手敲Webpack 5:React + TypeScript项目脚手架搭建实践
手敲Webpack 5:React + TypeScript项目脚手架搭建实践
|
4月前
|
移动开发 前端开发
react项目配合diff实现文件对比差异功能
在React项目中,可以使用`diff`库实现文件内容对比差异功能。首先安装`diff`库,然后在组件中引入并使用`Diff.diffChars`或`Diff.diffLines`方法比较文本差异。通过循环遍历`diff`结果,可以生成不同样式的HTML元素来高亮显示文本差异。
178 1
react项目配合diff实现文件对比差异功能
|
4月前
|
前端开发 算法 JavaScript
React项目input输入框输入自动失去焦点
本文讨论了在React项目中如何处理input输入框自动失去焦点的问题,特别是在移动端开发中。文章提供了一个使用React Native的TouchableWithoutFeedback组件来监听点击事件,并在事件处理函数中通过调用Keyboard.dismiss()方法使输入框失去焦点的示例代码。这种方法可以确保在用户点击页面其他区域时,键盘能够收起,输入框失去焦点。
142 1
React项目input输入框输入自动失去焦点
|
4月前
|
JavaScript 前端开发 应用服务中间件
本地运行打包好的React、Vue项目
本文讨论了如何本地运行打包好的React和Vue项目,并解决了使用React-Router时Tomcat部署刷新页面导致404的问题,提出了将请求转回index.html的解决方案。
53 1
本地运行打包好的React、Vue项目
|
3月前
|
前端开发 JavaScript 应用服务中间件
linux安装nginx和前端部署vue项目(实际测试react项目也可以)
本文是一篇详细的教程,介绍了如何在Linux系统上安装和配置nginx,以及如何将打包好的前端项目(如Vue或React)上传和部署到服务器上,包括了常见的错误处理方法。
906 0
linux安装nginx和前端部署vue项目(实际测试react项目也可以)
|
4月前
|
资源调度 JavaScript 前端开发
使用vite+react+ts+Ant Design开发后台管理项目(二)
使用vite+react+ts+Ant Design开发后台管理项目(二)
|
5月前
|
JSON 前端开发 JavaScript
使用vite搭建一个React项目!真香!
【8月更文挑战第13天】使用vite搭建一个React项目!真香!
719 3
使用vite搭建一个React项目!真香!