Electron — это популярная платформа, которая позволяет разработчикам создавать кроссплатформенные настольные приложения с использованием таких веб-технологий, как HTML, CSS и JavaScript. Объединив Electron с React, мощной библиотекой JavaScript для создания пользовательских интерфейсов, мы можем создавать многофункциональные настольные приложения, которые выглядят и ведут себя как нативные приложения в Windows, macOS и Linux.

В этом руководстве мы познакомим вас с процессом создания простого настольного приложения с использованием Electron и React. Мы рассмотрим настройку среды разработки, создание базового приложения React, его интеграцию с Electron и создание распространяемого пакета для разных платформ.

Предпосылки

Прежде чем мы начнем, убедитесь, что в вашей системе установлено следующее программное обеспечение:

  1. Node.js и npm (диспетчер пакетов Node): установите Node.js и npm, посетив официальный сайт (https://nodejs.org/) и следуя инструкциям по установке для вашей операционной системы.

Шаг 1: Настройка нового приложения React

Давайте начнем с настройки нового приложения React, используя create-react-app.

  1. Откройте терминал или командную строку и выполните следующую команду, чтобы создать новое приложение React:
npx create-react-app electron-react-app

2. После завершения установки перейдите в только что созданный каталог проекта:

cd electron-react-app

3. Чтобы убедиться, что все настроено правильно, запустите сервер разработки:

npm start

Теперь вы должны увидеть приложение React, работающее в вашем браузере по адресу http://localhost:3000.

Шаг 2: Установка Электрона

Далее мы установим Electron и настроим наше приложение React для работы с ним.

  1. Остановите сервер разработки, нажав Ctrl+C в терминале.
  2. Установите Electron и electron-builder как зависимости для разработчиков, используя npm:
npm i -D electron electron-is-dev

npm install electron electron-builder --save-dev

Команда также установила полезный пакет npm под названием electron-is-dev, используемый для проверки того, находится ли наше электронное приложение в разработке или в производстве. Вы использовали флаг -D для установки электрона в зависимостях dev.

Шаг 3: Настройка Электрона

Теперь мы настроим Electron для запуска нашего приложения React.

  1. В корневом каталоге вашего проекта создайте новый файл с именем electron.js. Этот файл будет служить основной точкой входа для нашего приложения Electron.
  2. Откройте electron.js в предпочитаемом вами редакторе кода и добавьте следующий код:
// electron.js
const { app, BrowserWindow } = require('electron');
const path = require('path');
const isDev = require('electron-is-dev');

let mainWindow;

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

  const startURL = isDev
    ? 'http://localhost:3000'
    : `file://${path.join(__dirname, '../build/index.html')}`;

  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 либо с сервера разработки в режиме разработки, либо из каталога сборки в рабочем режиме.

Шаг 4. Обновление package.json

Чтобы Электрон знал о нашем основном файле записи и каталоге сборки, нам нужно изменить файл package.json.

  1. Откройте package.json и добавьте в объект JSON следующие строки:
// package.json
{
  // ...

  "main": "electron.js",

  "build": {
    "appId": "com.example.myapp",
    "productName": "My Electron App",
    "directories": {
      "output": "dist"
    }
  },

  // ...
}

Поле "main" указывает точку входа для Electron, а раздел "build" предоставляет параметры конфигурации для electron-builder, включая appId, productName и выходной каталог для распространения.

Шаг 5: Запуск Электрона

Теперь давайте протестируем наше приложение Electron.

  1. Запустите сервер разработки для приложения React, запустив:
npm start

2. В отдельном терминале или командной строке запустите приложение Electron:

npm run electron

Теперь вы должны увидеть, как ваше приложение React работает в отдельном окне Electron.

Шаг 6: Создание распространяемых пакетов

Чтобы упаковать и распространить ваше приложение Electron среди пользователей, вам необходимо создать распространяемые пакеты для конкретной платформы. electron-builder упрощает этот процесс.

  1. Перед сборкой пакета остановите работающее приложение Electron и сервер разработки React.
  2. Чтобы собрать пакет для вашей текущей платформы, выполните следующую команду:
npm run build

Эта команда создаст распространяемый пакет в каталоге dist.

Чтобы собрать пакеты для нескольких платформ, вы можете использовать следующую команду:

npm run dist

Приведенная выше команда создаст пакеты для Windows, macOS и Linux в каталоге dist.

Поздравляем! Вы успешно создали настольное приложение с помощью Electron и React. Теперь вы можете распространять свое приложение среди пользователей на разных платформах.

Заключение

Electron и React представляют собой мощную комбинацию для создания кроссплатформенных настольных приложений. Следуя этому руководству, вы узнали, как настроить приложение React, интегрировать его с Electron и упаковать для распространения.

Помните, что в этом руководстве были рассмотрены только основы, и с помощью Electron и React вы можете сделать гораздо больше для создания сложных настольных приложений. Изучите документацию Electron и React, чтобы открыть для себя более продвинутые функции и возможности для ваших проектов. Удачного кодирования!