masterT/README.md Secret

## README.md

      
    Raw
  

              README.md
            
          
    HelloWorld

Setup

npm install
webpack
npm start


## app.jsx
// In renderer process (web page).
const React = require('react');
const ReactDOM = require('react-dom');
const ipcRenderer = require('electron').ipcRenderer;

// ipcRenderer
console.log(ipcRenderer.sendSync('synchronous-message', 'ping')); // prints "pong"
ipcRenderer.on('asynchronous-reply', function(event, arg) {
  console.log(arg); // prints "pong"
});
ipcRenderer.send('asynchronous-message', 'ping');


// React component
var HelloWorld = React.createClass({

  render: function() {
    return (
      <div>Hello World!</div>
    );
  }

});


ReactDOM.render(<HelloWorld />, document.getElementById('hello-world'));

## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
  </head>
  <body>
    <div id="hello-world"></div>
    <script src="./built/app.js"></script>
  </body>
</html>

## main.js
const electron = require('electron');
const app = electron.app;  // Module to control application life.
const BrowserWindow = electron.BrowserWindow;  // Module to create native browser window.
const ipcMain = electron.ipcMain;

// 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.
var mainWindow = null;

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
app.on('ready', function() {
  // Create the browser window.
  mainWindow = new BrowserWindow({width: 800, height: 600});

  // and load the index.html of the app.
  mainWindow.loadURL('file://' + __dirname + '/index.html');

  // Open the DevTools.
  mainWindow.webContents.openDevTools();

  // Emitted when the window is closed.
  mainWindow.on('closed', function() {
    // 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.
    mainWindow = null;
  });
});

ipcMain.on('asynchronous-message', function(event, arg) {
  console.log(arg);  // prints "ping"
  event.sender.send('asynchronous-reply', 'pong');
});

ipcMain.on('synchronous-message', function(event, arg) {
  console.log(arg);  // prints "ping"
  event.returnValue = 'pong';
});

## package.json
{
  "name": "HelloWorld",
  "description": "",
  "version": "0.0.0",
  "main": "main.js",
  "scripts": {
    "start": "electron main.js"
  },
  "devDependencies": {
    "babel-core": "^6.3.21",
    "babel-loader": "^6.2.0",
    "babel-preset-es2015": "^6.3.13",
    "electron-prebuilt": "^0.36.1",
    "redux-devtools": "^2.1.5",
    "webpack": "^1.12.9"
  },
  "dependencies": {
    "babel-preset-es2015": "^6.3.13",
    "babel-preset-react": "^6.3.13",
    "nedb": "^1.5.0",
    "react": "^0.14.3",
    "react-dom": "^0.14.3",
    "redux": "^3.0.4"
  }
}

## webpack.config.js
module.exports = {
  entry: './app.jsx',
  output: {
    path: './built',
    filename: 'app.js'
  },
  target: 'atom',
  module: {
    loaders: [
      {
        loader: 'babel',
        test: /\.jsx$/,
        query: {
          presets: ['es2015', 'react']
        }
      }
    ]
  }
};
	// In renderer process (web page).
	const React = require('react');
	const ReactDOM = require('react-dom');
	const ipcRenderer = require('electron').ipcRenderer;

	// ipcRenderer
	console.log(ipcRenderer.sendSync('synchronous-message', 'ping')); // prints "pong"
	ipcRenderer.on('asynchronous-reply', function(event, arg) {
	console.log(arg); // prints "pong"
	});
	ipcRenderer.send('asynchronous-message', 'ping');


	// React component
	var HelloWorld = React.createClass({

	render: function() {
	return (
	<div>Hello World!</div>
	);
	}

	});


	ReactDOM.render(<HelloWorld />, document.getElementById('hello-world'));
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>Hello World!</title>
	</head>
	<body>
	<div id="hello-world"></div>
	<script src="./built/app.js"></script>
	</body>
	</html>
	const electron = require('electron');
	const app = electron.app; // Module to control application life.
	const BrowserWindow = electron.BrowserWindow; // Module to create native browser window.
	const ipcMain = electron.ipcMain;

	// 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.
	var mainWindow = null;

	// This method will be called when Electron has finished
	// initialization and is ready to create browser windows.
	app.on('ready', function() {
	// Create the browser window.
	mainWindow = new BrowserWindow({width: 800, height: 600});

	// and load the index.html of the app.
	mainWindow.loadURL('file://' + __dirname + '/index.html');

	// Open the DevTools.
	mainWindow.webContents.openDevTools();

	// Emitted when the window is closed.
	mainWindow.on('closed', function() {
	// 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.
	mainWindow = null;
	});
	});

	ipcMain.on('asynchronous-message', function(event, arg) {
	console.log(arg); // prints "ping"
	event.sender.send('asynchronous-reply', 'pong');
	});

	ipcMain.on('synchronous-message', function(event, arg) {
	console.log(arg); // prints "ping"
	event.returnValue = 'pong';
	});
	{
	"name": "HelloWorld",
	"description": "",
	"version": "0.0.0",
	"main": "main.js",
	"scripts": {
	"start": "electron main.js"
	},
	"devDependencies": {
	"babel-core": "^6.3.21",
	"babel-loader": "^6.2.0",
	"babel-preset-es2015": "^6.3.13",
	"electron-prebuilt": "^0.36.1",
	"redux-devtools": "^2.1.5",
	"webpack": "^1.12.9"
	},
	"dependencies": {
	"babel-preset-es2015": "^6.3.13",
	"babel-preset-react": "^6.3.13",
	"nedb": "^1.5.0",
	"react": "^0.14.3",
	"react-dom": "^0.14.3",
	"redux": "^3.0.4"
	}
	}
	module.exports = {
	entry: './app.jsx',
	output: {
	path: './built',
	filename: 'app.js'
	},
	target: 'atom',
	module: {
	loaders: [
	{
	loader: 'babel',
	test: /\.jsx$/,
	query: {
	presets: ['es2015', 'react']
	}
	}
	]
	}
	};