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

Creating the container component

Let's now create the container component that we referred to in the entry script:

./app/ts/Containers/App.tsx

import { Layout, Content } from "react-mdl"; 
import * as React from "react"; 
 
import TitleBar from "../Components/TitleBar"; 
import Menu from "../Components/Menu"; 
import Feed from "../Components/Feed"; 
 
export default class App extends React.Component<{}, {}> { 
 
  render() { 
    return ( 
      <div className="main-wrapper"> 
        <Layout fixedHeader fixedDrawer> 
          <TitleBar /> 
          <Menu /> 
          <Content> 
            <Feed  /> 
          </Content> 
        </Layout> 
      </div> 
    ); 
  } 
} 

Here, we import the components Layout and Content from the React-MDL library. We use them to layout our custom components TitleBar, Menu, and Feed. According to the React declaration ...