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

0 Like 0 留言 765 瀏覽

鐵人賽 Modern Web DAY 13

React Native & Redux 初步探討系列第 13 篇

技術 Day 13 Component Lifecycle -2

第 13 天啦～～～昨天我們談到 lifecycle，那我們今天來稍微介紹一下，在生命週期每個階段的流程吧那在 v15 -> v16 時， Reac...

阿毛 ‧ 2021-09-28

2 Like 0 留言 15133 瀏覽

鐵人賽 Modern Web DAY 28

用Jest和Enzyme來寫React測試吧!! 系列第 28 篇

技術【Day28】React Query 簡易說明及使用 (´∀`)

What's React Query !? React Query 是一個適合用於React Hook的Library，它可以幫助我們取得、同步、更新跟緩存我...

Ivy ‧ 2021-09-28

3 Like 0 留言 5838 瀏覽

鐵人賽 Modern Web DAY 13

今晚，我想來點 Web 前端效能優化大補帖！系列第 13 篇

技術 Day13 X CSS GPU Acceleration

其實今天的主題應該算是昨天 High Performance CSS 的延伸。大家應該都有遇過網頁的動畫有點不順暢甚至卡頓的經驗吧？是不是覺得很煩人呢？就算...

莫力全 Kyle Mo ‧ 2021-09-28 ‧團隊StarBugs 星巴哥技術週刊

0 Like 0 留言 895 瀏覽

鐵人賽 Modern Web DAY 12

關於我快30歲的後端工程師，想轉職成全端工程師，在前端世界中尋求機會的那件事(前端篇) 系列第 12 篇

技術 [Day 12]我也好想成為時間管理大師(前端篇)

挑戰目標: MockNative Camp 挑戰還沒過半就已經覺得自己債越積越深了...今天要來挑戰實作Footer(原本我們可以從開發者工具看到footer...

Moscle.dev ‧ 2021-09-27

0 Like 0 留言 1423 瀏覽

鐵人賽 Modern Web DAY 14

30 天擁有一套自己手刻的 React UI 元件庫系列第 14 篇

技術【Day14】數據展示元件 - Card

元件介紹 Card 是一個可以顯示單個主題內容及操作的元件，通常這個主題內容包含圖片、標題、描述或是一些操作。例如在電商網站，一個商品或需要包含商品圖片、商品...

Taiming ‧ 2021-09-27 ‧團隊董事長清潔隊

0 Like 0 留言 1570 瀏覽

鐵人賽 Modern Web DAY 12

製作你的無程式碼(No-code)個人網頁 ft. Next.js, SWR, 串 Youtube, IG, Github, Notion API ～系列第 12 篇

技術 #12 No-code 之旅 — 在 Next.js 專案中顯示 RSS 的資料 ft. RSS Parser

嗨嗨嗨！昨天使用 Notion SDK 顯示我的 Notion page 裡面的內容，可以在這裡看看喔。那今天新增了一個新的頁面，使用 RSS 顯示iT邦幫忙系...

Jade ‧ 2021-09-27

0 Like 0 留言 640 瀏覽

鐵人賽 Modern Web DAY 12

React Native & Redux 初步探討系列第 12 篇

技術 Day 12 Component Lifecycle -1

第十二天囉～當更新畫面我們必須觸發 React 的更新流程，這樣最新的資料才會顯示在畫面上，而這樣的流程，就包含在了 React 的 component...

阿毛 ‧ 2021-09-27

0 Like 0 留言 3562 瀏覽

鐵人賽 Modern Web DAY 12

用React刻自己的投資Dashboard 系列第 12 篇

技術用React刻自己的投資Dashboard Day12 - 下拉式選單篩選功能

tags: 2021鐵人賽 React 還記得這個網站有篩選圖表的功能嗎？當初畫wireframe的時候考量到未來圖表可能會越來越多，因此規劃了下拉式選單來做篩...

Sean Liu ‧ 2021-09-27

0 Like 0 留言 2053 瀏覽

鐵人賽 Modern Web DAY 27

用Jest和Enzyme來寫React測試吧!! 系列第 27 篇

技術【Day27】React Redux 原理及應用方法簡介 ╰(°ㅂ°)╯

What's Redux !? Redux 是一個用來集中管理state的一個library，用了Redux我們可以直接取得或修改相同的state，不用再一層...

Ivy ‧ 2021-09-27

0 Like 0 留言 3532 瀏覽

鐵人賽 Modern Web DAY 11

製作你的無程式碼(No-code)個人網頁 ft. Next.js, SWR, 串 Youtube, IG, Github, Notion API ～系列第 11 篇

技術 #11 No-code 之旅 — 在 Next.js 專案中顯示 Notion 的資料 ft. Notion SDK

哈囉！昨天使用 SWR 實作了一個小功能，讓使用者可以列出某 Github user 的所有公開 repository～今天用 Notion SDK 新增了一...

Jade ‧ 2021-09-26

0 Like 0 留言 766 瀏覽

鐵人賽 Modern Web DAY 11

關於我快30歲的後端工程師，想轉職成全端工程師，在前端世界中尋求機會的那件事(前端篇) 系列第 11 篇

技術 [Day 11]在你順利的時候來一拳才是標配(前端篇)

挑戰目標: MockNative Camp 今天要來實作Nav Detail的部分，昨天將相關的List放到了config中，也可以成功的hover該tab後...

Moscle.dev ‧ 2021-09-26

0 Like 0 留言 1377 瀏覽

鐵人賽 Modern Web DAY 26

用Jest和Enzyme來寫React測試吧!! 系列第 26 篇

技術【Day26】Function Component 生命週期 & Hook (´･∀･`)

