原文链接 Create a Desktop React App in Under 5 Minutes with Electron - 作者 Mendoza
当我们使用 React 来构建应用的时候,有时创建一个在桌面被使用的界面更加有意义,特别是它不需要连接到网络上时。我遇到过着这种场景 - 当我想创建一个应用来管理本地文件的时候。我使用 Python 中的 Tkinter,但是,我觉得我可以通过 React 来构建运行更加快速,更加好看的与界面。这也是我开始学习 Electron 的契机。
Electron 是 GitHub 创造出来的,为了构建它们自己的 Atom 文本编辑器,而现在,已经在流行的软件,比如 VSCode 和 Discord 中使用。通过将 React 和 Electron 整合使用,就能够快速地开发跨平台的桌面应用。Electron 提供了特定于桌面的额外功能,比如系统级别的应用通知和托盘图标,但是,在本教程中,我将会介绍如何运行 React 的 Electron 应用的基础知识。
首先,我们需要创建一个新的 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 中查看。
感谢阅读!