Comment créer une application Electron basée sur React

Electron et React ne nécessitent aucune introduction de nos jours. Lorsque Electron nous fournit un moyen simple et rapide de développer une application native Windows ou Mac-OS, la bibliothèque React rend le développement Web plus structuré et modulaire grâce à son approche basée sur les composants. La combinaison de l'électron et de la réaction sera un moyen formidable de développer une application de bureau.

Il y a peu de passe-partout disponibles pour la combinaison électron + réactif, l'un des plus populaires est -

Pour un débutant, ce type de comportement peut sembler un peu complexe (j’ai ressenti la même chose quand j’ai commencé), c’est pourquoi, dans ce tutoriel, je veux vous montrer le moyen le plus simple de coupler électron et réact.

Je suppose que vous avez déjà installé Node.js et créé également une bibliothèque en utilisant npm ou yarn. Maintenant, construisons notre application.

Créez votre application de réaction en utilisant la commande ci-dessous -

npx create-react-app  --typescript

Remarque: veuillez utiliser l'option de typographie lorsque vous utilisez create-react-app pour créer votre application. La version récente du générateur d'électrons a une dépendance typographique.

Une fois votre application créée avec succès, ouvrez le projet dans n’importe quel éditeur, je préfère Visual Code.

Il s’agit donc de la structure de base de notre nouveau projet avec un minimum de bibliothèques installées. Nous allons installer quelques autres bibliothèques dont nous avons besoin pour créer une application électronique.

À partir de l'invite de commande, naviguez dans le dossier de votre projet, puis exécutez la commande ci-dessous -

fil ajouter cross-env electron-is-dev
                              ou
npm install --save cross-env electron-is-dev

une fois terminé, lancez ceci -

fil ajouter --dev en même temps que l'attente du constructeur d'électrons d'électrons
                             ou
npm installe simultanément l'attente du constructeur d'électrons d'électrons
après avoir ajouté toute la bibliothèque requise

Maintenant, créez un fichier "electron.js" dans le dossier Public de votre répertoire de projet et collez le code ci-dessous à l'intérieur de celui-ci -

électron const = nécessite ("électron");
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;
const path = require ("path");
const isDev = require ("electron-is-dev");
laisser mainWindow;
fonction createWindow () {
mainWindow = new BrowserWindow ({width: 900, height: 680});
mainWindow.loadURL (
isDev
? "http: // localhost: 3000"
: `file: // $ {path.join (__dirname," ../ build / index.html ")}`
)
mainWindow.on ("fermé", () => (mainWindow = null));
}
app.on ("prêt", createWindow);
app.on ("window-all-closed", () => {
if (process.platform! == "darwin") {
app.quit ();
}
});
app.on ("activate", () => {
if (mainWindow === null) {
createWindow ();
}
});

Nous avons presque terminé, nous avons juste besoin de faire un peu de changement dans notre fichier package.json.

Ajoutez les informations ci-dessous dans votre fichier package.json -

"description": "",
"author": "",
"construire": {
"appId": ""
},
"main": "public / electron.js",
"homepage": "./",

et mettez à jour l'élément de scripts dans votre package.json comme ci-dessous -

"scripts": {
"react-start": "react-scripts start",
"react-build": "react-scripts build",
"react-test": "react-scripts test --env = jsdom",
"react-eject": "react-scripts éjecte",
"electron-build": "électron-constructeur",
"release": "yarn react-build && electron-builder --publish = always",
"build": "yarn react-build && yarn electron-build",
"start": "simultanément \" cross-env BROWSER = aucun fil réaction-start \ "\" attendre http: // localhost: 3000 && electron. \ ""
},

C’est tout, nous sommes maintenant prêts à générer notre application électronique à base de réaction. Maintenant, à partir de l'invite de commande, exécutez la commande -

début de fil
ou
npm run start

yahoo! notre application React-Electron est en cours d'exécution…

Pour la distribution, utilisez la commande -

fil de construction
ou
npm run build

Une fois la commande de construction du fil réussie, vous pouvez voir qu'un nouveau dossier a été créé dans le dossier de votre projet. Naviguez dans ce dossier et vous pourrez trouver le fichier d'installation de votre application.

Vous pouvez maintenant installer votre application à l'aide de ce programme d'installation ou la distribuer.

Si vous souhaitez en savoir plus sur la création de l’application React-Electron et sa distribution, reportez-vous à ce didacticiel -

codage heureux…