Это было наше самое трудное время, когда я и два моих друга работали над проектом, где нас попросили создать клон настольного приложения GitHub. Мы решили использовать Electron.js (для среды рабочего стола) с React.js (библиотека пользовательского интерфейса javascript) для его создания.

Шаблона для него в сети не было. Либо установка была слишком сложной, либо слишком устаревшей. Для нас в то время это было мелочью. Мы почти клонировали все доступные репозитории, но все равно чего-то не хватало.

Давайте сломаем эту скорлупу (потребовалось почти 3-4, чтобы понять это). Я делюсь этим, чтобы он помог всем, кто хочет создать настольное приложение с использованием Javascript (Electron.js и React.js) (мой выбор, возможно, вы можете использовать какую-то другую технологию).

Наконец, почему я использую electro.js

Итак, позвольте мне задать вам вопрос, используете ли вы какое-либо приложение (код VS, Discord, slack) для настольных компьютеров, созданное с использованием Electron.

Давайте начнем

Шаг 1:

Создайте шаблон create-react-app с помощью команды

Демо-приложение npx create-реагировать на демо-приложение для рабочего стола

Шаг 2 :

Установите electron, concurrently, wait-on и electron-is-dev в качестве зависимостей dev

npm install -D электрон, одновременно, ожидание электрона-is-dev

or

пряжа добавить -D электрон, одновременно, ожидание электрона-is-dev

Package.json до сих пор

{
"name": "demo-desktop-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.3.2",
"@testing-library/user-event": "^7.1.2",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-scripts": "3.3.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"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"
]
},
"devDependencies": {
"concurrently": "^5.0.2",
"electron": "^7.1.7",
"electron-is-dev": "^1.1.0",
"wait-on": "^3.3.0"
}
}

Шаг 3:

создайте файл electron.js в общей папке

const electron = require('electron');
// initialize app
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;
const path = require('path');
const isDev = require('electron-is-dev');
let mainWindow;
function createWindow(){
mainWindow = new BrowserWindow({
width: 900,
height: 800,
webPreferences: {
nodeIntegration: true
}
});
mainWindow.loadURL(
isDev   ? "http://localhost:3000"
: `file://${path.join(__dirname, "../build/index.html")}`
);
mainWindow.on("closed", () => (mainWindow = null));
}
// load window when app is ready
app.on("ready", createWindow);
// set up for mac
app.on("window-all-closed", () => {
if (process.platform !== "darwin") {
app.quit();
}
});
app.on("activate", () => {
if (mainWindow === null) {
createWindow();
}
});

Напишите скрипт разработки в package.json

"electron-dev": "одновременно \"BROWSER=none yarn start\" \"ожидание "http://localhost:3000" && electronic .\"",

это будет запускать электрон и реагировать вместе

Напишите основное поле в package.json

«основной»: «public/electron.js»,

package.json будет выглядеть примерно так

{
"name": "demo-desktop-app",
"version": "0.1.0",
"private": true,
"main": "public/electron.js",
"dependencies": {
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.3.2",
"@testing-library/user-event": "^7.1.2",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-scripts": "3.3.0"
},
"main": "public/electron.js",
"scripts": {
"electron-dev": "concurrently \"BROWSER=none yarn start\" \"wait-on http://localhost:3000 && electron --disable-gpu .\"",
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"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"
]
},
"devDependencies": {
"concurrently": "^5.0.2",
"electron": "^7.1.7",
"electron-is-dev": "^1.1.0",
"wait-on": "^3.3.0"
}
}

В сценарии electronic-dev — отключить-gpu необязателен, просто чтобы удалить ошибку графического процессора в Ubuntu.

Теперь в терминале запускаем

пряжа запустить электрон-dev

Что-то вроде этого появится.

Теперь реакция работает в среде рабочего стола.

Просто создайте любую вещь в React, которую можно преобразовать в настольное приложение.

Вао, давайте на минутку поблагодарим себя за то, что создали это.

Процесс создания десктопного приложения можно осветить в отдельном специальном разделе.

Продолжение следует ………..

Люблю тебя 3000JS