iT邦幫忙

react相關文章
共有 1744 則文章
鐵人賽 Modern Web DAY 2

技術 [DAY 02] Hook I am? I am useState!

標題下的冷笑話等級已經進入初老階段了嗎... 30 天的旅途前段會來回頭認識一些基本的 React Hook,而最常見到的就是 useState 本人。 Usa...

鐵人賽 Modern Web DAY 1

技術 [DAY 01] 我知道 React,但 Hook 是什麼?

大家好,我是查理!懷抱著既緊張又期待的心情參加,也抓著朋友們一起組團,這樣就能一起緊張(剉咧等)了。 我們都是在網頁中暢遊的小小工程師,團員丹尼要來做新手友善的...

鐵人賽 Modern Web DAY 3

技術 day03: NavBar

做出一個固定在畫面上方的導覽列沒什麼難度,故本日目標是重現 MUI 的 Elevate App bar 與 Hide App bar 這兩種導覽列。 成品...

鐵人賽 影片教學 DAY 1
150 分鐘學 React 系列 第 1

技術 第 0 天 [ 說明參賽、挑題目與組別的原因 ]

哈囉大家好,歡迎來到 150 分鐘學 React ,我是圈圈。在這系列,我會使用 VS Code ,以 React 18 做版本, functional com...

鐵人賽 Modern Web DAY 2

技術 [DAY02]設定以及安裝基本環境(上半部)

VScode 想必對會寫網頁的大家來說,VScode肯定不陌生吧!首先,我們要先安裝VScode。怕有些人可能不知道VScode是什麼,這邊介紹一下,VScod...

鐵人賽 Modern Web DAY 2

技術 day02: Container

