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

0 Like 0 留言 267 瀏覽

鐵人賽 Modern Web DAY 30

react 學習記錄系列第 30 篇

技術 [Day30]我的 react 學習記錄 - 結束啦！

結束了！今天就是最後一天了，終於結束了！！！自己在年初的時候給自己下了一個目標，希望可以參加今年的 IT 鐵人賽，並且順利完賽。想不到這個目標真的達成了...

evan_hsu ‧ 2023-10-14

0 Like 0 留言 265 瀏覽

鐵人賽 Modern Web DAY 21

連我阿公都會-手把手教你架網站系列第 21 篇

技術【Day21】前端框架淺談＆React環境

在寫了數個的純前端的專案後，我們會發現，每個專案幾乎都會寫到一樣的東西。為了方便，從以前的專案copy一些元件套用在新的專案上是常有的事，但又要因應新專案而反覆...

ttdragon0722 ‧ 2023-10-06 ‧團隊最強資工大電神

2 Like 0 留言 265 瀏覽

鐵人賽 SideProject30 DAY 8

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

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

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

Annie ‧ 2023-09-23

0 Like 0 留言 264 瀏覽

鐵人賽 Modern Web DAY 17

React 走出新手村系列第 17 篇

技術 React 走出新手村 — 在組件裡犯的錯(I)

因果關係這次來分享 code review 時常常會看到的問題，這些問題常常看不出來有什麼影響，甚至有的人會覺得那是 coding style 的範疇，尤其是...

LucianoLee ‧ 2023-09-17

0 Like 0 留言 264 瀏覽

鐵人賽 Modern Web DAY 26

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

技術 30天React練功坊-攻克常見實務/面試問題 Day26: Add emojis to the page onclick(interview question)

tags: ItIron2023 react 前言我們昨天做了一個簡單的pagination題目，大致上了解一般實務是如何處理這類的情況，包含loading...

windate3411 ‧ 2023-10-11

0 Like 0 留言 264 瀏覽

鐵人賽 Software Development DAY 27

Windows Driver + Electron 學習筆記系列第 27 篇

技術 Day27 Electron應用程式-7

昨天簡單介紹了node-ffi-npi的基本概念，今天要實際使用node-ffi-npi來呼叫我們動態連結函庫內的函式。首先安裝node-ffi-npi：...

CarterChu ‧ 2023-10-12

0 Like 0 留言 263 瀏覽

鐵人賽 Modern Web DAY 27

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

技術 30天React練功坊-攻克常見實務/面試問題 Day27: Add emojis to the page onclick PartII(interview question)

tags: ItIron2023 react 前言我們昨天做了一個還算有趣的問題，利用state控制整個emoji陣列並決定每個組件要在螢幕的哪處渲染，今天我...

windate3411 ‧ 2023-10-12

1 Like 0 留言 263 瀏覽

鐵人賽 SideProject30 DAY 15

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

技術 Day15：快速於 React 專案引入 Firebase 服務

