通过创建React应用程序开始使用Electron

使用Create-React-App的Electron

创建桌面应用程序的方法已经有了很大的进步。每天，开发者都在想出更容易使用的创建桌面应用程序的方案。Electron是这些解决方案中的一个。它使用网络技术包裹着Node.js，提出了网络技术。

Electron传统上使用HTML/CSS和JavaScript。你可以使用HTML、CSS和vanilla JavaScript来构建Electron应用程序。

其他可用的选择包括使用React和其他JavaScript框架。

在这篇文章中，我们将完成以下工作。

我们将使用Create-React-App创建一个React.js应用程序。
在应用程序中安装Electron。
在React.js应用程序中配置Electron。
最后，使用Electron和React创建一个演示的桌面应用程序。

前提条件

要舒适地跟上下面的教程，你需要具备以下条件。

对React及其工作原理有一个基本的了解。
安装了Node.js。

设置应用程序

本指南将使用create-react-app 来搭建应用程序的脚手架。 create-react-app是一个React应用程序的项目生成器。

在我个人看来，当用CRA构建React应用程序时，与你从头开始构建React项目相比，创建桌面应用程序相对容易。

导航到你的工作目录。使用npx ，初始化你的React应用，如下所示。确保给你的项目起一个漂亮的、令人难忘的名字，我将把我的应用程序命名为electron-react-demo 。

cd ~/ your-prefered-location

npx create-react-app electron-react-demo

npx 命令将创建一个名为electron-react-demo 的React应用程序。当该命令完成后，导航到该目录并安装electron。

你可以在终端这样做。

cd electron-react-demo

npm i -D electron electron-is-dev

该命令还安装了一个有用的npm包，名为electron-is-dev ，用于检查我们的electron应用是在开发还是在生产。你用-D 标志将electron安装在dev依赖项下。

接下来，为Electron创建一个配置文件。在所有HTML代码所在的公共文件夹中创建它，在你的例子中是在public 文件夹中，名为electron.js/public/electron.js 。

下一步是将Electron的配置添加到该文件中。

将这段代码粘贴到electron.js 文件中。

const path = require('path');

const { app, BrowserWindow } = require('electron');
const isDev = require('electron-is-dev');

function createWindow() {
  // Create the browser window.
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
    },
  });

  // and load the index.html of the app.
  // win.loadFile("index.html");
  win.loadURL(
    isDev
      ? 'http://localhost:3000'
      : `file://${path.join(__dirname, '../build/index.html')}`
  );
  // Open the DevTools.
  if (isDev) {
    win.webContents.openDevTools({ mode: 'detach' });
  }
}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.whenReady().then(createWindow);

// Quit when all windows are closed, except on macOS. There, it's common
// for applications and their menu bar to stay active until the user quits
// explicitly with Cmd + Q.
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow();
  }
});

该代码创建了一个由electron提供的Browserwindow 实例，用来渲染网页内容。然后它将目录中的HTML文件加载到Browserwindow 。

它还处理其他的窗口事件，如：closed 当窗口关闭时，focus 当窗口处于焦点时，ready-to-show 当网页被渲染时，以及窗口状态如：maximize,minimize,restore 。

重要的变化是你添加了一个要启动的自定义HTML文件。这将在你的构建文件中，这将是生产中的目标。

配置package.json

你现在已经安装了electron，但仍然需要在package.json 中做一些修改，以同步浏览器和桌面版的构建。首先，更新项目的入口文件。

在你的package.json 文件中，在你的脚本之前加上这个。

  "main": "public/electron.js",

接下来，安装以下软件包，同步和等待。这些软件包将监听应用程序，当它在浏览器上启动时，它将作为电子应用程序启动。

npm i -D concurrently wait-on

Concurently 允许我们在一个脚本中运行多个命令，将等待3000端口，这是默认的CRA端口，以启动应用程序。wait-on

你在dev 脚本中传递的标志，BROWSER=none 将阻止浏览器在React应用编译成功后启动。

在你的package.json 文件中的scripts ，添加。

