React + Electron Proyecto Práctico

En este capítulo, crearemos una aplicación de notas con React + Electron. Este proyecto práctico se llama ReactElectronNotes e incluye funciones como múltiples ventanas, bandeja del sistema, operaciones de archivos y comunicación IPC. Es un proyecto muy adecuado para que los principiantes practiquen.

Si aún no conoces React, puedes consultar primero:Tutorial de React。

ReactElectronNotesEl proyecto te enseñará a construir desde cero unaaplicación de notas de escritorio multiplataformaque incluye las siguientes características:

  • Renderizado de frontend con React
  • Gestión del proceso principal de Electron
  • Comunicación IPC (proceso principal ↔ proceso de renderizado)
  • Persistencia local de los datos de notas (electron-store）
  • Integración con la bandeja del sistema y el menú

Descripción de la estructura del proyecto

ReactElectronNotes/
│
├── src/                  # React 源码目录
├── build/                # 打包后的 React 静态文件
├── electron-main.js      # Electron 主进程
├── preload.js            # 渲染与主进程通信桥
├── note.html             # 子窗口页面
├── note.js               # 子窗口脚本
├── package.json
└── assets/
    └── icon.png          # 托盘图标

I. Resumen de las funciones del proyecto

Módulo de funciones Descripción
Ventana principal Mostrar la lista de todas las notas
Ventana secundaria Entrada de nueva nota
Almacenamiento local Usarelectron-storeGuardar datos
Bandeja Se minimiza a la bandeja; se puede hacer clic para abrir la ventana principal
Comunicación IPC El proceso de renderizado interactúa con el proceso principal para leer y escribir datos

II. Inicialización del proyecto

1. Crear un proyecto React

npx create-react-app ReactElectronNotes
cd ReactElectronNotes

2. Instalar Electron y sus dependencias

npm install --save-dev electron electron-builder concurrently wait-on
npm install electron-store

3. Modificarpackage.json

Asegúrate de que enscriptsse agregue el comando de inicio de Electron:

"main": "electron-main.js",
"scripts": {
  "react-start": "react-scripts start",
  "react-build": "react-scripts build",
  "electron-start": "concurrently \"npm run react-start\" \"wait-on http://localhost:3000 && electron .\"",
  "electron-build": "react-scripts build && electron-builder"
}

III. Crear el proceso principal de Electron

Crear nuevo archivoelectron-main.js：

Ejemplo

const { app, BrowserWindow, Tray, Menu, ipcMain } = require('electron')
const path = require('path')
const Store = require('electron-store')

let mainWindow, noteWindow, tray
const store = new Store()

function createMainWindow() {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
      contextIsolation: true,
      nodeIntegration: false
    }
  })

  if (process.env.NODE_ENV === 'development') {
    mainWindow.loadURL('http://localhost:3000')
  } else {
    mainWindow.loadFile(path.join(__dirname, 'build/index.html'))
  }

  mainWindow.on('minimize', (e) => {
    e.preventDefault()
    mainWindow.hide()
  })

  createTray()
}

function createNoteWindow() {
  noteWindow = new BrowserWindow({
    width: 400,
    height: 300,
    parent: mainWindow,
    modal: true,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
      contextIsolation: true,
      nodeIntegration: false
    }
  })

  noteWindow.loadFile(path.join(__dirname, 'note.html'))
}

function createTray() {
  tray = new Tray(path.join(__dirname, 'assets/icon.png'))
  const menu = Menu.buildFromTemplate([
    { label: 'Mostrar ventana', click: () => mainWindow.show() },
    { label: 'Salir', click: () => app.quit() }
  ])
  tray.setToolTip('ReactElectronNotes')
  tray.setContextMenu(menu)
}

app.whenReady().then(createMainWindow)

ipcMain.handle('get-notes', () => {
  return store.get('notes', [])
})

ipcMain.on('save-note', (event, note) => {
  const notes = store.get('notes', [])
  notes.push(note)
  store.set('notes', notes)
  mainWindow.webContents.send('update-notes', notes)
})

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

IV. Crear el script Preload

Crearpreload.js：

Ejemplo

const { contextBridge, ipcRenderer } = require('electron')

contextBridge.exposeInMainWorld('electronAPI', {
  getNotes: () => ipcRenderer.invoke('get-notes'),
  saveNote: (note) => ipcRenderer.send('save-note', note),
  onUpdateNotes: (callback) => ipcRenderer.on('update-notes', callback)
})

Explicación:
A través decontextBridgeexponer la API de forma segura al proceso de renderizado.

V. Interfaz frontend de React

src/App.js

Ejemplo

import React, { useState, useEffect } from 'react'

function App() {
  const [notes, setNotes] = useState([])

  useEffect(() => {
    window.electronAPI.getNotes().then(setNotes)
    window.electronAPI.onUpdateNotes((_event, newNotes) => setNotes(newNotes))
  }, [])

  const openNoteWindow = () => {
    window.open('note.html', 'Nueva nota', 'width=400,height=300')
  }

  return (
    <div style={{ padding: 20 }}>
      <h1>Mis notas</h1>
      <button onClick={openNoteWindow}>Nueva nota</button>
      <ul>
        {notes.map((n, i) => (
          <li key={i}>{n}</li>
        ))}
      </ul>
    </div>
  )
}

export default App

Nuevonote.htmlynote.js

note.html

Ejemplo

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>Nueva nota</title>
</head>
<body>
  <h2>Nueva nota</h2>
  <textarea id="note"></textarea><br>
  <button id="saveBtn">Guardar</button>
  <script src="note.js"></script>
</body>
</html>

note.js

Ejemplo

const saveBtn = document.getElementById('saveBtn')
saveBtn.addEventListener('click', () => {
  const note = document.getElementById('note').value
  if (note.trim()) {
    window.electronAPI.saveNote(note)
    window.close()
  }
})

VI. Ejecución y empaquetado

Iniciar el entorno de desarrollo

npm run electron-start

Después de abrir, aparecerá la ventana principal de React; puedes hacer clic en "Nueva nota" para abrir la ventana de entrada.

Empaquetar y publicar

npm run electron-build

Se generarán archivos ejecutables multiplataforma (.exe、.app、.AppImageetc.).

VII. Direcciones de expansión

Característica Idea
Soporte de Markdown Usarreact-markdownrenderizar contenido
Búsqueda de datos En el frontend de React, mediantefilter()implementar la búsqueda local
Guardado automático Monitorear el campo de entradaonChangeguardar automáticamente
Sincronización en la nube Integrar Firebase o una API REST propia
Atajos de teclado UsarglobalShortcutRegistrar Ctrl+N para crear una nueva nota
Otras extensiones