講到Function Component 一定是會講到Hook的! Hook 讓我們可以不用改變Component的階層就可以重用stateful的邏輯。 Ho...

Ivy ‧ 2021-09-26

0 Like 0 留言 1198 瀏覽

鐵人賽 Modern Web DAY 11

用React刻自己的投資Dashboard 系列第 11 篇

技術用React刻自己的投資Dashboard Day11 - 分離UI元件與抓取數據元件

tags: 2021鐵人賽 React 本篇要將call api的功能獨立成一個元件，在架構上會更清楚的分工不同檔案的功能，之後也有可能是其他元件會呼叫api的...

Sean Liu ‧ 2021-09-26

0 Like 0 留言 1797 瀏覽

鐵人賽 Modern Web DAY 11

關於 UI 元件你所該知道的事系列第 11 篇

技術 Day 11 - Design System x 實作 — Transition

今天要介紹的是網頁元件會用到的動畫，在 Day 07 已經介紹過過渡動畫這邊主要就是三大重點要定義：過渡類型（ Transition Type）、持續時間（D...

parkerhiphop027 ‧ 2021-09-26

0 Like 1 留言 8344 瀏覽

鐵人賽 Modern Web DAY 13

30 天擁有一套自己手刻的 React UI 元件庫系列第 13 篇

技術【Day13】數據展示元件 - Accordion/Collapse 摺疊面板

元件介紹 Accordion 是一個可折疊/展開內容區域的元件。主要是針對顯示內容複雜或很多的頁面進行分區塊的顯示及隱藏。參考設計 & 屬性分析元件...

Taiming ‧ 2021-09-26 ‧團隊董事長清潔隊

2 Like 0 留言 7361 瀏覽

鐵人賽 Modern Web DAY 11

今晚，我想來點 Web 前端效能優化大補帖！系列第 11 篇

技術 Day11 X Lazy Loading

還記得昨天 Virtualized List 篇章開頭放的 Facebook demo 影片嗎？有沒有發現我們好像遺漏了什麼功能沒有說明？先問大家一個問題...

莫力全 Kyle Mo ‧ 2021-09-26 ‧團隊StarBugs 星巴哥技術週刊

0 Like 0 留言 719 瀏覽

鐵人賽 Modern Web DAY 10

React Native & Redux 初步探討系列第 10 篇

技術 Day 10 state & props -1

哇喔～第 10 天～破個位數了！今天來介紹一下前面提到的 props & state 我們知道 React Element 是描述關於此節點最終輸...

阿毛 ‧ 2021-09-25

0 Like 0 留言 1972 瀏覽

鐵人賽 Modern Web DAY 10

30天學 React.js 系列第 10 篇

技術 [Day10] [筆記]React Hooks-useMemo、useCallback

前言我們昨天介紹了 Hooks 中比較常用的 UseState 跟 UseEffect，那我們今天繼續接著介紹另外一種類型的 Hooks - Memorize...

chunwen ‧ 2021-09-25

