iT邦幫忙

front-end相關文章
共有 470 則文章
鐵人賽 Modern Web DAY 13

技術 Day 13 - 事件傳遞(冒泡與捕捉)

今天的文章接下來繼續介紹最後提到的事件的傳遞,這邊的傳遞通常是指假設我們在 Component 裡,觸發的事件可能會根據 Parent 跟 Child 的不同而...

鐵人賽 Modern Web DAY 12

技術 Day 12 - 回應 Event

前面幾天的內容,都比較偏向靜態的 JSX 生成,接下來的幾個篇章,會開始介紹怎麼在 React 上增加網站的互動性(像是點擊按鈕,選取選單,輸入資料等),讓我們...

鐵人賽 Modern Web DAY 11

技術 Day 11 - 把 UI 想成 Tree

樹(Tree)是一個時常用在處理 UI 與其中的項目關係的一個資料結構。像是在瀏覽器生成 HTML 架構,以及使用 CSS 來完成外觀更動時,都會運用到相對應的...

鐵人賽 Modern Web DAY 10

技術 Day 10 - 保持 Component 的 Pure

今天要來介紹一個我們在寫 React Component 很重要的觀念,就是讓 Component 保持純淨(Pure)。前面的文章就有提到在寫 Compone...

鐵人賽 Modern Web DAY 9

技術 Day 09 - Rendering 列表

之前我們在前面的篇章知道了如何使用 大括號 {} 來幫助我們顯示變數資料。而有時候我們會想顯示不只一項資料,而是從擁有數個 值 得 陣列(Array) 中,顯示...

鐵人賽 Modern Web DAY 8

技術 Day 08 - 條件式 Rendering

今天要來介紹也是在寫 React 的時候非常容易用到的功能,那就是 條件式渲染(Conditional Rendering)。這邊的渲染(Render),就是在...

鐵人賽 Modern Web DAY 7

技術 Day 07 - 傳遞 Prop 到 Comonent - part 2

處理多個 props 傳入 繼續補充昨天的內容,昨天知道了如何把 props 傳入 Component 裡面並且在 Component 裡面使用他們。但有時候...

鐵人賽 Modern Web DAY 6

技術 Day 06 - 傳遞 Prop 到 Comonent - part 1

昨天的文章介紹了在 JSX 上面使用參數,而我們也可以在我們客制化的 Component 傳入參數或數值使用。而這些傳遞的東西在 React 就會叫做 prop...

鐵人賽 Modern Web DAY 5

技術 Day 05 - 在 JSX 中使用 JavaScript 的大括號

在昨天的文章中介紹了 JSX 的基本用法,並且知道了 React Component 是會把架構、外觀、互動結合在一起使用 JavaScript 來完成的地方。...

鐵人賽 Modern Web DAY 4

技術 Day 04 - Writing Markup with JSX

在 Day 02 有提到 React Component 會是一個 function 並且回傳 JSX 格式,今天就會來介紹什麼是 JSX,並且他跟一般的 Ht...

鐵人賽 Modern Web DAY 3

技術 Day 3 - Importing 和 Exporting Component

昨天簡單了介紹一下 React,跟之後會使用到的線上測試環境。今天會接下來介紹 React 裡的 import 跟 export。然後我後來發現 快速開始 裡的...

鐵人賽 Modern Web DAY 2

技術 Day 02 - 快速開始

今天主要閱讀的內容,會是 React 官網裡的 快速開始 (Quick Start) 頁。但在開始閱讀之前,會想簡單介紹一下我所知道的 React。 React...

鐵人賽 Modern Web DAY 0

技術 套件管理器選擇指南:npm、yarn、pnpm、bun

系列文章: 前端工程師的 Modern Web 實踐之道 - Day 3預計閱讀時間: 10 分鐘難度等級: ⭐⭐⭐☆☆ 🎯 今日目標 在前一篇文章中,我們...

鐵人賽 Vue.js DAY 1

技術 Day 0|起心動念與系列規劃

一、起心動念 三大框架都碰過,但 Vue.js 以 簡潔語法與輕量特性 讓我著迷。 曾喜愛過小眾框架 Riot.js,它的雙向綁定和 template 語法糖也...

鐵人賽 Modern Web DAY 1

技術 Day 01 - 前言

這是連續第三年參加鐵人賽,這次跟以往不同的棒球數據分析不同,選擇了跟網頁開發比較相關的主題。原因是我其實本來的正職就是網頁前端工程師,所以網頁開發是我更熟悉的部...

鐵人賽 Modern Web DAY 5

