剛開始在開發公司網站時 由於公司起初沒有後端 於是只能build出來讓老闆追蹤進度 所以選擇了HashRouter 但HashRouter顧名思義 會在/前方出...
有使用過React的同學都知道,用React做輸入控制的時候, 通常做法是建立一個input的state, 具體如下: import { useState }...
【公司服務項目】二十余年的光栅领域科研成果进行产业转化,致力于增强现实衍射光波导光学显示模组及衍射光栅的研发、生产和销售。公司已建成一支由教育部长江学者、国家杰...
與傳統的輪播概念一樣 分成三個部分 能夠左右點擊的navigator 底部隨著畫面改動 而active的dot 最後就是slideshow 首先第一步得先做一個...
"我想要在React上實現同一頁在menu上點擊,就滑到對應的區塊,該怎麼做呢?"在React上面因為不建議直接操作DOM的關係所以在能取得...
一開始我想實現一個辦法就是在滑鼠滾動到指定位置時我指定的區塊會浮現出來滑鼠往上滾時,區塊會一起消失 於是此處是一開始的程式 const About=docume...
挑戰最後一日的題目真的讓我想了很久,倒底該放什麼元件來壓軸才好?要寫一個綜合演練,把前面的元件都拿出來大亂鬥一番,搞出一個看起來很厲害的應用嗎?還是說我應該老老...
元件介紹 Toast 可以提供使用者操作的反饋訊息。包含一般資訊、操作成功、操作失敗、警告訊息等。預設為在頂部置中顯示並自動消失,是一種不打斷用戶操作的輕量級提...
元件介紹 Modal 元件為彈出相關元件提供了重要的基礎建設,如 Dialog、Popover、Drawer...等等。 參考設計 & 屬性分析 各家元...
如果你是寫 C/C++ 的開發者,應該對記憶體管理並不陌生,如果你是後端開發者,應該會常常注意伺服器有沒有發生 Memory Leak 與 Memory 使用...
元件介紹 Progress circle 跟上一篇 Progress bar 一樣是能夠展示當前進度的元件。只是在外觀上面以圓形替代長條形,好處是在寬度不夠的排...
前言: 到了倒數第三天了,一開始目標要完成的NFT網站開發也到一個段落啦~今天阿森要來展示一下綜合前幾天的內容(還有我自己的一點改良),最後的成果會是如何!...
元件介紹 Progress bar 是能夠展示當前進度的進度條元件。當一個操作需要顯示目前百分比,或是需要較長時間等待運行的時候,能夠使用這樣的元件提示用戶目前...
元件介紹 Skeleton 是一個骨架載入元件(Skeleton Screen Loading),跟 Spin 不同的是,Skeleton 幫助我們在頁面載入完...
第 22 天 ! 當我們資料項下傳遞的時候, 會發現, component 的階層越深, 傳遞資訊會越困難, 因為代表的是,需要不斷做向下傳遞的動作, 假如階層...
元件介紹 Spin 是一個載入狀態元件,當頁面正在處理非同步行為,或需要讓用戶等待的作業時,用來顯示以緩解用戶等待的焦慮。 參考設計 & 屬性分析 一個...
元件介紹 Pagination 是一個分頁元件,當頁面中一次要載入過多的資料時,載入及渲染將會花費更多的時間,因此,考慮分批載入資料的時候,需要分頁元件來幫助我...
元件介紹 Tabs 是一個選項卡切換元件,能夠在同一層級的內容組別當中導航、切換。此元件由兩個部分構成,一個是讓使用者點擊的導覽頁籤 Tab,一個是對應的內容...
元件介紹 Drawer 抽屜元件,由螢幕邊緣滑出的浮動面版,常見的應用是作為導航用途,例如 Navigation drawers。 參考設計 & 屬性分...
前言: 今天我們要來完成前面提到的Sidebar,我會從Navbar接著開始接著講,那就讓我們開始吧! 目標: 這裡就廢話不多說,直接上完成的樣子! 然後如...
元件介紹 Select 是一個下拉選擇器。觸發時能夠彈出一個菜單讓用戶選擇操作。 這個元件我們底層就能夠使用我們上一篇所提到的 Dropdown 來實作。 參考...
元件介紹 Dropdown 是一個下拉選單元件,當頁面上的選項過多時,可以用這個元件來收納選項,透過滑鼠事件來觸發選單彈出,點擊選項會執行相對應的命令。 參考設...
元件介紹 Breadcrumb 是一個導航元件,用於顯示當前系統層級結構中的路徑位置,並且點擊路徑能返回之前的頁面。在系統有多個層級架構,並且希望能幫助用戶清楚...
元件介紹 Infinite scroll 能在面對多筆資料時,讓捲軸滑動到底部時再載入下一頁面的資料。 由於一次性向後端取得大批的資料,對於後端的資料計算、資料...
終於完賽了!感謝支持與追蹤這一系列影片的朋友們!希望未來有機會可以再拍其他主題的影片和大家分享! 連續 30 天不中斷每天上傳一支教學影片,教你如何用 Rea...
在昨天我們學會了 code splitting 與 dynamic import 的技巧,讓程式在打包時可以形成好幾個 bundle chunks,並在真的需...
元件介紹 Table 顧名思義就是一個表格元件,用來整齊的顯示行列數據。 參考設計 & 屬性分析 我自己覺得 table 是一個還蠻繁瑣的元件,要組成一...
重點整理 事件命名上必須使用小駝峰,且為 String 事件中必須放一個回傳 Function return ( <button onClick...
連續 30 天不中斷每天上傳一支教學影片,教你如何用 React 加上 Firebase 打造社群網站!歡迎訂閱分享! #React #Firebase #前...
前言: 昨天我們介紹了如何使用Mongodb atlas的一些最基本的功能,今天我們要更進一步介紹怎麼使用realm、怎麼寫出簡單的api,以及將架在Realm...