1.Use scaffolding already erected

2. The Webpack+Electron+React+TypeScript environment. In fact, the official recommended Electron Forge scaffolding tool itself provides such an environment template, which can be set up as follows:

Install the electron forge scaffolding

npm install -g @electron-forge/cli

Create typescript template code using create-electronic-app

NPX create-electronic-app Your project name --template=typescript-webpack

Set JSX in typescript to React

Open the tsconfig.json file in your project folder and add “JSX “: “react” to compilerOptions.

{ "compilerOptions": { ... , "baseUrl": "src", // + "jsx": "react" // + }, "include": [ "src/**/*" ] }Copy the code

Install the React && React ts dependency

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

test

Create a new app. TSX file in the SRC subfolder and type:

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

Open the SRC /renderer.ts file and add the following line at the end: import “./app”

perform

npm run start

Generate the executable using the following command:

npm run make

The generated files can be found under the OUT folder.

More usage ReferencesElectron – forge documents