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

在 webpack.rules.js 中設定具有 React 預設值的 babel-loader 模組

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 的更多資訊，請參閱其文件。