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

0 Like 0 留言 491 瀏覽

鐵人賽 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 留言 185 瀏覽

鐵人賽 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 留言 315 瀏覽

鐵人賽 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 留言 307 瀏覽

鐵人賽 Modern Web DAY 23

React 走出新手村系列第 23 篇

技術 React 走出新手村 — 認識Next

動機主要還是想順著開頭篇章繼續補完 React server component，所以接下來就是會碰到 Next 這個框架，因為他與 React18 合作開發...

LucianoLee ‧ 2023-09-23

0 Like 0 留言 235 瀏覽

鐵人賽 Modern Web DAY 9

react 學習記錄系列第 9 篇

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

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

evan_hsu ‧ 2023-09-23

0 Like 0 留言 252 瀏覽

鐵人賽 Modern Web DAY 8

30 days of React 系列第 8 篇

技術 Day 8 - 渲染清單

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

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

0 Like 0 留言 258 瀏覽

鐵人賽 Modern Web DAY 17

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

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

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

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

0 Like 0 留言 218 瀏覽

鐵人賽 Modern Web DAY 7

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

技術 [next 13] - server component

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

時雨 ‧ 2023-09-22

3 Like 1 留言 357 瀏覽

鐵人賽 SideProject30 DAY 7

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

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

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

Annie ‧ 2023-09-22

0 Like 0 留言 355 瀏覽

鐵人賽 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 留言 219 瀏覽

鐵人賽 Modern Web DAY 22

React 走出新手村系列第 22 篇

技術 React 走出新手村 — CSR處方簽

溫馨提示在之前架構和渲染機制的文章有提到一些渲染機制的基礎，還不熟悉的朋友可以先去閱讀那篇文章。那麼我們今天就來聊聊如何改善 Client Side Ren...

LucianoLee ‧ 2023-09-22

0 Like 0 留言 207 瀏覽

鐵人賽 Modern Web DAY 8

react 學習記錄系列第 8 篇

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

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

evan_hsu ‧ 2023-09-22

2 Like 0 留言 454 瀏覽

鐵人賽 SideProject30 DAY 6

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

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

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

Annie ‧ 2023-09-21

0 Like 0 留言 169 瀏覽

鐵人賽 Modern Web DAY 6

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

技術 [next 13] - Client Component

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

時雨 ‧ 2023-09-21

0 Like 1 留言 326 瀏覽

鐵人賽 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

0 Like 0 留言 200 瀏覽

鐵人賽 Modern Web DAY 15

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

技術【Day 15】究竟是watch？還是生命週期API？處理副作用的useEffect

寫Vue的時候，偶爾會需要使用watch去監聽某個state的變動，來去進行一些邏輯操作。在接觸React之後，我發現React也有一個類似用途的hook，這個...

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

0 Like 0 留言 249 瀏覽

鐵人賽 Modern Web DAY 21

React 走出新手村系列第 21 篇

技術 React 走出新手村 — 資料夾的分類

分類的哲學這次要分享的是大家檔案分類的進化過程，分類檔案其實也蠻有學問的，一方面是語意上的邏輯，另一方面是資料夾內的檔案性質問題，一般來說我們會盡量把開發中的...

LucianoLee ‧ 2023-09-21

0 Like 0 留言 257 瀏覽

鐵人賽 Modern Web DAY 7

react 學習記錄系列第 7 篇

技術 [Day7]我的 react 學習記錄 - component

這篇文章的主要內容簡單說明什麼是元件化跟 react 裡面元件的種類什麼是元件？把畫面切分成一個個的區塊，並且透過傳入不同的參數讓那個區塊可以重複使用，...

evan_hsu ‧ 2023-09-21

0 Like 0 留言 370 瀏覽

鐵人賽 Modern Web DAY 5

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

技術 [next 13] - App Router 概念

今天要來介紹 next 13 推出的一個重要概念: app router，這是一個全新的 file-base system，取代原有的 pages router...

時雨 ‧ 2023-09-20

2 Like 0 留言 218 瀏覽

鐵人賽 SideProject30 DAY 5

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

技術 Day05：Firebase 服務中的資料架構

本文同步刊載於我的個人部落格在規劃專案之資料表前，想先插播介紹關於 Firebase 的資料庫運作原理，此部分並不影響專案規劃之順序，因為這是在規畫專案前也...

Annie ‧ 2023-09-20

1 Like 1 留言 417 瀏覽

鐵人賽 Modern Web DAY 5

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

技術 30天React練功坊-攻克常見實務/面試問題 Day5 An unexpected "0" in the page while doing condition rendering

tags: ItIron2023 react 前言昨天我們談到了多個類似的state在同一組件的管理問題，以及你可以如何利用一個共用的hanlder去優化，今...

windate3411 ‧ 2023-09-20

0 Like 0 留言 207 瀏覽

鐵人賽 Modern Web DAY 14

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

技術【Day 14】設計樣式共用的元件！Vue有v-slot，那React可以怎麼做！？

