iT邦幫忙

react相關文章
共有 1742 則文章
鐵人賽 Modern Web DAY 29

技術 [Day 29] 一次弄懂 React hooks 的運作原理與設計思維(下)

Hooks 的誕生是為了解決什麼問題 在深入 hooks 的設計脈絡之前,我們得先來談談 hooks 的誕生究竟是為了解決什麼問題。首先,hooks 是綁定配合...

鐵人賽 Software Development DAY 29
React框架白話文運動 系列 第 29

技術 React白話文運動29-React Router 03

前言 嗨,我是Hogan目前在經營自己的自媒體 hogan.tech主要分享一些有關於程式碼、軟體和科技業經驗分享有興趣的讀者可以進一步關注我,進而獲得更多資訊...

鐵人賽 Modern Web DAY 29

技術 [Day29]用 React 讓網站動起來:部署網站到 github page

這幾天我們已經學習了許多 React 的技術,是時候部屬 React 的作品到 github 上了!如果不是大型的網站,只是要展示自己的作品或寫一個部落格的話,...

鐵人賽 Modern Web DAY 29
開始搞懂React生態系 系列 第 29

技術 Day 29 React Router v6 (下)

Active Link Styling 改用 NavLink,用以判斷 to={"xx/xx"} 是否匹配當前路由 NavLink 和 Li...

鐵人賽 Modern Web DAY 29

技術 Day 29 - 一些很酷的 Mapbox Styles~(5)

最後一篇技術分享!這系列的文章我們都在介紹陸地上的東西,最後一篇看關於海洋的部分吧~ 我們最常拿大海的深度來做界線分類對吧,像是淺水區深海區之類的,今天來做一張...

鐵人賽 Modern Web DAY 29

技術 什麼是GraphQL—使用GatsbyJs的graphql模組獲取資料

本文提及以下內容 什麼是GraphQL GatsbyJs中的GraphQL資料層組成 為什麼Gatsby使用GraphQL 使用GraphiQL工具 使用gr...

鐵人賽 Modern Web DAY 28

技術 【D28】 小工具:身分證製造機(part 8)-加入檢查

這次來簡單加入一下之前 Day20的檢查工具,來檢查我們製作出來的身分證是不是合規。 .js 引入功能 把之前 Day20 做好的檔案 IDChecker.js...

鐵人賽 Modern Web DAY 28

技術 Day 28 - 一些很酷的 Mapbox Styles~(4)

Mapbox 除了可以支援我們一般常在用的 2D 地圖,還有我們前幾天介紹的 3D 立體地球跟地形外貌以外,還可以用 3D 形式呈現建築物高度喔~ 有點像積木狀...

鐵人賽 影片教學 DAY 28
我讀你看 系列 第 28

技術 [React] You Might Not Need an Effect: Part 1

閱讀文章:You Might Not Need an Effect @ React Docs beta

鐵人賽 Modern Web DAY 29

技術 chechout (4)

今天我們來看到 checkout 的最後一個部分結帳頁 首先最上方是購物車裡面的商品他會顯示商品的縮圖、名稱、商品類型和價格如果是購買實體商品會有數量如果想移除...

鐵人賽 Modern Web DAY 28

技術 [Day28]用 React 讓網站動起來:自定義 hook

這三十天我們介紹了許多的 hooks,在開發上常常會需要使用這些 hook 做組合技,也會常常使用到重覆的功能,這時候就可以將這些 hook 抽出來,做成 cu...

鐵人賽 Modern Web DAY 30

技術 [DAY 30] 將網站部署到 Github Pages 吧!

[情境劇場] 小當家:哇!怎麼來了這麼多外國人 解師傅:嘿嘿~因為我們把網站偷偷發布上線了,沒想到成效這麼好啊! React 熱炒店已名聲遠播,但這不會是終點,...

鐵人賽 Modern Web DAY 30

技術 [DAY 30]自己的鐵人終於寫完了,剩下打包那件事

應該是要先講打包,再來講怎麼發佈套件的,不過沒關係,最後一天來看看打包吧! 開始! 拿 rollup.js 來幫我們協助打包,先來安裝 npm instal...

鐵人賽 Modern Web DAY 28

技術 [Day 28] 一次弄懂 React hooks 的運作原理與設計思維(上)

React hooks 從 2019 年初推出以來也經過了幾年的時間,它以非常快的速度就發展成為 React 開發方式的絕對主流選擇。搭配 function c...

鐵人賽 Software Development DAY 28
React框架白話文運動 系列 第 28

技術 React白話文運動28-React Router 02

