今天，終於開始動手實作網站的第一步了。按照之前的規劃，我決定先從前端的基本框架著手，然後試著與 Cloudflare Workers 進行初步連接。

前端框架：選擇 React

經過一番考慮，我決定使用 React.js 來搭建前端框架。React 是一個強大的 JavaScript 庫，可以幫助我快速構建具有組件化結構的網頁。

今天的目標很明確：設定基本的 React 環境，然後部署到 Cloudflare Workers 上。

步驟一：新建 React 專案

1. 首先，使用 Create React App 工具來生成初始的專案架構：

   npx create-react-app college-note
   

   這個指令會快速建立一個基本的 React 專案結構。

2. 接著，進入專案目錄：

   cd college-note
   

3. 最後，啟動開發伺服器：

   pnpm start
   

   這樣就可以在本地環境中即時查看修改後的效果了。

Cloudflare Workers：後端支援

接下來是與 Cloudflare Workers 建立基本連接的部分。Cloudflare Workers 將負責處理 API 請求，所以我需要先寫一個簡單的後端功能來測試。

步驟二：設置 Cloudflare Workers

1. 首先，安裝 Wrangler 工具：

   npm install -g wrangler
   

   Wrangler 是管理 Cloudflare Workers 的重要工具。

2. 接著，初始化一個 Workers 專案：

   wrangler init college-note
   

3. 寫一個簡單的 API 來回應前端請求。修改 index.js：

   export default {
     async fetch(request) {
       return new Response(JSON.stringify({ message: "欸羅傑說你是2486" }), {
         headers: { "Content-Type": "application/json" },
       });
     },
   };
   

   這段程式碼會返回一個簡單的 JSON。

4. 最後，部署到 Cloudflare Workers：

   wrangler publish
   

   這樣就完成了基本的後端設定。

前後端整合

現在前端和後端都準備好了，是時候讓它們互相溝通了。

步驟三：React 呼叫 API

1. 修改 React 中的 App.js，加入呼叫 API 的邏輯：

    import React, { useEffect, useState } from "react";
    import axios from 'axios';
   
    function App() {
      const [message, setMessage] = useState("正在載入...");
   
      useEffect(() => {
        axios.get("https://xxx.workers.dev")
          .then(response => setMessage(response.data.message))
          .catch(error => setMessage("抱歉，載入時發生錯誤"));
      }, []);
   
      return (
        <div className="App">
          <p>{message}</p>
        </div>
      );
    }
   
    export default App;
   

   這段程式碼會在組件載入時自動呼叫 API，並顯示返回的資訊。