iT邦幫忙

reactjs相關文章
共有 733 則文章
鐵人賽 Modern Web DAY 20

技術 [Day20]用 React 讓網站動起來:認識更多 React-router

昨天我們認識 React-router 是什麼,以及基本的一些使用方法,今天想要來介紹一下其他 React-router 提供的好用 api 。 NavLink...

鐵人賽 Modern Web DAY 21

技術 react route-1(基本設置/Routes/Route/Link)-day21

本文以 react route 版本6以上做說明,舊版本不在本文涵蓋範圍中~ react route react route 就是讓 react 專案中能進行路...

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

技術 React白話文運動20-React Hook-useCallback

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

鐵人賽 Modern Web DAY 20

技術 從實作To Do List理解useContext搭配useReducer運作模型—(附圖)(中)

本文將以實作To Do List理解Listing State Up包含以下部分 useContext運作模型—圖解 useReducer運作模型—圖解 資料...

鐵人賽 Modern Web DAY 20

技術 用 react hook 寫一個簡易計算機吧-下-day20

昨天寫到鍵入數字部分,今天接續把 +-/* 跟 = 的運算處理完吧~ 加減乘除 執行 dispatch({ type: "該按鈕的數值" }...

鐵人賽 Modern Web DAY 19

技術 [Day19]用 React 讓網站動起來:React-router

前幾天介紹了資料管理用的 context 以及 Redux,今天要來介紹一下要如何不透過伺服器切換頁面,直接在 React 中切換。 React router...

鐵人賽 Modern Web DAY 19

技術 [Day 19] 每一次 render 都有自己的 props、state 以及 event handlers

承接上一張節的脈絡,在我們解析大魔王 useEffect 之前,我們需要先更深入的重新梳理一下 component 生命週期的重要概念:render。 每一次...

鐵人賽 Modern Web DAY 19

技術 從實作To Do List理解Listing State Up(附圖)(上)

本文將以實作To Do List理解Listing State Up包含以下部分 component拆分—圖解 lifting-state說明 重要概念 具體...

鐵人賽 Modern Web DAY 19

技術 用 react hook 寫一個簡易計算機吧-中-day19

昨天剛寫完樣式,今天來處理一下按鍵輸入數字的事件一樣在 Calculator.js 這個父元件中處理.. 因為在計算機的螢幕上要顯示 1+1*2 這樣的格式,所...

鐵人賽 Modern Web DAY 18

技術 [Day 18] Function component & class component 你可能不知道的關鍵區別

在解析過 React 的畫面更新的核心觀念以及 setState 進階的細節之後,接下來我們會往下一個大主題邁進 — 有關於 component 的 rende...

徵才 【徵才/台北/部分遠端】富果帳戶-Senior Frontend Engineer

關於富果 富果帳戶,是年輕人都在用的投資帳戶! 在富果的每一位夥伴都相信著,透過持續學習和進步,投資這項技能將成為我們這個世代,累積財富的一種理想方式。所以我們...

鐵人賽 Modern Web DAY 18

技術 [Day18] 用 React 讓網站動起來:取用 Redux

昨天我們認識了什麼是 Redux,以及初步安裝及設定 Redux ,讓 Redux 保管的資料可以被子元件取得。今天我們要繼續學習 Redux,從子元件內取得我...

鐵人賽 Modern Web DAY 18

技術 用 react hook 寫一個簡易計算機吧-上-day18

終於來到第 18 天了,今天來用 react hook 寫個簡易版的計算機吧! 一樣在 codesandbox 中開啟新專案,建立基本的架構App.js imp...

鐵人賽 Modern Web DAY 17

技術 [Day 17] Immutable update 的 nested reference clone 誤解

在前兩篇的章節中,我們已經了解到在 React 開發中 immutable update 的必要性以及基本的操作方法了。然而有趣的是,在我擔任前端面試官多年也面...

鐵人賽 Modern Web DAY 17

技術 [Day17] 用 React 讓網站動起來:認識 redux

前兩天介紹了 Context 這個 React 內建的狀態管理 api ,今天想來介紹一下同樣是狀態管理工具的 Redux。 Redux 是一個第三方的套件,跟...

鐵人賽 Modern Web DAY 17

技術 解決propDrilling問題—簡化consumer的useContext

本文章將提及以下內容 props傳遞的遇到什麼問題—propDrilling 使用context解決propDrilling Setp1 創建context...

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

技術 [React] State as a Snapshot

本篇重點:所有 React 元件內的狀態值(state),在該 function 執行時(rendering)就已經固定。 導讀 React 官方文件:htt...

鐵人賽 Modern Web DAY 16

技術 [Day 16] Immutable update 物件與陣列的基本功

透過上一篇章的解析,我們已經了解到為什麼我們不應該在 React 中去 mutate state 的資料了。因此,當我們想更新物件或陣列時就必須以 immuta...

鐵人賽 Modern Web DAY 16

技術 [Day16]用React讓網站動起來:Context 範例

昨天介紹了context是什麼,以及useContext要怎麼用,今天來介紹一下要怎麼在開發上實際運用context object以及useContext。 建...

鐵人賽 Modern Web DAY 15

技術 [Day 15] 維持 React 資料流可靠性的核心關鍵:Immutable state

在 React 當中,state 是可以存放 JavaScript 中的任何資料型別,除了像是字串、數字等直接可以表示值的型別,當然也支援物件或陣列這種以參考(...

鐵人賽 Modern Web DAY 15

技術 [Day15] 用React讓網站動起來:useContext

昨天我們用useState、useEffect、react-bootstrap完成了todolist程式,不過在寫程式的過程中,會發現我們傳遞的props隨著功...

鐵人賽 Modern Web DAY 15

技術 React管理virtualDOM,為什麼還需要useRef?

本文將提及以下內容 做到什麼事情? 解決什麼問題? useRef代入參數 在jsx的屬性當中加入ref focus效果範例 ref無法藉由react管理 簡述...

鐵人賽 Modern Web DAY 14

技術 [Day14]用React讓網站動起來:todolist實作-已完成、未完成分頁

昨天已經做出來已完成、未完成的效果了,但是只有style上的轉換,沒有記錄起來。今天要把已完成、未完成的狀態記錄在state中,並做出已完成、未完成的分頁。 儲...

鐵人賽 Modern Web DAY 14

技術 [Day 14] 以 functional updater 來呼叫 setState

在上一篇的章節中,我們詳細的解析了有關於連續呼叫 setState 時的自動 batching 機制。承著前文的脈絡,我們來探討看看一個延伸的情境:如果我們想基...

鐵人賽 Modern Web DAY 13

技術 [Day13]用React讓網站動起來:todo list 實作-完成、未完成切換

今天要繼續實作todolist,要讓todolist有切換已完成、未完成狀態的功能。 程式修正 昨天的編輯功能出了點問題,若是在沒修改的情況下提交,由於newI...

鐵人賽 Modern Web DAY 13

技術 [Day 13] 深入理解 batch update

從前面的章節中我們已經充分地了解到,當呼叫 setState 方法時就會觸發對應 state 定義的 component 的 re-render。然而當我們呼叫...

鐵人賽 Modern Web DAY 12

技術 [Day12]用React讓網站動起來:todolist實作-編輯todolist

前幾天已經寫好todolist的邏輯、樣式,現在我們的程式已經可以新增、瀏覽、刪除代辦事項,並且有簡單的外觀。不過新增的事項還沒辦法編輯,因此今天來做一下編輯的...

鐵人賽 Modern Web DAY 12

技術 [Day 12] 如何在子 component 裡觸發更新父 component 的資料

React 中以 state 資料以及 setState 作為 reconciliation 的觸發點,並且以 props 作為 component 層層往下的...

鐵人賽 Modern Web DAY 11

技術 [Day 11]用React讓網站動起來:React-bootstrap

昨天介紹了要如何在React中使用css,今天來介紹一下如何使用方便的React-bootstrap套件來建立一個漂亮的網站。p.s. 這一篇需要對bootst...

鐵人賽 Modern Web DAY 10

技術 [Day10] 用React讓網站動起來:CSS in JSX

前幾天我們用JSX、Hook以及JavaScript的技巧做了一個todolist的雛型,可以增加、刪除項目。今天稍微轉換個方向,講一下要怎麼在JSX中使用使用...