iT邦幫忙

react相關文章
共有 561 則文章
鐵人賽 Modern Web DAY 30

技術 【Day.30】React進階 - Styled-Components: React的CSS解決方案 | 系列總結

在過去的29天內,除了直接綁在JSX元素上外,我們從來都沒有提過要如何在React處理CSS code。其實只要設定好打包工具,我們就能直接在任何元件檔使用im...

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

技術 I Want To Know React - 中場休息

鐵人煉成,回顧三十天 三十天過去了,沒想到我竟然成功完成鐵人賽了! 上次鐵人賽完賽心得的第一句話是 "轉眼間就過了三十天",但在這次的挑戰中...

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

技術 I Want To Know React - PropTypes & DefaultProps

此文件紀錄 React PropTypes 的使用方式與語法 相信讀者在使用純 JavaScript 的時候一定有遇過搞不清楚 function 參數的型別的狀...

鐵人賽 Modern Web DAY 29

技術 【Day.29】React進階 - 以Redux Thunk處理非同步資料流

很多時候,我們的state必須要透過HTTP Request從後端取得。然而發送Request常用的fetch或是axios是非同步的。雖然我們可以透過以下方式...

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

技術 I Want To Know React - Context 範例 & 使用技巧

回顧 Context 語法 在上一章節中,我們介紹了 Context 的使用簡介與語法。 React context 的使用環繞三個角色在運作: Contex...

鐵人賽 Modern Web DAY 28

技術 【Day.28】React進階 - 導入Redux,讓元件溝通更簡潔

當專案中的階層變複雜,state和props變的很多,資料在多層component之間的傳遞也越來越多。產生了一堆純粹用來傳遞用的props和父componen...

鐵人賽 Modern Web DAY 27

技術 Day 27: Incremental build

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

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

技術 I Want To Know React - Context 語法

回顧 Context 在上一章節中,我們介紹了何謂 context。 Context 是一種利用向下廣播來傳遞資料的方式,此方法可以解決 props 必須要一層...

鐵人賽 Modern Web DAY 29

技術 [Day 29] Frontend ? Backend ? 如何做選擇?

可能很多人一開始看到系列文主題就會產生疑惑了:「前後端都碰會不會都不專精啊?」 其實這個問題的答案我自己覺得是:會的。 但我仍然照自己的想法自己的步調在往前行,...

鐵人賽 Modern Web DAY 27

技術 【Day.27】React進階 - 用useReducer定義state的更動原則

通常當我們要設定state時,都是透過setState(要指定的值)。但這樣做有兩個問題: 使用setState的元件可以任意指定值給state 當stat...

鐵人賽 Modern Web DAY 27
玩轉 Storybook 系列 第 27

技術 玩轉 Storybook: Day 27 Design System for Developers - Review、Test

單一真值來源 或 單點故障 Single Source of Truth (SSOT) 單一真值來源 Single Points of Failure (SP...

鐵人賽 Modern Web DAY 26

技術 Day 26: 載入圖片

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

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

技術 I Want To Know React - 初探 Context

在本章中,我們將介紹 React Context。React Context 與 props 相同,是一種資料傳遞的方式,然而 React Context 可以...

鐵人賽 Modern Web DAY 26

技術 【Day.26】React進階 - useEffect v.s useLayoutEffect

如果你在撰寫React專案時,有試著在第一次渲染後,透過useEffect以state修改綁定給元件的資料,應該會發現一個特殊的現象: 嗯?為甚麼我的元件會閃...

鐵人賽 Modern Web DAY 25

技術 Day 25: Static Query

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

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