使用 Electron 在 5 分钟内创建一个桌面的 React 应用

原文链接 Create a Desktop React App in Under 5 Minutes with Electron - 作者 Mendoza

当我们使用 React 来构建应用的时候,有时创建一个在桌面被使用的界面更加有意义,特别是它不需要连接到网络上时。我遇到过着这种场景 - 当我想创建一个应用来管理本地文件的时候。我使用 Python 中的 Tkinter,但是,我觉得我可以通过 React 来构建运行更加快速,更加好看的与界面。这也是我开始学习 Electron 的契机。

ElectronGitHub 创造出来的,为了构建它们自己的 Atom 文本编辑器,而现在,已经在流行的软件,比如 VSCodeDiscord 中使用。通过将 ReactElectron 整合使用,就能够快速地开发跨平台的桌面应用。Electron 提供了特定于桌面的额外功能,比如系统级别的应用通知和托盘图标,但是,在本教程中,我将会介绍如何运行 ReactElectron 应用的基础知识。

首先,我们需要创建一个新的 React 应用。我个人喜欢使用 Vite 来创建,这也是我本教程中使用到的脚手架工具,但是,我们使用 create-react-app 异曲同工。我也将使用 Typescript 来配置我的 Vite 应用。

bash 复制代码
npm create vite@latest <electron-app-name>

然后,进入新创建的应用所在的目录,然后安装 Electron 依赖。

bash 复制代码
npm install electron --save-dev

接着,我们可以在项目的根目录下创建一个名为 electron.ts 的文件,然后在文件中添加下面的代码:

typescript 复制代码
const { app, BrowserWindow } = require("electron");

function createWindow() {
  // 创建浏览器窗口
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      enableRemoteModule: true
    }
  });
  
  // 加载 React 应用程序
  win.loadURL("http://localhost:5173");
  
  // 打开调试面板
  win.webContents.openDevTools();
}

// 当应用已经准备好了,创建窗口
app.whenReady().then(createWindow);

// 当所有的窗口到被关闭了,退出 Electron 应用
app.on("window-all-closed", () => {
  if (process.platform !== "darwin") {
    app.quit();
  }
});

app.on("activate", () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow()
  }
});

现在,我们需要更新根目录下的 package.json 文件。我们添加的内容到 script 脚本对象中:

json 复制代码
"start": "react-scripts start",
"electron": "electron ."

然后,我们需要给 Electron 应用一个入口,所以,我们添加一个 main 属性到文件中,值为 electron.ts文件,表明是它就是入口点:

json 复制代码
"main": "electron.ts",

最后的 package.json 文件如下所示:

json 复制代码
{
  "name": "electron-app",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "main": "electron.ts",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview",
    "start": "react-scripts start",
    "electron": "electron ."
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@type/node": "^18.15.11",
    "@type/react": "^18.0.28",
    "@type/react-dom": "^18.0.11",
    "@vitejs/plugin-react": "^3.1.0",
    "electron": "^23.2.1",
    "typescript": "^4.9.3",
    "vite": "^4.2.0"
  }
}

现在,通过运行下面的命令行来开启我们的 React 应用。npm run dev 将会开启 React 前端界面,然后 npm run electron 将会开启 Electron 应用并打开在 electron.ts 文件中预设的地址 http://localhost:5173

bash 复制代码
npm run dev
npm run electron

Electron app running on desktop

现在,我们可以用 React 开发我们自己的跨平台桌面应用程序。你可以通过 here 来获取本教程的源代码。我最近专注于使用 React 构建更好的用户界面,你可以到我的 GitHub 中查看。

感谢阅读!

相关推荐
DokiDoki之父5 分钟前
前端速通—Vue_简介 & 第一个Vue程序 & el:挂载点 & data:数据对象 & Vue指令
javascript·vue.js·ecmascript
RickyWasYoung1 小时前
【matlab】字符串数组 转 double
android·java·javascript
csj501 小时前
前端基础之《React(4)—webpack简介-编译打包优化》
前端·react
万少1 小时前
Trae AI 编辑器6大使用规则
前端·javascript·人工智能
好玩的Matlab(NCEPU)2 小时前
如何编写 Chrome 插件(Chrome Extension)
前端·chrome
Yan-英杰2 小时前
Deepseek大模型结合Chrome搜索爬取2025AI投资趋势数据
前端·chrome
Crystal3282 小时前
app里video层级最高导致全屏视频上的操作的东西显示不出来的问题
前端·vue.js
weixin_445476682 小时前
Vue+redis全局添加水印解决方案
前端·vue.js·redis
lecepin2 小时前
AI Coding 资讯 2025-10-29
前端·后端·面试
余道各努力,千里自同风2 小时前
小程序中获取元素节点
前端·小程序