react桌面应用_如何使用React构建电子桌面应用程序[初学者]

react桌面应用

介绍

我一直对编写桌面应用程序有浓厚的兴趣。 这些年来一直困扰着我的是，我对学习C ++或Java使其不再感兴趣。 我想用Javascript构建桌面应用程序，因此我着手使用由Github开发和维护的Javascript桌面应用程序框架Electron。

Electron非常重要，它使您可以使用一个代码库为所有主要操作系统创建桌面应用程序。 这给我留下了深刻的印象，但印象不太多，因为您可以使用React，Angular，Vue或任何JavaScript框架编写桌面应用程序。 他们以此卖了我。

在本教程中，我将概述初始设置以帮助您入门。

先决条件

要了解本教程的语法和概念，您应该具有：

• Javascript和React的基本概念
• ES5和ES6标准的书面Javascript
• 二手节点软件包管理器（npm）
• 安装了Nodejs和npm / yarn

开始吧

让我们创建一个文件夹来容纳电子应用程序并将其更改为目录。

$ mkdir electron_react_app &&cd $_

使用CRA（create-react-app）cli为我们生成一个React代码库

$ npx create-react-app .

由于我们使用电子，因此我们将在整个教程中添加相关的依赖项。

$ yarn add electron electron-builderwait -on concurrently -D

• electron -允许我们使用电子框架。
• electron-builder -允许我们将电子应用构建为可执行文件。
• wait-on -让您在开发过程中等待React进行编译，以便使用电子进行渲染。
• concurrently -使我们同时运行React和电子。

• $ yarn add electron-is-dev

• electron-is-dev告诉电子我们正在努力确定当前环境以服务于构建还是使react app在dev环境上运行。

在公用文件夹中创建一个electron.js文件，以容纳我们的电子逻辑。

// public/electron.js
const electron = require ( "electron" );
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;

const path = require ( "path" );
const isDev = require ( "electron-is-dev" );

let mainWindow;

function createWindow ()  {
  // Define the applications dimension
  mainWindow = new BrowserWindow({ width : 900 , height : 680 });
  // Determine what to render based on environment
  mainWindow.loadURL(
    isDev
      ? "http://localhost:3000"
      : `file:// ${path.join(__dirname, "../build/index.html" )} `
  );
  
  // Show chrome developer tools when in dev environment
  if (isDev) {
    mainWindow.webContents.openDevTools();
  }
  // Create event to close window on close
  mainWindow.on( "closed" , () => (mainWindow = null ));
}

// On launch create app window
app.on( "ready" , createWindow);
app.on( "window-all-closed"