Come creare un'app Electron basata su React

Electron e React non hanno bisogno di presentazioni nei giorni nostri. Quando Electron ci fornisce un modo semplice e veloce per sviluppare applicazioni native per Windows o Mac-OS, la libreria React rende lo sviluppo web più strutturato e modulare con il suo approccio basato sui componenti. La combinazione di Electron e React sarà un modo fantastico per sviluppare applicazioni desktop.

Esistono poche piastre di caldaia disponibili per la combinazione elettrone + reattività, una delle più popolari è -

Per un principiante questa piastra della caldaia può sembrare un po 'complessa (ho provato la stessa cosa quando ho iniziato), ecco perché in questo tutorial voglio mostrarti il ​​modo più semplice per accoppiare l'elettrone con la reazione.

Suppongo che tu abbia già installato Node.js e che abbia anche creato la libreria di app-reagente usando npm o thread. Ora costruiamo la nostra applicazione.

Crea la tua app di reazione usando il comando seguente -

npx create -eagire-app  il tuo - tipo di script

Nota: utilizzare l'opzione dattiloscritto quando si utilizza create -eagire-app per creare l'applicazione. La versione recente di Electron Builder ha una dipendenza dattiloscritta.

Una volta che l'applicazione è stata creata correttamente, apro il progetto in qualsiasi editor, preferisco Visual Studio Code.

Quindi questa è la struttura di base del nostro nuovo progetto con librerie installate minime. Installiamo poche altre librerie di cui abbiamo bisogno per creare un'app di elettroni.

Dal prompt dei comandi, navigare all'interno della cartella del progetto e quindi eseguire il comando seguente:

filato aggiungere cross-env electron-is-dev
                              o
npm install --save cross-env electron-is-dev

una volta completato quindi esegui questo -

filato aggiunge --dev contemporaneamente elettrone-generatore di elettroni in attesa
                             o
npm installa contemporaneamente un elettrone-elettrone-builder wait-on
dopo aver aggiunto tutta la libreria richiesta

Ora crea un file "electron.js" nella cartella pubblica della directory del tuo progetto e incolla il codice qui sotto all'interno di quello -

const electron = request ("elettrone");
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;
const path = request ("percorso");
const isDev = require ("electron-is-dev");
lascia che mainWindow;
funzione createWindow () {
mainWindow = new BrowserWindow ({larghezza: 900, altezza: 680});
mainWindow.loadURL (
isDev
? "Http: // localhost: 3000"
: `file: // $ {path.join (__dirname," ../ build / index.html ")}`
);
mainWindow.on ("chiuso", () => (mainWindow = null));
}
app.on ("ready", createWindow);
app.on ("window-all-closed", () => {
if (process.platform! == "darwin") {
app.quit ();
}
});
app.on ("activable", () => {
if (mainWindow === null) {
createWindow ();
}
});

Abbiamo quasi finito, dobbiamo solo apportare alcune modifiche al nostro file package.json.

Aggiungi le informazioni di seguito nel file package.json -

"descrizione": "",
"autore": "",
"build": {
"appId": ""
},
"main": "public / electron.js",
"homepage": "./",

e aggiorna l'elemento script all'interno di package.json come di seguito -

"script": {
"reazioni-inizio": "avvio-reazioni-script",
"reazioni-build": "build-reazioni-script",
"reagire-test": "test di reagire-script --env = jsdom",
"reazioni-espulsione": "espulsione-reazioni-script",
"electron-build": "electron-builder",
"release": "filato reagisce-costruisce && electron-builder --publish = always",
"build": "filato reagire-costruire && filare-costruire elettrone",
"start": "simultaneamente \" cross-env BROWSER = nessuno thread-start-start \ "\" wait-on http: // localhost: 3000 && electron. \ ""
},

Ecco fatto, ora siamo pronti a generare la nostra app per elettroni basata sulla reazione. Ora dal prompt dei comandi esegui comando -

inizio del filato
o
npm inizio corsa

yahoo! la nostra app React-Electron è in esecuzione ...

Ai fini della distribuzione utilizzare il comando -

costruzione del filato
o
npm run build

Una volta che il comando di creazione del filo ha esito positivo, puoi vedere che è stata creata una nuova cartella nella cartella del tuo progetto. Naviga all'interno di quella cartella e puoi trovare il file di installazione della tua applicazione.

Ora puoi installare la tua app usando quell'installer o distribuirla.

Se desideri saperne di più in dettaglio sulla creazione di app React-Electron nella sua distribuzione, fai riferimento a questo tutorial:

buona programmazione ...