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

0 Like 0 留言 4250 瀏覽

鐵人賽 Modern Web DAY 5

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

技術【Day05】數據輸入元件 - Input Text / Text Field

元件介紹 Input 是一個輸入元件。通常在我們希望用戶能夠輸入一些資訊的時候會需要用到它。由於原生 html 的 input 透過 type 這個屬性的改變，...

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

0 Like 0 留言 4211 瀏覽

鐵人賽 Modern Web DAY 19

Spring Boot and React - 前後端 30 天分手日記系列第 19 篇

技術 Day 19 - React 什麼是React? 要怎麼用?

上一章 Day 18 - MySQL 使用Annontation設定欄位 (2) React 並不是一個新的語言, 也不是新的Framework 而是一個由Fa...

Aiden ‧ 2019-10-05

2 Like 0 留言 4196 瀏覽

鐵人賽 Modern Web DAY 12

以經典小遊戲為主題之ReactJS應用練習系列第 12 篇

技術 Day12 - 貪吃蛇篇：蛇的原理及資料結構規劃

事前聲明在挑戰鐵人賽之前，其實我也完全沒有想過貪吃蛇要怎麼做，所以為了做這次的貪吃蛇遊戲，我找了一些資料。其中對我幫助很大的是墨雨設計吳哲宇老師在 hahow...

Taiming ‧ 2018-10-27 ‧團隊開橋找井

2 Like 0 留言 4193 瀏覽

鐵人賽自我挑戰組 DAY 15

學什麼就寫什麼，知道什麼就分享什麼系列第 15 篇

技術與工程師的協作之路-我與React前端工程師的協作模式

今天跟大家分享一套協作模式！目前，我負責的部分是UI與切版，可是前端要使用react技術。（當然，不是每間公司都是這樣的工作職責分配，切版有時候不一定是設計師...

Wen Chien ‧ 2018-10-29

3 Like 0 留言 4175 瀏覽

鐵人賽 Modern Web DAY 8

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

技術 Day08 X 瀏覽器架構演進史 & 渲染機制

「在未來，瀏覽器會變得越來越強，以後我們可以在瀏覽器做越來越多事。」身為常與瀏覽器共舞的 Web 工程師，尤其是 Frontend Engineer，如...

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

4 Like 3 留言 4118 瀏覽

鐵人賽 Modern Web DAY 10

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

技術 Day09 | 掌管 Lifecycle 和一切作用的 useEffect

前言 Lifecycle 被稱為生命週期，在 Component 中，我們可以大致把生命週期分成三個： Component Render 完畢。 Compon...

神Q超人 ‧ 2019-09-21 ‧團隊IT成長團

2 Like 0 留言 4080 瀏覽

鐵人賽 Modern Web DAY 6

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

技術 [Day 06] Render React elements

在瞭解了 React element 這種虛擬抽象層中的最小建構單位之後，我們來深入了解一下要如何讓 React elements 產生出對應的真實 DOM e...

Zet ‧ 2022-09-21

2 Like 0 留言 4064 瀏覽

鐵人賽 Modern Web DAY 4

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

技術 [Day 04] DOM 與 Virtual DOM

就如同官方文件所描述的，React 是一個用於「打造 UI」的工具，而在瀏覽器中我們呈現 UI 的載體就是 DOM。DOM 與瀏覽器的畫面渲染引擎綁定，因此操作...

Zet ‧ 2022-09-19

0 Like 0 留言 4056 瀏覽

鐵人賽 Modern Web DAY 5

從0到1： 5個月轉職工程師大挑戰系列第 6 篇

技術 Day 6: 為什麼用React？什麼是Create-React-App？ { D2 }

The Birth of React 以前是單純 HTML, CSS, Javascript 跟 DOM 互動問題是每個瀏覽器都有不一樣的功能...

Roy Wang ‧ 2020-09-06

3 Like 0 留言 4029 瀏覽

鐵人賽 Modern Web DAY 14

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

技術 [筆記][React]當React遇上Redux(2)-資料的傳遞方式

Hello！大家好！昨天初步認識了Redux後(真的非常初步XD)，知道他如何管理資料了，那今天要來說說在Redux手上的資料該怎麼傳給React的組件！就請各...

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

1 Like 0 留言 4029 瀏覽

鐵人賽 Modern Web DAY 19

循序漸進學習 Javascript 測試系列第 19 篇

技術 Day 19 測試 React 元件：Mock HTTP Requests

如果元件內有牽涉 HTTP requests ，我們通常需要在測試中 mock 它們。今天將學習如何測試元件的時候 mock 這些 HTTP requests。...

TWGD ‧ 2020-10-04

0 Like 1 留言 4023 瀏覽

鐵人賽 Modern Web DAY 3

用Gatsby.js做出一個簡單的部落格系列第 3 篇

技術 Day3. React的基本用法 (二)

今天最一開始，我們要在我們的主元件中，去加入一個子元件( sub-components )。 Sub-component 首先，我們新增src/comp...

轟天旅人 ‧ 2019-09-07

