React with TypeScript
How to create an Electron app with React, TypeScript, and Electron Forge
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 with the TypeScript + Webpack template, then edit the newly created
tsconfig.json
to add the key-value entry "jsx": "react-jsx"
to the "compilerOptions"
section.Add the basic React packages to your
dependencies
and the corresponding types to your devDependencies
:Yarn
NPM
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
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
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';
Last modified 6mo ago