鐵人賽進行到這裡，也來到第17天囉！ 前面我們學習不少React的基礎概念，現在就來做個綜合練習，把先前所學的內容做練習。要做的項目是TodoList，這小專案...
鯨魚
‧
2024-10-01
本系列文章 GitHub 目前的 Todo List 在輸入欄位為空白時仍然可以送出。今天，我們要來修正這個問題，並為其新增錯誤提示訊息。此外，為了練習我們在...
今天，我們將學習 React 中兩個重要的程式碼重用技巧：高階元件（HOC）和渲染屬性（Render Props）。這些技巧是提升程式碼可讀性與重用性的工具，能...
本系列文章 GitHub 今天我們要將原本寫死的 Todo List 資料轉為使用實際輸入的內容。由於在先前的篇章已經使用過 useState，這次我們將透過...
今天我們要來聊聊如何管理React專案，好的專案結構可以讓其他開發者很清楚該去哪邊找到檔案。 為什麼專案結構很重要？ 好的專案結構有助於提升程式的可讀性和維護性...
React 16 Suspense 和 React Lazy 其實在 React 16 時就有 Suspense，需要搭配 lazy 使用。使用原因是為了優化效...
前言 在現代前端開發中，與後端進行資料交換是常見的需求。透過 HTTP 請求，我們可以將資料送出並取得結果。這篇文章將介紹如何使用 TypeScript 實作...
在 React 中，處理表單是常見的事情，通常使用onChange 事件處理器來去做資料的更新。表單可能會有多種欄位，會將每個欄位拆開來介紹，以下分別為各種類型...
鯨魚
‧
2024-09-29
本系列文章 GitHub 之前我們將新增 todo 的 input 以及按鈕放在 App.tsx，現在我們要將它提出為獨立的元件： <div classN...
今天我們要來聊聊 React 生態系中的兩個實用的套件：React Query 和 React Hook Form。 React Query： React Qu...
前言 昨天我們已經了解如何實作出一個元件，今天我們將實作一個任務清單元件，並一步步重構它，使原本無法複用的元件，利用泛型變成更通用、更彈性的元件。這章節會著重...
昨日練習與學習列表渲染之後，今天來了解條件渲染的使用與應用！ 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...
Jamie
Moscle.dev
Jaren
Mao
ntuedtd113
Harper
iThome鐵人賽
看影片追技術