Electron Practical Projects | Beginner's Tutorial

\\n\\n

Through practical projects, you can deepen your understanding of various Electron features, including window management, IPC communication, file operations, data storage, and UI optimization.

\\n\\n

Project 1: Desktop Notes Application

\\n\\n

Feature Design

\\n\\n

Create, edit, and delete notes
Auto-save and local storage
Support for multiple windows editing simultaneously
Clean interface with Markdown rendering support

\\n\\n

Technology Stack

\\n\\n

Frontend Framework: Vue or React
Renderer Process: Display note content, support rich text / Markdown
Data Storage: electron-store for saving note data
Main Process: Manage windows, menus, and shortcuts
IPC Communication: Renderer process requests main process to read or save data

\\n\\n

Implementation Steps

\\n\\n

1. Create Electron Project

\\n\\n

mkdir electron-notes\\ncd electron-notes\\nnpm init -y\\nnpm install electron electron-store

\\n\\n

2. Main Process main.js

\\n\\n

Example

\\n\\n

const { app, BrowserWindow, ipcMain } = require('electron')\\nconst Store = require('electron-store')\\n\\nconst store = new Store()\\nlet mainWindow\\n\\napp.whenReady().then(() => {\\n  mainWindow = new BrowserWindow({\\n    width: 800,\\n    height: 600,\\n    webPreferences: {\\n      preload: `${__dirname}/preload.js`\\n    }\\n  })\\n  mainWindow.loadFile('index.html')\\n})\\n\\n// IPC: Read notes\\nipcMain.handle('get-notes', () => store.get('notes', []))\\n\\n// IPC: Save notes\\nipcMain.handle('save-notes', (event, notes) => store.set('notes', notes))

\\n\\n

3. Preload Script preload.js

\\n\\n

Example

\\n\\n

const { contextBridge, ipcRenderer } = require('electron')\\n\\ncontextBridge.exposeInMainWorld('api', {\\n  getNotes: () => ipcRenderer.invoke('get-notes'),\\n  saveNotes: (notes) => ipcRenderer.invoke('save-notes', notes)\\n})

\\n\\n

4. Renderer Process index.html

\\n\\n

Example

\\n\\n

<!DOCTYPE html>\\n<html>\\n<body>\\n  <textarea id="note"></textarea>\\n  <button id="saveBtn">Save</button>\\n  <script>\\n    const textarea = document.getElementById('note')\\n    const btn = document.getElementById('saveBtn')\\n\\n    window.api.getNotes().then(notes => {\\n      textarea.value = notes.join('\\\\n\\\\n')\\n    })\\n\\n    btn.addEventListener('click', async () => {\\n      await window.api.saveNotes([textarea.value])\\n      alert('SaveSuccess')\\n    })\\n  </script>\\n</body>\\n</html>

\\n\\n

Code Analysis

\\n\\n

electron-store: Handles local data storage, automatically serializes JSON
ipcMain.handle / ipcRenderer.invoke: Implements communication between renderer and main processes
contextBridge: Securely exposes API to the renderer process
textarea + button: Simple implementation for note content editing and saving

\\n\\n

Project 2: File Manager

\\n\\n

Interface Design

\\n\\n

Directory tree on the left, file list on the right
Support file operations: create, delete, rename
Drag and drop files to target directories
Simple search and sort functionality

\\n\\n

File Operation Implementation

\\n\\n

Node.js fs module: Read, write, delete files
path module: Path handling
IPC communication: Renderer process requests main process for file operations

\\n\\n

Example

\\n\\n

// Main Process main.js\\nconst fs = require('fs')\\nconst path = require('path')\\n\\nipcMain.handle('read-dir', (event, dirPath) => fs.readdirSync(dirPath))\\nipcMain.handle('create-file', (event, filePath) => fs.writeFileSync(filePath, ''))\\nipcMain.handle('delete-file', (event, filePath) => fs.unlinkSync(filePath))

\\n\\n

Example

\\n\\n

// Renderer Process\\nwindow.api.readDir('/Users/username/Documents').then(files => {\\n  console.log(files)\\n})

\\n\\n

Drag and Drop Functionality

\\n\\n

Renderer process listens for dragstart and drop events
Main process uses fs.rename or fs.copyFile to move files

\\n\\n

Example

\\n\\n

// Renderer Process drop Event\\nconst dropArea = document.getElementById('fileList')\\n\\ndropArea.addEventListener('drop', (event) => {\\n  event.preventDefault()\\n  const filePath = event.dataTransfer.files.path\\n  window.api.moveFile(filePath, targetDir)\\n})

\\n\\n

Performance Optimization

\\n\\n

Use asynchronous reading for large directories to avoid blocking the renderer process
Virtualize file lists to reduce DOM rendering pressure
Use batch updates or Web Workers for frequent operations

\\n\\n

Summary

\\n\\n

Through these two practical projects, you can master:

\\n\\n

Window and Multi-process Communication: Parent-child windows, IPC
Local Data Storage: electron-store, fs
UI and Performance Optimization: Virtual lists, lazy loading, asynchronous processing
Native Feature Integration: File operations, drag and drop, menus and shortcuts

\\n\\n

These projects can serve as foundational templates for subsequent complex desktop application development, helping you quickly build full-featured Electron applications.

YouTip