iT邦幫忙

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

技術 I Want To Know React - Composition vs Inheritance

當初學者剛接觸 React 時,常常會想要以 inheritance(繼承)的方式來實作 React component。然而 React 官方建議實作 com...

鐵人賽 Software Development DAY 26

技術 Mendix上要不要做自己的Widget呢?

做自己的widget前,該想一想的事 的確,能創造自己的widget真的很吸引人,但是,創造以後的維護,以及如何跟上最新版本更新的腳步,這些都是作為一個負責任的...

鐵人賽 Modern Web DAY 27

技術 [Day 27] 高效工作術:番茄工作法

這篇文章不同於過往的技術分享或是關於工程師職涯的心得,要來介紹的是一個自己嘗試過後覺得十分有效的「工作術」,不管讀者的職業是什麼,我認為都有運用這個工作術的空間...

鐵人賽 Modern Web DAY 25

技術 【Day.25】React進階 - Custom hook | 把React component API模組化吧!

在一開始介紹React的時候,我們曾經說過以前React有個問題: 當要使用React的特有功能時,大部份的時候都要做一個元件出來。但有的時候我們並不是要創造...

鐵人賽 Modern Web DAY 24

技術 Day 24: 用 GraphQL 取得動態路由

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

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

技術 I Want To Know React - 提升 state 練習

回顧提升 state 在上一章節中,我們介紹了何謂提升 state 以及為何要這麼做。 提升 state 的意思就是把 state 提升到所有有使用到此資料的...

鐵人賽 Modern Web DAY 24

技術 【Day.24】React效能 - 用lazy和Suspense來動態載入元件

在前面我們說,過去使用原生JS編寫有規模的專案時,因為要模組化,檔案越分越多,最後零散在各處。為了解決這個問題,後來工程師使用打包工具,把所有的JS檔綁成一個b...

鐵人賽 Modern Web DAY 26

技術 [Day 26] 菜鳥工程師的初次 Open Source Contribution - (2)

今天接續昨天繼續分享第一次貢獻開源專案的心得。 第二步:閱讀 CONTRIBUTING.md & 開發 通常一個完整的開源專案,都會提供一個文檔讓想貢獻...

鐵人賽 Modern Web DAY 23

技術 Day 23: 從檔案載入文章

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

鐵人賽 Modern Web DAY 23

技術 【Day.23】React效能 - 用key避免陣列元件的重複渲染

在過去幾天,我們都是用map來製造MenuItem。但如果你眼尖的話,應該會注意到在console噴出了這個東西 照字面翻的話就是React希望我們給Menu...

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

技術 I Want To Know React - 初探提升 state

當一個 component 需要存取修改一份資料 / 狀態的時候,通常我們會把這份資料 / 狀態做成 state,讓該 component 自己維護資料的內容。...

鐵人賽 Modern Web DAY 25

技術 [Day 25] 菜鳥工程師的初次 Open Source Contribution - (1)

鐵人賽剩下 5 天,接下來我想聚焦在一些經驗分享,畢竟除了學習技術以外,適時的採取一些實際行動更能夠快速吸收所學知識與進步。 身為軟體工程師, Github 自...

鐵人賽 Modern Web DAY 22

技術 Day 22: mdx

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

鐵人賽 Modern Web DAY 22

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

前面我們提過,Context api雖然方便,但是每一次context更新時都會迫使「有使用useContext取得該context」的元件更新。這在專案有規模...

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