iT邦幫忙

react相關文章
共有 1537 則文章
鐵人賽 Modern Web DAY 12
I Want To Know React 系列 第 12

技術 I Want To Know React - Lifecycle 階段

回顧 React Lifecycle 在上個章節中,我們了解了 React component instance 的生命週期(Lifecycle)代表一個 co...

鐵人賽 Modern Web DAY 21

技術 【Day.21】React效能 - 用useMemo避免函式非必要的執行

但是有的時候我們只負責製作元件,並沒有辦法確認使用這個元件的人是不是在函式定義域內加工元件,這個時候該怎麼辦才能確保這個問題呢? 在Day.19,我們以元件...

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

技術 ReactJS 疑難排解:為什麼用了 React.memo 還是一直 re-render

我們先來看以下兩個例子,想想當 <Parent/> re-render 時,Child 會不會也跟著 re-render 呢? function C...

鐵人賽 自我挑戰組 DAY 8

技術 【DAY 08】React Component也有生老病死?(下)

【前言】  昨天稍微提到了React component的其中兩個生命週期componentDidMount和componentWillUnmount。今天就來...

鐵人賽 Modern Web DAY 29

技術 【Day29】反饋元件 - Toast

元件介紹 Toast 可以提供使用者操作的反饋訊息。包含一般資訊、操作成功、操作失敗、警告訊息等。預設為在頂部置中顯示並自動消失,是一種不打斷用戶操作的輕量級提...

鐵人賽 Modern Web DAY 6

技術 Day 6【React】阿嬤妳怎麼沒感覺?

【前言】終於來到第一個大魔王了,突然感覺自己很像在打怪。等到開始打 Boss 才發現:「React 也太複雜了吧!」一堆大括號、中括號、小括號、Arrow F...

鐵人賽 Modern Web DAY 24

技術 [Day 24] useEffect dependencies 的經典錯誤用法

這個章節讓我們更深入的探討一下 dependencies 常見的錯誤使用方式。我們在前幾篇 useEffect 的深入解析中一再強調過一個概念:useEffec...

鐵人賽 Modern Web DAY 21
Zero to hero with React.js 系列 第 21

技術 【Day 21 React】Redux 做遊戲角色陣容應用程式——趴萬

這次要做的專案是遊戲角色選取的應用程式做出來的應用程式大概會像這樣: 可以從左邊的角色選項選取到右邊,陣容狀態會依被選取的角色而不斷更動。 建置環境 在專案資...

鐵人賽 Modern Web DAY 11

技術 #11 No-code 之旅 — 在 Next.js 專案中顯示 Notion 的資料 ft. Notion SDK

哈囉!昨天使用 SWR 實作了一個小功能,讓使用者可以列出某 Github user 的所有公開 repository~ 今天用 Notion SDK 新增了一...

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

技術 I Want To Know React - 初探 React

簡介 React React 是一個用來製作 UI(User Interface, 使用者介面)的 JavaScript 函式庫,旨在用更簡易快速的方式建構前端...

鐵人賽 Modern Web DAY 22

技術 <22 - React 上陣 01> Webpack - Babel - React 聯手

火紅的 React,建立元件銳不可擋,今天來寫一個 Hello World 的 React 元件,然後示範該如何透過 webpack 以及 babel 來 bu...

鐵人賽 自我挑戰組 DAY 17

技術 【Day17】ChatGPT請教教我:React入門(三)- 運用JS高階函數,進階JSX組合元件!

我們在前兩篇中,學會了JSX的語法、元件Component的撰寫也會傳Props和使用State了,一開始ChatGPT說的三大核心的學會了 挽起袖子開始要撰寫...

技術 什麼是 React Component?

挑戰 React 第八篇 目錄 什麼是組件? 如何用組件達成程式碼重複使用? 兩種組件種類 學習心得 什麼是組件? Component,中文...

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

技術 I Want To Know React - 正確使用 Event handler

在上一篇中介紹了 JSX Event 的使用方式,在本章節我們將近一步了解在 class component 中使用 event handler 的常見問題、對...

鐵人賽 自我挑戰組 DAY 13

技術 【DAY 13】對方聽不懂?那就讓Reducer來幫你一把吧!

