Electron + React学习记录_06_项目实战-远程控制_2

目录架构

• common存放渲染进程、主进程可复用代码
• 前端框架在render/src/页面
• 构建产物在pages/页面
• 纯JS直接在Pages页面下

与React框架结合

跟Electron在一起工作要做些什么呢?

• 书写React，并且编译它。CRA 其实一个好的选择。·
  • 处理引入electron/node模块:
  • webpack配置: https://webpack.js.org/configuration/target/
  • window.require
• windows根据环境信息加载本地或者devServer url
  • electron-is-dev
• 启动命令适配。等到编译成功再启动Electron
  • concurently
  • wait on

创建项目目录,进行初始化

配了一上午的环境,还是不行
建议直接用这个模板

基础页面

上面为控制码,下面输入,旁边一个确定按钮
(抽象画师)

启动程序

在cmd输入

yarn start

//写个主页面组件
const Gui = () =>{
   
  const [remoteCode,setRometeCode] = useState('')//输入的控制码
  const [localCode,setLocalCode] = useState('')//自己的控