React使用Electron开发桌面端的详细流程步骤

更新时间：2023年06月14日 11:35:18 作者：世间万物皆不及你

React是一个流行的JavaScript库，用于构建Web应用程序，结合Electron框架，可以轻松地将React应用程序打包为桌面应用程序，本文详细介绍了使用React和Electron开发桌面应用程序的步骤,需要的朋友可以参考下

1. 安装Electron

首先，你需要安装Electron。在终端中运行以下命令：

npm install electron --save-dev

2. 创建Electron应用程序

使用Electron提供的CLI工具，你可以创建一个Electron应用程序。在终端中运行以下命令：

npx electron-forge init my-app

这将创建一个名为my-app的Electron应用程序，并生成一些默认文件和目录。

3. 安装React和相关依赖

在Electron应用程序目录中，你需要安装React。在终端中运行以下命令：

npm install react react-dom --save
npm install -D @babel/preset-react

其中，@babel/preset-react是用于将JSX语法转换为普通的JavaScript代码的Babel预设。

4. 创建React组件

在src目录下，创建一个名为App.js的React组件。在组件中，你可以使用React提供的组件和库构建Web界面。例如，你可以使用Material-UI库来构建一个简单的界面：

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';
const useStyles = makeStyles({
  root: {
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    height: '100vh',
  },
  button: {
    backgroundColor: '#3f51b5',
    color: 'white',
    fontWeight: 'bold',
    fontSize: '1.5rem',
    padding: '1rem 2rem',
  },
});
function App() {
  const classes = useStyles();
  return (
    <div className={classes.root}>
      <Button className={classes.button} variant="contained">
        Hello World
      </Button>
    </div>
  );
}
export default App;

5. 添加Webpack配置

为了能够打包React应用程序，你需要添加Webpack配置。在Electron应用程序的根目录下，创建一个名为webpack.config.js的文件，输入以下代码：

const path = require('path');
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.join(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react'],
          },
        },
      },
    ],
  },
};

在这段代码中，entry指定了应用程序的入口文件，output指定了打包后的文件名和路径，module.rules指定了Babel的转换规则。

6. 修改启动脚本

为了启动React应用程序，你需要修改Electron应用程序的启动脚本。在package.json文件中，将启动脚本修改为以下代码：

"start": "webpack --mode development --watch & electron ."

这将使用Webpack将React应用程序打包为bundle.js，并使用Electron启动应用程序。

7. 渲染React组件

在Electron应用程序的主进程中，你需要使用Electron提供的API来渲染React组件。在main.js文件中，使用以下代码：

const { app, BrowserWindow } = require('electron');
const path = require('path');
function createWindow() {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      preload: path.join(__dirname, 'preload.js'),
    },
  });
  win.loadFile('index.html');
}
app.whenReady().then(() => {
  createWindow();
  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow();
    }
  });
});
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin')    app.quit();
  }
});

在这段代码中，createWindow函数会创建一个Electron窗口，并加载index.html文件。你还需要在preload.js文件中注入React和ReactDOM库：

window.React = require('react');
window.ReactDOM = require('react-dom');

8. 创建HTML文件

在Electron应用程序的根目录下，创建一个名为index.html的文件，输入以下代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello Electron</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="./bundle.js"></script>
  </body>
</html>

在这个文件中，你需要将React组件渲染到id为root的div元素中。

9.运行应用程序

在终端中，使用以下命令启动React应用程序的开发服务器：

npm start

在另一个终端中，使用以下命令启动Electron应用程序：

npm run electron

这样，你就可以在Electron窗口中看到React组件了。

10. 打包和发布应用程序

完成开发后，你需要将应用程序打包并发布。你可以使用Electron提供的打包工具，例如electron-packager和electron-builder，将应用程序打包为可执行文件。你可以将可执行文件发布到应用商店或网站上，以便用户下载和安装。

总之，使用React和Electron一起开发桌面应用程序可以帮助你快速构建跨平台的应用程序，并提供许多强大的功能。通过使用React构建Web界面，你可以使用熟悉的工具和技术来构建应用程序。如果你想构建一个桌面应用程序，React和Electron可能是一个不错的选择。

到此这篇关于React使用Electron开发桌面端的详细流程步骤的文章就介绍到这了,更多相关React Electron开发桌面端内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

使用React实现一个简单的待办任务列表
这篇文章主要给大家介绍了使用React和Ant Design库构建的待办任务列表应用,它包含了可编辑的表格,用户可以添加、编辑和完成任务,以及保存任务列表数据到本地存储,文中有相关的代码示例,需要的朋友可以参考下
2023-08-08
react-router browserHistory刷新页面404问题解决方法
本篇文章主要介绍了react-router browserHistory刷新页面404问题解决方法，非常具有实用价值，需要的朋友可以参考下
2017-12-12
React + ECharts动态折线图完整实现代码
ECharts作为国内最流行的可视化库,其实内置了非常强大的线条特效和动画能力,这篇文章主要介绍了React + ECharts动态折线图的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
2026-03-03
使用React Redux实现React组件之间的数据共享
在复杂的React应用中,组件之间的数据共享是必不可少的,为了解决这个问题,可以使用React Redux来管理应用的状态,并实现组件之间的数据共享,在本文中,我们将介绍如何使用React Redux实现Count和Person组件之间的数据共享,需要的朋友可以参考下
2024-03-03
React重新渲染超详细讲解
什么是re-render（重新渲染）？哪些是必要的re-render？哪些是非必要的re-render？如果你对这些问题还不是很明白，那么可以在这篇文章中找到答案
2022-11-11
React 使用Hooks简化受控组件的状态绑定
这篇文章主要介绍了React 使用Hooks简化受控组件的状态绑定，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-03-03
React从Class方式转Hooks详解
这篇文章主要介绍了React从Class方式转Hooks详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-09-09
antd table动态修改表格高度的实现
本文主要介绍了antd table动态修改表格高度的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-07-07
React实现多标签在有限空间内展示
在业务中,需要在一个卡片组件中展示多个标签,标签组件高度相同,宽度和出现顺序不同,要求标签只能在有限的空间内展示,所以本文给大家介绍了React实现多标签在有限空间内展示,需要的朋友可以参考下
2023-12-12
使用React+ts实现无缝滚动的走马灯详细过程
这篇文章主要给大家介绍了关于使用React+ts实现无缝滚动的走马灯详细过程,文中给出了详细的代码示例以及图文教程,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2023-08-08