Like Photon, React desktop provides native-like user interface widgets to be used in Electron and the nw.js application. But here it provides a more comprehensive set of widgets. The same set of component sets is available for both Mac and Windows as separate packages. The only advantage of using these kinds of a library is that they provide native looks like widgets and CSS components. As the Electron renders your application into a web page, you can use any of the frameworks that you are using for developing your web applications. In this section, let's discuss these widgets and use it with Electron and React for building a desktop application.

Install the library using npm as follows:

npm install react-desktop --save

Let's create some basic user interface with the react-desktop library. Here we are not going to cover all the components. We will be creating a small UI piece of code to get the details of how this kind of frameworks works. Let's update our app.js with following code:

'use strict'; 
import ReactDOM from 'react-dom'; 
import React, { Component } from 'react'; 
import { View, TitleBar } from 'react-desktop/macOs'; 

import './style.css';

export default class AppComponent extends Component {
  constructor() { 
    super(); 
    this.state = { isFullscreen: false }; 
  } 
  render() { 
    return (
      <div> 
        <TitleBar 
          controls 
          title="Electron - React Desktop"
          isFullscreen={this.state.isFullscreen} 
          onCloseClick={() => console.log('Close window')} 
          onMinimizeClick={() => console.log('Minimize window')} 
          onMaximizeClick={() => console.log('Mazimize window')} 
          onResizeClick={() => this.setState({ isFullscreen: !this.state.isFullscreen })} 
        /> 
        <div style={{padding: 10}}>
        </div>
      </div> 
    ); 
  } 
} 
ReactDOM.render(<AppComponent />, document.getElementById('root'));

It's just a basic React component. It renders the Titlebar component into the webpage. You can see various events related to the Titlebar component for close, minimize, and maximize. You need to manually implement those methods and attach the proper behavior to the Electron window shell. Let's look at some of the components provided by the React desktop in detail.