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

1 Like 0 留言 3794 瀏覽

鐵人賽 Modern Web DAY 29

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

技術【Day29】反饋元件 - Toast

元件介紹 Toast 可以提供使用者操作的反饋訊息。包含一般資訊、操作成功、操作失敗、警告訊息等。預設為在頂部置中顯示並自動消失，是一種不打斷用戶操作的輕量級提...

Taiming ‧ 2021-10-12 ‧團隊董事長清潔隊

0 Like 0 留言 3791 瀏覽

鐵人賽自我挑戰組 DAY 22

請你當我的好朋友吧！ReactJS！系列第 22 篇

技術【DAY 22】react-router，實現單頁式網站的秘密

【前言】　　終於來到最後的react-router囉！再撐一下就可以把這三劍客都認識一遍了！【正文】　　我想大家應該都很常聽到什麼SPA、單頁式網站、Singl...

Hyora ‧ 2018-10-28

0 Like 0 留言 3790 瀏覽

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

技術照著React官方網站學習JSX

挑戰 React 第五篇實作範例在了解什麼是jsx前，我們先來看實作範例，以下有兩個index.html檔案的程式碼，差異在於有沒有編譯成瀏覽器看得懂得ja...

tom_yukuan ‧ 2019-11-07

0 Like 0 留言 3765 瀏覽

鐵人賽 Software Development DAY 28

用設計模式與Typescript，在React異世界築起堅固保壘！系列第 28 篇

技術 [Day28] 操作大量資料的好幫手 ─ 迭代器(Iterator) <模式篇>

嗨大家好我是一路爬坡的阿肥今天要介紹最後一個模式了真的是...太開心啦！今天是澎湖遊最後一天，還是一樣跟大家分享個照片～最想念的應該是漂亮的海水跟夕陽...

Yuri Tsai ‧ 2019-10-13

0 Like 0 留言 3748 瀏覽

鐵人賽 Modern Web DAY 12

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

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

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

Sean Liu ‧ 2021-09-27

2 Like 0 留言 3739 瀏覽

技術 React 中 setState 的踩雷與解決方式

挑戰 React 第十四篇上篇我們了解 setState 為非同步，而此篇將會舉一個setState踩雷的例子並且告訴大家如何改進。預先理解準備上篇程式碼...

tom_yukuan ‧ 2019-12-14

0 Like 0 留言 3726 瀏覽

鐵人賽 Modern Web DAY 22

React.js 從【0】到【1】推坑計畫系列第 22 篇

技術【Day 22】React.memo

昨天講到了 class based component 可以透過 shouldComponentUpdate 比較前一次 props 與前一次 state 來...

莫力全 Kyle Mo ‧ 2019-09-26

0 Like 0 留言 3721 瀏覽

鐵人賽 Modern Web DAY 7

我不用Expo啦，React Native！系列第 7 篇

技術 [Day7] 訂定資料格式-2

