iT邦幫忙

react相關文章
共有 1742 則文章
鐵人賽 Modern Web DAY 26
30 days of React 系列 第 26

技術 Day 26 - React 基礎實作練習:追加購物清單

今天要來製作購物清單,透過這個練習我們可以複習 Lifting State Up 的觀念。先來看目前的程式碼: App.js import React fr...

鐵人賽 Modern Web DAY 25

技術 【Day25】淺談 React.js(4)公共元件 & 頁面跳轉 Router

在碰到純前端的大專案時,專案內有許多頁面是必然的。都是在同個專案,當頁面跳轉時,想必也都會使用到相同的元件。但是,在創建新頁面時,我們不僅要複製多個元件,甚至是...

鐵人賽 SideProject30 DAY 25

技術 Day25:實作 Firebase Authentication 電話驗證

在使用者成功註冊、並且角色為店家時,需先經過電話驗證才可進行刊登服務項目供顧客預約,此故事情境在這篇文章可以回顧,所以今天將重點放在電話驗證的實作上。 使用 J...

鐵人賽 Modern Web DAY 25

技術 30天React練功坊-攻克常見實務/面試問題 Day25: Implement simple pagination(interview question)

tags: ItIron2023 react 前言 我們昨天看了一個很水的custom hook題目,希望透過那個水到爆炸的題目你有了解到可以利用custom...

鐵人賽 自我挑戰組 DAY 25

技術 [Day25] 文章列表頁和標籤頁開發

今天這兩個頁面比較單純的只是呼叫API去取得當前的資料,並顯示於頁面上。 大綱 文章列表頁開發 標籤頁開發 路由設定 1.文章列表頁開發 Wireframe...

鐵人賽 Software Development DAY 25

技術 Day25 Electron應用程式-5

昨天將使用React的Electron開發環境建置完成了,就可以開始動手撰寫Electron應用程式。第一步先修改Electron應用程式的UI,目前的UI還是...

鐵人賽 Modern Web DAY 25

技術 React中的<StrictMode>:提前發現和解決應用程式的問題

今天要來介紹另一個React內建的元件&lt;StrictMode /&gt;,目的是幫助我們可以即早發現bugs即早治療。 使用 使用方式就是將&lt;Str...

鐵人賽 Modern Web DAY 26
react 學習記錄 系列 第 26

技術 [Day26]我的 react 學習記錄 - react query

這篇文章的主要內容 簡單介紹非同步的狀態管理工具 react query。 react query 上一篇的最後使用 Zustand 來取得 github 的...

鐵人賽 Modern Web DAY 25
30 days of React 系列 第 25

技術 Day 25 - React 基礎實作練習:下拉式選單

今天要來練習做下拉式選單選擇國家。目前我們的程式碼已經有基礎的樣式。需要讓下拉式選單的功能正常運作。 目前有的程式碼: import React from...

鐵人賽 SideProject30 DAY 24

技術 #23 API Request 淺談與 React Hook

在接下來的的幾天內,需要跟 API server 去整合跟修正使用真實資料後的調整,在這邊會使用到了 React Hook 來整合我們的 Request AP...

鐵人賽 Modern Web DAY 24

技術 【Day24】淺談 React.js(3)React useState & useEffect

介紹完React的動態生成後,本篇將帶您進入到React Hook的領域。 甚麼是React hook?簡單來說,它是一種React的函數,可以讓您在無需使用c...

鐵人賽 Modern Web DAY 24

技術 2023It 30天React練功坊-攻克常見實務/面試問題 Day24: Creating a custom hook for data fetching(interview question)

tags: ItIron2023 react 前言 昨天我們看了一個基本的Tab component題目,在那個常見的UI組件上做了一點小小的測試,相信對你們來...

鐵人賽 Modern Web DAY 26
TypeScript 啟動! 系列 第 26

技術 [Day 26] TypeScript 零售業者模擬演練 IV

今天應該會完成大致上的呈現~ Step1 修正 App.tsx // App.tsx import React, { useState } from 'rea...

鐵人賽 SideProject30 DAY 24

技術 Day24:實作會員資料更新

花了兩天稍微了解 FireStore Database 的 CRUD 後,今天著手將我使用先前做好的表單元件們,組裝成店家資料維護頁面,但一直卡在明明登入了 u...

鐵人賽 自我挑戰組 DAY 24

技術 [Day24] 框架頁面和首頁切版

大綱 建立Layout頁面 首頁切版 前言 我們昨天開發出了導覽列,但我們接下來的頁面都會需要導覽列,最直覺的做法就是在每個Component裡面放進去He...

技術 使用 Redux-toolkit + RTK-query 取代 useContext

