iT邦幫忙

reactjs相關文章
共有 711 則文章
鐵人賽 Modern Web DAY 1

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

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

鐵人賽 Modern Web DAY 2

技術 [Day 02] 學好 React 需要的前置基本功

如前一章節中所述,有鑒於學習 React 其實非常仰賴 JavaScript 的一些基本功,因此我會建議一開始先不要著急,在開始 React 的學習之旅前可以先...

鐵人賽 Modern Web DAY 2

技術 [DAY 2] React 的特性與思維,我該先學哪個框架呢?

[ 情境劇場 ] 解師傅:開一間餐廳,一定要先了解餐廳大致的方向,跟開店要注意的地方~ 小當家:不就是熱炒店嗎?還有這麼多眉角阿... 解師傅:多的是你不知道的...

鐵人賽 Modern Web DAY 1

技術 Day01:系列文大綱

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

鐵人賽 Modern Web DAY 1

技術 [DAY 1] React 的歷史時間軸

[ 前情提要 ] 要學習 React 就要有開一間餐廳的決心,你說這有什麼關係?這過程其實大同小異,兩者都需要學習且消耗時間成本,才有機會成功!現在「你」就是餐...

鐵人賽 Modern Web DAY 1

技術 名稱與規劃—React生態系 library?framework?

破折號後的題目名稱由來 破折號後的名稱是來自於React繁體中文官方網站<header>的裡面的<h1>小字參見下圖 React是一個...

鐵人賽 Modern Web DAY 1

達標好文 技術 [Day 01] 前言:React 為什麼這麼難學的好?

2024/2 更新 - 實體書平裝版本推出 在經過快要一年的努力後,本系列文的實體書版本推出了~其中新增並補充了許多鐵人賽版本中沒有的脈絡與細節,並以全彩印刷拉...

鐵人賽 自我挑戰組 DAY 1

技術 Day-1 前言

Day-1 前言 這個系列文,會提供我在轉職前端的準備期一年的心路歷程,與就業之後的這八個月以來發生的事,我的所思所學。 緣起 不同部門的同事,問了我技術的問題...

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

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

技術 React-Hash 轉換 BrowserRouter部屬問題

剛開始在開發公司網站時 由於公司起初沒有後端 於是只能build出來讓老闆追蹤進度 所以選擇了HashRouter 但HashRouter顧名思義 會在/前方出...

徵才 【徵才】【北京知名AR衍射光波导&光栅专家】Web前端开发

【公司服務項目】二十余年的光栅领域科研成果进行产业转化,致力于增强现实衍射光波导光学显示模组及衍射光栅的研发、生产和销售。公司已建成一支由教育部长江学者、国家杰...

技術 React-banner輪播

與傳統的輪播概念一樣 分成三個部分 能夠左右點擊的navigator 底部隨著畫面改動 而active的dot 最後就是slideshow 首先第一步得先做一個...

技術 React-使用useRef跨組件操作DOM

"我想要在React上實現同一頁在menu上點擊,就滑到對應的區塊,該怎麼做呢?"在React上面因為不建議直接操作DOM的關係所以在能取得...

技術 React-視窗滾動改變DOM

一開始我想實現一個辦法就是在滑鼠滾動到指定位置時我指定的區塊會浮現出來滑鼠往上滾時,區塊會一起消失 於是此處是一開始的程式 const About=docume...

鐵人賽 Modern Web DAY 30

技術 【Day30】挑戰回顧 & 鐵人練成心得分享

挑戰最後一日的題目真的讓我想了很久,倒底該放什麼元件來壓軸才好?要寫一個綜合演練,把前面的元件都拿出來大亂鬥一番,搞出一個看起來很厲害的應用嗎?還是說我應該老老...

鐵人賽 Modern Web DAY 29

技術 【Day29】反饋元件 - Toast

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

鐵人賽 Modern Web DAY 28

技術 【Day28】反饋元件 - Modal

元件介紹 Modal 元件為彈出相關元件提供了重要的基礎建設,如 Dialog、Popover、Drawer...等等。 參考設計 & 屬性分析 各家元...

鐵人賽 Modern Web DAY 26

技術 Day26 X Memory Management In JavaScript

如果你是寫 C/C++ 的開發者,應該對記憶體管理並不陌生,如果你是後端開發者,應該會常常注意伺服器有沒有發生 Memory Leak 與 Memory 使用...

鐵人賽 Modern Web DAY 27

技術 【Day27】反饋元件 - Progress circle

元件介紹 Progress circle 跟上一篇 Progress bar 一樣是能夠展示當前進度的元件。只是在外觀上面以圓形替代長條形,好處是在寬度不夠的排...

鐵人賽 Modern Web DAY 28

技術 DAY28-React NFT網站成果展示

前言: 到了倒數第三天了,一開始目標要完成的NFT網站開發也到一個段落啦~今天阿森要來展示一下綜合前幾天的內容(還有我自己的一點改良),最後的成果會是如何!...

鐵人賽 Modern Web DAY 26

技術 【Day26】反饋元件 - Progress bar

元件介紹 Progress bar 是能夠展示當前進度的進度條元件。當一個操作需要顯示目前百分比,或是需要較長時間等待運行的時候,能夠使用這樣的元件提示用戶目前...

鐵人賽 Modern Web DAY 25

技術 【Day25】反饋元件 - Skeleton

元件介紹 Skeleton 是一個骨架載入元件(Skeleton Screen Loading),跟 Spin 不同的是,Skeleton 幫助我們在頁面載入完...

鐵人賽 Modern Web DAY 22

技術 Day 22 Context

第 22 天 ! 當我們資料項下傳遞的時候, 會發現, component 的階層越深, 傳遞資訊會越困難, 因為代表的是,需要不斷做向下傳遞的動作, 假如階層...

鐵人賽 Modern Web DAY 24

技術 【Day24】反饋元件 - Spin

元件介紹 Spin 是一個載入狀態元件,當頁面正在處理非同步行為,或需要讓用戶等待的作業時,用來顯示以緩解用戶等待的焦慮。 參考設計 & 屬性分析 一個...

鐵人賽 Modern Web DAY 23

技術 【Day23】導航元件 - Pagination

元件介紹 Pagination 是一個分頁元件,當頁面中一次要載入過多的資料時,載入及渲染將會花費更多的時間,因此,考慮分批載入資料的時候,需要分頁元件來幫助我...

鐵人賽 Modern Web DAY 22

技術 【Day22】導航元件 - Tabs

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

鐵人賽 Modern Web DAY 21

技術 【Day21】導航元件 - Drawer

元件介紹 Drawer 抽屜元件,由螢幕邊緣滑出的浮動面版,常見的應用是作為導航用途,例如 Navigation drawers。 參考設計 & 屬性分...

鐵人賽 Modern Web DAY 22

技術 DAY22-導覽設計之Sidebar

前言: 今天我們要來完成前面提到的Sidebar,我會從Navbar接著開始接著講,那就讓我們開始吧! 目標: 這裡就廢話不多說,直接上完成的樣子! 然後如...

鐵人賽 Modern Web DAY 20

技術 【Day20】導航元件 - Select

元件介紹 Select 是一個下拉選擇器。觸發時能夠彈出一個菜單讓用戶選擇操作。 這個元件我們底層就能夠使用我們上一篇所提到的 Dropdown 來實作。 參考...

鐵人賽 Modern Web DAY 19

技術 【Day19】導航元件 - Dropdown

元件介紹 Dropdown 是一個下拉選單元件,當頁面上的選項過多時,可以用這個元件來收納選項,透過滑鼠事件來觸發選單彈出,點擊選項會執行相對應的命令。 參考設...