Electron-React-TS-Starter 项目教程

1. 项目的目录结构及介绍

Electron-React-TS-Starter 项目的目录结构如下：

electron-react-ts-starter/
├── main/                     # 主进程代码目录
│   ├── index.ts              # 主进程入口文件
│   ├── preload.ts            # 预加载脚本文件
│   └── package.json          # 主进程包配置文件
├── renderer/                 # 渲染进程代码目录（React 应用）
│   ├── public/               # 公共静态文件目录
│   │   └── index.html        # 页面入口文件
│   ├── src/                  # 源代码目录
│   │   ├── index.tsx         # React 应用入口组件
│   │   └── ...               # 其他 React 组件和资源
│   └── package.json          # 渲染进程包配置文件
├── .gitignore                # Git 忽略文件
├── LICENSE                   # 许可证文件
└── README.md                 # 项目说明文件

• main/: 包含主进程的所有代码，负责 Electron 应用的启动和运行。
• renderer/: 包含 React 应用的所有代码，是用户界面的一部分。
• public/: 渲染进程的公共目录，通常包含 index.html 文件。
• src/: React 应用的源代码目录。
• .gitignore: 指定 Git 忽略跟踪的文件和目录。
• LICENSE: 项目使用的许可证信息。
• README.md: 项目说明文件，包含项目的介绍和使用说明。

2. 项目的启动文件介绍

主进程启动文件 (main/index.ts)

主进程的入口文件 index.ts 负责创建 Electron 应用程序窗口，并加载渲染进程的 React 应用。以下是一个简化的例子：

import { app, BrowserWindow } from 'electron';

function createWindow() {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false,
    },
  });

  win.loadURL(`file://${__dirname}/../renderer/public/index.html`);
}

app.whenReady().then(createWindow);

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

渲染进程启动文件 (renderer/src/index.tsx)

渲染进程的入口组件 index.tsx 通常包含以下内容：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

3. 项目的配置文件介绍

主进程配置文件 (main/package.json)

主进程的 package.json 文件包含项目的依赖和脚本，例如：

{
  "name": "main",
  "version": "1.0.0",
  "main": "index.ts",
  "scripts": {
    "start": "electron ."
  },
  "dependencies": {
    "electron": "^11.0.0"
  }
}

渲染进程配置文件 (renderer/package.json)

渲染进程的 package.json 文件包含 React 应用的依赖和构建脚本，例如：

{
  "name": "renderer",
  "version": "1.0.0",
  "private": true,
  "dependencies": {
    "react": "^17.0.0",
    "react-dom": "^17.0.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "release": "npm run build && electron-builder --dir"
  }
}

以上是 Electron-React-TS-Starter 项目的简要教程，希望对您有所帮助。