iT邦幫忙

鐵人檔案

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

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

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

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

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

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

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

從 React 開始,讓你的網頁material-ui起來 [Day 1] 受眾&&環境

------------- 告誡 某天公司電腦以為發文完成就關機 ,結果中斷鐵人賽-------------------------- 只好從Modern We...

2021-09-15 ‧ 由 Vader 分享
DAY 2

[Day 2] 差異性安裝

如需在地端環境操作 那需要去理解 什麼是node JS 什麼是NPM 需要參照本地安裝 使用 npm install @material-ui/core 安裝...

2021-09-16 ‧ 由 Vader 分享
DAY 3

[Day 3] 排版布局Container

網頁的開始 於布局排版 現在的年代 也需要RWD適合部分版型 所以我們就由布局開始吧 常常會看到一種網頁布局 左右留白,使得視覺可以集中在中間的重點區塊![如此...

2021-09-17 ‧ 由 Vader 分享
DAY 4

[Day 4] 排版布局Grid

布局排板大板型左右留邊 Container 接下來就是這個Container裏頭需要載運那些內容了 material-ui 及許多框架都很用英文直翻 在貨櫃裡塞...

2021-09-18 ‧ 由 Vader 分享
DAY 5

[Day 5] 排版布局Stack

Stack 組件用於沿垂直或水平軸的佈局 也是RWD應用的選項之一 複雜度跟所選參數都可以輕易使用 在material-ui 直翻大概是棧板的意思 排版布局面...

2021-09-19 ‧ 由 Vader 分享
DAY 6

[Day 6] Button

Day 5 進到了網站中最常見需要做功能性的環節Button &lt;Button variant=&quot;outlined&quot; color=&...

2021-09-20 ‧ 由 Vader 分享
DAY 7

[Day 7] 網頁的開頭 App Bar

基本上 每個網頁的開頭 都有個App Bar 用來登入登出 提示 搜索等等 以IT幫而言 雖然沒有置於最頂 是在廣告之後的第二列 滾動後廣告消失 App Bar...

2021-09-21 ‧ 由 Vader 分享
DAY 8

[Day 8] 常用的卡片 Card

Day 7卡片在商品介紹 或登入介面時常用到 通常格式為一張圖片 與他的title 配上說明也有可能是 登入 及輸入密碼跟帳號的input 使用架構如下 配合昨...

2021-09-22 ‧ 由 Vader 分享
DAY 9

[Day 9] 漂亮的輸入框 TextField 文本框

Day 8從Day8 fork一份開始昨天提到了登入 才發現 文本框沒有介紹到 可用於各項輸入 &lt;Input id...

2021-09-23 ‧ 由 Vader 分享
DAY 10

[Day 10] Checkbox 核取方塊

在許多的輸入中 很重要的核取方塊 用於登入的勾選 ,資料的選取等等 利用 checked 判定核取狀況 onChange 來動作 通常使用習慣是用 usest...

2021-09-24 ‧ 由 Vader 分享