极速开发 Electron + React 桌面应用

2023-12-29 22:25:57

Electron 和 React 简介

Electron

Electron 是一款跨平台的应用程序开发框架，它允许开发人员使用 HTML、CSS 和 JavaScript 来构建原生桌面应用程序。Electron 基于 Chromium 和 Node.js，因此它可以访问所有 Web 技术，并且可以与本机操作系统进行交互。Electron 应用程序可以在 Mac、Windows 和 Linux 等多个平台上运行。

React

React 是一款用于构建用户界面的 JavaScript 库，它可以帮助开发人员轻松创建交互式和可重用的 UI 组件。React 使用虚拟 DOM 来提高渲染性能，并且提供了丰富的 API 来构建复杂的 UI。React 可以与 Electron 一起使用来创建跨平台的桌面应用程序。

搭建 Electron + React 项目

1. 安装 Electron

首先，您需要在您的系统上安装 Electron。您可以从 Electron 官网下载最新版本的 Electron 安装包。安装完成后，您可以在终端中输入以下命令来检查 Electron 是否安装成功：

electron -v

2. 创建项目

接下来，您需要创建一个新的 Electron 项目。您可以使用以下命令来创建一个名为 "my-electron-app" 的新项目：

mkdir my-electron-app
cd my-electron-app

3. 初始化项目

现在，您需要在项目中初始化一个新的 React 项目。您可以使用以下命令来安装必要的依赖项：

npm install --save electron-react-boilerplate

4. 创建主进程文件

接下来，您需要创建一个主进程文件。主进程文件是 Electron 应用程序的入口，它负责创建和管理浏览器窗口。您可以在项目中创建一个名为 "main.js" 的文件，并添加以下代码：

const { app, BrowserWindow } = require('electron')

function createWindow () {
  const win = new BrowserWindow({ width: 800, height: 600 })
  win.loadURL('http://localhost:3000')
  win.webContents.openDevTools()
}

app.whenReady().then(() => {
  createWindow()
  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit()
})

5. 创建渲染进程文件

现在，您需要创建一个渲染进程文件。渲染进程文件是 Electron 应用程序中负责渲染用户界面的部分。您可以在项目中创建一个名为 "App.js" 的文件，并添加以下代码：

import React, { useState } from 'react'
import { render } from 'react-dom'

const App = () => {
  const [count, setCount] = useState(0)

  const handleClick = () => {
    setCount(count + 1)
  }

  return (
    <div>
      <h1>Hello World!</h1>
      <button onClick={handleClick}>Click me</button>
      <p>You clicked {count} times</p>
    </div>
  )
}

render(<App />, document.getElementById('root'))