React + Electron 搭建一个桌面应用

正文

请到「今天看啥」查看全文

组合:

Electron 创建的应用使用网页作为其 GUI ,因此你可以将其当成由 JavaScript 控制的迷你精简版Chromium 浏览器。也可以将 Electron 当成 node.js 变体，只不过它更专注于桌面应用而非 Web 服务器。在 Electron 中, 把 package.json 中设定的 main 脚本的所在进程称为 主进程 。这个进程中运行的脚本也可通过创建网页这种方式来展现其 GUI。 因为 Electron 是通过 Chromium 来显示页面,所以 Chromium 自带的多进程架构也一同被利用。这样每个页面都运行着一个独立的进程,它们被统称为 渲染进程 。通常来说,浏览器中的网页会被限制在沙盒环境中运行并且不允许访问系统原生资源。但是由于 Eelectron 用户可在页面中调用 Node.js API，所以可以和底层操作系统直接交互。

优缺点？

总之，优点肯定大于缺点。

优点:

方便快捷的开发桌面应用，跨平台，对前端开发者友好，活跃的社区，丰富的api......

缺点:

性能肯定比不上原生的桌面应用，发布的包貌似有一点点大。

怎么开始?

如果不是假前端，那么你电脑肯定安装好了 git 和 node。

# github上有一个 electron-quick-start 仓库克隆下来
git clone https://github.com/electron/electron-quick-start
# 进入文件夹
cd electron-quick-start
# 安装依赖包并运行
npm install && npm start

然后，你桌面应用就创建成功了如下图所示！

打开你的 electron-quick-start 文件夹，你的项目结构如下图：

其中，main.js 是你的启动文件，index.html 是你的入口文件。

React 结合 Electron

上面简单的介绍了一下 Electron，下面介绍一下如何将 React 和 Electron 结合起来。

创建一个React项目

首先你得有一个 React 项目，由于太多繁琐的配置和懒惰的自己，我们这里就用 Facebook 提供的 create-react-app 来快速创建一个 knownsec-fed 项目。

# 安装 create-react-app 命令,如果已将安装请忽略
npm install -g create-react-app
# 创建 knownsec-fed 项目
create-react-app knownsec-fed
# 启动项目( create-react-app 真的超级方便啊)
cd knownsec-fed && npm start

于是，浏览器 http://localhost:3000/ 就会出现着如下图界面，一个 react 项目创建成功：

请到「今天看啥」查看全文