洛奇的邪惡組織手札

本篇將整合過去基本課程 HTML, CSS 相關知識進行經驗整合，透過 Bootstrap 5.2 動手設計簡單一頁式且具備 RWD 之網站設計。

本篇深入探討一些資料流的應用觀念，包含 Observable 提供可觀察的非同步結果、以及 Form 表單的設計要點、pipe 管道的技巧。其中一些內容將會使用到 rxjs 的第三方工具使用。

Service 用於明確定義用途的類別，通常用來將共用的程式邏輯或資料存取邏輯抽象出來，且可以在多個元件之間共用，以避免程式邏輯的重複編寫或將元件與底層實作解耦，讓元件類別更加精簡、高效。
Routing 可以幫助我們實現多頁面應用程式或單頁面應用程式 (SPA)。當使用者在應用程式中導航時，路由會根據使用者的操作選擇適當的畫面，並將該畫面呈現給使用者。

前面介紹了基本安裝與工作環境，並且理解基本的資料綁定與內建指令。這裡會介紹元件和資料綁定的深入探討細節。另外對指令進行深入理解。

Angular 通常是指 Angular 2+以上的版本（與早期的 Angular 1 版本完全不同，又稱呼第一代叫 AngularJS)，是由 AngularJS 團隊於 2016 年重新改寫並由 Google 所主導開發的 JavaScript 框架，與 React 相同都是採用元件 Component-based 來進行觀念導向設計，不像 VueJS 採用 MVVM（Model 資料管理、View 畫面顯示、ViewModal 溝通橋梁）觀念去區分細節，而是整個融合在 Component 整個零件內。

本篇開始深入探討一些 React 細節高級操作觀念上的的認知學習單元，根據參考官方手冊逐步學習。同時會略過一些對於未來性將捨棄的原有功能。

Hook 是 React 自版本 16.8 開始推廣出來的新功能，主要是用於不需要 class 就能輕鬆使用 state 的方式。出現的動機主要是避免開發人員對於 class 的 this 定義容易混淆，且將使用邏輯更容易直接上手。

本篇根據官方學習指南所建議的 互動小遊戲 進行實作練習。差別於官方以 0 程度進行新手講解，本內容根據已經學習過前面文章初階篇之程度來進行實作解說，因此步驟程度較快。並最後嘗試完成官方建議的進階難度的自我挑戰調整。

本篇續接初階篇之後的實作思考練習，透過步驟一步步從原型視覺稿到實體呈現。本篇根據官方手冊逐步跟隨完成動作並根據自己的邏輯思考完成。

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