Это было наше самое трудное время, когда я и два моих друга работали над проектом, где нас попросили создать клон настольного приложения 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