【前言】  終於來到假日了,身為一個朝八晚八的厭世工程師(什麼時候會離職或被火掉我也不知道),既然挑戰了鐵人賽,那就努力的把它做完吧(笑)!昨天講到action...

鐵人賽 Modern Web DAY 7

技術 Day07 - Tic Tac Toe篇:勝負判斷事前準備

到目前為止,我們伸縮自如的圈圈叉叉遊戲已經很像樣了,但是目前判斷勝負的工作還是需要玩家自己來判斷。我們希望電腦可以幫助我們判斷勝負,這樣就不用自己在那邊算自己是...

鐵人賽 Modern Web DAY 22

技術 【Day22】導航元件 - Tabs

元件介紹 Tabs 是一個選項卡切換元件,能夠在同一層級的內容組別當中導航、切換。此元件由兩個部分構成,一個是讓使用者點擊的導覽頁籤 Tab,一個是對應的內容...

鐵人賽 Modern Web DAY 2

技術 #02 No-code 之旅 — Next.js 簡介

大家星期五快樂!TGIF~ 今天想跟大家分享 Next.js 這個 React 框架 (官網寫 &quot;The React Framework for Pr...

鐵人賽 自我挑戰組 DAY 21

技術 【Day21】ChatGPT請教教我:React入門(七)- React & TypeScript !

這個章節終於要幫我們的React專案加上TypeScript了有關基礎的TypeScript內容可以先看:【Day10】ChatGPT請教教我:TypeScri...

鐵人賽 Modern Web DAY 25
Zero to hero with React.js 系列 第 25

技術 【Day 25 React】Redux 做遊戲角色陣容應用程式——趴ㄈ ㄞˋ

mapping dispatch to props import { bindActionCreators } from 'redux'; import {...

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

技術 Day 29 React Router v6 (下)

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

鐵人賽 Modern Web DAY 21

技術 [Day 21] useEffect 其實不是 function component 的生命週期 API

經過了前兩篇章的洗禮,相信你現在對於 function component 的 render 概念已經有一定程度的掌握。接著就讓我們進入這個階段的重頭戲:use...

鐵人賽 自我挑戰組 DAY 1

技術 【DAY 01】你好React,我可以當你好朋友嗎?

【前言】  咳咳,我是Hyora,一個剛滿四個月、天天都很厭世、擔心什麼時候會被火掉的超廢前端工程師。雖是本科系出身,但大學程式課程要不是低空飛過,不然就是能逃...

鐵人賽 自我挑戰組 DAY 19

技術 【Day19】ChatGPT請教教我:React入門(五)- 更多Hook!useMemo!useCallback!自定義Hook!

上個章節提到,Hook是React所提供的函式讓我們可以在Functional Component中使用React提供的功能最廣泛以及最常用的hook即是管理S...

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

技術 I Want To Know React - Component 內部原理 & 使用技巧

回顧 React component 在上一篇中,我們介紹了 React component 是什麼,並解釋了它的好處與語法,一起來複習一下吧! React c...

鐵人賽 Modern Web DAY 29

技術 Day28 | 最強聯名款 TSX 上市-SCSS 篇

前言 本篇進入到導入 SCSS,但因為 TypeScript 的特性,導致 SCSS 還要再經過一層封裝,才有辦法被讀到 .tsx 中,詳細做法會在文中說明!...

鐵人賽 Modern Web DAY 23

技術 <23 - React 上陣 02> Webpack - Babel - React 聯手 - 撰寫多個元件並匯入至某個JS

繼上一篇 &lt;22 - React 上陣&gt; Webpack - Babel - React 聯手,已經做好基本的安裝與設定,接下來要更進一步寫多個元件...

鐵人賽 自我挑戰組 DAY 23

技術 [Day 23] React hook(下)-useMemo&useRef

在搜尋useMemo的時候,就一直看到React.memo的相關資料 ,雖然React memo不屬於React hook的一部分,但還是簡單介紹一下,我們都知...

鐵人賽 Modern Web DAY 14

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

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

鐵人賽 Modern Web DAY 14

技術 #14 No-code 之旅 — 怎麼利用 Chakra UI 去做 React 元件客製化?

繼續昨天的主題,該怎麼用 Chakra UI 做開發呢?現成的元件該怎麼去做客製化?專案有定設計系統 (design system),那怎麼跟 Chakra U...