Macと Electron Forge + React + MUI でPCアプリを作る（その２）で導入したReactをソースに適用していきます。
現状：起動したら main/main.tsによってメインウィンドウが作られ、renderer/index.html に直接記述されたHello Worldが表示されます
次にやること：renderer/index.html に rootを定義し、renderer/index.tsxによって id=”root”をReact Appコンポーネントに置き換えて、Appコンポーネント内に記述されたHello World from React! を表示するようにします
まず、呼び出し先の App.tsx を作成し、Appコンポーネントを作っておきます
$ cd ./src/renderer/ $ vim App.tsx ----- const App = () => { return <div>💖 Hello World from React!</div>; }; export default App; ----- :wq
index.html の Hello Worldの代わりに、呼び出し元の <div id=”root”></div> を記述します
$ vim ../../index.html
-----
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World!</title>
</head>
<body>
<!-- React アプリのマウントポイント -->
<div id="root"></div>
</body>
</html>
index.tsx を修正します。id=”root” を検索し、rootを <App /> に置き換えるコードを書きます
$ vim index.tsx
-----
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import "./index.css";
const root = ReactDOM.createRoot(
document.getElementById("root") as HTMLElement
);
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
-----
:wq起動後に開発ツールが立ち上がらないように、main/main.tsの以下をコメントアウトします
mainWindow.webContents.openDevTools();
$ vim ../main/main.ts ----- . . . // mainWindow.webContents.openDevTools(); . . . ----- :wq
起動してみて、Hello World from React! が表示されればReact Appコンポーネントが正常に呼び出されています。これでReact化ファーストステップはOKです！
$ npm start
次は、簡単な機能を作ってみたいと思います。
Macと Electron Forge + React + MUI でPCアプリを作る（その４）