React 與 TypeScript

如何使用 React、TypeScript 和 Electron Forge 建立 Electron 應用程式

將 React 支援新增至 TypeScript + Webpack 範本相當簡單，不需要複雜的樣板即可開始。

以下指南已使用 React 18、TypeScript 4.3 和 Webpack 5 進行測試。

建立應用程式並設定 TypeScript 組態

使用TypeScript + Webpack 範本建立應用程式，然後編輯新建立的 tsconfig.json，將鍵值條目 "jsx": "react-jsx" 新增至 "compilerOptions" 區段。

新增 React 相依性

將基本的 React 套件新增至您的 dependencies，並將對應的類型新增至您的 devDependencies

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

整合 React 程式碼

您現在應該能夠開始在您的 Electron 應用程式中撰寫和使用 React 元件。以下是如何開始新增 React 程式碼的一個非常簡單的範例

src/app.tsx

import { createRoot } from 'react-dom/client';

const root = createRoot(document.body);
root.render(<h2>Hello from React!</h2>);

src/renderer.ts

// Add this to the end of the existing file
import './app';

如需更多關於 React 的資訊，請參閱他們的說明文件。