react 项目 使用electron结合 案例

可以参考以下两个案例：

1. Electron Forge官方示例

Electron Forge提供了一个使用React和Electron结合开发的官方示例，可以从GitHub上进行下载和查看：https://github.com/electron-userland/electron-forge-example-react

2. 腾讯Web前端团队Demo

腾讯Web前端团队展示了一个使用React和Electron结合开发的Demo，名称为“WeFlow”，可以从GitHub上进行下载和查看：https://github.com/Tencent/WeFlow

相关问题

react中使用electron ipc模块

在React项目中使用Electron的`ipc`模块，可以通过`electron`模块的`remote`对象访问Electron的主进程。以下是示例代码：

在Electron的主进程中：

const { ipcMain, BrowserWindow } = require('electron');

let mainWindow;

function createWindow() {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  });

  mainWindow.loadFile('index.html');

  mainWindow.on('closed', () => {
    mainWindow = null;
  });
}

ipcMain.on('message-from-renderer', (event, arg) => {
  console.log(arg); // 输出来自渲染进程的消息

  event.reply('message-from-main', 'Hello from main process!'); // 发送回复消息到渲染进程
});

createWindow();

在React组件中：

import React, { useState, useEffect } from 'react';
import { ipcRenderer, remote } from 'electron';

function MyComponent() {
  const [message, setMessage] = useState('');

  useEffect(() => {
    ipcRenderer.on('message-from-main', (event, arg) => {
      setMessage(arg); // 接收来自主进程的消息
    });

    return () => {
      ipcRenderer.removeAllListeners('message-from-main'); // 移除事件监听器
    };
  }, []);

  const handleClick = () => {
    ipcRenderer.send('message-from-renderer', 'Hello from renderer process!'); // 发送消息到主进程
  };

  return (
    <div>
      <button onClick={handleClick}>发送消息到主进程</button>
      {message && <p>收到来自主进程的消息：{message}</p>}
    </div>
  );
}

在上面的代码中，我们在React组件中使用`ipcRenderer`对象发送消息到Electron的主进程，并接收来自主进程的回复消息。注意，要在React组件中使用Electron的`remote`模块，需要在开发环境中启动Electron。

react中使用electron ipc模块且不使用remote

在React项目中使用Electron的`ipc`模块，不一定需要使用`remote`模块。你可以在渲染进程中直接使用`ipcRenderer`模块，而在主进程中使用`ipcMain`模块。以下是示例代码：

在Electron的主进程中：

const { ipcMain, BrowserWindow } = require('electron');

let mainWindow;

function createWindow() {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  });

  mainWindow.loadFile('index.html');

  mainWindow.on('closed', () => {
    mainWindow = null;
  });
}

ipcMain.on('message-from-renderer', (event, arg) => {
  console.log(arg); // 输出来自渲染进程的消息

  event.reply('message-from-main', 'Hello from main process!'); // 发送回复消息到渲染进程
});

createWindow();

在React组件中：

import React, { useState, useEffect } from 'react';
import { ipcRenderer } from 'electron';

function MyComponent() {
  const [message, setMessage] = useState('');

  useEffect(() => {
    const handleMainResponse = (event, arg) => {
      setMessage(arg); // 接收来自主进程的消息
    };

    ipcRenderer.on('message-from-main', handleMainResponse);

    return () => {
      ipcRenderer.removeListener('message-from-main', handleMainResponse); // 移除事件监听器
    };
  }, []);

  const handleClick = () => {
    ipcRenderer.send('message-from-renderer', 'Hello from renderer process!'); // 发送消息到主进程
  };

  return (
    <div>
      <button onClick={handleClick}>发送消息到主进程</button>
      {message && <p>收到来自主进程的消息：{message}</p>}
    </div>
  );
}

注意，在使用`ipcMain`模块时，要在主进程中使用`webPreferences.nodeIntegration`选项来启用Node.js集成，以便在主进程中使用Node.js模块。而在渲染进程中，不需要使用`webPreferences.nodeIntegration`选项，因为默认情况下React项目已经启用了Node.js集成。