很多朋友都知道我是一名SEO博主，但現實生活工作當中我卻是一名普通的程式設計師。
本篇文章是從零基礎帶領React學習者，學習在專案中如何運用React這門技術。這並不是單純的React語法文章。
專案開始前的準備
bestycw/react-admin-antd: A modern back-end management system template based on React 18, Ant Design 5.0, TypeScript,tailwindcss and Vite: React-admin-antd
以上連結下載到本地，刪除資料夾中的 node_modules 及 package-lock.json。* 讓依賴重新乾淨安裝，解決版本衝突或錯誤
Node 版本：
請下載 Node.js® v20.20.2
Node.js — 下載 Node.js® Node.js — Download Node.js®
Visual Studio Code ：
Visual Studio Code – The open source AI code editor | Your home for multi-agent development
本專案使用的是 React 以及 UI 框架 Ant Design（antd）。
程式的啟動
當安裝好 VSCode 及 Node.js 後，再按照上面所說刪除 node_modules 及 package-lock.json，然後將專案資料夾拖入 VSCode 中打開，並開啟終端機視窗。
這裡的 npm install 安裝的是專案中 package.json 內所定義的所有依賴套件。如果沒有這些依賴，整個專案將無法正常啟動。
執行成功後，除非進行人工干預設定，一般情況下預設會自動跳出瀏覽器，並直接開啟專案的展示頁面。
專案正常運行後，我們接下來就正式進入專案開發階段。我們的目標是根據頁面進行邏輯分析與處理，並從邏輯出發開始撰寫程式碼，嘗試將功能一步步實現出來。
登入頁面
專案不同，首次出現在畫面上的頁面也會有所不同。例如，一般企業網站首次進入通常會顯示首頁，而後台管理系統則通常會顯示登入頁面。
①找入口
我們可以透過網頁的 URL 來判斷頁面的檔案資料夾結構。
比如說這裡 auth 底下有一個 login，那麼我們可以判斷 login 這個元件可能位於 auth 資料夾下。
當我們找到頁面對應的元件之後，就可以根據元件內的程式函式來進行功能修改與專案調整了。
②梳理元件邏輯
我們可以透過頁面來分析當前頁面所具備的功能，而每一個功能通常都會對應到一個函式。
例如登入功能，當用戶點擊按鈕時，會觸發某個函式，並與後端進行資料交互，最後返回結果。
整體流程通常是：按鈕點擊 → 觸發函式 → 函式內調用業務處理層函式 → 與 API 進行交互。
因此，我們需要先找到「點擊事件所對應的觸發函式」。
我們上面提到，這個專案使用的是 Ant Design UI。透過它提供的 API 或組件事件，我們可以更快速地定位到對應的函式名稱與事件處理邏輯。
就這樣，我們學習到了一個 API —— onFinish。它的作用是在表單提交且資料驗證成功後觸發回調事件。
// 处理登录
const handleLogin = async (values: any) => {
setLoading(true);
try {
const response = await authService.login({
...values,
loginType,
remember: values.remember // 确保这个值被传递到后端
});
// 确保返回的用户信息符合 UserStore 的要求
const userInfo = {
...response.user,
roles: response.user.roles || [],
accessToken: response.token,
dynamicRoutesList: response.user.dynamicRoutesList || [],
permissions: response.user.permissions || []
};
UserStore.setUserInfo(userInfo);
message.success(t('login.loginSuccess'));
navigate('/', { replace: true });
} catch (error) {
console.error('Login failed:', error);
// message.error(t('login.loginFailed'));
} finally {
setLoading(false);
}
};我們根據以上程式碼，可以進一步定位到與之相關的邏輯處理層函式。
這個邏輯層主要負責呼叫後端介面，將前端傳入的資料傳遞給後端，並與資料層進行交互與判斷。可以說這是整個流程中的核心處理函式。
如果需要修改核心邏輯，我們可以直接在這一層基礎上進行調整；如果只是一般性的修改，且不涉及資料交互，則可以回到最初的登入按鈕點擊所觸發的函式進行處理。
