Electron + TypeScript + React の環境構築手順のメモ

Web開発の知識をそのままデスクトップアプリ開発に使えるということで、Electronが面白そうだな～と思っています。

jsに慣れている方であれば環境構築に悩むことはなさそうですが、筆者はReactもElectronも初心者なので環境構築の手順をメモしておきます

環境

• OS: Windows 10 Home / 21H2 / 19044.2604
• Node.js: v19.7.0

手順

1. Webpack + Typescriptの環境を作る

npm init electron-app@latest my-app -- --template=webpack-typescript

この状態でnpm startするとアプリはこんな感じ

2. tsconfig.json のcompilerOptionsに "jsx": "react-jsx"を追加する

# tsconfig.json
{
  "compilerOptions": {
+    "jsx": "react-jsx",

3. reactのインストール

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

4. コードの追加

src/app.tsxファイルを作って追加

import * as ReactDOM from 'react-dom';

function render() {
  ReactDOM.render(<h2>Hello from React!</h2>, document.body);
}

render();

src/renderer.ts に appの読み込みを追記

import './app';

npm startするとアプリは次のようになっている

参考

• Webpack + Typescript - Electron Forge
• React with TypeScript - Electron Forge