於前一篇的前置準備完成後，我們已在網路空間新增一個 Firebase 專案了。然而因為刻畫面耗時較長，也希望在刻畫面的同時能夠同時串接資料(就不要為了頁面呈現而...

Annie ‧ 2023-09-30

0 Like 0 留言 263 瀏覽

鐵人賽 Modern Web DAY 14

React 走出新手村系列第 14 篇

技術 React 走出新手村－高階組件 (H.O.C.)

概念在JavaScript中，高階函數（Higher Order Functions）是指可以接受函數作為參數或callback function的函數，簡單...

LucianoLee ‧ 2023-09-14

0 Like 0 留言 262 瀏覽

鐵人賽 Modern Web DAY 21

React 走出新手村系列第 21 篇

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

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

LucianoLee ‧ 2023-09-21

0 Like 0 留言 262 瀏覽

鐵人賽 Modern Web DAY 9

react 學習記錄系列第 9 篇

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

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

evan_hsu ‧ 2023-09-23

0 Like 0 留言 261 瀏覽

鐵人賽 Modern Web DAY 20

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

技術 30天React練功坊-攻克常見實務/面試問題 Day20: useState with complex form

tags: ItIron2023 react 前言我們昨天看了一個有趣的useState問題，了解到initialValue的一些限制，今天我們會再看一個與s...

windate3411 ‧ 2023-10-05

0 Like 0 留言 259 瀏覽

鐵人賽 Modern Web DAY 29

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

技術 30天React練功坊-攻克常見實務/面試問題 Day29: Simple Tic-Tac-Toe game(interview question)

tags: ItIron2023 react 前言我們昨天處理了一個實務上常見的面試問題，要你根據某份提供的api文件以及一些指示完成題目的要求，今天我們再來...

windate3411 ‧ 2023-10-14

1 Like 0 留言 259 瀏覽

鐵人賽 SideProject30 DAY 12

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

技術 Day12：side project 的網頁組成元素

有了規範的提交訊息工具後，就可以放心開始開發了，開發之前要記得讓自己站在對的分支上唷！今日分支名稱：feat/component 更換 favicon.ico...

Annie ‧ 2023-09-27

0 Like 0 留言 258 瀏覽

鐵人賽 SideProject30 DAY 28

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

技術 Day28：React 與 Firebase 的 CRUD 串接(二)

店家新增完服務項目後，顧客就可以開始查看預約了！所以今天將開發重點放在顧客角度會看到的頁面都實作完成。組裝列表頁面(顧客視角) 串接讀取文件的 API i...

Annie ‧ 2023-10-13

1 Like 0 留言 256 瀏覽

鐵人賽 SideProject30 DAY 29

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

技術 Day29：當顧客開始訂位

倒數2天，把握時間繼續努力！製作月曆元件昨天製作了顧客視角的服務項目詳細頁後，今天依照原先的 Wireflame 設計線稿，刻出可供預約的日期時段區塊，這部...

Annie ‧ 2023-10-14

0 Like 0 留言 254 瀏覽

鐵人賽 Modern Web DAY 26

30 days of React 系列第 26 篇

技術 Day 26 - React 基礎實作練習：追加購物清單

今天要來製作購物清單，透過這個練習我們可以複習 Lifting State Up 的觀念。先來看目前的程式碼： App.js import React fr...

yuu ‧ 2023-10-11 ‧團隊好想工作室 v7.0

0 Like 0 留言 253 瀏覽

鐵人賽 Software Development DAY 29

Windows Driver + Electron 學習筆記系列第 29 篇

技術 Day29 Electron應用程式-9

能夠間隔讀取CPU風扇轉速後，我們的Electron應用程式基本的功能就完成了，但是UI的呈現略顯單調。由於我們是基於React來開發UI，所以可以使用既有的U...

CarterChu ‧ 2023-10-14

0 Like 0 留言 253 瀏覽

鐵人賽 Modern Web DAY 14

react 學習記錄系列第 14 篇

技術 [Day14]我的 react 學習記錄 - createContext & useContext

這篇文章的主要內容簡單介紹 createContext 跟 useContext 的用途跟使用方法。 createContext & useCont...

evan_hsu ‧ 2023-09-28

0 Like 0 留言 251 瀏覽

鐵人賽 Modern Web DAY 12

react 學習記錄系列第 12 篇

技術 [Day12]我的 react 學習記錄 - useRef

這篇文章的主要內容簡單介紹 useRef hook 的使用方法 useRef useRef 是 react 裡面除了 useState 以外另外一個用來儲存...

evan_hsu ‧ 2023-09-26

0 Like 0 留言 247 瀏覽

鐵人賽 Modern Web DAY 25

前端開發之那些我會的與我不會的技術系列第 25 篇

技術 React中的<StrictMode>：提前發現和解決應用程式的問題

今天要來介紹另一個React內建的元件<StrictMode />，目的是幫助我們可以即早發現bugs即早治療。使用使用方式就是將<Str...

ss95159 ‧ 2023-10-10

0 Like 0 留言 247 瀏覽

鐵人賽 Modern Web DAY 20

30 days of React 系列第 20 篇

技術 Day 20 - 在元件間共用 state

學習完 state 構築的原則，來進一步看 state 的應用，今天要學習如何在元件間共用 state 來達到更精準的控制權責關係。我們會透過一個手風琴（Acc...

yuu ‧ 2023-10-05 ‧團隊好想工作室 v7.0

0 Like 0 留言 246 瀏覽

技術使用 Redux-toolkit + RTK-query 取代 useContext

最近公司打算統一使用 Redux-toolkit + RTK-query 去取代 useContext，這幾天惡補一下荒廢已久的 Redux，並且把 Redux...

janlin002 ‧ 2023-10-09

0 Like 0 留言 246 瀏覽

鐵人賽 Modern Web DAY 10

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

技術【Day 10】ref和useState：定義與畫面渲染有關的State

前天和昨天花了一些時間了解Vue和React的「單向資料流」設計模式後，接著來看看與畫面渲染有關的state的部分，雖然在使用上，某些程度來說，Vue和Reac...

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

0 Like 0 留言 244 瀏覽

鐵人賽 Modern Web DAY 19

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

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

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

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

0 Like 0 留言 244 瀏覽

鐵人賽 Modern Web DAY 9

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

技術 [next 13] - data fetch

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

時雨 ‧ 2023-09-24

0 Like 0 留言 243 瀏覽

鐵人賽 Modern Web DAY 3

組裝前端開發工具箱，從 NX 入手系列第 3 篇

技術架設元件庫

目前的元件還放在 ironman-nextjs 這個 app 底下，也只有這個 app 能取用到這些元件，為了讓之後的專案可以一起運用這些元件，接下來要把他們抽...

Jasper ‧ 2023-09-04 ‧團隊我在鐵人賽烙賽、也在外木山裸泳◑ω◐

0 Like 0 留言 243 瀏覽

鐵人賽 Modern Web DAY 16

react 學習記錄系列第 16 篇

技術 [Day16]我的 react 學習記錄 - useLayoutEffect

這篇文章的主要內容簡單介紹 useLayoutEffect。 useLayoutEffect useLayoutEffect 是另一種版本的 useEffe...

evan_hsu ‧ 2023-09-30

0 Like 0 留言 242 瀏覽

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

鐵人賽 Modern Web DAY 10

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

技術 [Day 10] Design System - React Slots (插槽) - 實作

本系列文章會在筆者的部落格繼續連載！Design System 101 感謝大家的閱讀！本文同步上傳到筆者的個人部落格，裡面透過 Sandpack 直接...

Jing.tech ‧ 2023-09-25

技術 [Day30]我的 react 學習記錄 - 結束啦！

技術 【Day21】前端框架淺談＆React環境

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

技術 React 走出新手村 — 在組件裡犯的錯(I)

技術 30天React練功坊-攻克常見實務/面試問題 Day26: Add emojis to the page onclick(interview question)

技術 Day27 Electron應用程式-7

技術 30天React練功坊-攻克常見實務/面試問題 Day27: Add emojis to the page onclick PartII(interview question)

技術 Day15：快速於 React 專案引入 Firebase 服務

技術 React 走出新手村－高階組件 (H.O.C.)

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

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

技術 30天React練功坊-攻克常見實務/面試問題 Day20: useState with complex form

技術 30天React練功坊-攻克常見實務/面試問題 Day29: Simple Tic-Tac-Toe game(interview question)

技術 Day12：side project 的網頁組成元素

技術 Day28：React 與 Firebase 的 CRUD 串接(二)

技術 Day29：當顧客開始訂位

技術 Day 26 - React 基礎實作練習：追加購物清單

技術 Day29 Electron應用程式-9

技術 [Day14]我的 react 學習記錄 - createContext & useContext

技術 [Day12]我的 react 學習記錄 - useRef

技術 React中的<StrictMode>：提前發現和解決應用程式的問題

技術 Day 20 - 在元件間共用 state

技術 使用 Redux-toolkit + RTK-query 取代 useContext

技術 【Day 10】ref和useState：定義與畫面渲染有關的State

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

技術 [next 13] - data fetch

技術 架設元件庫

技術 [Day16]我的 react 學習記錄 - useLayoutEffect

技術 [next 13] - server component

技術 [Day 10] Design System - React Slots (插槽) - 實作

標記使用者

技術【Day21】前端框架淺談＆React環境

技術使用 Redux-toolkit + RTK-query 取代 useContext

技術【Day 10】ref和useState：定義與畫面渲染有關的State

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

技術架設元件庫