0 Like 0 留言 1889 瀏覽

鐵人賽 Modern Web DAY 10

製作你的無程式碼(No-code)個人網頁 ft. Next.js, SWR, 串 Youtube, IG, Github, Notion API ～系列第 10 篇

技術 #10 實作篇 — 使用 SWR 抓取和 Cache 資料

嗨大家！昨天跟大家分享一個 library 叫做 SWR，文章在這裡～今天用 SWR 新增了小功能，使用者可以輸入 Github username 然後列出該...

Jade ‧ 2021-09-25

0 Like 0 留言 3461 瀏覽

鐵人賽 Modern Web DAY 12

30 天擁有一套自己手刻的 React UI 元件庫系列第 12 篇

技術【Day12】數據展示元件 - Tooltip

元件介紹 Tooltip 是一個文字彈出提醒元件，當 active 狀態時，會顯示對該子元件描述的文字。參考設計 & 屬性分析位置相對於被包覆的子...

Taiming ‧ 2021-09-25 ‧團隊董事長清潔隊

0 Like 0 留言 1282 瀏覽

鐵人賽 Modern Web DAY 15

1995到2021，php到react網站開發歷程系列第 15 篇

技術 DAY15-React to React

前言：上一篇我們講了如何建立你的第一個React網頁，那今天阿森會介紹我們寫網頁會用到怎樣的架構，就讓我們開始吧！示範網頁：這裡就拿我之前寫過的網也來當...

Cooksuhr ‧ 2021-09-27 ‧團隊Obit0 Studio

0 Like 0 留言 1220 瀏覽

鐵人賽 Modern Web DAY 14

1995到2021，php到react網站開發歷程系列第 14 篇

技術 DAY14-React Overview

前言：在經過兩個禮拜的內容後，相信大家對寫網頁也有一定的基礎了吧！這兩個禮拜我們介紹很了多很好用的工具，像是php, Mysql, JavaScript等等...

Cooksuhr ‧ 2021-09-26 ‧團隊Obit0 Studio

0 Like 1 留言 3439 瀏覽

鐵人賽 Modern Web DAY 10

用React刻自己的投資Dashboard 系列第 10 篇

技術用React刻自己的投資Dashboard Day10 - 用useCallback hook幫你記住函式

tags: 2021鐵人賽 React 在Day9說明了useEffect的用法，不過其實當Card.js渲染時，會發現console有錯誤訊息如下： src...

Sean Liu ‧ 2021-09-25

0 Like 0 留言 979 瀏覽

鐵人賽 Modern Web DAY 25

用Jest和Enzyme來寫React測試吧!! 系列第 25 篇

技術【Day25】React Class Component 生命週期簡單介紹

在寫React的時候其實有分為兩種寫法 Class Component this.state or this.props會改變較複雜的情境可以使用，因為...

Ivy ‧ 2021-09-25

0 Like 0 留言 1892 瀏覽

鐵人賽 Modern Web DAY 10

關於 UI 元件你所該知道的事系列第 10 篇

技術 Day 10 - Design System x 實作 — Icon 元件

今天就要來實作 Icon 啦！事不宜遲直接開始！想先看 Code 或是 Demo 的由此去：Github Repo： ithelp-ui-demoLive D...

parkerhiphop027 ‧ 2021-09-25

4 Like 0 留言 8426 瀏覽

鐵人賽 Modern Web DAY 10

今晚，我想來點 Web 前端效能優化大補帖！系列第 10 篇

技術 Day10 X 實作一個簡單的 Virtualized List 吧！

Facebook、Instagram 應該都是我們日常生活中非常依賴的社群媒體了，每天閒來無事就要滑滑動態，看看朋友最近發生了什麼事。不過你有沒有注意到一件事...

莫力全 Kyle Mo ‧ 2021-09-25 ‧團隊StarBugs 星巴哥技術週刊

0 Like 0 留言 5352 瀏覽

鐵人賽 Modern Web DAY 9

製作你的無程式碼(No-code)個人網頁 ft. Next.js, SWR, 串 Youtube, IG, Github, Notion API ～系列第 9 篇

技術 #09 No-code 之旅 — 怎麼在 Client-side 抓取資料？SWR 簡介

安安！前幾天講了怎麼在專案裡用些 data fetching functions 做 pre-rendering。不過如果想要直接在 client-side 抓...

