iT邦幫忙

react相關文章
共有 1744 則文章
鐵人賽 Software Development DAY 15

技術 [Day15] 一次填好麵線跟拉麵的菜單可以嗎? ─ 組合(Composite) <模式篇>

嗨 大家好 我是一路爬坡的阿肥 今天放颱風假比平常開心100倍 因為可以有更多時間寫文章啦! 情境描述 在大肥百貨美食街的麵食區,開著肥肥麵線攤跟壹LAN拉麵...

鐵人賽 Modern Web DAY 13

技術 [Day 13 - 即時天氣] 建立一個即時天氣 App - 前置準備

感謝 iT 邦幫忙與博碩文化,本系列文章已出版成書「從 Hooks 開始,讓你的網頁 React 起來」,首刷版稅將全額贊助 iT 邦幫忙鐵人賽,歡迎前往購書...

鐵人賽 Modern Web DAY 30

技術 [DAY30] 被 React react 的後端工程師 - 後記

一開始會這麼定題目,其實是起源于我對前端的挑食,因為我不喜歡調畫面左邊一點右邊一點這種事情我真的不喜歡做所以取翻譯中 過敏 的意思來形容我的 React 學習過...

鐵人賽 Modern Web DAY 29

技術 [DAY29] 多 DOM 的動畫之我等了這篇 29 天之我完全不介意

我想說的是:其實基礎的多個 DOM 的動畫,跟一個差不多多個的就是專業的部分,我不清楚 上一篇中已經可以控制一個 DOM 元素的動畫效果而想控制多個動畫 r...

鐵人賽 Modern Web DAY 28

技術 [DAY28] React 動畫動得非常厲害

我想說的是:動畫好酷炫耶,以前完全沒用過就跑來寫後端react-transition-group 真的很厲害看完之後...我還是不會想寫前端耶 用 tran...

鐵人賽 Modern Web DAY 27

技術 [DAY27] 如果你快樂就拍拍手之在 react 使用動畫效果之基於 CSS

我想說的是:其實使用起來也是很簡單,但是對於 react 本身的操作要夠熟悉 最近買了薩爾達織夢島,有點太投入整個早上都在玩,本來早上就該發文的 這一篇來做...

鐵人賽 Modern Web DAY 26

技術 [DAY26] 今天天氣怎樣?等等我打一下 API 再跟你說

我想說的是API 串接範例練習,就是這麼簡單 上一篇中安裝了 axios 於是我們就準備好了工具接下來要做練習,試試看實際執行的結果 我們先直接在 Mass...

鐵人賽 Modern Web DAY 25

技術 [DAY25] 打來打去之 API 又要挨打之套件安裝方法之 npm 安裝方法學問多

我想說的是在 React 裡面操作 ajax 可以使用 Axios 來達成使用 --save 安裝,會將指定套件加入依賴列表,未來可快速建立相同開發環境 標...

鐵人賽 Modern Web DAY 24

技術 [DAY24] 活用生命週期的奧秘之提升效能

我想說的是使用 shouldComponentUpdate() 來優化組件效能 前幾天中我們已經對 React 生命週期有了基本的認識那跟提高組件的性能又有...

鐵人賽 Modern Web DAY 23

技術 [DAY23] 生命週期 2 生命如此變化無常之然後呢之然後他就死掉了

我想說的是當組件被更新以及刪除的時候 react 的程式流程 錯誤處理 當一個組件在 render 的過程、生命週期或在某個子組件的 constructor...

鐵人賽 Modern Web DAY 22

技術 [DAY22] 生命週期 1 生命之初生命起源生命之水

我想說的是組件在 render 的一開始稱作 Mounting 看到標題有編號就代表,這些東西會講個幾篇具體幾篇我也不確定,兩篇或三篇吧 在先前的範例中,我...

鐵人賽 Modern Web DAY 21

技術 [DAY21] 禁斷關係之 ref 之非必要不用之遇到難關的時候你可以再想想

我想說的是ref 一時爽,維護火葬場setState 有 callBack 函數 有些時候會希望對 DOM 上面的值做操作,或是直接取得某個 input 欄...

鐵人賽 Modern Web DAY 20

技術 [DAY20] 過來讓我看看之 PropTypes 驗證元件屬性之這是我們之間的秘密

在組件間傳值的時候,當組件間關係越來越複雜時傳入參數值的正確性就變得很重要了,如果這個環節出錯一般稱為業務邏輯錯誤,這代表你程式寫的語法是對的但是錯的是你的業務...

鐵人賽 Modern Web DAY 19

技術 [DAY19] 單向資料流之鮭魚逆流而上被石頭敲到不就_頭好痛

我想說的是React 的寫法是 Functional Programming單向資料流,只能 單向資料流 React 使用的是單向資料流也就是說資料只有一個...

鐵人賽 Modern Web DAY 18

技術 [DAY18] Developer tools 與 Snippets 之老師我也想當金手指之 debug guy