最近公司打算統一使用 Redux-toolkit + RTK-query 去取代 useContext,這幾天惡補一下荒廢已久的 Redux,並且把 Redux...

鐵人賽 Software Development DAY 24

技術 Day24 Electron應用程式-4

實際建置Electron的開發環境後,可以發現範例中的UI是採用靜態的HTML產生,所以我們可以藉由不同的前端框架(如React、Vue等等)來做為UI的開發工...

鐵人賽 Modern Web DAY 25
react 學習記錄 系列 第 25

技術 [Day25]我的 react 學習記錄 - Zustand

這篇文章的主要內容 簡單介紹全域管理工具 Zustand Zustand 現在 react 的相關套件裡面最使用最廣泛的全域管理工具應該是 Redux,在工作...

鐵人賽 自我挑戰組 DAY 29

技術 【Day29】ChatGPT請教教我:React 進階(七)- Nx 框架!Monorepo 架構!

目前這個系列已挑選ChatGPT、前端&amp;React相關章節出版成書!感謝大家的閱讀與支持!《用 ChatGPT 詠唱來點亮 React & 前端技能樹...

鐵人賽 Modern Web DAY 24
30 days of React 系列 第 24

技術 Day 24 - React 基礎實作練習:輸入授權碼

React 官方文件目前已結束第三章,進入最後一個章節的學習前,最後幾天的鐵人賽以實作的練習來複習所學習過的內容吧。今天要來練習輸入授權碼的表單製作。要讓使用者...

鐵人賽 自我挑戰組 DAY 28

技術 【Day28】ChatGPT請教教我:React進階(六)- NextJS!路由系統!

目前這個系列已挑選ChatGPT、前端&amp;React相關章節出版成書!感謝大家的閱讀與支持!《用 ChatGPT 詠唱來點亮 React & 前端技能樹...

鐵人賽 SideProject30 DAY 23

技術 Day23:操作 Firestore Database 的資料(二)

延續上一篇,今天繼續研究 Firestore Database 的資料操作, 溫馨提醒:以下內容看到的 showNotify 是我個人封裝使用的提示彈窗,並不...

鐵人賽 Modern Web DAY 23

技術 30天React練功坊-攻克常見實務/面試問題 Day23: Simple tab component(interview question)

tags: ItIron2023 react 前言 我們昨天做了一個簡單的todo list,透過那個題目可以檢驗你對於state &amp; props的掌握...

鐵人賽 Modern Web DAY 23

技術 【Day23】淺談 React.js(2)React動態生成

在上一天中,我們了解到React中的元件構成和基礎語法,今天,我們要一同探索的是 ── 更便捷的生成語法! 動態生成 在介紹jQuery的篇章中我們曾提過,我...

鐵人賽 Modern Web DAY 24

技術 等待不再沉悶:React中的Suspense元件入門

我們在前幾天的文章都有看到Suspense這個React內建的元件,這篇要來介紹一下這個Suspense的細部功能。Suspense可以讓我們在它底下的chil...

鐵人賽 自我挑戰組 DAY 23

技術 [Day23] 導覽列開發

先前我們已經將登入和註冊頁開發完,今天要來進行導覽列的開發。 大綱 Wireframe 導覽列開發 未登入的導覽列 已登入的導覽列 使用者功能列 1...

鐵人賽 Modern Web DAY 23

技術 React性能優化:利用useDeferredValue提升應用程式效能

今天要來介紹的是useDeferredValue,這個hook可以用來延後畫面的更新,幫助我們優化一些像是大量的畫面更新造成的操作卡住問題。可以先看看官方文件提...

鐵人賽 Modern Web DAY 24
react 學習記錄 系列 第 24

技術 [Day24]我的 react 學習記錄 - emotion

這篇文章的主要內容 簡單介紹 react 裡面 style 的工具 emotion。 Emotion 目前為止都盡量不動到 style 即使有用到也是使用 i...

鐵人賽 自我挑戰組 DAY 27

技術 【Day27】ChatGPT請教教我:React進階(五)- Style管理!styled-components!

各位,從Day1至今為止,我們討論前端內容或React內容的時候幾乎沒有討論到要怎麼處理元件的樣式 (Style)只在Day6輕描淡寫的提到css檔引入,以及在...

鐵人賽 自我挑戰組 DAY 26

技術 【Day26】ChatGPT請教教我:React進階(四)- useReducer、useContext vs. Redux ?

目前這個系列已挑選ChatGPT、前端&amp;React相關章節出版成書!感謝大家的閱讀與支持!《用 ChatGPT 詠唱來點亮 React & 前端技能樹...