Jade ‧ 2021-09-24

0 Like 0 留言 760 瀏覽

鐵人賽 Modern Web DAY 9

React Native & Redux 初步探討系列第 9 篇

技術 Day 09 function ?? class ??

第九天～昨天我們介紹了 Component，提到了說在 React 裡，建立 Component 有兩種方式 functional component c...

阿毛 ‧ 2021-09-24

3 Like 0 留言 3891 瀏覽

鐵人賽 Modern Web DAY 9

今晚，我想來點 Web 前端效能優化大補帖！系列第 9 篇

技術 Day09 X Resource Hint & Non-Blocking Script Tag

經過昨天的內容，讀者們應該對於網頁的渲染流程有大致的理解了。我們再小小複習一下，大致上網頁的渲染流程為：讀取 HTML 後生成 DOM Tree 讀取...

莫力全 Kyle Mo ‧ 2021-09-24 ‧團隊StarBugs 星巴哥技術週刊

0 Like 0 留言 1434 瀏覽

鐵人賽 Modern Web DAY 9

用React刻自己的投資Dashboard 系列第 9 篇

技術用React刻自己的投資Dashboard Day9 - useEffect hook

tags: 2021鐵人賽 React 既上一篇介紹完useState hook後，本篇就來介紹Day6也有用到的useEffect hook，在React官網...

Sean Liu ‧ 2021-09-24

技術 Day 13 Component Lifecycle -2

技術 【Day28】React Query 簡易說明及使用 (´∀`)

技術 Day13 X CSS GPU Acceleration

技術 [Day 12]我也好想成為時間管理大師(前端篇)

技術 【Day14】數據展示元件 - Card

技術 #12 No-code 之旅 — 在 Next.js 專案中顯示 RSS 的資料 ft. RSS Parser

技術 Day 12 Component Lifecycle -1

技術 用React刻自己的投資Dashboard Day12 - 下拉式選單篩選功能

技術 【Day27】React Redux 原理及應用方法簡介 ╰(°ㅂ°)╯

技術 #11 No-code 之旅 — 在 Next.js 專案中顯示 Notion 的資料 ft. Notion SDK

技術 [Day 11]在你順利的時候來一拳才是標配(前端篇)

技術 【Day26】Function Component 生命週期 & Hook (´･∀･`)

技術 用React刻自己的投資Dashboard Day11 - 分離UI元件與抓取數據元件

技術 Day 11 - Design System x 實作 — Transition

技術 【Day13】數據展示元件 - Accordion/Collapse 摺疊面板

技術 Day11 X Lazy Loading

技術 Day 10 state & props -1

技術 [Day10] [筆記]React Hooks-useMemo、useCallback

技術 #10 實作篇 — 使用 SWR 抓取和 Cache 資料

技術 【Day12】數據展示元件 - Tooltip

技術 DAY15-React to React

技術 DAY14-React Overview

技術 用React刻自己的投資Dashboard Day10 - 用useCallback hook幫你記住函式

技術 【Day25】React Class Component 生命週期簡單介紹

技術 Day 10 - Design System x 實作 — Icon 元件

技術 Day10 X 實作一個簡單的 Virtualized List 吧！

技術 #09 No-code 之旅 — 怎麼在 Client-side 抓取資料？SWR 簡介

技術 Day 09 function ?? class ??

技術 Day09 X Resource Hint & Non-Blocking Script Tag

技術 用React刻自己的投資Dashboard Day9 - useEffect hook

標記使用者

技術【Day28】React Query 簡易說明及使用 (´∀`)

技術【Day14】數據展示元件 - Card

技術用React刻自己的投資Dashboard Day12 - 下拉式選單篩選功能

技術【Day27】React Redux 原理及應用方法簡介 ╰(°ㅂ°)╯

技術【Day26】Function Component 生命週期 & Hook (´･∀･`)

技術用React刻自己的投資Dashboard Day11 - 分離UI元件與抓取數據元件

技術【Day13】數據展示元件 - Accordion/Collapse 摺疊面板

技術【Day12】數據展示元件 - Tooltip

技術用React刻自己的投資Dashboard Day10 - 用useCallback hook幫你記住函式

技術【Day25】React Class Component 生命週期簡單介紹

技術用React刻自己的投資Dashboard Day9 - useEffect hook