對vue比較熟悉的朋友們，應該對於slot的使用都不陌生，slot對於增加元件的使用彈性上有著很大的幫助。但是React沒有vue框架中的v-slot，要怎麼彈...

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

0 Like 0 留言 214 瀏覽

鐵人賽 Modern Web DAY 5

30 days of React 系列第 5 篇

技術 Day 5 - 建立元件之間的聯繫：匯出與引入

上一篇學習了基礎的元件使用，那麼元件之間該如何串聯，一起使用呢？今天要來學習：匯出與引入如何運作匯出元件的二種方法匯出與引入元件我們可以透過匯出（e...

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

0 Like 0 留言 331 瀏覽

鐵人賽 Modern Web DAY 20

React 走出新手村系列第 20 篇

技術 React 走出新手村 — 創造合邏輯的組件

Compund Pattern 這次要分享的是 Compound Pattern，如果你常常使用一些 component library 的話，這樣的使用你應該...

LucianoLee ‧ 2023-09-20

0 Like 0 留言 216 瀏覽

鐵人賽 Modern Web DAY 6

react 學習記錄系列第 6 篇

技術 [Day6]我的 react 學習記錄 - JSX 跟 babel 的作用

這篇文章的主要內容簡單說明 JSX 跟 babel 的作用。 JSX 語法在上一篇文章中有出現一個有點像是 html 的標籤。 const App: Re...

evan_hsu ‧ 2023-09-20

0 Like 0 留言 112 瀏覽

鐵人賽 Modern Web DAY 4

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

技術 [next 13] - Next 環境建置及技術選型

今天我們要來講如何做 Next 的環境建置，以及為 Next 的專案做技術選型，未來的程式範例以及專案實作都會以這個技術選型基礎為準喔！環境建置 Node.j...

時雨 ‧ 2023-09-19

2 Like 0 留言 336 瀏覽

鐵人賽 SideProject30 DAY 4

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

技術 Day04：side project 必備的 Flow Chart(二)

本文同步刊載於我的個人部落格針對網站角色將 Flow Chart 再延伸上一篇文章中有提到，此次專案主要區分兩個角色，本篇將針對「顧客」角色進行 Fl...

Annie ‧ 2023-09-19

0 Like 1 留言 404 瀏覽

鐵人賽 Modern Web DAY 4

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

技術 30天React練功坊-攻克常見實務/面試問題 Day4: Way too many state in a component

tags: ItIron2023 react 前言昨天我們配合了兩個hook去理解react render的機制以及一些useState & useE...

windate3411 ‧ 2023-09-19

0 Like 0 留言 150 瀏覽

鐵人賽 Modern Web DAY 13

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

技術【Day 13】Vue與React實現互動效果的事件綁定

前幾天已經了解關於state的存取及更新方式，還有從父層把state透過props的傳遞給子層的方式，今天就讓我們把重點放在怎麼讓頁面能擁有實際的互動功能，也就...

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

0 Like 0 留言 428 瀏覽

鐵人賽 Modern Web DAY 19

React 走出新手村系列第 19 篇

技術 React 走出新手村 — 路由基礎

你也是這樣嗎？有太多新手在基礎還不熟的情況下，只因為路由設定的原因，改學用 Next 框架，但相信我 React-router-dom 真的不難，而且在選擇用...

LucianoLee ‧ 2023-09-19

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

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

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

技術 React 走出新手村 — 認識Next

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

技術 Day 8 - 渲染清單

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

技術 [next 13] - server component

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

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

技術 React 走出新手村 — CSR處方簽

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

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

技術 [next 13] - Client Component

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

技術 【Day 15】究竟是watch？還是生命週期API？處理副作用的useEffect

技術 React 走出新手村 — 資料夾的分類

技術 [Day7]我的 react 學習記錄 - component

技術 [next 13] - App Router 概念

技術 Day05：Firebase 服務中的資料架構

技術 30天React練功坊-攻克常見實務/面試問題 Day5 An unexpected "0" in the page while doing condition rendering

技術 【Day 14】設計樣式共用的元件！Vue有v-slot，那React可以怎麼做！？

技術 Day 5 - 建立元件之間的聯繫：匯出與引入

技術 React 走出新手村 — 創造合邏輯的組件

技術 [Day6]我的 react 學習記錄 - JSX 跟 babel 的作用

技術 [next 13] - Next 環境建置及技術選型

技術 Day04：side project 必備的 Flow Chart(二)

技術 30天React練功坊-攻克常見實務/面試問題 Day4: Way too many state in a component

技術 【Day 13】Vue與React實現互動效果的事件綁定

技術 React 走出新手村 — 路由基礎

標記使用者

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

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

技術【Day 15】究竟是watch？還是生命週期API？處理副作用的useEffect

技術【Day 14】設計樣式共用的元件！Vue有v-slot，那React可以怎麼做！？

技術【Day 13】Vue與React實現互動效果的事件綁定