Electron — это популярная платформа, которая позволяет разработчикам создавать кроссплатформенные настольные приложения с использованием таких веб-технологий, как HTML, CSS и JavaScript. Объединив Electron с React, мощной библиотекой JavaScript для создания пользовательских интерфейсов, мы можем создавать многофункциональные настольные приложения, которые выглядят и ведут себя как нативные приложения в Windows, macOS и Linux.
В этом руководстве мы познакомим вас с процессом создания простого настольного приложения с использованием Electron и React. Мы рассмотрим настройку среды разработки, создание базового приложения React, его интеграцию с Electron и создание распространяемого пакета для разных платформ.
Предпосылки
Прежде чем мы начнем, убедитесь, что в вашей системе установлено следующее программное обеспечение:
- Node.js и npm (диспетчер пакетов Node): установите Node.js и npm, посетив официальный сайт (https://nodejs.org/) и следуя инструкциям по установке для вашей операционной системы.
Шаг 1: Настройка нового приложения React
Давайте начнем с настройки нового приложения React, используя create-react-app
.
- Откройте терминал или командную строку и выполните следующую команду, чтобы создать новое приложение React:
npx create-react-app electron-react-app
2. После завершения установки перейдите в только что созданный каталог проекта:
cd electron-react-app
3. Чтобы убедиться, что все настроено правильно, запустите сервер разработки:
npm start
Теперь вы должны увидеть приложение React, работающее в вашем браузере по адресу http://localhost:3000
.
Шаг 2: Установка Электрона
Далее мы установим Electron и настроим наше приложение React для работы с ним.
- Остановите сервер разработки, нажав
Ctrl+C
в терминале. - Установите 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.
- В корневом каталоге вашего проекта создайте новый файл с именем
electron.js
. Этот файл будет служить основной точкой входа для нашего приложения Electron. - Откройте
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
.
- Откройте
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.
- Запустите сервер разработки для приложения React, запустив:
npm start
2. В отдельном терминале или командной строке запустите приложение Electron:
npm run electron
Теперь вы должны увидеть, как ваше приложение React работает в отдельном окне Electron.
Шаг 6: Создание распространяемых пакетов
Чтобы упаковать и распространить ваше приложение Electron среди пользователей, вам необходимо создать распространяемые пакеты для конкретной платформы. electron-builder
упрощает этот процесс.
- Перед сборкой пакета остановите работающее приложение Electron и сервер разработки React.
- Чтобы собрать пакет для вашей текущей платформы, выполните следующую команду:
npm run build
Эта команда создаст распространяемый пакет в каталоге dist
.
Чтобы собрать пакеты для нескольких платформ, вы можете использовать следующую команду:
npm run dist
Приведенная выше команда создаст пакеты для Windows, macOS и Linux в каталоге dist
.
Поздравляем! Вы успешно создали настольное приложение с помощью Electron и React. Теперь вы можете распространять свое приложение среди пользователей на разных платформах.
Заключение
Electron и React представляют собой мощную комбинацию для создания кроссплатформенных настольных приложений. Следуя этому руководству, вы узнали, как настроить приложение React, интегрировать его с Electron и упаковать для распространения.
Помните, что в этом руководстве были рассмотрены только основы, и с помощью Electron и React вы можете сделать гораздо больше для создания сложных настольных приложений. Изучите документацию Electron и React, чтобы открыть для себя более продвинутые функции и возможности для ваших проектов. Удачного кодирования!