終於來到了比較不一樣的主題CSS,這篇會較紹在React使用CSS的幾種方式 CSS Modules styled-components Tailwind...
這篇文章的主要內容 簡單介紹 immer。 Immer 在 react 專案裡面我們會希望可以確保所有狀態都是 immutable 的,盡量去避免直接操作現有...
這篇文章的主要內容 簡單介紹 react hook form react hook form 今天要來簡單介紹處理表格輸入跟驗證的好幫手 react hook...
大綱 Wireframe Quill.js介紹 發布文章頁面開發 1. Wireframe 2. Quill.js介紹 Quill 是一個開源且極具彈性...
我們先前有產生出讀取環控晶片的動態連結函庫,但是在Electron應用程式中並不能像Windows console application一樣直接引入使用。要在...
今天要來製作購物清單,透過這個練習我們可以複習 Lifting State Up 的觀念。先來看目前的程式碼: App.js import React fr...
在碰到純前端的大專案時,專案內有許多頁面是必然的。都是在同個專案,當頁面跳轉時,想必也都會使用到相同的元件。但是,在創建新頁面時,我們不僅要複製多個元件,甚至是...
在使用者成功註冊、並且角色為店家時,需先經過電話驗證才可進行刊登服務項目供顧客預約,此故事情境在這篇文章可以回顧,所以今天將重點放在電話驗證的實作上。 使用 J...
tags: ItIron2023 react 前言 我們昨天看了一個很水的custom hook題目,希望透過那個水到爆炸的題目你有了解到可以利用custom...
今天這兩個頁面比較單純的只是呼叫API去取得當前的資料,並顯示於頁面上。 大綱 文章列表頁開發 標籤頁開發 路由設定 1.文章列表頁開發 Wireframe...
昨天將使用React的Electron開發環境建置完成了,就可以開始動手撰寫Electron應用程式。第一步先修改Electron應用程式的UI,目前的UI還是...
今天要來介紹另一個React內建的元件<StrictMode />,目的是幫助我們可以即早發現bugs即早治療。 使用 使用方式就是將<Str...
這篇文章的主要內容 簡單介紹非同步的狀態管理工具 react query。 react query 上一篇的最後使用 Zustand 來取得 github 的...
今天要來練習做下拉式選單選擇國家。目前我們的程式碼已經有基礎的樣式。需要讓下拉式選單的功能正常運作。 目前有的程式碼: import React from...
在接下來的的幾天內,需要跟 API server 去整合跟修正使用真實資料後的調整,在這邊會使用到了 React Hook 來整合我們的 Request AP...
介紹完React的動態生成後,本篇將帶您進入到React Hook的領域。 甚麼是React hook?簡單來說,它是一種React的函數,可以讓您在無需使用c...
tags: ItIron2023 react 前言 昨天我們看了一個基本的Tab component題目,在那個常見的UI組件上做了一點小小的測試,相信對你們來...
今天應該會完成大致上的呈現~ Step1 修正 App.tsx // App.tsx import React, { useState } from 'rea...
花了兩天稍微了解 FireStore Database 的 CRUD 後,今天著手將我使用先前做好的表單元件們,組裝成店家資料維護頁面,但一直卡在明明登入了 u...
大綱 建立Layout頁面 首頁切版 前言 我們昨天開發出了導覽列,但我們接下來的頁面都會需要導覽列,最直覺的做法就是在每個Component裡面放進去He...
最近公司打算統一使用 Redux-toolkit + RTK-query 去取代 useContext,這幾天惡補一下荒廢已久的 Redux,並且把 Redux...
實際建置Electron的開發環境後,可以發現範例中的UI是採用靜態的HTML產生,所以我們可以藉由不同的前端框架(如React、Vue等等)來做為UI的開發工...
這篇文章的主要內容 簡單介紹全域管理工具 Zustand Zustand 現在 react 的相關套件裡面最使用最廣泛的全域管理工具應該是 Redux,在工作...
目前這個系列已挑選ChatGPT、前端&React相關章節出版成書!感謝大家的閱讀與支持!《用 ChatGPT 詠唱來點亮 React & 前端技能樹...
React 官方文件目前已結束第三章,進入最後一個章節的學習前,最後幾天的鐵人賽以實作的練習來複習所學習過的內容吧。今天要來練習輸入授權碼的表單製作。要讓使用者...
目前這個系列已挑選ChatGPT、前端&React相關章節出版成書!感謝大家的閱讀與支持!《用 ChatGPT 詠唱來點亮 React & 前端技能樹...
延續上一篇,今天繼續研究 Firestore Database 的資料操作, 溫馨提醒:以下內容看到的 showNotify 是我個人封裝使用的提示彈窗,並不...
tags: ItIron2023 react 前言 我們昨天做了一個簡單的todo list,透過那個題目可以檢驗你對於state & props的掌握...
在上一天中,我們了解到React中的元件構成和基礎語法,今天,我們要一同探索的是 ── 更便捷的生成語法! 動態生成 在介紹jQuery的篇章中我們曾提過,我...
我們在前幾天的文章都有看到Suspense這個React內建的元件,這篇要來介紹一下這個Suspense的細部功能。Suspense可以讓我們在它底下的chil...