Kuidas luua Reactil põhinev elektronide rakendus?

Nii elektronid kui ka reaktor ei vaja tänapäeval tutvustamist. Kui Electron pakub meile lihtsat ja kiiret viisi Windowsi või Mac-OS-i loomise rakenduse arendamiseks, muudab Reaxi teegi veebipõhine arendus komponendipõhise lähenemise abil strukturaalsemaks ja modulaarsemaks. Elektroni ja reageerimise kombinatsioon on suurepärane viis töölauarakenduse arendamiseks.

Elektroni + reageeriva kombinatsiooni jaoks on saadaval vähe katlaplaate, üks populaarsemaid neist on -

Algaja jaoks võib see katteplaat tunduda natuke keeruline (tundsin seda ka ise alustades), sellepärast tahan selles õpetuses näidata teile lihtsamat viisi elektronide reageerimiseks reageerimisega.

Ma eeldan, et olete juba installinud Node.js ja looge ka reageeriva rakenduse teeki, kasutades npm või lõnga. Nüüd saame ehitada meie rakenduse.

Looge oma reageerimisrakendus, kasutades allpool olevat käsku -

npx loo-reageeri-rakendus  --typescript

Märkus. Kasutage rakenduse looge-reageerige rakenduse loomiseks kirjutusmasina suvandit. Elektroni ehitaja uusimas versioonis on sõltuvus masinakirjas.

Kui teie rakendus on edukalt loodud, avage projekt suvalises redaktoris, eelistan Visual Studio Code.

See on meie uue projekti põhistruktuur koos minimaalselt installitud raamatukogudega. Installime veel mõned teegid, mida me vajame elektronrakenduse ehitamiseks.

Liikuge käsurealt oma projekti kaustas ja seejärel täitke käsk allpool -

lõng lisada rist-env elektron-is-dev
                              või
npm install - salvestage rist-env elektron-is-dev

kui see on valmis, siis käivita see -

lõnga lisamine --dev samaaegselt elektronide ehitamise ooteaeg
                             või
npm installida samaaegselt elektronide ehitamise ooteaeg
pärast kogu vajaliku teegi lisamist

Nüüd looge projektikataloogi avalikku kausta fail “electron.js” ja kleepige selle all olev kood -

const elektron = vaja ("elektron");
const app = elektron.app;
const BrowserWindow = elektron.BrowserWindow;
const path = nõuda ("tee");
const isDev = nõuda ("elektron-on-dev");
lase mainWindow;
funktsioon createWindow () {
mainWindow = uus brauseri aken ({laius: 900, kõrgus: 680});
mainWindow.loadURL (
onDev
? "http: // localhost: 3000"
: `fail: // $ {path.join (__nimi," ../ build / index.html ")}"
);
mainWindow.on ("suletud", () => (mainWindow = null));
}
app.on ("valmis", createWindow);
app.on ("aken on kõik suletud", () => {
if (process.platform! == "darwin") {
app.quit ();
}
});
app.on ("aktiveeri", () => {
if (mainWindow === null) {
createWindow ();
}
});

Oleme peaaegu valmis, peame lihtsalt oma failis package.json natuke muudatusi tegema.

Lisage oma faili package.json allpool olev teave -

"kirjeldus": "",
"autor": "",
"ehitama": {
"appId": ""
},
"main": "public / electron.js",
"koduleht": "./",

ja värskendage oma skriptide elementi oma paketis.json nagu allpool -

"skriptid": {
"reageerima-käivitama": "reageerima-käivitama",
"reageerima-ehitama": "reageerima-skriptid ehitama",
"reageeri test": "reageeri skriptide test - env ​​= jsdom",
"react-eject": "react-skriptid väljutama",
"elektronide ehitamine": "elektronide moodustaja",
"vabastamine": "lõng reageerib-ehitab && elektronide moodustaja - avaldage = alati",
"ehitama": "lõng reageerib-ehitama & & lõnga elektron ehitab",
"start": "samaaegselt \" cross-env BROWSER = lõng ei reageeri-käivitu \ "\" ooteaeg http: // localhost: 3000 && elektron. \ ""
},

See selleks, oleme nüüd valmis genereerima oma reageerimispõhise elektronide rakenduse. Nüüd käsurealt käivitage käsk -

lõnga algus
või
npm jooksu algus

jah! meie React-Electroni rakendus töötab ...

Levitamise eesmärgil kasutage käsku -

lõnga ehitada
või
npm käivitage

Kui lõnga ehitamise käsk on õnnestunud, näete, et projekti kausta on loodud uus kaust. Liikuge selles kaustas ja leiate oma rakenduse installifaili.

Nüüd saate selle rakenduse installida või installida.

Kui soovite rohkem teada saada React-Electroni rakenduse loomise kohta selle levitamisest, lugege seda õpetust -

õnnelik kodeerimine ...