iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

0 Like 0 留言 642 瀏覽

鐵人賽 Modern Web DAY 10

30 days of React 系列第 10 篇

技術 Day 10 - 保持元件純淨

今天要來學習在設計元件時有哪些要點，以及如何避免寫出「不乾淨」的元件。純淨的元件製作元件時的大重點：保持元件的純淨 (Keeping Components...

yuu ‧ 2023-09-25 ‧團隊好想工作室 v7.0

0 Like 0 留言 18013 瀏覽

徵才招聘/全職/兼職平台前端開發工程師(遠程)

職位描述: 負責平台級線上遊戲網站 iGaming 應用產品的架構設計和開發工作; 參與前端前沿技術、理念的跟進、預研和落地; 參與前端技術架構、規範、研發流...

groot ‧ 2023-09-25

0 Like 0 留言 1126 瀏覽

鐵人賽 Modern Web DAY 9

Nextjs 13: 建構專屬於你的 SSR 網站！系列第 9 篇

技術 [next 13] - data fetch

今天要接著介紹網頁開發很重要的一環， data fetch。很多時候我們開發功能時，往往需要從外部拿取資料，要如何拿取資料就是很重要的問題。這一篇會來介紹如何在...

時雨 ‧ 2023-09-24

1 Like 0 留言 529 瀏覽

鐵人賽 SideProject30 DAY 9

用 React 和 Firebase 打造一個完整 side project 吧！系列第 9 篇

技術 Day09：使用 Wireframe 線稿拼接網站的功能與畫面(三)

上一篇我們已經完成了兩種主角色的註冊與登入畫面，也有將 Flow Chart 中所提到的店家角色稍微提及(如果忘記規則的話，可以回頭看下列文章)。本篇將重點放在...

Annie ‧ 2023-09-24

0 Like 0 留言 734 瀏覽

鐵人賽 Modern Web DAY 20

從Vue學React！不只要會用，還要真的懂～系列第 20 篇

技術【Day 20】用ref讓Uncontrolled元件變可控

昨天已經了解Uncontrolled Component和Controlled Component的差異及概念是什麼，也知道如果是自己客製化的元件，是可以依照情...

文科少女 ‧ 2023-09-26 ‧團隊曼陀號計畫V

0 Like 0 留言 667 瀏覽

鐵人賽 Modern Web DAY 9

30天React練功坊-攻克常見實務/面試問題系列第 9 篇

技術 30天React練功坊-攻克常見實務/面試問題 Day9: Data fetch with useEffect not work as expected

tags: ItIron2023 react 前言我們昨天看了在渲染陣列時用index作為key的一些隱憂，今天我們輕鬆一點，來看一個相對簡單的問題，但即便是...

windate3411 ‧ 2023-09-24

0 Like 0 留言 1633 瀏覽

鐵人賽 Modern Web DAY 9

設計系統 - Design System 系列第 9 篇

技術 [Day 9] Design System - React Slots (插槽)

本文同步上傳到筆者的個人部落格，裡面透過 Sandpack 直接編輯程式碼! 什麼是 Slots ? Slots, 也可以稱為插槽, 就是一個預設的區塊 (...

Jing.tech ‧ 2023-09-24

1 Like 0 留言 658 瀏覽

鐵人賽 Modern Web DAY 10

react 學習記錄系列第 10 篇

技術 [Day10]我的 react 學習記錄 - react 如何運作跟 key 是什麼

這篇文章的主要內容簡單說說 react 是如何運作跟 key 是什麼 react 如何運作可以大略把 react 做的事情拆分成三個步驟，react 官方...

evan_hsu ‧ 2023-09-24

0 Like 0 留言 544 瀏覽

鐵人賽 Modern Web DAY 9

30 days of React 系列第 9 篇

技術 Day 9 - key

昨天我們在製作電影卡片元件，雖然畫面看起來沒問題但編輯器跳出了🚨 這個是什麼意思呢？在React中當我們使用到array item時，應該給每一個array i...

yuu ‧ 2023-09-24 ‧團隊好想工作室 v7.0

0 Like 0 留言 817 瀏覽

鐵人賽 Modern Web DAY 19

從Vue學React！不只要會用，還要真的懂～系列第 19 篇

技術【Day 19】認識Controlled & Uncontrolled Component

在進入到明天的主題之前，先來認識兩個詞彙．分別是Controlled Component和UnControlled Component。這個部分不會複雜，但是與...

文科少女 ‧ 2023-09-25 ‧團隊曼陀號計畫V

0 Like 0 留言 675 瀏覽

鐵人賽 Modern Web DAY 8

Nextjs 13: 建構專屬於你的 SSR 網站！系列第 8 篇

技術 [next 13] - components render 機制

前面做了關於 client component 以及 server component 的基本介紹，這一篇來介紹一下他們背後的 render 機制。新的 re...

時雨 ‧ 2023-09-23

2 Like 0 留言 524 瀏覽

鐵人賽 SideProject30 DAY 8

用 React 和 Firebase 打造一個完整 side project 吧！系列第 8 篇

技術 Day08：使用 Wireframe 線稿拼接網站的功能與畫面(二)

有了主畫面後，我習慣先從主功能將 Wireframe 線稿依照原先的 Flow Chart 畫出來，細節功能會陸續繪製(有先想到的會以 Todo 標示)，並於後...

Annie ‧ 2023-09-23

0 Like 0 留言 1725 瀏覽

鐵人賽 AI & Data DAY 8

2023 AI大型語言模型之旅 - 從0開始學習建構AI專案系列第 8 篇

技術生成式A.I.(AIGC)從0開始 - 第一個LLMs小應用 - 履歷產生器 (4) 串接前端頁面

前一天我們已經有資料了 { "name": "王小明", "jobTitle": &quot...

shrine90459 ‧ 2023-09-23

0 Like 0 留言 630 瀏覽

鐵人賽 Modern Web DAY 8

30天React練功坊-攻克常見實務/面試問題系列第 8 篇

技術 30天React練功坊-攻克常見實務/面試問題 Day8: Using index as key might be a huge disaster

tags: ItIron2023 react 前言我們昨天用了一個很簡單的例子展示useEffect可能造成的memory leak issue，今天我們來看...

windate3411 ‧ 2023-09-23

0 Like 0 留言 461 瀏覽

鐵人賽 Modern Web DAY 8

設計系統 - Design System 系列第 8 篇

技術 [Day 8] Design System - FocusScope 組件 (二)

本系列文章會在筆者的部落格繼續連載！Design System 101 感謝大家的閱讀！前言在上一篇 FocusScope 中，我們介紹了 FocusS...

Jing.tech ‧ 2023-09-23

0 Like 0 留言 1545 瀏覽

鐵人賽 Modern Web DAY 28

React 走出新手村系列第 28 篇

技術 React 走出新手村 — Next App Router

App Router 那我們來說說 app router 的機制吧！App Router 是 Next 13 新介紹的一種 routing 方式，與之相對過去的...

LucianoLee ‧ 2023-09-28

0 Like 0 留言 1062 瀏覽

鐵人賽 Modern Web DAY 27

React 走出新手村系列第 27 篇

技術 React 走出新手村 — React Server Components

緣起官方介紹影片連結，我也是做這個主題才知道，原來這個概念已經存在那麼久了，那我們快速講解他的成因吧！影片整理目的Dan Abramov 說出了我們前端開...

LucianoLee ‧ 2023-09-27

0 Like 0 留言 626 瀏覽

鐵人賽 Modern Web DAY 26

React 走出新手村系列第 26 篇

技術 React 走出新手村 — Next SSR

SSR Next 的 SSR（Server-Side Rendering）的概念是在每個使用者請求時動態產生頁面內容，而不是提前產生靜態 HTML 頁面，這樣頁...

LucianoLee ‧ 2023-09-26

0 Like 0 留言 1101 瀏覽

鐵人賽 Modern Web DAY 25

React 走出新手村系列第 25 篇

技術 React 走出新手村 — Next ISR

ISR概念 ISR（Incremental Static Regeneration）是 Next.js 在（SSG）的基礎上做出的改進方法，讓頁面在構成之後根據...

LucianoLee ‧ 2023-09-25

0 Like 0 留言 715 瀏覽

鐵人賽 Modern Web DAY 8

30 days of React 系列第 8 篇

技術 Day 8 - 渲染清單

昨天我們透過條件式渲染讓電影清單能夠依據電影名稱顯示相對應的資料，也能直接在object中新增資料來維護，但這還差一點，這還沒有達到毋須修改元件結構自動渲染。今...

yuu ‧ 2023-09-23 ‧團隊好想工作室 v7.0

0 Like 0 留言 589 瀏覽

鐵人賽 Modern Web DAY 7

Nextjs 13: 建構專屬於你的 SSR 網站！系列第 7 篇

技術 [next 13] - server component

昨天介紹了 client component，今天要介紹 next 13 推出的新功能: server component。server component 可...

時雨 ‧ 2023-09-22

0 Like 0 留言 812 瀏覽

鐵人賽 Modern Web DAY 7

30天React練功坊-攻克常見實務/面試問題系列第 7 篇

技術 30天React練功坊-攻克常見實務/面試問題 Day7: Memeory leak with useEffect

tags: ItIron2023 react 前言昨天我們看了一下一個react hook在render上的常見使用錯誤，未來我們會再次接觸到，建議先把hoo...

windate3411 ‧ 2023-09-22

0 Like 0 留言 1005 瀏覽

鐵人賽 Modern Web DAY 18

從Vue學React！不只要會用，還要真的懂～系列第 18 篇

技術【Day 18】優化頁面效能的另一個方向－lazy & Suspense

前面我們連續看了兩個對避免畫面重新渲染有幫助的hook，今天緊接著再來看另一個也有助於優化效能，並提升使用者體驗的方式。之前看的幾個hooks，主要都是透過避免...

文科少女 ‧ 2023-09-24 ‧團隊曼陀號計畫V

0 Like 0 留言 644 瀏覽

鐵人賽 Modern Web DAY 9

react 學習記錄系列第 9 篇

技術 [Day9]我的 react 學習記錄 - react event 綁定 & useState

這篇文章的主要內容簡單說明 react 裡面的事件綁定跟透過 useState hook 來管理狀態。 JavaScript 的事件綁定 JavaScrip...

evan_hsu ‧ 2023-09-23

0 Like 0 留言 504 瀏覽

鐵人賽 Modern Web DAY 8

react 學習記錄系列第 8 篇

技術 [Day8]我的 react 學習記錄 - 渲染 variable & props 傳遞

這篇文章的主要內容簡單說說 react 裡面把資料放到畫面上跟參數傳遞的方法。渲染 variable 假設我有一些資料希望放到畫面上，像這樣。 funct...

evan_hsu ‧ 2023-09-22

0 Like 0 留言 612 瀏覽

鐵人賽 Modern Web DAY 6

Nextjs 13: 建構專屬於你的 SSR 網站！系列第 6 篇

技術 [next 13] - Client Component

今天要來介紹 client component 的用法，其實 client component 就是過去 next 12 常用的 component，功能上大同...

時雨 ‧ 2023-09-21

3 Like 1 留言 909 瀏覽

鐵人賽 SideProject30 DAY 7

用 React 和 Firebase 打造一個完整 side project 吧！系列第 7 篇

技術 Day07：使用 Wireframe 線稿拼接網站的功能與畫面(一)

在本系列文的第二篇「用最短時間完成 side project 規劃」中有提到，我認為規劃一個作品，一定要先將 Flow Chart 確定、且資料欄位也規劃好後，...

Annie ‧ 2023-09-22

0 Like 0 留言 822 瀏覽

鐵人賽 Modern Web DAY 17

從Vue學React！不只要會用，還要真的懂～系列第 17 篇

技術【Day 17】想要避免多餘的渲染就用它？了解useCallback的最終目的

今天接著延續昨天的主題，來看另一個跟useMemo這個hook一樣都在進行緩存動作的hook，也就是useCallback。今天一樣會把焦點放在我們男主角Rea...

文科少女 ‧ 2023-09-23 ‧團隊曼陀號計畫V

0 Like 1 留言 711 瀏覽

鐵人賽 Modern Web DAY 6

30天React練功坊-攻克常見實務/面試問題系列第 6 篇

技術 30天React練功坊-攻克常見實務/面試問題 Day6: Rendered more hooks than during the previous render.

tags: ItIron2023 react 前言我們昨天看了一個簡單的條件渲染的範例，了解到為什麼你不該用布林值以外的值作為判斷條件渲染的標準，今天我們繼續...

windate3411 ‧ 2023-09-21

2 Like 0 留言 1108 瀏覽

鐵人賽 SideProject30 DAY 6

用 React 和 Firebase 打造一個完整 side project 吧！系列第 6 篇

技術 Day06：依照 Firebase 數據庫規劃專案資料欄位

本文同步刊載於我的個人部落格 NoSQL 在 Firebase 數據庫中是如何應用的？在前一篇章節中，我們稍微認識了 NoSQL 這個新朋友，所以現在讓...

Annie ‧ 2023-09-21

技術 Day 10 - 保持元件純淨

徵才 招聘/全職/兼職平台前端開發工程師(遠程)

技術 [next 13] - data fetch

技術 Day09：使用 Wireframe 線稿拼接網站的功能與畫面(三)

技術 【Day 20】用ref讓Uncontrolled元件變可控

技術 30天React練功坊-攻克常見實務/面試問題 Day9: Data fetch with useEffect not work as expected

技術 [Day 9] Design System - React Slots (插槽)

技術 [Day10]我的 react 學習記錄 - react 如何運作跟 key 是什麼

技術 Day 9 - key

技術 【Day 19】認識Controlled & Uncontrolled Component

技術 [next 13] - components render 機制

技術 Day08：使用 Wireframe 線稿拼接網站的功能與畫面(二)

技術 生成式A.I.(AIGC)從0開始 - 第一個LLMs小應用 - 履歷產生器 (4) 串接前端頁面

技術 30天React練功坊-攻克常見實務/面試問題 Day8: Using index as key might be a huge disaster

技術 [Day 8] Design System - FocusScope 組件 (二)

技術 React 走出新手村 — Next App Router

技術 React 走出新手村 — React Server Components

技術 React 走出新手村 — Next SSR

技術 React 走出新手村 — Next ISR

技術 Day 8 - 渲染清單

技術 [next 13] - server component

技術 30天React練功坊-攻克常見實務/面試問題 Day7: Memeory leak with useEffect

技術 【Day 18】優化頁面效能的另一個方向－lazy & Suspense

技術 [Day9]我的 react 學習記錄 - react event 綁定 & useState

技術 [Day8]我的 react 學習記錄 - 渲染 variable & props 傳遞

技術 [next 13] - Client Component

技術 Day07：使用 Wireframe 線稿拼接網站的功能與畫面(一)

技術 【Day 17】想要避免多餘的渲染就用它？了解useCallback的最終目的

技術 30天React練功坊-攻克常見實務/面試問題 Day6: Rendered more hooks than during the previous render.

技術 Day06：依照 Firebase 數據庫規劃專案資料欄位

標記使用者

徵才招聘/全職/兼職平台前端開發工程師(遠程)

技術【Day 20】用ref讓Uncontrolled元件變可控

技術【Day 19】認識Controlled & Uncontrolled Component

技術生成式A.I.(AIGC)從0開始 - 第一個LLMs小應用 - 履歷產生器 (4) 串接前端頁面

技術【Day 18】優化頁面效能的另一個方向－lazy & Suspense

技術【Day 17】想要避免多餘的渲染就用它？了解useCallback的最終目的