React with TypeScript

Adding React support to the TypeScript + Webpack template is fairly straightforward and doesn't require a complicated boilerplate to get started.

Create the app and setup the TypeScript config

Create the app with the TypeScript + Webpack template, then edit the newly created tsconfig.json to add the key-value entry "jsx": "react" to the "compilerOptions" section.

Add the React dependencies

Add the basic React packages to your dependencies and the corresponding types to your devDependencies:

yarn add react react-dom
yarn add --dev @types/react @types/react-dom

npm install --save react react-dom
npm install --save-dev @types/react @types/react-dom

Integrate React code

You should now be able to start writing and using React components in your Electron app. The following is a very minimal example of how to start to add React code:

import * as React from 'react';
import * as ReactDOM from 'react-dom';
​
function render() {
  ReactDOM.render(<h2>Hello from React!</h2>, document.body);
}
​
render();

// Add this to the end of the existing file
import './app';

For more about React, see their documentation.