洛奇的邪惡組織手札

React 依賴 Status 去管理多層元件下的渲染時機，以及利用 props 由上層去傳遞下層做資料取得。隨著元件複雜化，有些事情變得很繁瑣，因此我們需要額外了解 Context 與 Reducer 的應用。

隨著 React 的了解越多，我們需要大量練習於不同頁面。為了更好的統一實作於同一份專案上，我們需要額外使用 React 生態下的另一個特別套件 React Router。這是一個能夠很好的動態出不同路由有不同的 React 檔案，但本體網頁上還是同一份 SPA 下的渲染差異輸出。

本篇一開始將利用 Vite 所產生的預設專案內容環境進行理解開發部屬流程。同時一邊詳細地基本介紹 React 相關基礎知識撰寫技巧。在這裡可以學習所需要的 React。本篇使用的版本為最新的 React 18，部分 API 與用途稍有不同且新穎。

React 是由 Facebook (Meta) 所主導開發的 JavaScript 框架，與 AngularJS 相同都是採用組件 Component-based 來進行觀念導向設計，不像 VueJS 採用 MVVM（Model 資料管理、View 畫面顯示、ViewModal 溝通橋梁）觀念去區分細節，而是整個融合在 Component 整個零件內。

因工作上場地不同，需要有多台電腦之間使用 VSCode 開發工具並進行遠端分支 Git 操作。之前在這篇 [學習之路] Node.js 入門教學 曾經簡單提到如何規劃一個 USB，但因為時間過久以及有些做法已經更新，所以這次整理新做法並獨立一篇記錄下來。如果有需要可以參考使用。

NgRx 是一個強大，且功能完整的 Angular 狀態管理套件，在我們的應用程式越來越複雜的時候，它很適合用來管理一些資料狀態，並透過適度的抽象化以及加入一定的規範，降低整體程式的耦合性，打造出更好維護及管理的程式碼。

本篇介紹 Angular 的模組設計，包含了如何將大型模組分解成多個模組，或者相同集合的模組定義為共享模組供給多個地方使用他。以及模組的加載方式透過 lazy Loading 分流效能值行。也簡單介紹如何將 Angular 執行部屬到任何遠端伺服器網站。最後章節會介紹較為新的功能的獨立元件設計，可能這是未來 Angular 改變的做法重點。

本篇深入探討一些 REST API 串接相關技術應用觀念，並使用 Firebase 做為後端實作端點。以及相關用戶身分認證的通用作法，包含 token 驗證機制與路由守衛規劃。以及示範如何透過將靜態元件改為一組動態創建的元件根據事件過程產生。

本篇將利用 css 與 javascript 之前端課程專案網站作為對應的網頁資料系統，並出分為後台採用混和型開發與前台 api 分離型開發。在此，試著將網站所需資料透過 php 資料處理輸出至 html 網頁。

本篇將整合過去基本課程 JavaScript 相關知識進行經驗整合，並接續上期課程 RWD 響應式網頁設計（假日班）期末實作。我們將開發一些商務動態元件模組，你將會接觸到訂房功能模組設計，動態載入效果以及一些小功能。