Comment on page
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 18, 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
: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 { createRoot } from 'react-dom/client';
const root = createRoot(document.body);
root.render(<h2>Hello from React!</h2>);
// Add this to the end of the existing file
import './app';
Last modified 1mo ago