iT邦幫忙

鐵人檔案

2021 iThome 鐵人賽
回列表
Modern Web

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

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

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

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

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

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

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

前言 身為一個一年純前端 一開始還用一些000webhost 手動排版 一路上學React 第二份卻做了一份Vue的工作 到如今又回鍋 React ,需要快速進...

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

從 React 開始,讓你的網頁material-ui起來 [Day 2] 差異性安裝

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

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

從 React 開始,讓你的網頁material-ui起來 [Day 3] 排版布局Container

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

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

從 React 開始,讓你的網頁material-ui起來 [Day 4] 排版布局Grid

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

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

[Day 5] 排版布局Stack

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

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

[Day 6] Button

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

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

[Day 7] 網頁的開頭 App Bar

基本上 每個網頁的開頭 都有個App Bar 用來登入登出 提示 搜索等等 以IT幫而言 雖然沒有置於最頂 是在廣告之後的第二列 但也是相對重要的元件 從 Da...

2021-09-16 ‧ 由 Vader 分享