概述
- Electron 是一个使用 JavaScript, HTML 和 CSS 等 Web 技术创建原生程序的框架，它负责比较难搞的部分，你只需把精力放在你的应用的核心上即可。
- React: A JavaScript library for building user interfaces.
- Bootstrap: 简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。
结合最快捷的开发方式，从搭建环境开始
创建一个React项目，使用WebStrom IDE
-
安装electron模块
npm install --save electron -
安装path模块
npm install --save path -
修改package.json配置
a). 添加入口
"main":"main.js"b). 添加homepage
"homepage":"."c). 添加devMode, 用于判别开发模式，方便main.js代码编写
"devMode": true/false -
添加运行主文件main.js,并修改相关代码
const {app, BrowserWindow} = require('electron'); const path = require('path'); const url = require('url'); const pkg = require('./package.json'); // Keep a global reference of the window object, if you don't, the window will // be closed automatically when the JavaScript object is garbage collected. let win; function createWindow() { // Create the browser window. win = new BrowserWindow({ width: 800, height: 600, autoHideMenuBar: true, maximizable: false, }); // and load the index.html of the app. if (pkg.devMode) win.loadURL('http://localhost:3000/'); else win.loadURL(url.format({ pathname: path.join(__dirname, './build/index.html'), protocol: 'file:', slashes: true })); // Open the DevTools. // win.webContents.openDevTools(); // Emitted when the window is closed. win.on('closed', () => { // Dereference the window object, usually you would store windows // in an array if your app supports multi windows, this is the time // when you should delete the corresponding element. win = null; }); } // This method will be called when Electron has finished // initialization and is ready to create browser windows. // Some APIs can only be used after this event occurs. app.on('ready', createWindow); // Quit when all windows are closed. app.on('window-all-closed', () => { // On macOS it is common for applications and their menu bar // to stay active until the user quits explicitly with Cmd + Q if (process.platform !== 'darwin') { app.quit(); } }); app.on('activate', () => { // On macOS it's common to re-create a window in the app when the // dock icon is clicked and there are no other windows open. if (win === null) { createWindow(); } }); // In this file you can include the rest of your app's specific main process // code. You can also put them in separate files and require them here.*: 代码中有一处代码针对开发环境及发布环境做了相应的判断，如下：
if (pkg.devMode) win.loadURL('http://localhost:3000/'); else win.loadURL(url.format({ pathname: path.join(__dirname, './build/index.html'), protocol: 'file:', slashes: true })); -
添加运行的脚本, 运行electron项目
//package.json 修改 { "name": "media", "version": "0.1.0", "private": true, "main": "main.js", "homepage": ".", "devMode": true, "dependencies": { "electron": "^2.0.2", "path": "^0.12.7", "react": "^16.4.0", "react-bootstrap": "^0.32.1", "react-dom": "^16.4.0", "react-scripts": "^1.1.4" }, "devDependencies": {}, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test --env=jsdom", "eject": "react-scripts eject", "electron-serv": "npm start", //添加的运行脚本命令 "electron-start": "electron ." //添加的运行脚本命令 } } -
添加bootstrap模块
npm install --save react-bootstrap -
添加bootstrap代码，运行并测试
import React, {Component} from 'react'; import logo from './logo.svg'; import './App.css'; import {Button, ButtonToolbar,} from 'react-bootstrap'; class App extends Component { _showAlert() { alert('Hello'); } render() { return ( <div className="App"> <div className="App-header"> <img src={logo} className="App-logo" alt="logo"/> <h2>Welcome to React</h2> </div> <ButtonToolbar> {/* Standard button */} <Button onClick={this._showAlert.bind(this)}>Default</Button> {/* Provides extra visual weight and identifies the primary action in a set of buttons */} <Button bsStyle="primary">Primary</Button> {/* Indicates a successful or positive action */} <Button bsStyle="success">Success</Button> {/* Contextual button for informational alert messages */} <Button bsStyle="info">Info</Button> {/* Indicates caution should be taken with this action */} <Button bsStyle="warning">Warning</Button> {/* Indicates a dangerous or potentially negative action */} <Button bsStyle="danger">Danger</Button> {/* Deemphasize a button by making it look like a link while maintaining button behavior */} <Button bsStyle="link" href='http://www.baidu.com'>Link</Button> </ButtonToolbar> <span>What !!!</span> <div style={{backgroundColor: 'red', width: 200, height: 200,}}></div> <p className="App-intro"> To get started, edit <code>src/App.js</code> and save to reload. </p> </div> ); } } export default App;*: 注意，有可能上面代码在运行后并不能正确加载出bootstrap的样式，我们需要修改public文件夹中index.html的文件内容，添加bootstrap的css-link支持，如下：
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="theme-color" content="#000000"> <!-- manifest.json provides metadata used when your web app is added to the homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/ --> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- Optional theme --> <!--<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"--> <!--integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">--> <link rel="manifest" href="%PUBLIC_URL%/manifest.json"> <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico"> <!-- Notice the use of %PUBLIC_URL% in the tags above. It will be replaced with the URL of the `public` folder during the build. Only files inside the `public` folder can be referenced from the HTML. Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will work correctly both with client-side routing and a non-root public URL. Learn how to configure a non-root public URL by running `npm run build`. --> <title>React App</title> </head> <body> <div id="root"></div> <!-- This HTML file is a template. If you open it directly in the browser, you will see an empty page. You can add webfonts, meta tags, or analytics to this file. The build step will place the bundled scripts into the <body> tag. To begin the development, run `npm start` or `yarn start`. To create a production bundle, use `npm run build` or `yarn build`. --> </body> </html>
最后
运行出来带有热更新属性的，代码改动后程序会自动更新。前提是您可能需要同时运行:
npm start && electron .
效果如下：
深度截图_选择区域_20180529154038.png
