React with TypeScript

Adding React support to the TypeScript + Webpack template is fairly straightforward and doesn't require a complicated boilerplate to get started.
The following guide has been tested with React 17, TypeScript 4.3, and Webpack 5.
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
NPM
1
yarn add react react-dom
2
yarn add --dev @types/react @types/react-dom
Copied!
1
npm install --save react react-dom
2
npm install --save-dev @types/react @types/react-dom
Copied!
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:
src/app.tsx
src/renderer.ts
1
import * as React from 'react';
2
import * as ReactDOM from 'react-dom';
3
​
4
function render() {
5
  ReactDOM.render(<h2>Hello from React!</h2>, document.body);
6
}
7
​
8
render();
Copied!
1
// Add this to the end of the existing file
2
import './app';
Copied!
For more about React, see their documentation.

React

Last modified 4mo ago

Copy link

Contents

Create the app and setup the TypeScript config

Add the React dependencies

Integrate React code