iT邦幫忙

react相關文章
共有 562 則文章
鐵人賽 Modern Web DAY 22
I Want To Know React 系列 第 22

技術 I Want To Know React - Uncontrolled component

回顧 React form 與 controlled component 在前兩個章節:初探 Form & Controlled component 與...

鐵人賽 Modern Web DAY 21

技術 Day 21: 用 GraphQL 載入動態頁面的資料

這系列的程式碼在 https://github.com/DanSnow/ironman-2020/tree/master/static-site-genera...

鐵人賽 Modern Web DAY 21
I Want To Know React 系列 第 21

技術 I Want To Know React - Controlled component 語法

回顧 React form & Controlled component 在上個章節中,我們學習到了在 React 中可以如何處理 form eleme...

鐵人賽 Modern Web DAY 21

技術 【Day.21】React效能 - 用useMemo避免函式非必要的執行

但是有的時候我們只負責製作元件,並沒有辦法確認使用這個元件的人是不是在函式定義域內加工元件,這個時候該怎麼辦才能確保這個問題呢? 在Day.19,我們以元件...

鐵人賽 Modern Web DAY 20
I Want To Know React 系列 第 20

技術 I Want To Know React - 初探 Form & Controlled component

在這個章節中,我們將介紹在 React 中 form 與 input 相關 element 的使用方式。 然而為何需要把 form 這類的 element 特別...

鐵人賽 Modern Web DAY 20

技術 【Day.20】React效能 - 用useCallback避免函式的重新定義

在前面,我們說在非必要的時候,不要在React function component內宣告函式。 那什麼時候是「必要的時候」呢 ? 當我們有需要綁定和state...

鐵人賽 Modern Web DAY 19

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

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

鐵人賽 Modern Web DAY 19

技術 Day 19: GraphQL

這系列的程式碼在 https://github.com/DanSnow/ironman-2020/tree/master/static-site-genera...

鐵人賽 Modern Web DAY 19
I Want To Know React 系列 第 19

技術 I Want To Know React - Key 的常見值 & 最佳實踐

回顧 Key 與 Diff 演算法 在上一個篇章中,我們簡介了 key 在 Virtual DOM diff 演算法中扮演的角色。 我們也了解到 key={in...

技術 前端開發流- 如何用React

為什麼用React? 我當初初學網頁時剛好聽到三大框架,那時就聽到React這個詞最有感覺,所以就一直寫React到現在了,如果說現在要我改寫其他框架的話,其實...

鐵人賽 Modern Web DAY 19

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

這一篇要討論的是function component的效能問題 在上一篇中,我們發現即使MenuItem接收的props並沒有被改變,MenuItem的re...

鐵人賽 Modern Web DAY 18

技術 Day 18: 進化成 SSG

這系列的程式碼在 https://github.com/DanSnow/ironman-2020/tree/master/static-site-genera...

鐵人賽 Modern Web DAY 18
I Want To Know React 系列 第 18

技術 I Want To Know React - Key & Diff 演算法

回顧 key 在上一篇中,我們介紹了 key 為何,以及如何在 React 中使用 key。 Key 可以想成是 React element list 中每個元...

鐵人賽 Modern Web DAY 18

技術 【Day.18】開發者工具React Dev tool與useContext的效能問題

由於我們在執行React程式前,都要透過webpack和Babel打包編譯成瀏覽器看的懂的ES5,實際跑在瀏覽器的程式碼就會和本來React裡面長的樣子差很多,...

鐵人賽 Modern Web DAY 18

技術 Day 18 測試 React 元件:測試元件的 Event Handlers

目前為止我們已經了解該如何使用 React Testing Library 的 render 跟 debug 來 測試元件的狀態了。 今天我們將繼續探索如何測試...

鐵人賽 Modern Web DAY 17

技術 Day 17: SSR vs SSG

這系列的程式碼在 https://github.com/DanSnow/ironman-2020/tree/master/static-site-genera...

鐵人賽 Modern Web DAY 17
I Want To Know React 系列 第 17

技術 I Want To Know React - 初探 Key

在上一篇中,我們介紹了 React render list 的語法,其中提及了 render React element list 時都必須要加上 key pr...

鐵人賽 Modern Web DAY 17

技術 【Day.17】React入門 - 利用useContext進行多層component溝通

我們完成了分頁,完成了用React製作的一個Menu和MenuItem,看似一切都大功告成了。 然而不幸的是,這個時候客戶打來了一通電話: 欸!我想讓Menu...

鐵人賽 Modern Web DAY 17

技術 Day 17 測試 React 元件:使用 React Testing Library 測試元件的狀態

昨天我們學習了如何在測試裡 render 元件,並使用 testing library 家族的 jest-dom 及 dom-testing-library 來...

鐵人賽 Modern Web DAY 16

技術 Day 16: 重新載入 js

這系列的程式碼在 https://github.com/DanSnow/ironman-2020/tree/master/static-site-genera...

鐵人賽 Modern Web DAY 16

技術 Day 16 測試 React 元件:render 元件及使用 Jest DOM & dom-testing-library

使用 ReactDOM 來 Render 被測試元件 假設現在有一個 <FavoriteNumber /> 元件,我們要測試它是否有 render...

鐵人賽 Modern Web DAY 16
I Want To Know React 系列 第 16

技術 I Want To Know React - Render list

React render list 使用情境 在撰寫前端頁面常常會需要把 list 中的內容全部顯示到畫面上。 舉例來說,我們可能會需要把一個 list(Arr...

鐵人賽 Modern Web DAY 16

技術 【Day.16】React入門 - 想要分頁? react-router-dom

在過去,當我們要製作「分頁」時,多半是新增一個靜態HTML檔,讓web server根據檔案路徑去尋找,或是透過後端程式碼去定義什麼url要對應到哪個HTML檔...

鐵人賽 Modern Web DAY 18

技術 仿Trello - 串接Unsplash API

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

鐵人賽 Modern Web DAY 15

技術 Day 15: Universal Javascript

在 SSR 誕生時就出現了一種對於某種程式碼的稱呼 Isomorphic Javascript ,這種程式碼會把與環境相關的部份包裝成同樣的 API ,並靠著...

鐵人賽 Modern Web DAY 15

技術 【Day.15】React入門 - 非控制組件與useRef

reference,中文翻譯是「參考」。聽起來好像有點奇怪,但他在程式中一般是指「變數指向的記憶體位置上對應到的值」。 超級複雜的啦。 簡單來說可以想像成是...

鐵人賽 Modern Web DAY 17

技術 仿Trello - 客製化拖曳圖示

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

鐵人賽 Modern Web DAY 15
I Want To Know React 系列 第 15

技術 I Want To Know React - 條件 render

React 條件 render 使用情境 在撰寫前端頁面時,常常需要根據不同的 props / state 資料顯示不同的 element。 舉例來說,使用者尚...

鐵人賽 自我挑戰組 DAY 22

技術 美好的幻覺:Frontend 前端

先分享下 Frontend 的發音 https://www.youtube.com/watch?v=ZdtpKFbhTtk 記得是 Frontend 不是 Fr...

鐵人賽 Modern Web DAY 14

技術 Day14 ー 用 react-spring 做一個假 3D 電子鐘吧!

[ 假 3D 電子鐘 ] 轉轉轉~! 時間的顯示,也是 Web 前端常常會要處理到的事情之一,做時鐘對初心者來說也是一個很好的練習題材唷。 那就 Demo...