0 Like 0 留言 3974 瀏覽

鐵人賽 Modern Web DAY 4

從0到1： 5個月轉職工程師大挑戰系列第 5 篇

技術 Day 5: 試著用 React 重做 Python API Project { D1 }

嗨，我是 Roy上次面試之後覺得自己的實作還是太鈍了，決定在刷題之於試試能不能不看教學，自己獨立做一個小專案。「Concert Preparer」讓你在去演...

Roy Wang ‧ 2020-09-05

2 Like 0 留言 3966 瀏覽

鐵人賽 Modern Web DAY 3

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

技術 [Day 03] React 開發環境建置的門檻

過去有很長一段時間中，開發環境的建置都被視為學習 React 的首要最大難關。由於 React 從非常早期的版本就已經擁抱 transpiler 與 moudl...

Zet ‧ 2022-09-18

0 Like 0 留言 3964 瀏覽

鐵人賽 Modern Web DAY 8

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

技術 [Day8] 輪播：神奇的上下交錯

今日關鍵字：carousel 接續昨天把資料整理好了今天要把資料呈現在畫面上（不過這裡我想的輪播其實跟一般的輪播不同,沒有要自動播放總之先來找找看）好就第一個...

b97201019 ‧ 2020-09-08

1 Like 0 留言 3946 瀏覽

鐵人賽 Modern Web DAY 23

Spring Boot and React - 前後端 30 天分手日記系列第 23 篇

技術 Day 23 - AJAX 與 Fetch API

上一章 Day 22 - React 第一個Component AJAX AJAX是以XMLHttpRequest(XHR)物件為主要核心的實作, 用於從客...

Aiden ‧ 2019-10-09

0 Like 0 留言 3937 瀏覽

鐵人賽 Modern Web DAY 20

Spring Boot and React - 前後端 30 天分手日記系列第 20 篇

技術 Day 20 - React 安裝與導入需要的package

Day 19 - React 什麼是React? 要怎麼用? 上一章簡單介紹了React跟如何建立專案今天來把我們會用到的package都加進來吧 npm i...

Aiden ‧ 2019-10-06

1 Like 0 留言 3937 瀏覽

鐵人賽 Modern Web DAY 9

Zero to hero with React.js 系列第 9 篇

技術【Day9 React】從拆解電子名片學習 React Props #Part3

皮卡丘就這麼跑進我的文章裡。。。目前我的專案長這樣~ 我一樣用電子名片這個專案來學習 React props 的運作原理，今天也會將我預先儲存在 json 裡...

TSAI ‧ 2017-12-15

0 Like 0 留言 3934 瀏覽

鐵人賽 Modern Web DAY 13

前端工程師一起來種一棵後端技能樹吧！系列第 13 篇

技術 [Day 12] 沒了解過 Cache，就別說網站性能沒救了！ - (2)

Application Cache 這邊也可以看成是 server side 的快取，快取存在的位置在 backend server 與 database 之間...

莫力全 Kyle Mo ‧ 2020-09-26 ‧團隊不要搶我隊友

2 Like 3 留言 3916 瀏覽

鐵人賽 Modern Web DAY 7

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

技術 Day07 X Image Sprites

經過昨天的一番折騰，我想讀者們都對基本的圖片優化稍有概念了，今天要介紹的優化技巧其實嚴格來說也算是圖片的優化範疇，但是跟優化圖片本身的大小無關，因此我選擇獨立...

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

5 Like 0 留言 3912 瀏覽

鐵人賽 Modern Web DAY 22

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

技術 [筆記][React]來做個作品吧！待辦事項「todolist」篇(2)-製作組件初階篇

Hi啊！因為昨天雄心壯志下了決心要完成作品，今天也只能繼續做下去了XD，就從昨天的進度step1開始吧！ㄛ對了，這時間點看到我還滿神奇的對吧XD，因為小弟我明...

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

1 Like 0 留言 3902 瀏覽

鐵人賽 Modern Web DAY 10

All In One NFT Website Development 系列第 10 篇

技術 Day 10【連動 MetaMask - Login Flow & Extension Check】The strongest password ever.

【前言】終於要進到後端的部分啦！一樣先來看 Project 分析，這幾天的內容會環繞在第一步**「連動 MetaMask 系統」和第二步「並且得到當前登入者的...

ALu ‧ 2021-09-22 ‧團隊Obit0 Studio

3 Like 0 留言 3887 瀏覽

鐵人賽 Modern Web DAY 18

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

技術 Day18 X Service Workers Cache

如果你聽過 PWA，那麼對今天的主題ㄧ定不陌生，因為今天要講的 Service Worker 就是 PWA 的一個重要元件。不過 PWA 這個主題本身就已經足...

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

0 Like 0 留言 3885 瀏覽

鐵人賽自我挑戰組 DAY 16

新手前端與真實世界的開發 feat.React 與他的夥伴系列第 16 篇

技術 Day-16 掌控表格的行與列 react-table 基本安裝與使用

