在前面的文章中，我們已經完成了 Electron 和 React 的環境設置。現在，是時候開始構建我們的第一個 Electron + React 應用了！

這篇文章將帶讀者從零開始，構建一個簡單的桌面應用，幫助讀者掌握 Electron 與 React 如何協同工作。

這個應用將顯示一個貓咪在桌面上跑步的動畫，並提供一些簡單的互動功能，會有這個範例也是借鏡了這篇文章：
[ Day 4 ] - 桌面小圖示(三) - 鍵盤快速鍵與更多的貓咪

目標

目標是構建一個桌面應用程式，這個程式將包含以下功能：

• 顯示一個貓咪在桌面上跑步的動畫。
• 使用 React 管理貓咪的狀態和動作。
• 點擊貓咪時，貓咪會跳起來。

開始

上一篇已經設定好環境了，我們可以基於專案往下進行

設定視窗是無邊框以及透明背景

在 main.js 進行以下的修改：

import { app, BrowserWindow } from 'electron';
import path from 'path';

function createWindow() {
  const mainWindow = new BrowserWindow({
    width: 400,
    height: 400,
    transparent: true, // 使窗口背景透明
    frame: false,      // 移除窗口邊框
    alwaysOnTop: true, // 確保窗口置頂
    hasShadow: false,  // 移除陰影
    resizable: false,  // 禁止窗口縮放
    webPreferences: {
      preload: path.resolve(__dirname, 'preload.js'),
      contextIsolation: true,
      nodeIntegration: false,
    },
  });

  mainWindow.loadURL('http://localhost:3000'); // 指向 React 程式
  mainWindow.setIgnoreMouseEvents(true); // 讓視窗忽略滑鼠事件
}

app.whenReady().then(createWindow);

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

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

setIgnoreMouseEvents 會讓視窗忽略滑鼠的點擊事件，讓桌面上只會有貓咪

CSS 動畫

為了讓貓咪在桌面上移動，你需要設置貓咪的動畫和樣式。這裡使用一個簡單的 CSS 動畫讓貓咪在桌面上左右移動。

更改 App.css:

.cat-container {
  position: absolute;
  width: 100%;
  height: 100%;
  background: transparent; /* 透明背景 */
  overflow: hidden;
}

.cat {
  width: 100px;
  height: 100px;
  background-image: url('/path-to-your-cat-image.png'); /* 貓咪圖片的路徑 */
  background-size: contain;
  position: absolute;
  top: 50%; /* 貓咪垂直居中 */
  left: 0;
  transform: translateY(-50%);
}

.cat.run {
  animation: run 5s linear infinite;
}

@keyframes run {
  0% {
    left: -100px;
  }
  100% {
    left: calc(100% - 100px);
  }
}

使用 React 控制貓咪的行為

使用 React 的狀態來控制貓咪的行為，這裡設置貓咪的跳躍事件

import { useState, useEffect } from 'react';
import './App.css';

function App() {
  const [action, setAction] = useState('stand');

  return (
    <div className="cat-container">
      <div className={`cat ${action}`}></div>
    </div>
  );
}

export default App;

這樣一來，我麼可以得到一隻在桌面上的貓咪，並且點擊他的時候可以跳躍。

透過更改 React 元件的狀態，以及動畫的多樣化設定，我們可以讓貓咪做更多動作，或是用 gif 增加動感～

牛刀小試

我們可以在 react 元件中增加 run 的狀態，並且使用 useEffect 來讓貓咪一出現的時候就進行奔跑，讀者可以依照這個需求試試看，下一篇會公佈答案～

結論

這篇文章解釋了怎麼撰寫自己的 react 元件，搭配 electron 的視窗來達成一個簡單的應用，基本上 React 讓 Renderer 的邏輯更加容易，後面的文章會再說明透過 Electron API，可以使用更多的視窗相關的 API，讓 Renderer 與 Main 進行互動，來達成更多功能～