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.1, and Webpack 4.
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 basic React packages to your dependencies
and the corresponding types to your devDependencies
:
yarn add react react-domyarn add --dev @types/react @types/react-dom
npm install --save react react-domnpm install --save-dev @types/react @types/react-dom
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 fileimport './app';
For more about React, see their documentation.