...
"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "dev": "concurrently -k \"BROWSER=none npm start\" \"npm:electron\"",
    "electron": "wait-on tcp:3000 && electron ."
  },

就这样，你已经设置好了一切。运行npm run dev 应该会启动一个电子应用程序。

演示时间

现在你已经设置好了一切，让我们试着用React建立一个简单的网络应用，并看看它变成一个桌面应用。

在本节结束时，你将使用 react 制作一个天气应用程序。要开始，请前往[开放的天气网站]并创建一个账户。一旦你登录了，你将被引导到一个仪表板。

导航到api-keys 标签，在提供的输入中输入API密钥的名称。我把我的命名为react demo ，然后点击generate 按钮，为我们的应用程序创建一个新的api-key。我们这样做是为了从API获得天气数据，并将其输入我们的应用程序。

dashboard

Npm有一个方便的软件包，用于为react应用程序建立天气组件，它叫做react-open-weather。它将生成我们想要的用户界面。要安装它，在终端键入。

npm i react-open-weather

安装完毕后，继续将该组件添加到你的 react 应用中。

导航到你的src 文件夹，进入app.js 文件，这是我们所有工作的地方，在App 函数中。

让我们从 react-open-weather 包中导入该组件。我们将导入组件，并导入一个辅助函数来使用开放天气API，这是由包提供的。

import ReactWeather, { useOpenWeather } from 'react-open-weather';

导入发生在你的应用程序的最顶端。在应用程序的函数中，使用你的useOpenWeather 函数从api中引入数据。这可以通过指定一些必要的东西来实现，如经度和纬度、度量单位以及传递你的API密钥。

const { data, isLoading, errorMessage } = useOpenWeather({
  key: 'you api key',
  lat: '1.2921',
  lon: '36.8219',
  lang: 'en',
  unit: 'metric', // values are (metric, standard, imperial)
});

本教程将使用固定的纬度和经度值。你可以自由地使这些值成为动态的。例如，你可以有一个输入，让用户输入他们喜欢的经度和纬度。

然后他们可以把它们作为变量提供给useOpenWeather 函数。你可以使用 react 提供的useState 钩子来实现这一点。

最后，在应用函数的返回语句中，用API的数据返回一个漂亮的天气组件。你还将把一些信息作为道具传递给它。

其中一些信息包括，数据的单位标签、语言，它还将传入数据对象。

代码将看起来像这样。

<div className="App">
  <ReactWeather
    isLoading={isLoading}
    errorMessage={errorMessage}
    data={data}
    lang="en"
    locationLabel="Nairobi"
    unitsLabels={{ temperature: 'C', windSpeed: 'Km/h' }}
    showForecast
  />
</div>

就这样，你的天气应用程序就完成了。

app.js文件的完整代码应该是这样的。

import ReactWeather, { useOpenWeather } from 'react-open-weather';
import './App.css';

function App() {
  const { data, isLoading, errorMessage } = useOpenWeather({
    key: 'you api key',
    lat: '1.2921',
    lon: '36.8219',
    lang: 'en',
    unit: 'metric', // values are (metric, standard, imperial)
  });

  return (
    <div className="App">
      <ReactWeather
        isLoading={isLoading}
        errorMessage={errorMessage}
        data={data}
        lang="en"
        locationLabel="Nairobi"
        unitsLabels={{ temperature: 'C', windSpeed: 'Km/h' }}
        showForecast
      />
    </div>
  );
}

export default App;

你现在可以通过运行npm run dev ，将你的应用程序作为一个桌面应用程序启动。

它将看起来像这样。

electron-demo-result

结语

在这篇文章中，我们介绍了如何使用Create-React-App 和 Electron 设置一个简单的桌面应用程序。我们还创建了一个简单的天气应用程序来演示一切是如何运作的。

Electron提供了使用Node.js和网络技术建立桌面应用程序的能力。这个前提使你非常容易开始做一个桌面应用程序，同时也允许你将现有的网络项目包裹在Electron周围来制作漂亮的桌面应用程序。

如何通过创建一个React应用程序开始使用Electron