创建Electron React项目

原创 已于 2025-04-14 10:34:44 修改 · 149 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#electron #react.js #前端

于 2025-04-14 10:21:33 首次发布
atec2000
关注
electron vite react 创建一个项目
读心悦
07-01 478
你可以使用 Vite 的开发服务器来启动你的 React 应用，并在 Electron 中加载它。但是，请注意，由于 Electron 使用了 Node.js 的环境，你可能需要一些额外的步骤来确保 Vite 的开发服务器和 Electron 可以正常工作。当你的应用开发完成后，你可以使用 Vite 构建生产版本，并使用 Electron 打包工具（如 electron-builder 或 electron-packager）来打包你的应用。这些组件将构成你的 Electron 应用的用户界面。
React+Electron搭建桌面应用方法和步骤
刻痕
06-13 4975
React+Electron搭建桌面应用方法和步骤 步骤： 【一： 创建、运行】 1. 创建react 项目应用 2. react 项目内安装 Electron 依赖项 3. 修改 package.json 文件 4. 新建主线程文件 main.js 主线程文件 5. 添加 定义执行命令 【二： 打包】 . 【1.1】创建react 项目应用 详见我另一个博客： react+js或react+ts(tsx)使用creat-react-app、yarn搭建步骤 创建 react 应用： /
如何利用react框架快速创建一个electron项目
weixin_43354152的博客
06-30 999
如何利用create-react-app工具快速搭建一个react框架下的electron项目。
electron 结合 react(cra创建的) 创建桌面应用和打包桌面应用
最新发布
lotpyve的博客
05-09 1320
我们开两个终端一个先执行 npm run start ，注意，这里需要等项目启动之后，再在另外一个终端中执行 npm run dev:ele。我们可以把刚刚的项目关闭后，直接在一个终端中输入 npm run dev 试试，就会发现，目前项目只会自己打开电脑桌面端了。wait-on 用于配合 concurrently ，在一个终端中，等上一个命令执行成功之后，在执行下一个命令。1，我们需要打开两个终端，一个执行完成之后我们在执行另外一个，可不可以直接在一个终端中进行操作；
Electron+React 搭建桌面应用
hxy199421的博客
04-10 2464
当用户点击一个按钮或者菜单项来执行这些操作时，渲染进程会向主进程发送一个消息，请求执行相应的操作。主进程接到消息后，调用系统API来完成文件操作，并将操作结果发送回渲染进程，渲染进程根据主进程的响应更新界面状态等。当用户在界面上点击最小化或者最大化，或者更改某些全局设置（如语言偏好、主题等）时，这些更改通常由渲染进程触发，但实际执行由主进程负责。在这种情况下，渲染进程调用主进程的方法以应用这些更改，但不需要等待主进程的回包，因为用户界面的响应可以立即更新，而不必等待设置保存的确认。
【前端框架篇】搭建一个 vite+react+electron 的项目实践
章魚尐芄子的博客
10-18 1510
使用 vite+react 自行设计开发一个 electron 的桌面应用（纯前端），本篇文章将介绍如何搭建一个 electron 的开发环境，便于后期应用的进一步开发与优化。
Electron结合React使用
问白的博客
03-26 1万+
React Electron 创建 react 工程 使用 create-react-app脚手架创建 react 工程 npx create-react-app my-app 安装 electron 本地项目安装electron 依赖 npm i electron --save 修改工程 修改package.json文件 在package.json 中添加 homepage和main字段...
react-electron:使用React创建Electron桌面应用程序的样板
05-06
易于理解和使用的样板代码，只需使用Reactjs即可创建Electron桌面应用程序。 包括React Router。 该项目由 ， 和引导。 使用React构建Electron App-视频教程 用法 克隆此存储库。 git clone ...
前端基于react、Electron构建桌面应用程序教程，教程送上
爱生活爱学习。
05-06 608
然后，你可以使用npm安装create-react-app工具，它可以帮助你快速搭建React应用程序的基础结构。你会看到一个Electron窗口打开，并加载你的React应用。现在，你可以开始开发你的React应用，并将其打包成一个完整的Electron桌面应用程序。使用create-react-app工具创建一个新的React应用。在React应用的根目录下，安装Electron作为开发依赖。现在，你可以启动React应用并在Electron中运行它。的新目录，并在其中初始化React应用程序。
electron-react-antd-antv-cli的sqlite3数据库集成版本.zip
01-04
标题 "electron-react-antd-antv-cli的sqlite3数据库集成版本.zip" 提示我们这是一个包含集成SQLite3数据库的Electron应用开发项目。Electron是一个开源框架，它允许开发者使用JavaScript、HTML和CSS来构建跨平台的...
手动创建Electron+React项目框架（建议直接看最后）
魏大大
03-24 599
话说，Electron的包是真的难安装，我经常失败，必要情况下需要使用梯子，同时配置代理端口。安装完Electron之后，在项目根目录下创建一个文件夹，用于存放Electron代码。快速创建了，如果你想使用其他的工具创建React项目也是没有问题的。在代码测试阶段，我们使用Electron加载URL。等到React启动完成后，再启动Electron。首先需要创建一个React项项目，这里就是用。，名字有点LOW，你可以自定义~~，但是打包之后的正式环境，需要加载。等待项目创建完成后，可以使用命令。
构建跨平台桌面应用：基于 Electron 与 React 的实战指南
一名热衷于技术的全栈开发者，专注于前端与后端的全面技术探索。在这里，我将分享我在技术领域的学习与成长，助力更多开发者的进步。
03-10 2207
本文从环境搭建、项目初始化、核心代码编写到构建与部署，全面介绍了如何基于 Electron 与 React 构建一个高性能跨平台桌面应用。通过大量代码示例和详细解析，你不仅掌握了 Electron 的基本概念和生命周期管理，还学会了如何利用 React 构建现代化 UI，以及如何利用 Webpack 与 Babel 实现高效打包和热更新。希望这篇实战指南能为你提供全新的视角和宝贵经验，助你在跨平台桌面应用开发中不断突破，打造出既美观又高效的现代化应用。
Electron: 拼接运行指令：启动React项目和electron项目
weixin_50236973的博客
11-18 446
Electron: 拼接运行指令：启动React项目和electron项目
Electron React Antd Antv CLI 项目教程
gitblog_00955的博客
09-14 725
Electron React Antd Antv CLI 项目教程 项目介绍 Electron React Antd Antv CLI 是一个基于 Electron、React、Ant Design 和 AntV 的开源项目脚手架。它旨在帮助开发者快速搭建一个现代化的桌面应用程序，结合了 Electron 的跨平台能力、React 的组件化开发模式、Ant Design 的 UI 组件库以及 An...
Electron打包React生成桌面应用方法
我是星星的博客
12-25 346
Electron是一个能让你使用JavaScript,HTML和CSS来创建桌面应用程序的框架。这些应用程序可以打包后在 macOS、Windows 和 Linux 上直接运行。在目前浏览器和移动端盛行的互联网环境下，跨平台的桌面应用开发，也为前端提供了一个新分支方向。
使用React和Electron进行环境设置和项目整合
2301_79326616的博客
10-05 197
在React应用的根目录中，创建一个新的文件夹"public/electron"，然后在该文件夹中创建一个名为"main.js"的文件。在React应用的根目录中，创建一个名为"public/electron"的文件夹，并在其中创建一个名为"main.js"的文件。这段代码是Electron的主进程代码，它创建了一个Electron窗口，并加载React应用的URL。这是Electron主进程的基本代码，它创建了一个Electron窗口，并加载React应用的URL。否则，请按照官方文档的指导安装它们。
React + Electron封装并打包成桌面应用
热门推荐
钟离龙的博客
08-10 2万+
Electron是什么 ​Electron 是一个由 GitHub 开发的开源库，通过将 Chromium) 和Node.js 组合并使用 HTML，CSS 和 JavaScript 进行构建 Mac，Windows，和 Linux 跨平台桌面应用程序。 原理： 上面已将说了，Electron 通过将 Chromium 和 Node.js 组合到单个 runtime 中来实现的. node...
用 electron-forge 搭建 React + Ts 的项目
深坑妙脆角的博客
01-19 1049
如果你有桌面应用开发的需求，且比较熟悉Web相关的技术，那么Electron会是一个非常不错的选择，本文将介绍如何用其构建一个应用Demo项目
创建 electron+react
12-29
### 创建一个使用 Electron 和 React 的项目 为了创建一个结合了 Electron 和 React 技术栈的应用程序，可以遵循如下方法： #### 准备工作环境 确保已经安装 Node.js 及 npm 或 yarn。这一步骤对于后续依赖项的安装至关重要。 #### 初始化新项目并配置基础结构 通过命令行工具执行以下操作来初始化一个新的Node.js应用程序，并设置必要的文件夹结构： ```bash mkdir my-electron-react-app && cd $_ npx create-react-app . ``` 此命令会利用 `create-react-app` 工具搭建起React应用的基础框架[^2]。 #### 安装 Electron 作为开发依赖 继续在同一目录下运行下面这条指令以引入Electron库： ```bash npm install --save-dev electron@latest ``` #### 修改 package.json 文件中的脚本部分 为了让 npm 能够编译和提供服务给这个混合型项目，在项目的根路径下的 `package.json` 中添加或修改 `"scripts"` 部分的内容以便支持多平台打包以及启动应用的功能。例如： ```json { "name": "my-electron-react-app", ... "main": "public/main.js", // 主进程入口文件位置 "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "electron:start": "electron ." }, ... } ``` 上述 JSON 片段展示了如何定义用于启动和发展阶段的不同NPM脚本命令。 #### 编写主进程代码(main.js) 在公共资源(public)文件夹内新建名为 main.js 的JavaScript源码文件，它将是整个桌面版前端的核心逻辑所在之处。这里是一个简单的模板供参考： ```javascript const { app, BrowserWindow } = require('electron') require('@electron/remote/main').initialize() function createWindow () { const win = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true, enableRemoteModule: true } }) win.loadURL(process.env.PUBLIC_URL || 'http://localhost:3000/') } app.whenReady().then(createWindow) app.on('window-all-closed', () => { if (process.platform !== 'darwin') { app.quit() } }) app.on('activate', () => { if (BrowserWindow.getAllWindows().length === 0) { createWindow() } }) ``` 这段 JavaScript 实现了一个基本窗口实例化过程，其中包含了加载本地服务器地址或是生产环境下静态页面链接的能力[^1]。 #### 启动应用程序 完成以上步骤之后就可以尝试启动刚刚建立好的跨平台GUI客户端啦！只需回到终端输入下列任一命令即可实现目标： ```bash # 开发模式下同时开启React Dev Server与Electron Main Process npm run start & npm run electron:start ``` 这样就成功集成了两个强大的开源框架——Electron 和 Create React App ——从而允许开发者专注于构建功能丰富的用户体验而无需担心底层细节处理问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值