前言 嗨,我是Hogan目前在經營自己的自媒體 hogan.tech主要分享一些有關於程式碼、軟體和科技業經驗分享有興趣的讀者可以進一步關注我,進而獲得更多資訊...

鐵人賽 Modern Web DAY 30

技術 結語【 我不會寫 React Component 】

試試看你學到了什麼 前面我們小試了一下身手, 這邊中途來插一個小活動。 有鑒於工程師社群很喜歡討論面試題, 那我們也來試個幾道題目, 來試試你能回答出以下幾道...

鐵人賽 Modern Web DAY 28
開始搞懂React生態系 系列 第 28

技術 Day 28 React Router v6 (上)

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

鐵人賽 Modern Web DAY 28

技術 GatsbyJs的Link多做了什麼達到更好的UX?—page component、Link元件

本文提及以下內容 Gatsby建立頁面檔 添加頁面Title Link元件預加載preloading原理 Link Component使用方式 Gatsby...

鐵人賽 Modern Web DAY 27

技術 【D27】 小工具:身分證製造機(part 7)-畫面與功能結合

製作完產生身分證的 JavaScript,接著就把它們放入 React 的程式中。 .jsx 引入功能 在使用 Day25 的樣式,結合 Day26 的程式,就...

鐵人賽 Modern Web DAY 27

技術 [Day 27] useCallback 與 useMemo 的正確使用時機

除了最核心的 useState 以及 useEffect 以外,在 React 中最常被我們使用到的內建 hooks 應該就屬 useCallback 以及 u...

鐵人賽 Modern Web DAY 29

技術 [DAY 29] 自己的Hook自己發佈!

除了測試之外,那當然就是發佈啦! 呼喚我最一開始的需求,就是希望能夠建立自己的 library 然後來使用,本篇計畫用 npm 來發佈。 同一隊的丹尼有寫了...

鐵人賽 Modern Web DAY 29

技術 [DAY 29] useReducer 處理複雜邏輯的 state

看到 useReducer 你可能會疑惑,這跟前幾天講的 Redux 裡的 Reducer 有什麼毛線關係嗎? 的確!useReducer 的觀念跟用法都跟...

鐵人賽 Modern Web DAY 28

技術 [DAY 28] Redux Toolkit 非同步操作createAsyncThunk

做前端時一定會碰到非同步操作,本篇將使用 axios 搭配 Redux Toolkit 來作範例串接 API,可以先將 axios 環境安裝起來 安裝 Axi...

鐵人賽 Web 3 DAY 28
Road Map To DApp Developer 系列 第 28

技術 【DAY28】Verification System (Smart Contract II - Use Infura to send tx)

Preface 由於驗證者在驗證時需要執行 burn() 與 _mint() 兩個會改動區塊鏈資料的函式,撇除 gas fee 以外,在驗證入場的時候需要考慮到...

鐵人賽 Software Development DAY 27
React框架白話文運動 系列 第 27

技術 React白話文運動27-React Router 01

前言 嗨,我是Hogan目前在經營自己的自媒體 hogan.tech主要分享一些有關於程式碼、軟體和科技業經驗分享有興趣的讀者可以進一步關注我,進而獲得更多資訊...

鐵人賽 Modern Web DAY 27

技術 [Day27]用 React 讓網站動起來:useCallback

昨天我們介紹了 useMemo,這個 hook 可以幫助我們記憶依賴參數,當參數變化時才會重新執行函式,並且取得函式回傳的值。今天要來介紹的是 useCallb...

鐵人賽 Modern Web DAY 29

技術 如何導入 cypress 【 我不會寫 React Component 】

因為這邊開發的是 Component,所以這次會用 Cypress Component Testing。 Setup 設置專案在 apps/ 底下。 E2E...

30天深入淺出Redux 系列 第 31

技術 [DLC] React Query 補充包

這篇是補足大家的求知慾,還記得我開頭說的 React Query 嗎? 我秉持著勤儉持家的客家精神,想說不要浪費我們建立好的 todo api server,順...

鐵人賽 Modern Web DAY 27
開始搞懂React生態系 系列 第 27

技術 Day 27 React 的 CSS 解決方案

讓 CSS 只跟著元件 我們知道若元件拆分得越細,可以在其他元件內的重複組合使用的頻率就越高,所以會希望 CSS 只跟隨著元件,當這個元件被拿去其他元件使用時,...

鐵人賽 Modern Web DAY 27

技術 簡介靜態網站、SPA、SSR、SSG—GatsbyJs從零開始

本文提及以下重點 GatsbyJS介紹 靜態網站 SPA網頁(Single Page Appliations) SSR網頁(Server Side Rende...