使用react快速开发一个桌面应用（app）

短命女 2023-09-30 12:12 30阅读 0赞

**目录**

1.前言：

2.原理总结

3.项目搭建

--------------------

#### 1.前言： ####

> 本文将会介绍使用react结合electron快速搭建一个桌面客户端。

--------------------

#### 2.原理总结 ####

使用electron可以快速生成桌面客户端，而react可以开发我们想要的页面。那么如何将两者结合到一起呢？

> react在开发时会默认起一个localhost:3000的本地服务，而electron可以读取本地文件或者url，我们只需要让electron读取react的local host：3000这个网址就可以了。
> 
> 注意只有本地开发时才会这样，生产环境时，会加载打包后的本地文件。

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5o6l552A5aWP5LmQ5o6l552A6Iie44CC_size_11_color_FFFFFF_t_70_g_se_x_16][]

--------------------

#### 3.项目搭建 ####

**3.1 创建react项目**

npx create-react-app XXX项目名字

**3.2 安装electron**

npm install electron --save-dev

--------------------

**3.3 项目目录如下：**

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5o6l552A5aWP5LmQ5o6l552A6Iie44CC_size_9_color_FFFFFF_t_70_g_se_x_16][]

--------------------

**3.4 新建main.js**

设置客户端的宽高等一些属性

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5o6l552A5aWP5LmQ5o6l552A6Iie44CC_size_18_color_FFFFFF_t_70_g_se_x_16][]

--------------------

**3.5 安装一个小插件 来判断是开发环境还是生产环境**

npm install electron-is-dev --save-dev

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5o6l552A5aWP5LmQ5o6l552A6Iie44CC_size_18_color_FFFFFF_t_70_g_se_x_16 1][]

--------------------

**3.6 package.json文件中加入main.js**

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5o6l552A5aWP5LmQ5o6l552A6Iie44CC_size_14_color_FFFFFF_t_70_g_se_x_16][]

--------------------

**3.7 加一个启动命令**

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5o6l552A5aWP5LmQ5o6l552A6Iie44CC_size_14_color_FFFFFF_t_70_g_se_x_16 1][]

--------------------

**3.8 运行**

需要分别运行两条命令：

react运行启动命令：npm start

electron运行齐东明路：npm run dev

即可完成

--------------------

**4.打包成桌面客户端app**

npm run build

然后在relese目录下可以看到一个.exe文件，就是客户端

如果想要windows或者mac版本的话

可以在打包后再运行npm run win

具体运行命令看自己设置

[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5o6l552A5aWP5LmQ5o6l552A6Iie44CC_size_11_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/aae8cbebcb814890a2b7da7b340e8b41.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5o6l552A5aWP5LmQ5o6l552A6Iie44CC,size_11,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5o6l552A5aWP5LmQ5o6l552A6Iie44CC_size_9_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/1f8ceaa3a1d642028bf6eaad81d12368.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5o6l552A5aWP5LmQ5o6l552A6Iie44CC,size_9,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5o6l552A5aWP5LmQ5o6l552A6Iie44CC_size_18_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/ad7edff745b94a209cd0c741adee42a5.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5o6l552A5aWP5LmQ5o6l552A6Iie44CC,size_18,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5o6l552A5aWP5LmQ5o6l552A6Iie44CC_size_18_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/f74f4144b840445ea6f3804ffeefddba.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5o6l552A5aWP5LmQ5o6l552A6Iie44CC,size_18,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5o6l552A5aWP5LmQ5o6l552A6Iie44CC_size_14_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/cd89956cbfc94f4b862cf34b8e063230.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5o6l552A5aWP5LmQ5o6l552A6Iie44CC,size_14,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5o6l552A5aWP5LmQ5o6l552A6Iie44CC_size_14_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/009f1d8162b748bca7bc1f59c4754c52.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5o6l552A5aWP5LmQ5o6l552A6Iie44CC,size_14,color_FFFFFF,t_70,g_se,x_16