需求故事:希望有一個容器元件來管理各級 breakpoint 下的 RWD 效果(置中內容、限制 max-width 以及根據 breakpoint 調整 pa...

鐵人賽 Modern Web DAY 1

技術 前言:為什麼不用人家寫好的東西?

因為 component library 提供的元件很少會直接符合設計稿的需求,外觀的客製化基本上不可避。 於是我開始好奇,比起閱讀官方文件來了解如何對元件進行...

鐵人賽 Modern Web DAY 1

技術 Day04: 那些 solidjs 帶給我們的方法(一)

前言 在 Day03 了解怎麼建立自己的最簡單的 component 後,我們開始深入了解如何使用 solidjs 這框架帶給我們的基礎方法, createSi...

鐵人賽 Modern Web DAY 1

技術 Day03:了解 tsx/jsx 以及剖析 solidjs

小前言 在 Day02 我們了解了專案結構,從 Day03 開始我們針對 src 內的資料夾做處理和觀看。 如果我們是用 pnpx degit solidjs...

技術 [筆記] React Data Binding

先說結論: Data Binding 是將畫面或用戶界面數據連接起來的過程。 跟大家一樣先放一個 WIKI 的解說 數據綁定(英語:Data binding)是...

鐵人賽 Modern Web DAY 1

技術 Day02: 如何創建 solidjs 的專案

關於此系列文,這回正式開始,首先我們要先建立一個 solidjs 專案,基本上 typescript 是非常香的我會頃向於使用 typescript 建立專案,...

鐵人賽 Modern Web DAY 1

技術 Day01:系列文大綱

Day01:系列文大綱 關於我 大家好我是 Michael Ho 這是我第一次參加鐵人賽,由於這次是我第一次參加,所以我想挑戰一些有挑戰性的主題。在講講今天的主...

技術 GraphQL介紹及為什麼我們要用GraphQL? 它帶給我們什麼好處

GraphQL前言 何謂GraphQL? GraphQL本身不是一種框架更不是一種程式語言,筆者認為可以解讀成一種有助於前端和後端工程師在開發時的規範.也可以想...

技術 驗證不求人 — — 發佈自己的 npm 驗證套件

會寫這篇的原因除了是想紀錄自己寫驗證套件的經過(對我不記下來很快就會忘了。。),還有就是因為在工作上遇到需要寫一個前端的驗證方法,來應用在各個地方中,來減少每...

技術 React Custom hook 踩坑日記 - useDebounce

今天要分享的是我們在優化前端時常會做的處理,Debounce & Throttle,那關於這兩個名詞的解釋,網路上有很多專門在講解的文章,也可以參考連結...

技術 React Custom hook 踩坑日記 - useFetch

今天分享一個get API的自定義hook做法,這個hook可以依據不同需求去做調整,我只是提供了做法和概念,當然也可以整合不同的方法,但是要考慮每支api的資...

技術 React Custom hook 踩坑日記 - form hook

今天分享一個簡單又常用到的方法來處理表單,先舉個新手進入React處理表單時常用到的例子: // 使用useState來記錄表單欄位訊息 const [nati...

技術 k8s react 把變數(ex:api url)寫進ConfigMap

【YC的尋路青春】 react上k8s的部分 前提如果放在.env裡面 react再build的時候就會把${process.env.REACT_APP_API...

技術 React雜談#1 React-Hook-Form - 建立快速的React表單

有使用過React的同學都知道,用React做輸入控制的時候, 通常做法是建立一個input的state, 具體如下: import { useState }...

達標好文 技術 [前端/JavaScript] 實作匯出excel下載按鈕的超好用套件:ExcelJS(下)- 用React匯出excel (export excel)

有關於ExcelJS這個套件的教學與說明,請先看我的上一篇文章:[前端/ES6] 實作匯出excel下載按鈕的超好用套件:ExcelJS(上)- 基礎介紹 這一...

技術 React Custom hook 踩坑日記 - useToggle

開發React的專案也有好一陣子了,趁著有空閒的時間和大家分享一些我常會在不同專案用到的共同自訂義hook function,這系列會由淺入深啦,所以先從基本的...

技術 虎你發財啦!自己的新年圖自己做 (React+Fabric.js) -下

前情提要 為了不浪費我白白畫的春聯,做了一個新年圖製造機還沒有新年圖的可以到下面玩玩看~(快收假了不需要了吧!為什麼我的GA沒有數據QQ) 虎你快樂新年圖製作...

技術 虎你快樂啦!自己的新年圖自己做 (React+Fabric.js) -上

老妹每年都會幫媽媽畫春聯,今年人在國外,拍胸脯保證說會畫電子檔給她! 嘔心瀝血畫了兩天後,媽很滿意,但畫了兩天就只有這樣也太虧了吧?(手畫春聯我可是不用5分鐘一...

技術 React-依視窗大小改變DOM

在class component上一開始必須得在construtor上導入state判斷視窗大小是否大於或等於節點此處是在於當視窗onload時判斷大小進而偵測...

鐵人賽 Modern Web DAY 30

技術 用React刻自己的投資Dashboard Day30 - 股票代號輸入防呆機制

tags: 2021鐵人賽 React 股票代號輸入錯誤當機問題 Day28的文章有提到,當使用者想要輸入股票代號看K線圖時,如果輸入的股票代號是錯誤的,也就是...

鐵人賽 Modern Web DAY 30

技術 Day30 X 系列文總結

這是我第三年參加鐵人賽,每一次來到第 30 天,都有種如釋重負的感覺,不過同時也會感到一些遺憾,因為總是沒能把自己在開賽前預期的內容好好呈現出來。不論是主題內...

鐵人賽 Modern Web DAY 29

技術 用React刻自己的投資Dashboard Day29 - 替股票加上名稱

tags: 2021鐵人賽 React 上一篇提到台股技術面的最新收盤資訊只有股票代號,似乎少了名稱,本篇就來把它補上吧。 資料來源 Finmind API裡面...

鐵人賽 Modern Web DAY 30

技術 Day 30 - 結語 — 首尾呼應&致謝

最後一篇來個首尾呼應,回答在 Day 01 問大家的七個關於 UI 元件的問題! 你知道 為什麼會有 UI LibraryA:讓我們可以不用再自己造輪子,...

鐵人賽 Modern Web DAY 29

技術 Day29 X 面對高流量,前端可以做些什麼?

在現今的 Web 應用中,要建構一個穩定的大型系統,能夠處理 High Concurrency 的流量是一個不可或缺的條件,尤其是在服務的熱門時段,例如優惠活...

鐵人賽 自我挑戰組 DAY 28
學習NodeJS的30天 系列 第 28

技術 Day28 NodeJS實作 II

前端新增的基本頁面設計完,今天的內容是以後端為主,建立新增待辦事項的API,以將前端傳遞的資料寫入資料庫。 後端應用程式 這裡的後端實作以Express作為框架...