electron整合react入门（踩坑）记录（2）

最新推荐文章于 2024-04-10 10:09:51 发布
最新推荐文章于 2024-04-10 10:09:51 发布
阅读量1.2k 收藏
点赞数
分类专栏： electron 文章标签： electron react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_15241071/article/details/85050328
版权
本文记录了在electron项目中尝试整合react的过程，遇到的npm安装electron时的错误及解决办法，包括如何启动electron应用，并设置了package.json的electron启动命令。目前仅实现了在react项目中启动electron，但尚未完成两者的完全整合。此外，分享了根据简书教程学习electron+react的心得体会，以及csdn博客上传图片的小技巧。
摘要由CSDN通过智能技术生成

1. 前言

     在electron入门（踩坑）记录（1）(https://blog.csdn.net/qq_15241071/article/details/85049159）中，才刚刚运行出来electron官方demo，没高兴几秒，然后在简书electron+react教程中（https://www.jianshu.com/p/ea0852003209），用create-react-app生成的项目里面安装electron，em...凉了，开始报错。我用的命令是npm install electron --save --dev

然后懵逼了不知道怎么办，不管了先执行npm install electron试试，我靠没报错下载成功了，然后我勇(作）敢(死)又去执行了一次npm install electron --save --dev嗯也成功了。所以报错的时候当作是幻觉吧，多执行几次试试...

2. 启动

    经历这一波小插曲之后，终于看到package.json里面有了electron，我泪目了你们呢 

然后在package.json里面设置electron启动命令


                

        

        

    

  


        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  Klingonsss
                
              
            

            

                关注
              
            

        

        

          
      

      

            

                专栏目录
          









                



	

		

			

				
					
electron与react结合开发（一）

				
			

			

				

					赵盛的博客
				

				

					06-06
					
					3858
					
				

			

		

		

			
				
创建react项目
按照官网步骤进行操作即可
引入electron
注意:引入electron的时候可能会因为网络原因导致失败，建议替换成国内源
npm config set ELECTRON_MIRROR=https://npm.taobao.org/mirrors/electron/
使用yarn将npm换为yarn即可
创建main.js
可以参照electron官方示例。在根目录下创建main.js
// Modules to control application life and create 

			
		

	



                

            
              



	

		

			

				
					
electron整合react入门（踩坑）记录（3）

				
			

			

				

					萧墨的博客
				

				

					12-17
					
					5009
					
				

			

		

		

			
				
1. 前言

    根据简书一篇文章，记录入门过程 https://www.jianshu.com/p/ea0852003209

    electron入门（踩坑）记录（1）https://blog.csdn.net/qq_15241071/article/details/85049159

    electron入门（踩坑）记录（2）https://blog.csdn.net/qq_15...

			
		

	



              


  
              

                


	

		

			

				
					
WebView2兼容VUE ,替代Electron/CefSharp的放哪(自定义浏览器内核)

				
			

			

				

					12-30
				

			

		

		

			
				
WebView2兼容VUE ,替代Electron/CefSharp的放哪(自定义浏览器内核)

			
		

	





	

		

			

				
					
Electron结合React使用

					
热门推荐

				
			

			

				

					问白的博客
				

				

					03-26
					
					1万+
					
				

			

		

		

			
				
React Electron
创建 react 工程
使用 create-react-app脚手架创建 react 工程
npx create-react-app my-app

安装 electron
本地项目安装electron 依赖
npm i electron --save

修改工程
修改package.json文件


在package.json 中添加 homepage和main字段...

			
		

	



		

			
		



	

		

			

				
					
electron 集成react

				
			

			

				

					weixin_43294560的博客
				

				

					05-03
					
					1830
					
				

			

		

		

			
				
1、创建react项目
npx create-react-app 项目名称
2、安装electron
cnpm i electron --save
3、在package.json 中添加
“main”: “main.js”,
“homepage”: “.”,

4、在package.json的script中添加脚本命令
“electron-dev”: “electron . dev”,
“elec...

			
		

	





	

		

			

				
					
electron与react整合

				
			

			

				

					weixin_34259232的博客
				

				

					04-03
					
					1457
					
				

			

		

		

			
				
2019独角兽企业重金招聘Python工程师标准>>>   
                                        
         ...

			
		

	





	

		

			

				
					
Electron集成React和Vue

				
			

			

				

					duansamve的博客
				

				

					08-23
					
					798
					
				

			

		

		

			
				
Electron集成React或者Vue的方式很多，这是灵活性比较大的一种

			
		

	





	

		

			

				
					
electron整合react入门（踩坑）记录（1）

				
			

			

				

					萧墨的博客
				

				

					12-17
					
					2838
					
				

			

		

		

			
				
1. 前言

    之后的工作会涉及到用electron，所以就先玩了一下官方demo


https://github.com/electron/electron-quick-start

 下载项目到本地，然后和很多node项目一样，执行npm install->npm start即可。

  然后发现下载electron速度巨慢，于是乎开始设置淘宝镜像： npm config set...

			
		

	





	

		

			

				
					
Electron整合React使用搭建开发环境的步骤详解

				
			

			

				

					10-15
				

			

		

		

			
				
以下是对“Electron 整合 React 使用搭建开发环境的步骤详解”的详细阐述。  首先，创建 React 项目。使用 `npx create-react-app doc` 命令，可以快速生成一个基本的 React 项目。进入项目目录 `cd doc` 后，我们...

			
		

	





	

		

			

				
					
数据提取工具—electron+react

				
			

			

				

					04-02
				

			

		

		

			
				
1、用electron+react制作的一个数据提取工具，react渲染页面，electron主线程调用本地sqlite数据库 2、数据和依赖包删除了，测试的时候自行添加数据与依赖 3、开发测试，首先用npm start 启动react 然后再用electron...

			
		

	





	

		

			

				
					
React+Electron封装并打包成桌面应用

				
			

			

				

					01-07
				

			

		

		

			
				
0、react工程建立
react工程建立见： 一个react工程的建立
1、安装electron
项目目录下：
npm install -save electron

2、main.js
项目更目录下载添加main.js,基本内容：
const { app, BrowserWindow,
    ipcMain
} = require('electron');
var net = require('net');
let win;
const createWindow = () => {
    win = new BrowserWindow({
        width: 800,
   

			
		

	





	

		

			

				
					
electron-react-quick-start:使用电子并做出React以快速入门的模板

				
			

			

				

					05-23
				

			

		

		

			
				
react + electron + ant 的脚手架项目。
包含调用本地DLL和activex控件的示例。
项目基于.
快速开始
需要安装  和  (示例使用32位dll文件，nodejs需使用32位版本)。
打开命令窗口:
npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global
npm config set electron_mirror https://npm.taobao.org/mirrors/electron/ --global
# 克隆项目到本地
git clone https://github.com/fddi/electron-react-quick-start
# 转到项目目录


			
		

	





	

		

			

				
					
electronic-react-webpack：带有ES6，JSX和热重载的Electron + React 16 + Webpack 4模板

				
			

			

				

					02-04
				

			

		

		

			
				
电子React袋
尝试使用此Electron＆React 16和Webpack 4模板进行快速开发和原型制作。
安装
# Clone the repository
$ git clone https://github.com/pastahito/electron-react-webpack
# Go into the repository
$ cd electron-react-webpack
# Install dependencies
$ npm install
开发
只需运行此命令即可开始使用热重装进行开发。 
$ npm start
包含什么
JSX对React的支持。
 CSS模块支

			
		

	





	

		

			

				
					
Electron+React 搭建桌面应用

					
最新发布

				
			

			

				

					hxy199421的博客
				

				

					04-10
					
					1659
					
				

			

		

		

			
				
当用户点击一个按钮或者菜单项来执行这些操作时，渲染进程会向主进程发送一个消息，请求执行相应的操作。主进程接到消息后，调用系统API来完成文件操作，并将操作结果发送回渲染进程，渲染进程根据主进程的响应更新界面状态等。当用户在界面上点击最小化或者最大化，或者更改某些全局设置（如语言偏好、主题等）时，这些更改通常由渲染进程触发，但实际执行由主进程负责。在这种情况下，渲染进程调用主进程的方法以应用这些更改，但不需要等待主进程的回包，因为用户界面的响应可以立即更新，而不必等待设置保存的确认。

			
		

	





	

		

			

				
					
Electron-React 实战(一)

				
			

			

				

					Brian_H的博客
				

				

					04-12
					
					1330
					
				

			

		

		

			
				
Electron
Electron是一个运行环境，它将Chromium和Node集成到同一个适合传统桌面Web应用程序开发的运行时环境，并基于Nodejs实现一些网页浏览器难以实现的功能。也就是说，可以通过Electron，用Javascript开发出跨平台的桌面应用。
React
React 是Facebook公司开发的web前端应用框架，以其轻量和运行效率高而著称，目前github上已有将近1...

			
		

	





	

		

			

				
					
electron27+react18集成搭建跨平台应用|electron窗口多开

				
			

			

				

					码农ICoding
				

				

					10-26
					
					1290
					
				

			

		

		

			
				
electron27-vite4-react18基于electron27结合vite4构建工具快速创建react18跨端应用实践。综上就是electron27+react18创建跨端桌面应用的一些分享，希望能喜欢~~这里选择使用vite.js构建工具来快速创建一个react18项目。在项目根目录下新建一个主进程文件electron-main.js。创建桌面端项目的一些分享，里面有打包的一些配置，感兴趣可以去看看。这样一个简单的react18项目就已经创建完毕了。配置vite.config.js主进程入口。

			
		

	





	

		

			

				
					
Electron整合React使用搭建开发环境

				
			

			

				

					归子莫的博客
				

				

					06-06
					
					798
					
				

			

		

		

			
				
Electron整合React使用搭建开发环境
博客说明

文章所涉及的资料来自互联网整理和个人总结，意在于个人学习和经验汇总，如有什么地方侵权，请联系本人删除，谢谢！

简介
用于构建用户界面的 JavaScript 库
步骤
首先创建React
npx create-react-app doc进入到doc项目
cd doc安装electron
npm install electron --save-dev安装依赖
判断是否为生产环境
cnpm install electron-is-dev --save

			
		

	





	

		

			

				
					
记Electron初体验的踩坑之旅

				
			

			

				

					weixin_44466651的博客
				

				

					01-25
					
					1094
					
				

			

		

		

			
				
为什么要写electron的背景就是，在平常的业务中因为项目需要做国际化，所以经常需要反复跳来跳去来复制i18n的key，然后又要在几千行的json文件中去找这个key在哪个对象里面。请注意，上述步骤只是一个基本的示例，你可以根据自己的需求进行更多的配置和定制。因为此前没有任何Electron的基础，所以第一时间是找到了大名鼎鼎的GPT先生，我向它具体阐述了我的需求，它很快的给出了它的答案了。请注意，无论你选择哪种方法，都应该谨慎控制渲染进程对主进程资源的访问，并遵循安全性最佳实践，以防止潜在的安全漏洞。

			
		

	





	

		

			

				
					
那些玩electron遇到的坑和解决方案

				
			

			

				

					kisshd的博客
				

				

					06-28
					
					1443
					
				

			

		

		

			
				
坑1_无框模式的窗口
自带的和开关窗口好丑，作为一个设计师绝对忍不了，于是乎自接写了一个窗口，但是不巧在下只懂一点点的js，给我累的，于是在各种地方寻找可以使用的无框关闭，顶设，最大化，最小化的方法，但是因为这个被坑了好多次，好家伙大家提供的方式都有一个弊端，一但窗口关闭了就会导致无法关闭而报错，大家写的都是简单的方式的都是单窗口的，于是乎经过很多很多次摸爬滚打找到了方式
//首先引入下需要使用到的函数
let {ipcMain}= require('electron');
//监听窗口关闭请求
  ipc

			
		

	





	

		

			

				
					
electron与react结合的数据提取工具开发指南

				
			

			

				

					
				

			

		

		

			
				
资源摘要信息:"数据提取工具—electron+react"  知识点:  1. Electron + React技术组合: Electron是一个使用JavaScript, HTML和CSS等网页技术来构建跨平台的桌面应用程序的框架，React是一个用于构建用户界面的...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值