yarn create react-app electron-react
cd electron-react
yarn run eject // 修改react-app打包的路径 / -> ./
vi main.js

main.js

const {
app,
BrowserWindow,
ipcMain
} = require('electron') const path = require('path')
const url = require('url') //保留窗口对象的全局引用,如果不这样做,窗口将会
//当JavaScript对象被垃圾收集时自动关闭。
let mainWindow = null; function createWindow() {
//创建浏览器窗口。f12 查看所有的参数
mainWindow = new BrowserWindow({
width: 800,
height: 600,
// backgroundColor: '#f48', // 优雅地显示窗口
// frame: false
}); /**
* ! 优雅地显示窗口
*/
mainWindow.once('ready-to-show', () => {
win.show()
}) /**
* * 加载本地HTML文件
*/
mainWindow.loadURL('http://localhost:3000')
// mainWindow.loadURL(url.format({
// pathname: path.join(__dirname, 'build', 'index.html'),
// protocol: 'file:',
// autoHideMenuBar: true,
// slashes: true
// })) /**
* * 打开DevTools
*/
mainWindow.webContents.openDevTools() /**
* * 关闭窗口时发出。
*/
mainWindow.on('closed', function () {
//解引用窗口对象,通常你会存储窗口
//如果您的应用程序支持多窗口,则在数组中,现在是时候了
//当你应该删除相应的元素。
mainWindow = null
}); // menu
// require('./menu.js');
} // Electron完成后将调用此方法
// 初始化并准备创建浏览器窗口。
// 一些API只能在发生此事件后才能使用。
app.on('ready', createWindow) //关闭所有窗口时退出。
app.on('window-all-closed', function () {
//在OS X上,应用程序及其菜单栏很常见
//保持活动状态,直到用户使用Cmd + Q显式退出
if (process.platform !== 'darwin') {
app.quit()
}
}) app.on('activate', function () {
//在OS X上,通常会在应用程序中重新创建一个窗口
//点击了dock图标,并且没有其他窗口打开。
if (mainWindow === null) {
createWindow()
}
})

package.json

{
"main": "main.js", "scripts": {
"start": "node scripts/start.js",
"build": "node scripts/build.js",
"test": "node scripts/test.js --env=jsdom", "e-start": "electron .",
"e-build": "npm run build && electron-builder --win --x64",
}

执行 npm run dev

electron+react的更多相关文章

  1. electron+react项目改为typescript

    1.添加typescript依赖 yarn add typescript 2.修改tsconfig.json "isolatedModules": true => " ...

  2. Electron+React+七牛云 实战跨平台桌面应用(最新更新)

    课程资料获取链接:点击这里 前市场上对 Electron 的呼声很高,它几乎是 Web 开发人员开发桌面客户端的唯一途径,很多大厂都使用 Electron 开发自己的原生应用.Electron 天生适 ...

  3. 基于 react + electron 开发及结合爬虫的应用实践🎅

    前言 Electron 是一个可以使用 Web 技术如 JavaScript.HTML 和 CSS 来创建跨平台原生桌面应用的框架.借助 Electron,我们可以使用纯 JavaScript 来调用 ...

  4. 2019 年 React 学习路线图(转)

    转自:https://www.infoq.cn/article/AEkiVAiJf25LZmoUe_yc 之前我们已经介绍了2019 年 Vue 学习路线图,而 React 作为当前应用最广泛的前端框 ...

  5. (转)2019年 React 新手学习指南 – 从 React 学习线路图说开去

    原文:https://www.html.cn/archives/10111 注:本文根据 React 开发者学习线路图(2018) 结构编写了很多新手如何学习 React 的建议.2019 年有标题党 ...

  6. 2019年React学习路线图

    作者|javinpaul 译者|无明 之前我们已经介绍了 2019 年 Vue 学习路线图,而 React 作为当前应用最广泛的前端框架,在 Facebook 的支持下,近年来实现了飞越式的发展,我们 ...

  7. PDF.js Electron Viewer

    PDF.js 是基于 HTML5 解析与渲染 PDF 的 JavaScript 库,由 Mozilla 主导开源. 本文旨在介绍 PDF.js 于 Electron 里如何开始使用,实际尝试了用其 A ...

  8. 2019 front-end web trending

    2019 front-end web trending https://github.com/kamranahmedse/developer-roadmap https://raw.githubuse ...

  9. 一名全栈工程师Node.js之路-转

    Node.js 全球现状 虽然 Node.js 在国内没有盛行,但据 StackOverflow 2016 年开发者调查,其中 node.js .全栈.JavaScript 相关的技术在多个领域(包括 ...

随机推荐

  1. 记录使用yum安装nginx之后的目录问题

    一般来说我们安装nginx的目录都是/usr/local/nginx的,但是用yum安装的目录跟手动安装的不一样,下面是整理的使用yum安装的一些对应目录. nginx执行文件目录:/usr/sbin ...

  2. Unity中的定时器与延时器

    JavaScript中的定时器与延时器,分别是 setInterval.setTimeout,对应的清理函数是:clearInterval.clearTimeout. 而在Unity中,则分别是:In ...

  3. Css3实现波浪线效果1

    一.波浪线 ,常用 .info::before { content: ''; position: absolute; top: 30px; width: 100%; height: 0.25em; b ...

  4. Win10系统的SurfacePro4的启动菜单太多怎么管理,UEFI的启动菜单如何编辑

    有时候多增加了一些硬盘版的PE,会出现下面这种问题,启动项目太多又删不掉(如果你硬盘版的PE修改了文件位置,这个选项还进不去)   关机之后,按开机键和音量+,进入Surface的启动菜单,直接删除原 ...

  5. CentOS7开启docker远程访问并在idea中连接使用

    CentOS7开启docker远程访问并在idea中连接使用 1.编辑/usr/lib/systemd/system/docker.service,配置远程访问.主要是在[Service]这个部分,添 ...

  6. CAS 单点登录【2】自定义用户验证

       基础不太熟的同学可以先去看:CAS 单点登录[1]入门 方案1:CAS默认的JDBC扩展方案: CAS自带了两种简单的通过JDBC方式验证用户的处理器. 1.QueryDatabaseAuthe ...

  7. SQLServer Always On FCI 脑裂及可疑状态修复

    FCI 双节点集群,因为晚上集群节点间的网络中断过.两个节点都觉得还有一个节点宕机,在各节点的集群管理中都看到对方已宕机. 连接到集群IP.提示 msdb 数据库有问题: watermark/2/te ...

  8. 干货!最全羽毛球技术动态分解gif图

    羽毛球的技术千变万化,但是离不开最基本的击球方法.下面通过一组形象的动态图,给你展现羽毛球的基本动作.大家,务必要收藏起来,慢慢体会哦! 一.发球 二.前场技术 1.网前球 2.搓球 3.勾球 4.推 ...

  9. CentOS 6.5 x64下网络配置

    一.自动获取IP地址 #dhclient 自动获取ip地址命令 #ifconfig 查询系统里网卡信息,ip地址.MAC地址 [root@CentOS6 ~]# vi /etc/sysconfig/n ...

  10. amqp笔记

    1.exchange message的生产者可以将消息发送给exchange,然后由exchange路由到不同的queue中. exchange有4种类型: direct exchange:msg只会 ...