Vite и React

Страница Electron — обычная веб-страница, поэтому её можно писать на React, Vue или другом фреймворке. Для этого нужен сборщик, который превратит компоненты в JavaScript для браузера. Electron Forge умеет создавать проект со сборщиком Vite: он собирает и страницу, и главный процесс, и preload.

Создание проекта

npm init electron-app@latest notes-react -- --template=vite
cd notes-react
npm start

Для TypeScript есть шаблон vite-typescript. После npm start Vite запускает сервер разработки, а Electron открывает окно, которое загружает страницу с этого сервера.

Структура

notes-react/
├── src/
│   ├── main.js        главный процесс
│   ├── preload.js     скрипт preload
│   ├── renderer.js    код страницы
│   └── index.css
├── index.html
├── forge.config.js
├── vite.main.config.mjs
├── vite.preload.config.mjs
└── vite.renderer.config.mjs

Для каждой части свой файл настроек Vite. В этом шаблоне главный процесс написан с import, а не require: Vite всё равно соберёт его в один файл CommonJS. Внутри одного проекта держитесь одного стиля.

Загрузка страницы

В src/main.js окно загружает страницу так:

// src/main.js
if (MAIN_WINDOW_VITE_DEV_SERVER_URL) {
  mainWindow.loadURL(MAIN_WINDOW_VITE_DEV_SERVER_URL);
} else {
  mainWindow.loadFile(path.join(__dirname, `../renderer/${MAIN_WINDOW_VITE_NAME}/index.html`));
}

Константы подставляет Forge. При разработке окно открывает адрес сервера Vite, поэтому изменения в компонентах видны сразу. В собранной программе загружается готовый файл.

Подключение React

npm install react react-dom
npm install --save-dev @vitejs/plugin-react

Добавьте плагин в настройки сборки страницы:

// vite.renderer.config.mjs
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
 
export default defineConfig({
  plugins: [react()],
});

Переименуйте src/renderer.js в src/renderer.jsx, исправьте путь к нему в теге script в index.html и добавьте в body элемент <div id="root"></div>.

Компонент

// src/renderer.jsx
import { createRoot } from 'react-dom/client';
import App from './App.jsx';
 
createRoot(document.getElementById('root')).render(<App />);

// src/App.jsx
import { useEffect, useState } from 'react';
 
export default function App() {
  const [notes, setNotes] = useState([]);
 
  useEffect(() => {
    window.notes.load().then(setNotes);
  }, []);
 
  return (
    <ul>
      {notes.map((note, i) => <li key={i}>{note}</li>)}
    </ul>
  );
}

Компонент получает заметки через тот же window.notes, что и раньше: обработчики IPC пишутся в src/main.js, мост — в src/preload.js. После npm start в окне появится список.

Vue и другие варианты

Для Vue установите vue и @vitejs/plugin-vue и подключите плагин vue() в том же файле. Есть и отдельный инструмент electron-vite с шаблонами для React, Vue и Svelte — он работает по той же схеме.

Частая ошибка

Импорт fs или path в компоненте React не даст доступа к файлам: код страницы собирается для браузера, и Vite либо выдаст ошибку, либо подставит пустую заглушку. React — это только процесс отрисовки. Всё, что требует Node.js, оставляйте в главном процессе и вызывайте через preload.