一、react auth kit是簡化身份驗證和授權在 React 應用程式中的整合過程。它提供了一種靈活的方式來管理使用者身份驗證狀態、處理登入和註銷，以及控制使用者對特定功能和資源的存取權限。 特徵 身份驗證狀態管理 身份驗證元件 存取控制 路由保護 它提供了一套強大而靈活的工具，讓你能夠輕鬆地構建安全可靠的使用者身份驗證系統。 二· 使用方式1-1 新增login 設定1234567const privateElement = (element: JSX.Element) => { return ( <RequireAuth loginPath={"/login"}> {element} </RequireAuth> );} 1-2 區分Layout 用法1-2-1 需登入頁面設定1234{/* user authrozie element */}<Route path=" ...

複習React Redux 是一個用於在 React 應用程序中管理狀態的領先狀態管理庫。它與 Redux 库密切配合，提供了一個可預測的狀態容器，並通過使用 React 的 Context API 實現了高效的狀態管理。React Redux 基於 Flux 架構，使用單向數據流模型來處理應用程序的狀態更新。 React Redux 的主要特點包括： 提供一個 Provider 組件，使整個應用程序中的組件都能夠訪問 Redux 的狀態。 通過 useSelector Hook Function和 useDispatch Hook Function，簡化了組件與 Redux 的交互。 通過使用 connect 函數，可以將組件與 Redux 的狀態和操作相連接，使它們能夠自動更新。 支持中間件，例如 Redux Thunk 或 Redux Saga，用於處理異步操作和複雜的業務邏輯。 登入1. 創建 src/store/stroe.js12345678910import { configureStore } from '@redu ...

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 : 順利拿到機車駕照 第一天授課這邊先給個觀念，練習機車前必須要留意各項機車動作以及注意事項，主要原因: 了解目前機車款式、操作 基本開車箱、油門、開啟電力等 遠近光燈打開後特徵等。 有了這些基礎，可以從裡面知道學科一些基礎概念，相當好上手。 熟悉機車特性第二天相對需要抓緊時間去了解手感，騎車與腳踏車不同處會在於轉角時候，機車如果座得太前面有時候會卡到膝蓋，相對要習慣自己能轉到怎樣的程度。 為自己騎乘方式記錄記錄自己騎乘很多方式，因為我有帶朋友去練習場練習，所以可以藉由他來得知自己哪個關卡不足。如果沒有朋友可以考慮用行車紀錄器紀錄，效果會不錯。 第三天我直接到練習場練習轉彎處、直線七秒，當中兩段式可能需要抓一些範圍才能適應。 從別人失敗的關卡學習第四天我依據影片 ...