Базовое руководство по началу работы с электроном с React за минимальное количество шагов
Electron говорит, что если вы можете создать веб-сайт, вы можете создать кроссплатформенное настольное приложение. Наш любимый редактор кода VS Code использует электронное приложение, как и настольное приложение Whatsapp. Electron использует среду выполнения Node.js и механизм рендеринга Chromium для создания приложений с использованием HTML, CSS и JavaScript.
Почему React
React - это библиотека JavaScript с открытым исходным кодом для создания пользовательских интерфейсов или компонентов пользовательского интерфейса. Интересно изучить как функциональный (зацепки), так и классовый компонентный подход. React декларативен и основан на компонентах.
Create-React-App
Чтобы начать создание нового одностраничного приложения для реагирования, React Community предоставляет шаблонное приложение для быстрого старта разработки приложений.
Примечание. Убедитесь, что в вашей системе установлен Node.js.
Создание нашего приложения React
Когда ваш интерфейс командной строки указывает на папку, в которой вы хотите сохранить свое приложение, запустите
npx create-react-app electron-react-demo
который создает новое приложение реагирования под названием electronic-react-demo с необходимыми шаблонами.
cd electron-react-demo npm start
чтобы запустить приложение React на локальном хосте.
Теперь вы можете просмотреть электронную реакцию-демонстрацию в браузере.
Локальный: http: // localhost: 3000
Структура папок electronic-react-demo будет следующей:
electronic-react-demo
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│ ├── favicon.ico
│ ├── index.html
│ └── manifest.json
└── src
│├── Приложение .css
│├── App.js
│├── App.test.js
│├── index.css
│├── index.js
│├── logo.svg
│├── serviceWorker.js
└── setupTests.js
Установка Electron
Устанавливаем электрон как dev-зависимость
npm install -D electron
В папке src создаем новый файл electronics.js для запуска электронного приложения.
const electron = require('electron');
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;
let mainWindow;
function createWindow() {
mainWindow = new BrowserWindow({
width: 1024,
height: 768,
webPreferences:{
nodeIntegration:true
}
});
mainWindow.loadURL('http://localhost:3000');
mainWindow.webContents.openDevTools();
mainWindow.on('closed', function () {
mainWindow = null
})
}
app.on('ready', createWindow);
app.on('window-all-closed', function () {
if (process.platform !== 'darwin') {
app.quit()
}
});
app.on('activate', function () {
if (mainWindow === null) {
createWindow()
}
});
В Electron есть два процесса:
1. Главный процесс - electronics.js, запускаемый при запуске приложения, является основным процессом.
2. Процесс рендеринга - BrowserWindows созданный в основном процессе, может получить доступ к API рендерера для пользовательского интерфейса.
API app используется для управления жизненным циклом событий приложения и создает окно для события «готово». BrowserWindow API используется для создания окон браузера и управления ими. createWindow создает новое окно с указанной высотой и шириной и другими соответствующими спецификациями. Откройте инструменты разработчика Chrome с помощью openDevTools (). Созданное окно браузера прослушивает событие ‘closed’, чтобы закрыть окно. Браузер Windows загружает порт localhost, на котором работает приложение React.
Запуск приложения React в электронном виде
- Добавить точку входа в электрон
Мы добавляем основную точку входа в package.json, которая содержит все метаданные, связанные с проектом.
"main": "src/electron.js"
Кроме того, чтобы запустить электрон, мы добавляем цель запуска в электрон в package.json,
"electron":"electron ."
2. Выполнение приведенных ниже команд по отдельности открывает приложение Electron с содержимым create-react-app. Мы можем внести изменения в App.js для редактирования пользовательского интерфейса.
npm start npm run electron
Здесь мы создали настольное приложение с минимальными усилиями при разработке.
Однако и сервер разработки React, и Electron должны запускаться отдельно и должны запускаться таким образом, чтобы Electron запускался после загрузки сценариев реакции.
3. Использование Foreman для упрощения запуска приложений
Foreman - это инструмент управления процессами, мы добавляем его с помощью
npm install -D foreman
Мы создаем Procfile для управления запуском двух процессов, то есть React webpack-dev-server и electronics как:
react:npm start electron:npm run electron
Это решает нашу проблему отдельного запуска двух процессов. Мы добавляем новый файл с именем wait-for-response.js, чтобы решить нашу проблему, ожидая запуска сервера React dev и затем запускающего электрон.
// wait-for-react.js
const net = require('net');
const port = process.env.PORT ? (process.env.PORT - 100) : 3000;
process.env.ELECTRON_START_URL = `http://localhost:${port}`;
const client = new net.Socket();
let startedElectron = false;
const tryConnection = () => client.connect({port: port}, () => {
client.end();
if(!startedElectron) {
console.log('starting electron');
startedElectron = true;
const exec = require('child_process').exec;
exec('npm run electron');
}
}
);
tryConnection();
client.on('error', (error) => {
setTimeout(tryConnection, 1000);
});
Этот простой скрипт узла проверяет, запущен ли React dev, а затем запускает электронный процесс. Модифицируем ранее добавленный Procfile
react:npm start electron:npm run src/wait-for-react.js
4. Далее мы вносим некоторые изменения в наш файл package.json:
- Поскольку create-response-app создает index.html, который по умолчанию использует абсолютные пути. Таким образом, он не может загрузить его в Electron. Однако есть параметр конфигурации, позволяющий изменить это, чтобы установить свойство домашней страницы в package.json. Мы устанавливаем это свойство в текущем каталоге, и npm run build будет использовать его как относительный путь.
"homepage":"./"
2. npm start должен запустить наше приложение по желанию. Однако в настоящее время запускается только сервер разработки React. Поэтому мы вносим следующие изменения в package.json и Procfile соответственно,
“start”: “nf start -p 3000”, “electron-start”:”node src/wait-for-react”, “react-start”:”react-scripts start”
Окончательный Procfile,
react: npm run react-start electron: npm run electron-start
Эти два дополнительных изменения заставляют нас использовать npm start для запуска приложения. Кроме того, мы добавляем файл .env с BROWSER=none в исходный каталог, чтобы сервер React dev не запускался в браузере. Наконец, наш файл package.json выглядит как
{
"name": "electron-react-demo",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.5.0",
"@testing-library/user-event": "^7.2.1",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-scripts": "3.4.3"
},
"scripts": {
"start":"nf start -p 3000",
"react-start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"electron": "electron ."
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"homepage":"./",
"devDependencies": {
"electron": "^10.0.0",
"foreman": "^3.0.1"
},
"description": "This is a project demonstrating create-react-app with electron.",
"main": "src/electron.js",
"keywords": [
"electron",
"react"
],
"author": "*******@bobble.ai",
"license": "ISC"
}
Теперь запустите npm start, и там будет запущено наше электронное приложение с React Front end.
Чтобы получить доступ к файловой системе или использовать ipcRenderer Electron, нам нужно импортировать Electron в приложение React со следующим обходным путем:
const electron = window.require('electron');В процессе разработки переменная среды ELECTRON_START_URL может указывать URL-адрес для mainWindow.loadURL (в electron.js).
В процессе производства, если env var существует, мы используем его, иначе мы загружаем статический файл index.html.
const startUrl = process.env.ELECTRON_START_URL || url.format({
pathname: path.join(__dirname, '/../build/index.html'),
protocol: 'file:',
slashes: true
});
mainWindow.loadURL(startUrl);
Вскоре
Electron упаковывает множество API и может многое предложить разработчикам, например создание безрамочных приложений. Следите за обновлениями, чтобы узнать больше о захватывающих историях.
Спасибо и удачного кодирования!
