├── .babelrc ├── .gitignore ├── LICENSE ├── README.md ├── index.html ├── main.js ├── package.json ├── scripts └── main.js └── views └── main.jsx /.babelrc: -------------------------------------------------------------------------------- 1 | { "presets": ["es2015", "react"] } 2 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 Oliver Mader 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in 13 | all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 21 | THE SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # electron-es6-react 2 | 3 | A simple boilerplate app to demonstrate how to use [ES6] and [React] with 4 | [Electron]. It uses [Babel] to automatically transpile ES6 and JSX code, 5 | without depending on any package manager besides `npm`. 6 | 7 | ## How? 8 | 9 | The Node and Electron binaries both take a parameter `-r` that automatically 10 | requires a module before the rest of the code. The `npm start` script is 11 | modified using this, which registers Babel and loads the entry point `main.js`. 12 | 13 | The renderer entry point `index.html` does basically the same, but loads the 14 | `scripts/main.js` file, which renders the `views/main.jsx` component into the `body`. 15 | 16 | ## Installation 17 | 18 | ```bash 19 | git clone https://github.com/b52/electron-es6-react.git 20 | cd electron-es6-react 21 | npm install 22 | npm start 23 | ``` 24 | 25 | [ES6]: http://exploringjs.com/ 26 | [React]: https://facebook.github.io/react/ 27 | [Electron]: http://electron.atom.io/ 28 | [Babel]: http://babeljs.io 29 | 30 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | electron es6 react boilerplate 5 | 6 | 7 | 8 |
9 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /main.js: -------------------------------------------------------------------------------- 1 | import { app, BrowserWindow } from 'electron'; 2 | 3 | let mainWindow = null; 4 | 5 | app.on('window-all-closed', () => { 6 | if (process.platform != 'darwin') { 7 | app.quit(); 8 | } 9 | }); 10 | 11 | app.on('ready', () => { 12 | mainWindow = new BrowserWindow({width: 800, height: 600}); 13 | mainWindow.loadURL('file://' + __dirname + '/index.html'); 14 | mainWindow.on('closed', () => { 15 | mainWindow = null; 16 | }); 17 | }); 18 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "electron-es6-react", 3 | "version": "0.1.0", 4 | "main": "main.js", 5 | "license": "MIT", 6 | "repository": "b52/electron-es6-react", 7 | "scripts": { 8 | "start": "electron -r babel-register ." 9 | }, 10 | "dependencies": { 11 | "babel-preset-es2015": "^6.3.13", 12 | "babel-preset-react": "^6.3.13", 13 | "babel-register": "^6.3.13", 14 | "react": "^15.3.2", 15 | "react-dom": "^15.3.2" 16 | }, 17 | "devDependencies": { 18 | "electron": "^1.4.3" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /scripts/main.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import Main from '../views/main.jsx'; 4 | 5 | window.onload = function(){ 6 | ReactDOM.render(
, document.getElementById('app')); 7 | } 8 | -------------------------------------------------------------------------------- /views/main.jsx: -------------------------------------------------------------------------------- 1 | 'use babel'; 2 | 3 | import React from 'react'; 4 | 5 | export default class Main extends React.Component { 6 | render() { 7 | return
Hello from React with ES6 :)
; 8 | } 9 | } 10 | --------------------------------------------------------------------------------