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

Creating the TitleBar component

The next component will represent the title bar:

./app/ts/Components/TitleBar.tsx

import * as React from "react"; 
import { remote } from "electron"; 
import { Header, Navigation, Icon } from "react-mdl"; 
 
export default class TitleBar extends React.Component<{}, {}> { 
 
  private onClose = () => { 
    remote.getCurrentWindow().close(); 
  } 
  render() { 
    return ( 
     <Header  scroll> 
        <Navigation> 
            <a href="#" onClick={this.onClose}><Icon name="close" />            </a> 
        </Navigation> 
    </Header> 
    ); 
  } 
} 

Here, we set up the look and feel using the Header, Navigation, and Icon components of React MDL and subscribe for the click event on the close icon. Furthermore, we import the remote object of the electron module and, by using the getCurrentWindow ...