实验环境

VS code
WSL（Windows自带的Linux）

架构说明

由于我们是用electron构建桌面应用，所以不需要什么开发服务器，更不需要vite这些脚手架搭建。直接用esbuild编译JSX代码即可。Joplin这个开源的笔记系统正是这么做的，它在github上有51K的star。

项目结构

tree -I node_modules
.
├── app.jsx
├── index.html
├── main.js
└── package.json

安装依赖

npm i react react-dom
npm i -D electron esbuild

app.jsx

import React from 'react';
import ReactDOM from 'react-dom/client';

function MyButton() {
  return (
    <button>按钮</button>
  );
}

function MyApp() {
  return (
    <div>
      <h1>hello</h1>
      <h1>你好</h1>
      <MyButton />
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<MyApp />);

index.html

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <h1>Hello from Electron renderer!</h1>
    <p>👋</p>
    <div id="root"></div>
    <script src="./out.js"></script>
  </body>
</html>

main.js

const { app, BrowserWindow } = require('electron/main')

const createWindow = () => {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: false,
      contextIsolation: true
    },
    // 针对X server转发的优化
    show: false
  })

  win.loadFile('index.html')

  // 窗口准备好后再显示，避免X server转发问题
  win.once('ready-to-show', () => {
    win.show()
  })
}

app.whenReady().then(() => {
  createWindow()

  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow()
    }
  })
})

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

package.json

上面用npm安装过依赖应该会自动生成一个package.json，添加start脚本

{
  "main": "main.js",
  "scripts": {
    "start": "esbuild app.jsx --bundle --outfile=out.js && electron . --disable-gpu"
  },
  "devDependencies": {
    "electron": "^38.2.2",
    "esbuild": "0.25.10"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  }
}

启动

npm run start

在这里插入图片描述

注：解决中文乱码请看我这篇文章

如何解决electron在WSL运行显示乱码的问题

# electron # react.js # javascript
Logo
AI Agent技术社区

Agent 垂直技术社区，欢迎活跃、内容共建。

更多推荐

cover

有哪些零售数据分析平台品牌？2026年零售行业数据运营工具盘点

avatar AI Agent技术社区

AI Agent 30天速成｜Day7 笔记

AI Agent 30天速成｜Day7 笔记 引言：从基础到进阶的第七天今天是我们AI Agent速成课程的第7天。在前六天里，我们已经学习了Agent的基础概念、环境搭建、简单对话系统、记忆机制、工具调用以及多轮交互。今天，我们将深入探讨一个核心进阶主题：Agent的决策与规划能力。这不仅是从“被动响应”到“主动思考”的关键一步，也是构建智能Agent的里程碑。## 基础概念回顾：Agent决策

avatar AI Agent技术社区

2026 AI Agent 搜索 Skill 分类选型指南：海外 SaaS、国内方案与开源部署全解析

AIAgent搜索技能全景分析与AnySearch差异化优势 摘要：本文系统梳理AIAgent搜索技能的三大技术路线：国内合规方案（如AnySearch、百度API）、海外SaaS服务（TavilySearch、Exa.ai）及开源私有化方案（SearXNG）。重点解析垂直场景面临的公网数据浅层化、非结构化输出、溯源困难等核心痛点，并深入介绍AnySearch的创新解决方案：采用联邦多源架构覆盖2

avatar AI Agent技术社区