iT邦幫忙

react相關文章
共有 560 則文章
鐵人賽 Modern Web DAY 22

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

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

鐵人賽 Modern Web DAY 21

技術 Day 21:批改系統網頁 (3) - 模組化視覺元件與單頁路由處理

昨天我們將 React 套件導入了專案中,並且完成了一頁完整網頁的結構。今天我們要嘗試將這個結構模組化,並且利用 React Router 來進行前端網頁的路...

鐵人賽 Modern Web DAY 24

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

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

鐵人賽 自我挑戰組 DAY 4
React基礎 系列 第 4

技術 第四天,react安裝環境了。

React安裝環境 Visual Studio Code 安裝位置:https://visualstudio.microsoft.com/zh-hant/dow...

鐵人賽 Modern Web DAY 10

技術 Day 10: 將我們的 SSG 變成獨立的套件

從這篇開始,程式碼的目錄結構會有很大的變化,在這之前我們都把 SSR 與我們自己的 blog 的程式碼混在一起,但這系列是要做出一個通用的 SSG ,所以之後會...

鐵人賽 Modern Web DAY 29

技術 Day 29:批改系統網頁 (11) – 重新審核程式碼功能與其他雜項

昨日基本上我們已經完成了大致的 Online Judge 系統,剩下基本上就是看你打算要怎麼設計你的 Online Judge 系統來決定該怎麼打造你前端網頁...

鐵人賽 自我挑戰組 DAY 5
React基礎 系列 第 5

技術 第五天,建立一個React的新專案Create React App

1.開新的檔案(npx是npm 5.2所附帶的套件執行器) npx create-react-app my-app 2.進入到目錄 cd my-app 3....

鐵人賽 Modern Web DAY 4
ReactJS 疑難排解 系列 第 4

技術 ReactJS 疑難排解:會報錯的 console.log(event)

寫了多年的 js ,遇到不熟悉的使用情境大家肯定會先 console.log 一下 曾經在 onChange event handler 中印過 event 是...

鐵人賽 Modern Web DAY 8

技術 仿Trello - 建立新增Todo介面

本系列文以製作專案為主軸,紀錄小弟學習React以及GrahQL的過程。主要是記下重點步驟以及我覺得需要記憶的部分,有覺得不明確的地方還請留言多多指教。 接...

鐵人賽 Modern Web DAY 19

技術 Day 19 測試 React 元件:Mock HTTP Requests

如果元件內有牽涉 HTTP requests ,我們通常需要在測試中 mock 它們。今天將學習如何測試元件的時候 mock 這些 HTTP requests。...

鐵人賽 Modern Web DAY 3
ReactJS 疑難排解 系列 第 3

技術 ReactJS 疑難排解:為什麼按下取消,form 卻 submit 了

先來看一段簡單的 code <form onSubmit={handleSubmit}> ... <button onClick={h...

鐵人賽 Modern Web DAY 16

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

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

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

技術 I Want To Know React - 條件 render

React 條件 render 使用情境 在撰寫前端頁面時,常常需要根據不同的 props / state 資料顯示不同的 element。 舉例來說,使用者尚...

鐵人賽 Modern Web DAY 15

技術 [DAY15] 組件的拆分

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

鐵人賽 Modern Web DAY 26

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

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

鐵人賽 自我挑戰組 DAY 2
React基礎 系列 第 2

技術 第二天,React的變數竟然可以放html的tag,這個功能叫JSX

JAVA SCRIPT 是不能接受變數中有html標籤如之類的。 而這個可以接受html標籤的功能叫JSX,就是可以將一般的內容加上HTML的標籤使用。 而這個...

鐵人賽 Modern Web DAY 25

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

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

鐵人賽 Modern Web DAY 26

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

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

鐵人賽 Modern Web DAY 14

技術 Day 14: 用 Helmet 管理 head 的內容

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

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

技術 I Want To Know React - Class Component State 語法

回顧 state 在上個章節中了解了 state 的概念,就讓我們來重新重溫一下。 State 代表 React component 的狀態,會是一個完全由創建...

鐵人賽 Modern Web DAY 11

技術 Day 11: 基於檔案系統的路由

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

鐵人賽 Modern Web DAY 10

技術 仿Trello - 建立編輯Todo介面與以下省略

本系列文以製作專案為主軸,紀錄小弟學習React以及GrahQL的過程。主要是記下重點步驟以及我覺得需要記憶的部分,有覺得不明確的地方還請留言多多指教。 編...

鐵人賽 Modern Web DAY 20

技術 【Day.20】React效能 - 用useCallback避免函式的重新定義

在前面,我們說在非必要的時候,不要在React function component內宣告函式。 那什麼時候是「必要的時候」呢 ? 當我們有需要綁定和state...

鐵人賽 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 28
I Want To Know React 系列 第 28

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

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

鐵人賽 自我挑戰組 DAY 9
React基礎 系列 第 9

技術 第九天,React 元件的生命周期:

React 元件的生命周期: 這是用console.log跑程式所出來的順序,數字是記錄而已。 1.constructor:初始化 4.render:在網頁上輸...

鐵人賽 Modern Web DAY 23

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

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

鐵人賽 Modern Web DAY 18

技術 【Day.18】開發者工具React Dev tool與useContext的效能問題

由於我們在執行React程式前,都要透過webpack和Babel打包編譯成瀏覽器看的懂的ES5,實際跑在瀏覽器的程式碼就會和本來React裡面長的樣子差很多,...

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

技術 Day 18 測試 React 元件:測試元件的 Event Handlers

目前為止我們已經了解該如何使用 React Testing Library 的 render 跟 debug 來 測試元件的狀態了。 今天我們將繼續探索如何測試...