React ReduxReact Redux 是一個用於在 React 應用程序中管理狀態的領先狀態管理庫。它與 Redux 库密切配合，提供了一個可預測的狀態容器，並通過使用 React 的 Context API 實現了高效的狀態管理。React Redux 基於 Flux 架構，使用單向數據流模型來處理應用程序的狀態更新。 React Redux 的主要特點包括： 提供一個 Provider 組件，使整個應用程序中的組件都能夠訪問 Redux 的狀態。 通過 useSelector 和 useDispatch，簡化了組件與 Redux 的交互。 通過使用 connect 函數，可以將組件與 Redux 的狀態和操作相連接，使它們能夠自動更新。 支持中間件，例如 Redux Thunk 或 Redux Saga，用於處理異步操作和複雜的業務邏輯。 useDispatchuseDispatch 是一個用於獲取 Redux store 的 dispatch 函數的鉤子函數。dispatch 函數用於觸發 Redux store 中的 action，從而更新狀態。通過 useDisp ...

在上一篇文章中，我們已經討論了如何將 index.js 與其他版面分開，這次我們要延續這個主題，並稍微提到元件的使用方式。 元件元件的概念是將 head、body、footer 等區塊拆分開來，以便後續功能的延伸或擴充。通常我會進一步細分，例如使用者功能清單、目錄、公用樣板 (如 Card 和 Page Title) 等。這樣做可以提升開發的可讀性，減少多行程式碼難以辨識的問題。 Layout本次的範例如下圖所示。我特別使用顏色框出那些功能，以展示它們是如何被拆分為元件的方式進行撰寫。 簡易引用元件 - Header這邊只顯示一部份，若要看完整請到 github(StartFMS.Backend.Web)。 解釋為什麼要怎樣拆開 Header Title 。 彈性化 : 利用Ajax方式取得需要的 page 客製化 : 可能有不同客戶需求樣板可另外擴充 Header.tsx 12345678910111213141516171819202122232425262728293031323334353637383940import { Link } from &# ...