今日關鍵字：interface 建立動畫格式延續昨天的interface首先幫我的動畫資料訂定格式這時如果要設定一個動畫陣列 [Anime1 ,Anime...

b97201019 ‧ 2020-09-07

0 Like 0 留言 3720 瀏覽

鐵人賽自我挑戰組 DAY 17

React初心者30天的探索之路系列第 17 篇

技術 [Day 17] React Developer Tools除錯工具

在沒有用過框架的chrome的除錯工具前，我其實不知道類似這樣的工具在開發上能夠有什麼幫助？不過經過實際使用一陣子之後，才發現dev tools真的太好用了(...

Lieutenant ‧ 2020-09-17

0 Like 0 留言 3719 瀏覽

鐵人賽自我挑戰組 DAY 3

不用前端框架手把手打造基礎SPA網站系列第 3 篇

技術 [DAY03]淺談前端SPA框架-以React為例(上篇)

既然要自己寫SPA，我們先來談談前端框架，本文分成上下篇，這邊重點不在教會你使用，而是想告訴你框架做了些什麼，以下用React來當例子: 傑森是一名網頁設計師，...

river_huang ‧ 2020-09-17

0 Like 0 留言 3689 瀏覽

鐵人賽 Modern Web DAY 12

React + GraphQL 全端練習筆記系列第 12 篇

技術 Redux 簡介

本系列文以製作專案為主軸，紀錄小弟學習React以及GrahQL的過程。主要是記下重點步驟以及我覺得需要記憶的部分，有覺得不明確的地方還請留言多多指教。 R...

Jasper ‧ 2020-09-25 ‧團隊Outcome First

7 Like 1 留言 3688 瀏覽

鐵人賽 Modern Web DAY 26

一步一腳印的React旅程系列第 26 篇

技術 [筆記][React]來做個作品吧！待辦事項「todolist」篇(6)-上吧！迴圈！

Hi！大家好啊！其實最後五篇的時候一直在作品中間鬼打牆XD，有時候想說這樣做，睡前又想說可以這樣做，起床改一改上班又想到另外一個作法，總之真的覺得第一次使用組件...

神Q超人 ‧ 2018-10-31 ‧團隊IT成長營

0 Like 0 留言 3684 瀏覽

鐵人賽 Modern Web DAY 12

RRRR的世界 (Ruby on Rails + React + Redux) 系列第 12 篇

技術 Day 12, React props and state 藏在component裡的變數

今天終於要開始講ReactJs了，我選擇先把Props跟State先講，因為這會關係到component的重新生成(re-render)。好！先看看之前的Hel...

Joseph-bug ‧ 2016-12-27

3 Like 1 留言 3678 瀏覽

鐵人賽 Modern Web DAY 21

在 React 生態圈內打滾的一年 feat. TypeScript 系列第 21 篇

技術 Day20 | Component 被 Redux 罩著怎麼測試？

前言就 Redux 而言，與上一篇的 Counter 不同的地方就是多了 Action 以及 Reducer，而它們也都只是純函數，測試並不會是難點，需要思考...

神Q超人 ‧ 2019-10-02 ‧團隊IT成長團

2 Like 0 留言 3662 瀏覽

鐵人賽 SideProject30 DAY 3

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

技術 Day03：side project 必備的 Flow Chart(一)

本文同步刊載於我的個人部落格一、Flow Chart 是什麼？流程圖(Flow Chart)是一種圖形化表示流程或過程的工具，通常用來展示一个系统、流...

Annie ‧ 2023-09-18

0 Like 0 留言 3662 瀏覽

鐵人賽 Modern Web DAY 13

React.js 從【0】到【1】推坑計畫系列第 13 篇

技術【Day 13】Conditional Rendering

大家好，經過兩篇 style 的介紹，今天總算要回到處理邏輯的部分了。一般在開發應用時，常常會需要根據特定 condition 做邏輯判斷，除了一般我們熟知的...

莫力全 Kyle Mo ‧ 2019-09-17

1 Like 1 留言 3661 瀏覽

鐵人賽 Modern Web DAY 22

一次打破 React 常見的學習門檻與觀念誤解系列第 22 篇

技術 [Day 22] 保持資料流 — 不要欺騙 hooks 的 dependencies（上）

在上一篇關於 useEffect 的深度解析中，我們已經了解到了 dependencies 是一種效能的最佳化手段，而不是用來控制生命週期或是商業邏輯。對於 u...

Zet ‧ 2022-10-07

1 Like 0 留言 3650 瀏覽

鐵人賽 Modern Web DAY 8

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

技術 #08 實作篇 — 使用 Next.js 的各種 Data Fetching 方式實作小專案 ft. Github API

大家好！昨天實作了小小專案，也寫了一篇短短的介紹文，那今天跟大家分享怎麼用 Next.js 的各種 data fetching functions 串 API...

Jade ‧ 2021-09-23

1 Like 0 留言 3645 瀏覽

鐵人賽 Modern Web DAY 2

【我不會寫 React Component 】系列第 2 篇

技術專案建置【我不會寫 React Component 】

工欲善其事，必先利其器。為了方便我們後續的元件開發，我們要先做一些前置動作。至於要不要採用以下架構，可以自行決定。想要看完整的專案：https://gi...

HelloKayac ‧ 2022-09-15

1 Like 2 留言 3633 瀏覽

鐵人賽 Modern Web DAY 9

從比入門再往前一點開始，一直到深入React.js 系列第 9 篇

技術【Day.09】React入門 - Hello world、React virtual DOM、webpack-dev-server

(2024/04/06更新) 因應React在18後更新了許多不同的語法，更新後的教學之後將陸續放在新的blog 中，歡迎讀者到該處閱讀，我依然會回覆這邊的...

Andy Chang ‧ 2020-09-24

0 Like 0 留言 3629 瀏覽

技術 Create-React-App 到 Vite: ESLint 環境架設

會有今天的文章是因為上次由 CRA 轉到 Vite 後(如果還沒有看文章的話，可以點這裡，發現原本的ESLint設定全部都不能用了，需要全部重新設定這邊作為...

janlin002 ‧ 2022-10-16

0 Like 0 留言 3626 瀏覽

鐵人賽 Modern Web DAY 27

React.js 從【0】到【1】推坑計畫系列第 27 篇

技術【Day 27】Redux middleware - redux-thunk

還記得之前介紹過 redux 的基本用法嗎？因為覺得 React 基礎講的差不多了，今天決定回過頭來講講 redux middleware。 Redux-mid...

莫力全 Kyle Mo ‧ 2019-10-01

0 Like 1 留言 3612 瀏覽

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

1 Like 1 留言 3599 瀏覽

鐵人賽 Modern Web DAY 10

I Want To Know React 系列第 10 篇

技術 I Want To Know React - State 內部運作原理

回顧 State 在上兩個章節：初探 State 與 Class Component State 語法中，我們了解了 state 的概念與用法，先來重新複習一下...

Henry Chang ‧ 2020-09-25 ‧團隊404 Not Found

0 Like 0 留言 3595 瀏覽

鐵人賽自我挑戰組 DAY 23

請你當我的好朋友吧！ReactJS！系列第 23 篇

技術【DAY 23】react-router三劍客，Router、Route、Link（上）

【前言】　　不怕我誤人子弟嗎QQ【正文】　　昨天我們簡單的利用react-router模擬一個SPA的網頁，今天我們就來說說Router、Route、Link到...

Hyora ‧ 2018-10-29

1 Like 0 留言 3545 瀏覽

鐵人賽 Modern Web DAY 13

使用 Modern Web 技術來打造 Native App 系列第 13 篇

技術 Day 13：Navigation Part II：新的 API - NavigationExperimental

前言 Product Pain 是 React Native 聆聽社群聲音的重要平台，而在上面 Navigator 是個知名的「Pain」，也催生了 Navig...

C. T. Lin ‧ 2016-12-28

2 Like 1 留言 3527 瀏覽

鐵人賽 Modern Web DAY 1

【我不會寫 React Component 】系列第 1 篇

技術導讀【我不會寫 React Component 】

Introduction 這個系列會分享我這些年累積下來 React Component 的開發經驗，也藉此機會嘗試一下我發現的新玩具。這系列不是走理論派，...

HelloKayac ‧ 2022-09-14

1 Like 0 留言 3523 瀏覽

鐵人賽 Modern Web DAY 10

【我不會寫 React Component 】系列第 10 篇

技術如何製作對話視窗 dialog【 dialog | 我不會寫 React Component 】

hashtags: #react, #components, #accessibility, #dialog About 對話視窗是一種視窗，會覆蓋在主視窗...

HelloKayac ‧ 2022-09-23

1 Like 0 留言 3494 瀏覽

鐵人賽 Modern Web DAY 19

從比入門再往前一點開始，一直到深入React.js 系列第 19 篇

技術【Day.19】React效能 - 用memo避免不必要的重複渲染

(2024/04/06更新) 因應React在18後更新了許多不同的語法，更新後的教學之後將陸續放在新的blog 中，歡迎讀者到該處閱讀，我依然會回覆這邊的...

Andy Chang ‧ 2020-10-04

技術 【Day29】反饋元件 - Toast

技術 【DAY 22】react-router，實現單頁式網站的秘密

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

技術 照著React官方網站學習JSX

技術 [Day28] 操作大量資料的好幫手 ─ 迭代器(Iterator) <模式篇>

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

技術 React 中 setState 的踩雷與解決方式

技術 【Day 22】React.memo

技術 [Day7] 訂定資料格式-2

技術 [Day 17] React Developer Tools除錯工具

技術 [DAY03]淺談前端SPA框架-以React為例(上篇)

技術 Redux 簡介

技術 [筆記][React]來做個作品吧！待辦事項「todolist」篇(6)-上吧！迴圈！

技術 Day 12, React props and state 藏在component裡的變數

技術 Day20 | Component 被 Redux 罩著怎麼測試？

技術 Day03：side project 必備的 Flow Chart(一)

技術 【Day 13】Conditional Rendering

技術 [Day 22] 保持資料流 — 不要欺騙 hooks 的 dependencies（上）

技術 #08 實作篇 — 使用 Next.js 的各種 Data Fetching 方式實作小專案 ft. Github API

技術 專案建置【 我不會寫 React Component 】

技術 【Day.09】React入門 - Hello world、React virtual DOM、webpack-dev-server

技術 Create-React-App 到 Vite: ESLint 環境架設

技術 【Day 27】Redux middleware - redux-thunk

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

技術 I Want To Know React - State 內部運作原理

技術 【DAY 23】react-router三劍客，Router、Route、Link（上）

技術 Day 13：Navigation Part II：新的 API - NavigationExperimental

技術 導讀【 我不會寫 React Component 】

技術 如何製作對話視窗 dialog【 dialog | 我不會寫 React Component 】

技術 【Day.19】React效能 - 用memo避免不必要的重複渲染

標記使用者

技術【Day29】反饋元件 - Toast

技術【DAY 22】react-router，實現單頁式網站的秘密

技術照著React官方網站學習JSX

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

技術【Day 22】React.memo

技術【Day 13】Conditional Rendering

技術專案建置【我不會寫 React Component 】

技術【Day.09】React入門 - Hello world、React virtual DOM、webpack-dev-server

技術【Day 27】Redux middleware - redux-thunk

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

技術【DAY 23】react-router三劍客，Router、Route、Link（上）

技術導讀【我不會寫 React Component 】

技術如何製作對話視窗 dialog【 dialog | 我不會寫 React Component 】

技術【Day.19】React效能 - 用memo避免不必要的重複渲染