Day-16 掌控表格的行與列 react-table 基本安裝與使用會開始學習使用 react-table 是有故事的，因為工作上有個需求是要讓表格需要排...

aoigj100 ‧ 2022-09-30

1 Like 0 留言 3882 瀏覽

鐵人賽 Modern Web DAY 2

打造你的主題地圖！Mapbox 也可以！(ft. React) 系列第 2 篇

技術 Day 02 - 認識 Mapbox

Mapbox ? 說到地圖，大家第一個想到的絕對是 Google Map 了吧～但其實你還有其他選擇，那就是 Mapbox！ Mapbox 起源自英國的「開放街...

no_ ‧ 2022-09-17 ‧團隊IT108xWKE

1 Like 0 留言 3881 瀏覽

鐵人賽 Modern Web DAY 7

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

技術【Day 7】型別檢查 && PropTypes

昨天講解了 props 的應用，讓子元件可以接收來自父元件的資料。但是隨著應用規模的提升，透過型別檢查可以減少許多可能的錯誤。要達成這個目的，許多人會選擇 fl...

莫力全 Kyle Mo ‧ 2019-09-11

2 Like 0 留言 3878 瀏覽

鐵人賽 Modern Web DAY 19

以經典小遊戲為主題之ReactJS應用練習系列第 19 篇

技術 Day19 - 貪吃蛇篇：重新開始按鈕

昨天 Day18 我們已經準備好 isGameStart 參數來幫助我們做今天的重新開始按鈕。首先，我們需要先來製作一個按鈕，這個按鈕我想要直接蓋在遊戲地圖的正...

Taiming ‧ 2018-11-03 ‧團隊開橋找井

0 Like 0 留言 3833 瀏覽

鐵人賽 Modern Web DAY 28

開始搞懂React生態系系列第 28 篇

技術 Day 28 React Router v6 (上)

說明在建置網站時，通常不會只有一個頁面包含所有的功能，我們通常會在網站上設置導覽列，讓使用者點擊連結後看到不同的功能頁面，需要藉由路由機制來得到不同頁面。後...

lala_lee_jobs ‧ 2022-10-13 ‧團隊貓肥家潤一條龍

2 Like 0 留言 3824 瀏覽

鐵人賽 Modern Web DAY 29

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

技術 Day29 X 面對高流量，前端可以做些什麼？

在現今的 Web 應用中，要建構一個穩定的大型系統，能夠處理 High Concurrency 的流量是一個不可或缺的條件，尤其是在服務的熱門時段，例如優惠活...

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

1 Like 0 留言 3814 瀏覽

鐵人賽 Modern Web DAY 22

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

技術【Day.22】React效能 - 如何處理useContext的效能問題

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

Andy Chang ‧ 2020-10-07

技術 【Day05】數據輸入元件 - Input Text / Text Field

技術 Day 19 - React 什麼是React? 要怎麼用?

技術 Day12 - 貪吃蛇篇：蛇的原理及資料結構規劃

技術 與工程師的協作之路-我與React前端工程師的協作模式

技術 Day08 X 瀏覽器架構演進史 & 渲染機制

技術 Day09 | 掌管 Lifecycle 和一切作用的 useEffect

技術 [Day 06] Render React elements

技術 [Day 04] DOM 與 Virtual DOM

技術 Day 6: 為什麼用React？什麼是Create-React-App？ { D2 }

技術 [筆記][React]當React遇上Redux(2)-資料的傳遞方式

技術 Day 19 測試 React 元件：Mock HTTP Requests

技術 Day3. React的基本用法 (二)

技術 Day 5: 試著用 React 重做 Python API Project { D1 }

技術 [Day 03] React 開發環境建置的門檻

技術 [Day8] 輪播：神奇的上下交錯

技術 Day 23 - AJAX 與 Fetch API

技術 Day 20 - React 安裝與導入需要的package

技術 【Day9 React】從拆解電子名片學習 React Props #Part3

技術 [Day 12] 沒了解過 Cache，就別說網站性能沒救了！ - (2)

技術 Day07 X Image Sprites

技術 [筆記][React]來做個作品吧！待辦事項「todolist」篇(2)-製作組件初階篇

技術 Day 10【連動 MetaMask - Login Flow & Extension Check】The strongest password ever.

技術 Day18 X Service Workers Cache

技術 Day-16 掌控表格的行與列 react-table 基本安裝與使用

技術 Day 02 - 認識 Mapbox

技術 【Day 7】型別檢查 && PropTypes

技術 Day19 - 貪吃蛇篇：重新開始按鈕

技術 Day 28 React Router v6 (上)

技術 Day29 X 面對高流量，前端可以做些什麼？

技術 【Day.22】React效能 - 如何處理useContext的效能問題

標記使用者

技術【Day05】數據輸入元件 - Input Text / Text Field

技術與工程師的協作之路-我與React前端工程師的協作模式

技術【Day9 React】從拆解電子名片學習 React Props #Part3

技術【Day 7】型別檢查 && PropTypes

技術【Day.22】React效能 - 如何處理useContext的效能問題