我想說的是一些實用工具可以幫助開發上更加快速,能少打字就少打字,把力氣省起來Simple React Snippets 是一套 VSCode 上針對 reac...

鐵人賽 Modern Web DAY 17

技術 [DAY17] 組件傳值之我想搞點事

我想說的是React有明確規定,子組件時不能操作父組件裡的資料,所以需要調用父組件的方法,來修改父組件的內容有了 JSX 撰寫起來容易多了 上一篇中我們成功...

鐵人賽 Modern Web DAY 16

技術 [DAY16] 組件的傳值之爸爸給你的你才能要

我想說的是組件傳遞資料並不是只能傳遞數值,函式也可以傳遞子組件不能直接操作父組件的資料,要通過父組件傳來的函數去變更父組件的資料 上一篇中我們把按摩服務列表...

鐵人賽 Modern Web DAY 15

技術 [DAY15] 組件的拆分

我想說的是組件拆分的方法 在前面幾篇中,其實已經寫好了一個基本的按摩服務列表但是從頭到尾只使用了一個組件在小型專案中也許可以這麼做,但隨著專案大小勢必會需要...

鐵人賽 Modern Web DAY 25

技術 【Day 25】useCallback - 學會把函式記起來

不知不覺來到第 25 天了,本來預計是要用小專案作結的,沒想到意外的忙碌啊,所以剩下的幾天就決定介紹一些我原本也不熟悉或不常使用的特性,學習的同時也盡量內化並記...

鐵人賽 Software Development DAY 14

技術 [Day14] 我需要一台喵喵翻譯機 ─ 轉接器(Adapter) <實作篇>

嗨 大家好 我是一路爬坡的阿肥 寫著寫著竟然已經撐兩個禮拜了! 果然有參加比賽有差 可以訓練自己擺脫三分鐘熱度的壞習慣 給個定義 我們知道轉接器模式主要的類...

鐵人賽 Modern Web DAY 12

技術 [Day 12] 快速了解各組件的資料狀態 - React DevTools

感謝 iT 邦幫忙與博碩文化,本系列文章已出版成書「從 Hooks 開始,讓你的網頁 React 起來」,首刷版稅將全額贊助 iT 邦幫忙鐵人賽,歡迎前往購書...

鐵人賽 Modern Web DAY 17

技術 Day16 | SPA 的換頁不是你的換頁

前言 今天要和大家介紹的是 SPA, 是一種提升用戶在瀏覽網頁時的技術, 傳統式的網頁在切換頁面時,都會送出一個 Url 給服務器,之後服務器會依它收到的 Ur...

鐵人賽 Software Development DAY 13

技術 [Day13] 我需要一台喵喵翻譯機 ─ 轉接器(Adapter) <模式篇>

嗨 大家好 我是一路爬坡的阿肥 阿肥在寫本篇範例的時候 認真地想 如果真的有人成功發明出喵喵翻譯機的話 應該會造福各地的奴才們 然後成為人生勝利組吧 情境描述...

鐵人賽 Modern Web DAY 24

技術 【Day 24】 useRef

useRef 是一個可以讓我們抓取到 DOM 節點的 hooks。 實作上非常簡單,直接來看範例吧: import React, { useRef } from...

鐵人賽 Modern Web DAY 14

技術 [DAY14] 一個蘿蔔一個坑之 JSX 幾個坑

我想說的是JSX 註解的寫法和一般的 HTML 不一樣 寫程式不寫註解,就像是大腸麵線沒加香菜雖然能,但吃就是少一味;還有些人特別討厭加寫註解還是有些好處的...

鐵人賽 Modern Web DAY 16

技術 Day15 | React-Saga 見一次就愛上的 async flows

前言 在 Redux 中做非同步的請求其實是很麻煩的,這也是一開始讓我卡關的一個痛點,但好在有 StackOverflow 才沒讓這個痛持續很久。 其實一開始我...

鐵人賽 Modern Web DAY 11

技術 [Day 11 - 網速轉換器] 那個...資料可以分享給我嗎 - 將資料傳入組件

感謝 iT 邦幫忙與博碩文化,本系列文章已出版成書「從 Hooks 開始,讓你的網頁 React 起來」,首刷版稅將全額贊助 iT 邦幫忙鐵人賽,歡迎前往購書...

鐵人賽 Modern Web DAY 23

技術 【Day 23】useMemo

昨天 React.memo 比較像是針對 component 做 memorization,今天要介紹的 useMemo 這個 hooks 則是可以對函式實作...

鐵人賽 Software Development DAY 12

技術 [Day12] 前端開發好朋友 ─ Storybook

嗨 大家好 我是一路爬坡的阿肥 今天是Happy Friday! 也是適合寫鐵人賽文章的好日子喔(疑?) Storybook 簡介 今天阿肥要先插個花,介紹一...

鐵人賽 Modern Web DAY 15

技術 Day14 | Redux 的改變,Logger 看得見

前言 前兩篇學習了 Redux 的操作方法,雖然 Redux 替我們處理資料真的很方便,但是實際上是得經過 Component、Action、Reducer 三...