技術 Signal 與 Proxy、Virtual DOM 的區別

前端 Reactivity 三路線,究竟差在哪? 我們常在 Signal / Proxy / Virtual DOM 之間搖擺:哪個更快?哪個更好維護? 如果把...

鐵人賽 Modern Web DAY 1

技術 什麼是 Signal ?

引言 React 的核心設計,是建立在一個重要假設之上:「資料與元件狀態的變化無法事先預測」。基於這個假設,React 必須持續透過 Virtual DOM(虛...

鐵人賽 JavaScript DAY 30

技術 Day30:TypeScript 在大型應用中的應用淺談

隨著前端技術的不斷發展,現代應用變得愈來愈複雜,開發團隊也愈來愈龐大。這時候,強大的型別系統與模組化結構就顯得至關重要。而 TypeScript,作為 Java...

鐵人賽 JavaScript DAY 29

技術 Day29:使用 TypeScript 寫測試 - Jest 篇

在現在的前端應用程式開發中,撰寫測試對於確保代碼的穩定性和可維護性非常重要。而 Jest 就是盛行的其中一個 JavaScript 測試框架,內建支援斷言庫和模...

鐵人賽 JavaScript DAY 28

技術 Day28:TypeScript 的實用工具與插件

TypeScript 在 JavaScript 基礎上提供了強大的靜態型別系統和編譯階段錯誤檢查功能。然而,TypeScript 的強大功能不僅限於型別檢查,還...

鐵人賽 JavaScript DAY 27

技術 Day27:使用 TypeScript 進行編譯階段錯誤檢查

TypeScript 則是一種靜態型別語言,通過在編譯階段進行型別檢查來提前捕捉在運行時可能會遇到意外的錯誤。這可以幫助我們避免許多潛在的 bug,使得程式碼更...

鐵人賽 JavaScript DAY 26

技術 Day26:使用 TypeScript 處理第三方庫中的型別定義

在開發前端應用時,我們經常需要使用第三方庫。然而,並不是所有的 JavaScript 第三方庫都自帶 TypeScript 的型別定義,所以我們需要瞭解如何為這...

鐵人賽 JavaScript DAY 25

技術 Day25:TypeScript 的高級型別 (Advanced Types)

今天要介紹 TypeScript 裡的高級型別,分別是條件型別 (Conditional Types)、映射型別 (Mapped Types)與推斷型別 (In...

鐵人賽 JavaScript DAY 24

技術 Day24:使用 TypeScript 為異步操作與 Promise 添加型別加持

在 JavaScript 中,異步操作(例如網絡請求、讀取檔案等)經常使用 Promise 來處理,而 TypeScript 允許我們為這些 Promise 和...

鐵人賽 JavaScript DAY 23

技術 Day23:使用 TypeScript 為 API 請求和響應定義型別

在前端開發時,經常需要和後端 API 進行溝通,傳遞資料並接收回應。而在這些操作中,為了確保數據的正確性和程式碼的穩定性,使用 TypeScript 來為 AP...

鐵人賽 JavaScript DAY 22

技術 Day22:使用 TypeScript 為 React 元件定義複雜的型別

在開發大型 React 應用程式時,製作一些抽象化元件能提升程式碼的可重用性和可維護性。而在 TypeScript 的幫助下,可以為這些元件加上嚴格的型別註記,...

鐵人賽 JavaScript DAY 21

技術 Day21:使用 TypeScript 與 Redux,為 action 和 reducer 定義型別

Redux 是一個在 React 應用程式中常用的狀態管理工具,能夠有效地管理大型應用中的全域狀態。當我們使用 TypeScript 與 Redux 時,型別支...

鐵人賽 JavaScript DAY 20

技術 Day20:使用 TypeScript 為 React Hooks 增加型別註記

React 的 Hooks 是讓我們能夠在函式組件中使用狀態和生命週期的工具。而使用 TypeScript,則可以為這些 Hooks 增加型別註記,提升程式的可...

鐵人賽 AI/ ML & Data DAY 28

技術 Day28: 使用Flask在本地端架設自己的DialoGPT聊天室

我們在【Day5: 如何利用DialoGPT建立一個小小的聊天機器人】已經介紹要如何使用Huggingface去載入並使用DialoGPT,那今天我們來升級聊天...

鐵人賽 JavaScript DAY 19

技術 Day19:使用 TypeScript 處理 React 元件的 State 和 Context 型別

在 React 開發中,State 和 Context 是兩個非常常見的功能,負責管理組件的狀態與跨組件的資料共享。而引入 TypeScript 後,我們可以為...