React

如何使用 React 和 Electron Forge 创建 Electron 应用

为 Webpack 模板添加 React 支持，无需复杂的样板代码即可开始。

以下指南已在 React 18、Babel 7 和 Webpack 5 中进行了测试。

创建应用并设置 Webpack 配置

使用 Webpack 模板 创建应用。将以下包添加到您的 devDependencies 中，以便正确使用 JSX 和其他 React 功能

npm install --save-dev @babel/core @babel/preset-react babel-loader

使用 babel-loader 模块和 React 预设 设置 webpack.rules.js

webpack.rules.js

module.exports = [
  // ... existing loader config ...
  {
    test: /\.jsx?$/,
    use: {
      loader: 'babel-loader',
      options: {
        exclude: /node_modules/,
        presets: ['@babel/preset-react']
      }
    }
  }
  // ... existing loader config ...
];

添加 React 依赖项

将基本的 React 包添加到您的 dependencies 中

npm install --save react react-dom

集成 React 代码

您现在应该能够开始在 Electron 应用中编写和使用 React 组件了。以下是如何开始添加 React 代码的一个非常简单的示例

src/app.jsx

import * as React from 'react';
import { createRoot } from 'react-dom/client';

const root = createRoot(document.body);
root.render(<h2>Hello from React!</h2>);

src/renderer.js

// Add this to the end of the existing file
import './app.jsx';

有关 React 的更多信息，请参阅其 文档。