Sådan bygger du en React-baseret Electron-app

Elektron og React har begge ikke brug for nogen introduktion i dag. Når Electron giver os en nem og hurtig måde at udvikle oprindeligt Windows- eller Mac-OS-program, gør React-bibliotek webudvikling mere struktur og modulær efter dets komponentbaserede tilgang. Kombination af elektron og reaktion vil være en fantastisk måde at udvikle desktop applikation på.

Der er få kedelplader til rådighed til kombination af elektron + reaktion, en af ​​de mest populære er -

For en nybegynder kan denne kedelplade føles lidt kompliceret (jeg følte det samme, da jeg startede), det er grunden til, at jeg i denne tutorial vil vise dig den enkleste måde at parre elektron med reager på.

Jeg antager, at du allerede har installeret Node.js og også oprette-react-app-bibliotek ved hjælp af npm eller garn. Lad os nu bygge vores applikation.

Opret din reager-app ved hjælp af kommandoen nedenfor -

npx create-react-app  --typescript

Bemærk: Brug typeskriptindstillingen, når du bruger create-react-app til at oprette din applikation. Den seneste version af elektronbyggeren har typeskriftafhængighed.

Når din ansøgning er oprettet, skal du åbne projektet i enhver editor. Jeg foretrækker Visual Studio-kode.

Så dette er den grundlæggende struktur i vores nye projekt med mindst installerede biblioteker. Lad os installere få andre biblioteker, som vi har brug for for at opbygge elektronik-app.

Fra kommandoprompten, naviger i din projektmappe og udfør derefter kommandoen nedenfor -

garn tilføj cross-env electron-is-dev
                              eller
npm installation - gem cross-env electron-is-dev

når det er færdig, kør dette -

garn tilføje - ev samtidigt elektron elektronbygger ventetid
                             eller
npm installeres samtidigt elektron-builder-ventetid
efter at have tilføjet alt det nødvendige bibliotek

Opret nu en fil "electron.js" i den offentlige mappe i dit projektmappe, og indsæt kode nedenfor inde i det -

const electron = kræver ("elektron");
const app = elektron.app;
const BrowserWindow = elektron.BrowserWindow;
const path = kræve ("sti");
const isDev = kræver ("elektron-er-dev");
lad mainWindow;
funktion createWindow () {
mainWindow = ny BrowserWindow ({bredde: 900, højde: 680});
mainWindow.loadURL (
isDev
? "Http: // localhost: 3000"
: `fil: // $ {path.join (__dirname," ../ build / index.html ")}`
);
mainWindow.on ("lukket", () => (mainWindow = null));
}
app.on ("klar", createWindow);
app.on ("windows-all-closed", () => {
if (process.platform! == "darwin") {
app.quit ();
}
});
app.on ("aktivere", () => {
if (mainWindow === null) {
CreateWindow ();
}
});

Vi er næsten færdige, vi skal bare foretage en smule ændringer i vores package.json-fil.

Tilføj oplysninger nedenfor i din package.json-fil -

"description": "",
"author": "",
"build": {
"appId": ""
},
"main": "public / electron.js",
"hjemmeside": "./",

og opdater scriptselement i din package.json som nedenfor -

"scripts": {
"react-start": "react-scripts starter",
"react-build": "react-scripts build",
"react-test": "react-scripts test - env ​​= jsdom",
"react-eject": "react-scripts eject",
"elektron-build": "elektron-builder",
"release": "garn react-build && electron-builder - public = altid",
"build": "garn reagerer-bygger & & garn elektronbygger",
"start": "samtidigt \" cross-env BROWSER = ingen garn reagerer-start \ "\" ventetid http: // localhost: 3000 && electron. \ ""
},

Det er det, vi er nu klar til at generere vores reaktionsbaserede elektron app. Nu fra kommandoprompten udfør kommando -

garnstart
eller
npm kørestart

yahoo! vores React-Electron-app kører ...

Til distribution formål brug kommando -

garn bygger
eller
npm run build

Når garnopbygningskommandoen er vellykket, kan du se en ny mappe dist er oprettet i din projektmappe. Naviger inden i den mappe, og du kan finde installationsfilen til din applikation.

Nu kan du installere din app ved hjælp af det installationsprogram eller distribuere den.

Hvis du gerne vil vide mere om detaljer om oprettelse af React-Electron-app til distributionen, skal du se denne tutorial -

glad kodning ...