iT邦幫忙

鐵人檔案

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

React 面 項目 看起來很好吃吧--佐material 調料 系列

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


希望在這30天內完成side project 並且能有效的幫助跟我一樣迷惘的新手期網友

鐵人鍊成 | 共 30 篇文章 | 1 人訂閱 訂閱系列文 RSS系列文
DAY 1

React side project 佐material Day 1--準備備菜

前言又過了一年 去年有存檔,沒完賽的紀錄 希望今年可以順利跑完 回鍋 React 工作一年半了 沒有一個 side project 好像怪怪的 寫一個Reac...

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

React side project--餐盤 環境設定

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

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

React side project--選盤子 Container

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

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

React side project--餐盤擺盤 Grid

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

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

React side project--內容物方向 Stack

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

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

React side project--常吃的配菜 Button

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

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

React side project --App Bar

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

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

React side project --Card

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

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

React side project--TextField 文本框

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

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

React side project--Checkbox 核取方塊

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

2022-09-24 ‧ 由 Vader 分享