前言 昨天我們已經了解如何實作出一個元件，今天我們將實作一個任務清單元件，並一步步重構它，使原本無法複用的元件，利用泛型變成更通用、更彈性的元件。這章節會著重...
昨日練習與學習列表渲染之後，今天來了解條件渲染的使用與應用！ React 條件渲染說明與範例 在 React 中，條件渲染是常見的功能，可以根據狀態變化來動態...
鯨魚
‧
2024-09-28
計畫趕不上變化，最後15天的標題與內容會依情況做更改，在這裡先跟各位說聲抱歉。那回歸正題，說到旅遊網站那肯定少不了地圖吧，但現在許多圖API都是需要付錢的而且要...
本系列文章 GitHub 今天我們要來實現刪除 Todo 的功能。以下程式碼會先透過 props 傳遞來實作，目的是熟練前幾章節所學到的技能。請不用擔心，之後我...
前言 後端完成後，就要來介紹前端如何搭配 TypeScript 來開發，這個章節我們會使用 React 來實作簡單的任務管理網站，並串接我們寫好的後端，而會選...
今天要來學習的是列表渲染，在 React 中列表渲染，會使用到JavaScript 的陣列方法的 map函式。map 允許我們遍歷陣列後，並返回一個新的 JS...
鯨魚
‧
2024-09-27
在 React 開發中，隨著應用程式變得愈加複雜，狀態管理也變得更加困難。今天將介紹三種常見的狀態管理工具：Redux、MobX 和 Zustand，以協助開發...
本系列文章 GitHub 今天我們將繼續優化 Todo 列表，昨天我們將其內容放在了 App.tsx 中： import './App.css' import...
使用 useEffect 和 useState fetch 資料的問題 在 React 開發中，我們經常會從伺服器端取得資料，通常會使用 useEffect 搭...
大家好，今天是我們 React 學習的第十二天，想和大家聊聊如何為 React 應用程式撰寫測試。其實，寫測試沒有想像中困難，反而能讓你的程式碼更穩定可靠。 為...
在 Day 6，我們開始建立第一個 React 元件，並透過 props 將父層元件的資料傳遞給子層元件。隨後，我們學習了 useState，了解了如何在元件...
鯨魚
‧
2024-09-26
本系列文章 GitHub 今天我們將為 Todo List 加入新增 Todo 的功能。暫時先將此功能直接放在 App.tsx 中，後續我們會進行優化，將其獨立...
什麼是 Zustand? Zustand 是一個輕量級、快速且具擴展性的狀態管理解決方案，採用簡化的 Flux 原則，並基於發布/訂閱模式和 React hoo...
昨日提及到使用到 useState 時，當 state 有變動時，就會觸發元件重新渲染，更新畫面。 當有個情境是基於 state 原有的值去計算新值並連續用...
鯨魚
‧
2024-09-25
▋Azure聊天機器人實例 上一篇我們提到了，在Azure聊天機器人有提供介面讓我們可以設定參數。要有這樣的網站介面讓大家跟聊天機器人交流、設定機器人背後使用...
本系列文章 GitHub 今天的章節主旨是練習我們昨天學習到的方法，我們要來為這份 Todo List 做一個 Header，預計是加入一個 Logo 以及標題...
今日要來了解 狀態(state)的使用，為何會有state呢？React提供了一個方法，來監控資料的變化，當資料內容有變動時，畫面就會被更新。我們要來學習第一...
鯨魚
‧
2024-09-24
歡迎來到我們 React 學習之旅的第十天。今天我們要來聊聊如何讓你的 React 應用程式接起腿後，跑得更快、更順暢。我們將介紹幾個超級實用的效能優化工具：m...
本系列文章 GitHub 在昨天的章節裡，我們使用下方的方式為 props 定義型別： import { type PropsWithChildren } fr...
本系列文章 GitHub 基本定義型別 目前我們的 Todo 元件是放在 App.tsx，因此先到 App.tsx 放入我們要傳遞的 props： import...
哈囉大家好！歡迎來到我們 React 學習之旅的第九天。今天我們要來聊聊一個實用但常常被忽略的功能：錯誤邊界（Error Boundaries）。 什麼是錯誤邊...
歡迎來到我們React學習之旅的第八天！今天，我們來認識一下React的Context API。這是一個強大的特性，允許我們在不同層級的組件之間共享資料,而無需...
本系列文章 GitHub 相信開發者們對 Todo List 肯定都不陌生，因此這次的範例選擇使用 Todo List 來當作我們練習 TypeScript 的...
動畫管理員使用指南 簡介 在現代網頁開發中，動態效果為用戶界面增添了生動的互動性。本篇文章將介紹一個功能簡單的動畫管理員，它能夠簡化 Canvas 動畫的管理和...
之前使用過的版本是舊版的，當時並沒有 tsconfig.app.json 和 tsconfig.node.json 這兩個配置檔案。後來我在 Stack Ove...
為什麼需要使用 React Hook Form？ 在沒有使用的表單管理套件的情況下，需要定義許多狀態來處理表單邏輯和各種錯誤狀況。而使用像 React Hook...
歡迎來到我們React學習之旅的第七天！今天，我們來認識React的一個強大特性：自定義Hooks。這個工具能夠幫助我們提取組件邏輯到可重用的函數中，大大提高了...
目前的登入頁面是跳轉到 Keycloak 預設的登入頁，所以會出現樣式跟 NextJs App 不一致的情形，keycloak 本身是有自訂樣式的功能，但與 R...
歡迎來到我們第六天的React學習！今天,我們來聊聊一個重要的React概念：狀態提升(Lifting State Up)。這個概念可能聽起來有點抽象，我們來用...
其他 TypeScript 語法技巧 以下是我有時會忘記，但實際上簡單且實用的小技巧。 Function Overloads 可以重複定義相同的函數，根據不同的...
Mao
ntuedtd113
Jamie
Moscle.dev
Jaren
Harper
jerrythepotato
Jasper
iThome鐵人賽
看影片追技術