Electron 是一个流行的框架，它允许开发人员使用 HTML、CSS 和 JavaScript 等 Web 技术构建跨平台桌面应用程序。通过将 Electron 与用于构建用户界面的强大 JavaScript 库 React 相结合，我们可以创建功能丰富的桌面应用程序，这些应用程序的感觉和行为就像 Windows、macOS 和 Linux 上的本机应用程序一样。
在本教程中，我们将引导您完成使用 Electron 和 React 创建简单桌面应用程序的过程。我们将介绍如何设置开发环境、创建基本的 React 应用程序、将其与 Electron 集成以及为不同平台构建可分发包。
先决条件
在开始之前，请确保您的系统上安装了以下软件：
- Node.js 和 npm（Node 包管理器）：访问官方网站（https://nodejs.org/）并按照适合您操作系统的安装说明安装 Node.js 和 npm。
步骤 1：设置新的 React 应用程序
让我们首先使用 设置一个新的 React 应用程序create-react-app。
- 打开终端或命令提示符并运行以下命令来创建一个新的 React 应用程序：
npx create-react-app electron-react-app
2. 安装完成后，导航到新创建的项目目录：
cd electron-react-app
3. 要验证一切设置是否正确，请运行开发服务器：
npm 启动
现在，你应该可以看到 React 应用程序在你的浏览器中运行http://localhost:3000。
第 2 步：安装 Electron
接下来，我们将安装 Electron 并配置我们的 React 应用程序以使用它。
Ctrl+C通过按下终端来停止开发服务器。- 使用 npm安装 Electron 并
electron-builder作为开发依赖项：
npm install electron electron-is-dev electron-builder -D
该命令还安装了一个名为的有用 npm 包，electron-is-dev用于检查我们的 electron 应用程序是在开发中还是在生产中。您使用该-D标志在 dev 依赖项下安装 electron。
步骤3：配置Electron
现在，我们将配置 Electron 来运行我们的 React 应用程序。
- 在项目的根目录中，创建一个名为 的新文件
electron.js。该文件将作为我们的 Electron 应用程序的主要入口点。 - 在您喜欢的代码编辑器中打开
electron.js并添加以下代码：
// electron.js
const { app, BrowserWindow } = require（“electron”）；
const path = require（“path”）；
let mainWindow;
function createWindow（）{
mainWindow = new BrowserWindow（{
width：800，
height：600，
webPreferences：{
nodeIntegration：true，
}，
}）；
(async () => {
const isDev = (await import('electron-is-dev')).default;
const startURL = isDev
? 'http://localhost:3000'
: `file://${path.join(__dirname, '../build/index.html')}`;
mainWindow.loadURL(startURL);
})();
mainWindow.loadURL （startURL）；mainWindow.on
（“ closed”，（）=>（mainWindow = null））；}
app.on
（“ ready ”，createWindow）；
app. on ( 'window-all-closed' , () => {
if (process.platform ! == ' darwin' ) {
app.quit (); } }); app.on ( 'activate' , () => { if (mainWindow === null ) { createWindow (); } });
此代码设置了主 Electron 应用程序窗口，并在开发模式下从开发服务器加载 React 应用程序，或在生产模式下从构建目录加载 React 应用程序。
步骤 4：更新package.json
为了让 Electron 知道我们的主要入口文件和构建目录，我们需要修改该package.json文件。
- 打开
package.jsonJSON 对象并在其内添加以下行：
// package.json
{
// ...
"main" : "electron.js" ,
"build" : {
"appId" : "com.example.myapp" ,
"productName" : "我的 Electron 应用" ,
"directories" : {
"output" : "dist"
}
} ,
"scripts": {
// ...
"electron": "electron .",
"dist": "electron-builder"
},
// ...
}
字段"main"指定了 Electron 的入口点，"build"部分提供了的配置选项electron-builder，包括appId、productName和分发的输出目录。
步骤 5：运行 Electron
现在，让我们测试我们的 Electron 应用程序。
- 通过运行以下命令启动 React 应用程序的开发服务器：
npm start
2. 在单独的终端或命令提示符中，运行 Electron 应用程序：
npm run electron
现在您应该看到您的 React 应用程序在独立的 Electron 窗口中运行。
步骤 6：构建可分发包
要打包并分发你的 Electron 应用程序给用户，你需要创建特定于平台的可分发包。electron-builder使这个过程更容易。
- 在构建包之前，请停止正在运行的 Electron 应用程序和 React 开发服务器。
- 要为您当前的平台构建包，请运行以下命令：
npm run build
该命令将在dist目录中生成一个可分发的包。
要为多个平台构建包，可以使用以下命令：
npm run dist
上述命令将在dist目录中创建适用于 Windows、macOS 和 Linux 的包。
恭喜！您已成功使用 Electron 和 React 创建了桌面应用程序。现在您可以将应用程序分发给不同平台上的用户。
结论
Electron 和 React 为构建跨平台桌面应用程序提供了强大的组合。通过本教程，您已经学会了如何设置 React 应用程序、将其与 Electron 集成以及将其打包以供分发。
请记住，本教程仅涵盖基础知识，您可以使用 Electron 和 React 做更多事情来构建复杂的桌面应用程序。浏览 Electron 和 React 文档以发现更多高级功能和适合您项目的可能性。祝您编码愉快！
