I have created a boilerplate project for Electron used together in conjunction with React and Material UI, because too many projects in Javascript space have too many dependancies and it can be really hard for new developers to join this awesome community with so many options to explore!

You can check github repo for the Electron boilerplate at the end of the post.

The project itself uses Electron as basically only a wrapper for the actual functionality.

If we take a look at src/App.js file it gives a good point for where to continue.

const App = () => ( <div> <Grid container spacing={24}> <Grid item xs={6}> <LeftPanelComponent /> </Grid> <Grid item > <LeftPanelComponent /> </Grid> </Grid> </div> );

Inside the App we define Grid container with different items. The Grid container comes from (at the moment beta version) Material UI and acts in a very similar to Boostraps grid system.

Under: src/components/LeftPanelComponent.js there is an example of a component that gets connected into the grid in App.js .

The example component uses SimpleList component also originating from Material UI.

I know it may seem to be a bit short versed article, but I tried to make code as clear as possible.

Would love some feedback on potential improvements!

References:

Github URL: https://github.com/mitola/boilerplate-electron-material-ui-react

Material UI: (Current beta docs docs) https://material-ui-1dab0.firebaseapp.com/

Material UI Icons: https://www.npmjs.com/package/material-ui-icons

React tap event plugin: https://github.com/zilverline/react-tap-event-plugin

Electron: https://electron.atom.io/