使用 TypeScript 的 React

如何使用 React、TypeScript 和 Electron Forge 创建 Electron 应用

向 TypeScript + Webpack 模板添加 React 支持非常简单，无需复杂的样板代码即可开始。

以下指南已在 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 的更多信息，请参阅 其文档。