react【实用教程】 搭建开发环境（2024版）Vite+React （官方推荐）（含浏览器插件 react-developer-tools 和 Redux DevTools 的下载和安装）

于 2024-05-13 20:15:51 发布
阅读量230 收藏 4
点赞数 9
文章标签： react.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_60559048/article/details/138816468
版权

以项目名 reactDemo为例

1. 下载脚手架

在目标文件夹中打开命令行

npm create vite

2. 安装项目依赖

cd reactDemo
npm i

3. 启动项目

npm run dev

4. 预览项目

浏览器访问 http://localhost:5173/

 

 安装浏览器调试插件 react-developer-tools

下载插件

 安装浏览器调试插件 Redux DevTools

 

 

前端猫
关注
  • 9
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
来用Vite+React快速开发浏览器插件
小陈的博客
11-08 739
写到这里，我们也就顺利的实现了简化版Promise的封装，也实现其主要功能，虽然我们没有封装的Promise没有官方版那么强大，但是我们可以清晰的看到Promise的原理最近还整理一份JavaScript与ES的笔记，一共25个重要的知识点，对每个知识点都进行了讲解和分析。能帮你快速掌握JavaScript与ES的相关知识，提升工作效率。
react PC端项目构建TS，react@18.2.0+antd+vite+axios+redux+sass+ts
03-07
该架构已解决大部分坑，主要用于react@18.2.0PC端，在使用项目前请确保已安装node、yarn工具，node版本18+，此项目构建主要集成：axios、antd、sass、vite、sass、react V18，其中还会介绍到如何跨页面传递数据、国际化配置、rem适配、状态管理等功能 react：https://react.nodejs.cn/reference/react/hooks antd：https://ant-design.antgroup.com/components/pagination-cn/ axios：https://www.axios-http.cn/docs/api_intro vite：https://vitejs.cn/ redux：https://cn.redux.js.org/index.html redux-persist：https://github.com/rt2zz/redux-persist sass：https://blog.csdn.net/randy521520/article/details/131242242
react18【系列实用教程】搭建开发环境（2024版）Vite+React （官方推荐）（含@配置，react-developer-tools 和 Redux DevTools 下载安装）
最新发布
朝阳39的博客
05-07 444
以项目名reactDemo为例。
vite-plugin-react-jsx:一个Vite插件，增强了React的jsx转换
05-11
vite-plugin-react-jsx 这是的插件，与React一起使用时可增强jsx的转换。 在开发模式下，它将在开发模式下添加调试信息，以便React Devtools（和其他工具）可以显示元素来自的文件名和行号，这在调试时非常有用。 这确实意味着您除了使用vite的编译管道外还使用 ，这可能会使事情变慢（TODO：测量速度的差异。） 当然，可以随时删除它，而不会以任何方式破坏您的应用程序。 这个特定的转换非常简单，因此这里有机会将其实现为独立的东西，可能使用Go或Rust等其他语言（甚至说服esbuild在内部实现）。 （可选）（通过runtime: 'automatic' ），您可以启用； 这可能会受益于较小的包装束和即将进行的优化，但是也将在生产过程中使用。 （待办事项：测量可能会变慢多少。） 我正在考虑删除此选项，它可能会绊倒那些可能很少获得胜利的人。 ，可能
创建React+Vite+TypeScript+Electron项目
qq_57054925的博客
04-10 651
本文是使用vite搭建React+TypeScript的前端项目，使用Electron搭建运行在Windows上的桌面应用。
使用最新版vite搭一个react 18项目
abcd123596的博客
07-19 400
react搭建项目系列 -- 第一期
vite4加react18加ts-安装篇
u014708123的博客
12-27 459
vite4加react18加ts-安装篇；最近从vue3转型学习了，react相关技术架构，去有意识的去学习了相关东西，内容比较实用，没有引入太多原理和概念，就是最直接最实用的记录下来；
react移动端项目构建，react@18.2.0+react-vant+vite+axios+redux+sass
03-06
该架构已解决大部分坑，主要用于react@18.2.0移动端，在使用项目前请确保已安装node、yarn工具，node版本18+，此项目构建主要集成：axios、vant、sass、vite、sass、react V18，其中还会介绍到如何跨页面传递数据、...
react移动端项目构建TS，react@18.2.0+react-vant+vite+axios+redux+sass+ts
03-06
该架构已解决大部分坑，主要用于react@18.2.0移动端，在使用项目前请确保已安装node、yarn工具，node版本18+，此项目构建主要集成：axios、vant、sass、vite、sass、react，其中还会介绍到如何跨页面传递数据、国际...
react PC端项目构建，react@18.2.0+antd+vite+axios+redux+sass
03-07
该架构已解决大部分坑，主要用于react@18.2.0PC端，在使用项目前请确保已安装node、yarn工具，node版本18+，此项目构建主要集成：axios、antd、sass、vite、sass、react V18，其中还会介绍到如何跨页面传递数据、...
React 谷歌浏览器插件
07-22
React 谷歌浏览器插件
chrome-react插件-React Developer Tools
01-13
Chrome调试模式下，可视化的React DOM结构实时分析 React Developer Tools is a Chrome extension that allows you to inspect the React component hierarchy in the Chrome Developer Tools (formerly WebKit Web Inspector).
基于 react18 + vite + ts + redux + react-router 酒店订购平台国内的酒店订购系统
07-02
基于 react18 + vite + ts + redux + react-router 酒店订购平台国内的酒店订购系统.
React Developer Tools带你掌握9个React组件调试技巧，十分钟学会
03-03 2110
（它可能是一个其它组件）是否正常怎么办呢？的使用情况，以及如何定位某个组件在哪个文件被创建，某个组件又是在哪个文件被使用的习惯，了解到的情况是部分同学没使用。你可能会用到的所有场景以及技巧，我相信在掌握这些小技巧之后对于你未来的开发会有极大的帮助，而关于另一个工具。官方推出的开发者插件，可以毫不夸张的说，它在我们日常组件开发中，对于组件属性以及文件定位，中某个方法是在哪定义的，它可能是从隔了五六层的组件所传递，假设这个方法名像。有同学就说了，我怎么没这个图标按钮，其实只需要一个简单的配置就好了，大家复制。
使用React/Vue开发Chrome 插件
frontend_frank的博客
12-19 449
本文代码：https://github.com/nyqykk/hello-extensions-react阅读本文你将了解到Chrome 插件整体架构；如何开发一个 Chrome 插件（Popup 和 Devtools）；如何使用前端框架（React/Vue）进行开发；如何调试插件；如何使用 Puppeteer 对插件进行 E2E 测试（本地和 CI 环境）。整体架构介绍明确概念Chrome 插件...
如何安装React Developer Tools（超简单）
庸人方自扰，自在就好
07-12 1227
vue-devtools的安装有三种方法，第一种是通过谷歌应用商店进行安装，第二种是手动安装，第三种是直接下载使用网友分享出来的资源：打开谷歌的更多工具–扩展程序，打开左上角的“主菜单”，点击下面的“打开Chrome网上应用店”，这个应用商店是需要番强的，一般同学是打不开的！能打开的同学搜索React，把第一个扩展程序添加至Chrome即可。下载链接：https://download.csdn.net/download/weixin_43804496/86037025下载压缩包，然后解压，打开谷歌浏览器的扩
react开发插件-ES7 React/Redux/GraphQL/React-Native snippets
范德萨的博客
12-27 681
ES7 React/Redux/GraphQL/React-Native snippets插件快捷键的使用和效果
【React】从零搭建一个纯前端起始页浏览器插件（二）：搜索框关键词推荐（搜索建议）
Howie_Why的博客
06-02 760
本文主要和大家分享讲解了如何获取搜索建议，以及其中的一些关键性的问题
创建vite react项目
04-24
好的，可以按照以下步骤创建vite react项目： 1. 首先确保你已经安装了Node.js和npm。 2. 打开命令行工具，进入任意目录，输入以下命令来安装vite： ``` npm install -g vite ``` 3. 进入你想要创建项目的目录，输入以下命令来创建一个新的vite react项目： ``` vite create my-react-project --template react ``` 其中，my-react-project是你要创建的项目名称，也可以修改成其他名称。 4. 等待项目创建完成后，进入项目目录并启动项目： ``` cd my-react-project npm install npm run dev ``` 以上命令会启动开发服务器，你可以通过http://localhost:3000来访问你的react项目。 希望以上步骤能够帮助你创建vite react项目，如有其它问题或需要更具体的指导，请随时联系我。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值