Cross-platform Desktop Application Development: Electron, Node, NW.js, and React

Revitalizing the title bar

Until now, our title bar was not really useful. Thanks to the Photon framework, we can already use it as a handle to drag and drop the window across the viewport, yet we are missing windowing actions such as close, maximize, and restore window.

Let's implement them:

./app/js/Components/Header.jsx

import { remote } from "electron"; const win = remote.getCurrentWindow();  export default class 

Header extends React.Component { //....  onRestore = () => {     win.restore();   }     onMaximize = () => {     win.maximize();   }     onClose = () => {     win.close(); 

  } //... } 

We do not go with methods, with properties keeping anonymous functions bound to the object scope. This trick is possible, thanks to babel-plugin-transform-class-properties ...