前言好一段時間沒有發表學習文了，主要是因為我花了兩個禮拜的時間研究這個東西，終於找到了原因和使用方式。雖然有ChatGPT的幫助，但還是沒有解決我現在要特別標記的主題。 (P.S. 這次的主題是我卡了很久的一個技術問題。) React Router 中 Outlet在父路由元素中，應該使用 來呈現其子路由元素。這樣，當子路由被渲染時，嵌套的使用者介面就能夠顯示出來。如果父路由完全匹配，它會渲染一個子索引路由，如果沒有索引路由，則不會呈現任何內容。 1. 類型聲明 (Type declaration)123456interface OutletProps { context?: unknown;}declare function Outlet( props: OutletProps): React.ReactElement | null; 2. 參考官方作法1234567891011121314151617181920212223242526function Dashboard() { return ( <div> < ...

前言在上一篇文章中，我們介紹了如何操作 components 與 router，這篇文章將教你如何在你的專案中加入 AdminLTE3 的 CSS 樣式，讓你的專案能夠擁有漂亮的 UI 設計。 AdminLTE是一個基於 Bootstrap 框架的免費管理儀表板模板，可以快速建立具有相應外觀和功能的後台管理系統。AdminLTE 3 是其最新版本，提供了大量的 UI 元件、各種頁面佈局和功能，例如表格、圖表、表單、地圖、日曆等等，也可以輕鬆自訂主題樣式。 AdminLTE 3AdminLTE 3 支援多種框架和平台，包括 Angular、React、Vue、ASP.NET Core、Laravel 等等，因此非常適合用於各種 Web 開發項目。此外，AdminLTE 3 的文件非常完整，提供了詳細的使用說明和示例，方便開發者快速入門和使用。 區分定義起手前，請依據這個大區塊方式切割。後期時候可以再把裡面內容再次切割，後續工作就不會太複雜。 需要的動作 創建 components/@Shared 資料夾 安裝 admin-lte 3 npm i admin-lte 備 ...

前言完成作業初期，你可能會疑惑如何增加多個頁面或佈局，這些問題都需要使用到路由器（router）。前端架構將依賴路由器進行所需頁面和佈局之間的切換。而組件（component）則可以看作是我們的視圖，是可重複使用的程式碼塊，用於呈現單一元件的內容。在上一篇文章中，我們已經實現了組件的基礎並且理解了它的重要性。 React Router安裝 Router首先，安裝 React Router：在命令行中執行 npm install react-router-dom。 創建 component加入 template-page 下方可以使用範本來快速建檔，如下 : 12345678910111213141516171819202122232425262728// Home.tsximport React from 'react';const Home = () => { return ( <div> <h1>Home</h1> <p>Welcome to my home page ...

前言近期會慢慢研究 react 使用方式，今後會使用 TS 來完成專案，並包含其他前端架購。本篇使用以下版本，若無法正常執行請確認版本再進行作業。 設定檔12345678910111213141516//package.json "dependencies": { "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", "@types/jest": "^27.5.2", "@types/node": "^16.18.26", "@types/react": "^18.2.6", "@typ ...

React 介紹React 可稱 ReactJs ，主要由Facebook、Instagram 和一個由個人開發者和企業組成的社群維護。 React為程式設計師提供了一種子組件不能直接影響外層組件（”data flows down”）的模型，資料改變時對HTML文件的有效更新，和現代單頁應用中組件之間乾淨的分離。 手機開發為 React Native : https://reactnative.dev/ JSX 語法JSX語法是開發React的核心語法，是一個 JavaScript 的語法擴充，X為Xml之意。使用方式會與js不同，React能使用方式如下。 🎈 注意 : 以下範例為 index.js 輸入的方式，並非在App.js所使用。 1234567const el = <p>Hello React !!</p>;ReactDom.render( el, document.getElementById('root')); StrictMode 主要用來檢查component有無錯誤的方式 123456ReactDOM.rend ...

起因今年因為疫情造成很多公司居家上班，因此我想找時間去把握時間去考以下為時間軸。 2022/03/27 : 報名考試 2022/05/09 (稱作為勝利日) 2022/04/09 : 開始練習機車，每周六日去練習場練習 2022/05/09 : 順利拿到機車駕照 第一天授課這邊先給個觀念，練習機車前必須要留意各項機車動作以及注意事項，主要原因: 了解目前機車款式、操作 基本開車箱、油門、開啟電力等 遠近光燈打開後特徵等。 有了這些基礎，可以從裡面知道學科一些基礎概念，相當好上手。 熟悉機車特性第二天相對需要抓緊時間去了解手感，騎車與腳踏車不同處會在於轉角時候，機車如果座得太前面有時候會卡到膝蓋，相對要習慣自己能轉到怎樣的程度。 為自己騎乘方式記錄記錄自己騎乘很多方式，因為我有帶朋友去練習場練習，所以可以藉由他來得知自己哪個關卡不足。如果沒有朋友可以考慮用行車紀錄器紀錄，效果會不錯。 第三天我直接到練習場練習轉彎處、直線七秒，當中兩段式可能需要抓一些範圍才能適應。 從別人失敗的關卡學習第四天我依據影片 ...

前言近期執行專案時候，常常遇到對方使用的是 WSDL。當時剛入行軟體工程師非常震驚這是甚麼東西，WSDL 如何傳遞、如何使用，直到後期有發現不錯用的工具SoapUI 主要給 WSDL這個使用。接下來會直接讓各位參考如何執行簡易版的WSDL。 最近有製作簡易版本的response 工具，可以提供參考。 使用工具、指令 VSC : 點擊我 使用 Command : dotnet new console -f net5.0 Github 參考 : 點擊我 Web服務描述語言，Web Services Description Language基於 XML 用於 描述 、通訊(訪問) Web Services 的語言。常見相關名稱 Web Services SOAP (Simple Object Access Protocol) UDDI (Universal Description, Discovery, and Integration) 使用方式這邊只會使用 請求、回覆。若要看WSDL製作本篇不展示。 連線方式筆者案例是使用xml部分，需要使用 text/xml 才能啟動功能 ...

相信很多人開發 API 有使用 RESTful API或是其他定義，很多設計模式可以提升撰寫的速度、閱讀。這章節會著重於介紹請各位參閱以下內容， API (application programming interface）API 稱作為 “應用程式介面”，定義上是多個軟體中介互相回應(Response)、請求(Request)。如果要更詳細介紹請到下方連結點選 詳細介紹 : API 到底是什麼？ 用白話文帶你認識 by Frankie : 請點我 API 請求種類API 從歷史到至今其實有很多使用方式，XML、JSON都是在傳輸過程中經常出現。 REST (Representational State Transfer)表現層狀態轉移, 英文 Representational State Transfer ，是近年來比較多人使用的一種，最常聽到 RESTful API是同個網路架構風格。REST通常基於HTTP、URI、XML以及HTML這些現有的廣泛流行的協定和標準，他的資源是由URI來指定。 REST架構的限制條件 客戶-服務器（Client-Server） 無狀態（Stat ...