iT邦幫忙

鐵人檔案

2021 iThome 鐵人賽
回列表
自我挑戰組

從 React 開始,讓你的ui material 起來 系列

首先致敬 React的神書 從 <Hooks 開始,讓你的網頁 React 起來>

寫得淺顯易懂又有鐵人賽內容 ,更難而可貴的是 CodeSandbox 讓你可以直接下載運作測試。

學習從複製開始,故我們要踩在pjchender 大神的肩膀上前進

起---
白板網頁一年 框架網頁一年的 菜機前端工程師 之前還是寫Vue
故使用React 框架時先使用material-ui 加速排版跟樣式是相當合理的
承---
承受了各大鐵人賽的教學 總要回饋社會
轉---
轉念來說 ,就是整理筆記與各位共勉之
合---
在這個磨合期,剛好配上鐵人賽,希望能好好完賽的結局

參賽天數 14 天 | 共 15 篇文章 | 1 人訂閱 訂閱系列文 RSS系列文
DAY 11

[Day 11] Select 下拉

Day10在許多登入畫面會選擇某些內容 像選擇參觀網站是否滿18歲等等選項 所以可以用下拉選單來顯示其中MenuItem value設定得值的 可用來改變use...

2021-09-25 ‧ 由 Vader 分享
DAY 12

[Day 12] 開關 Switch

Day11 開關通常用於兩個狀態的切換 以筆者常用個功能 會在nav中加入切換語系的開關 首先先在useState設置語言去監控 在開關的使用上再加上判斷去做處...

2021-09-26 ‧ 由 Vader 分享
DAY 13

[Day 13] 常用數據顯示 Table 表格-1(制式版)

傳統網頁曾經有用過Table 排版並顯示 當各式排版方式橫行的時代 Table 已經歸類於資料呈現的方式了 想當然爾,material-UI 也有自我樣式的Ta...

2021-09-27 ‧ 由 Vader 分享
DAY 14

[Day 14] 常用數據顯示 Table 表格-2(可調式)

material-UI 有制式的 Table之外 還有像傳統 Table一般 用TableContainer 包含TableHead 跟 TableBody 比...

2021-09-28 ‧ 由 Vader 分享
DAY 14

[Day 15] Dialog 彈跳視窗

在需要提示,或是小分頁顯示時 通常我們會選擇 Dialog 彈跳視窗 這邊的使用背景是在D14時,如果商品有任何問題,我們可以在點選問號時給予他一個彈窗 首先先...

2021-09-30 ‧ 由 Vader 分享