使用react快速开发一个桌面应用（app）_react制作pc版app

目录

1.前言：

2.原理总结

3.项目搭建

---

1.前言：

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

---

2.原理总结

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

react在开发时会默认起一个localhost:3000的本地服务，而electron可以读取本地文件或者url，我们只需要让electron读取react的local host：3000这个网址就可以了。

注意只有本地开发时才会这样，生产环境时，会加载打包后的本地文件。

 

---

3.项目搭建

3.1 创建react项目

npx create-react-app XXX项目名字

3.2 安装electron

npm install electron --save-dev

---

3.3 项目目录如下：

 

 

---

3.4 新建main.js

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

---

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

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

 

---

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

 

---

3.7 加一个启动命令

---

3.8 运行

需要分别运行两条命令：

react运行启动命令：npm start

electron运行齐东明路：npm run dev

即可完成

---

4.打包成桌面客户端app

npm run build

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

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

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

具体运行命令看自己设置