第一步 在tsconfig.json添加 `"jsx": "react-jsx". { "compilerOptions": { "jsx": "react-jsx", } } 第二步 安装react npm install --save react react-dom npm install --save-dev @types/react @types/react-dom 第三步 使用 import { createRoot } from 'react-dom/client'; const root = ...
前端选用的是 react+antd 进行开发,需要引入的 node 库时在 utils.js 文件下进行引入处理、并通过 es6 方式进行导出,由于electron通信的回调函数在 es6 中并不友好,所以在utils.js中进行统一的异步封装,以xxx-reply作为响应 ipcRenderer 通信的标准格式,调用时直接传入通信事件名await ipcasync('xxx') export const...
当您准备好构建应用程序并将其打包为可执行文件时,您会希望/electron-app/main.js指向index.html由 React.js 生成的静态文件。 构建React.js 应用注意:我们希望 React.js 使用相对路径而不是绝对路径(Electron.js 不喜欢那样),因此将以下内容添加到您的/react-app/package....
React中调用 preload.js(无需引入文件,直接在window对象获取)文件中暴露的 api import React,{Component} from 'react'; import { HashRouter as Router, Link, Route } from'react-router-dom'; import'./App.css'; import { Button } from'element-react'; const Home= () =>( Home ) const About= ...
Electron相当于给React生成的单页面应用套了一层壳,如果涉及到文件操作这类的复杂功能,那么就要依靠Electron的主进程,因为主进程可以直接调用Node.js的API,还可以使用C++插件,这里Node.js的牛逼程度就凸显出来了,既可以写后台的CRUD,又可以做中间件,现在又可以写前端。
React中调用 preload.js(无需引入文件,直接在window对象获取)文件中暴露的 api import React,{Component} from 'react'; import { HashRouter as Router, Link, Route } from'react-router-dom'; import'./App.css'; import { Button } from'element-react'; ...
创建一个React项目 用Electron创建一个桌面应用很简单,但是用HTML+Javascript肯定会需要用到一些前端库来辅助开发。 目前比较主流的前端库Vue.JS、AngularJS以及ReactJS。三个库/框架都很优秀,不过我选择了React。 React创建一个项目其实很繁琐,因为它用了JSX,所以需要配置Babel、webpackorBrowserify ...
由于项目是使用的react搭建的,并且已经部署完成,我们这里就不再对业务上进行过多的更改。这里仅仅介绍怎样在已有的基础上使之变成一个桌面应用。 首先引入electron,在项目所在文件夹运行以下命令 1 npm install --save-dev electron 在安装了electron之后,在根目录下创建main.js文件。
理论上来说,目前的前端框架都能很好地配合Electron进行工作,当然你甚至可以使用原生御三家加上Node.js来进行Electron应用的开发。 在这里,我以我本人的开发喜好为例,讲解一下使用React作为前端界面框架、Ant-Design作为UI库、Electron作为Native支持的项目搭建。
本篇内容将记录并介绍使用Electron来打包已有的React项目; 1、安装Electron npm install -g electron npm install -D electron 我这里使用的是全局安装electron,原因是因为electron包比较大,而且运行Electron这一操作是可复用的,所以我认为全局安装electron更加合适,这里只需要安装一次electron,在哪里都能使用。