Kako izraditi aplikaciju Electron temeljenu na React-u

I Electron i React ne trebaju uvod u današnje vrijeme. Kad nam Electron pruži lak i brz način za razvoj izvorne Windows ili Mac-OS aplikacije, React knjižnica čini web razvoj više strukturiran i modularan svojim pristupom temeljenim na komponentama. Kombinacija Electrona i Reacta bit će sjajan način za razvijanje desktop aplikacija.

Na raspolaganju je malo kotlovske kombinacije za kombinaciju elektrona i reakcija, jedna od najpopularnijih je -

Za početnike će se ova kotlovnica možda osjećati složeno (osjetio sam isto kad sam započeo), zato vam u ovom udžbeniku želim pokazati najjednostavniji način uparivanja elektrona i reakcije.

Pretpostavljam da ste već instalirali Node.js i također stvarate-reagirajte-biblioteku aplikacija pomoću npm ili pređe. Sada omogućujemo izgradnju naše aplikacije.

Kreirajte svoju reakcijsku aplikaciju pomoću naredbe ispod -

npx create-react-app  --typescript

Napomena: Za kreiranje aplikacije koristite opciju typecripta kada upotrebljavate app create-react-app. Najnovija inačica alata za izgradnju elektrona ovisi o tipskom pisaču.

Nakon što je vaša aplikacija uspješno kreirana, otvorite projekt u bilo kojem uređivaču, više volim Visual Studio Code.

To je osnovna struktura našeg novog projekta s minimalno instaliranim knjižnicama. Instaliramo nekoliko drugih knjižnica koje su nam potrebne za izgradnju elektronske aplikacije.

Iz naredbenog retka idite unutar mape projekta, a zatim izvršite naredbu ispod -

pređa dodati cross-env electron-is-dev
                              ili
npm install - spremanje cross-env electron-is-dev

jednom završite, a zatim pokrenite ovo -

pređa dodati --dev istodobno čekanje elektrona graditelja elektrona
                             ili
npm instalirati istodobno čekanje graditelja elektrona
nakon dodavanja sve potrebne knjižnice

Sada napravite datoteku "electron.js" unutar javne mape direktorija projekta i zalijepite kôd ispod nje -

const electron = tražiti ("elektron");
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;
const putanja = tražiti ("staza");
const isDev = zahtjev ("elektron-je-dev");
pusti mainWindow;
funkcija createWindow () {
mainWindow = novi prozor preglednika ({širina: 900, visina: 680});
mainWindow.loadURL (
isDev
? "Http: // localhost: 3000"
: `datoteka: // $ {path.join (__dirname," ../ build / index.html ")}`
);
mainWindow.on ("zatvoreno", () => (mainWindow = null));
}
app.on ("spreman", createWindow);
app.on ("prozor-sve zatvoren", () => {
if (obrada.platform! == "darwin") {
app.quit ();
}
});
app.on ("aktiviraj", () => {
ako je (mainWindow === null) {
createWindow ();
}
});

Gotovo smo gotovi, samo trebamo malo izmijeniti našu datoteku package.json.

U datoteku package.json dodajte podatke ispod -

"description": "",
"author": "",
"graditi": {
"appId": ""
}
"main": "javni / elektronski.js",
"početna stranica": "./",

i ažurirajte element skripte u vašem paketu.json kao niže -

"skripte": {
"react-start": "start-script skripti",
"react-build": "build-script skripti",
"react-test": "test react-script skripti --env = jsdom",
"react-eject": "reakcija-skripte izbaci",
"gradnja elektrona": "gradnja elektrona",
"release": "pređa reagira-gradi && electron-builder --publish = uvijek",
"build": "pređa reagira-gradi && pređa electron-build",
"start": "istovremeno" \ cross-env BROWSER = nijedna pređa reagira-start \ "\" pričekajte http: // localhost: 3000 && electron. \ ""
}

To je to, sada smo spremni za generiranje naše elektronske aplikacije temeljene na reakcijama. Sada iz naredbenog retka izvršite naredbu -

početak pređe
ili
npm pokrenuti start

Yahoo! pokreće se naša aplikacija React-Electron…

Za svrhu distribucije koristite naredbu -

pređa graditi
ili
npm trčanje graditi

Nakon što naredba za izgradnju pređe bude uspješna, možete vidjeti novu mapu dist unutar mape projekta. Dođite do te mape i možete pronaći instalacijsku datoteku vaše aplikacije.

Sada možete instalirati svoju aplikaciju putem tog instalatera ili je možete distribuirati.

Ako želite znati više detalja o kreiranju aplikacije React-Electron u distribuciji, pogledajte ovaj vodič -

sretan kodiranje ...