iT邦幫忙

2021 iThome 鐵人賽

DAY 27
2
Modern Web

React.js 30 天學習全記錄系列 第 27

[ Day 27 ] 實作一個 React.js 網站 3/5

https://ithelp.ithome.com.tw/upload/images/20211011/20134153PgbXCyhtUP.png
上篇我們已經完成了網站中 Navigation 的樣式和路由設定,今天我們要來設定網站中的其他元件,接著今天就要來實作其他的元件還有元件之間的資料處理。
我們就馬上開始吧!


設定 Meetup 相關元件和樣式

  • components 的資料夾中新增一個 meetups 的資料夾來放所有跟 Meetup 相關的元件,並在該資料夾中內新增兩個檔案: MeetupItem.jsMeetupList.js
    https://ithelp.ithome.com.tw/upload/images/20211011/20134153zSIWsEEFOg.png

  • 設定 MeetupItem.js 為 Function Component 並在其中使用 props 來傳遞陣列的資料內容。
    https://ithelp.ithome.com.tw/upload/images/20211011/201341536M8lrgGpz5.png

  • 新增 MeetupItem.module.css 的檔案到 meetups 資料夾中,並增加預設好的範例樣式。
    https://ithelp.ithome.com.tw/upload/images/20211011/20134153M1ev6E04vL.png

    https://ithelp.ithome.com.tw/upload/images/20211011/20134153KEW8YoPffH.png

  • 將剛才設定好的 MeetupItem.module.css 這個 CSS Modules 引用到 MeetupItem.js 元件中,並在指定的標籤中透過 className 屬性來使用對應的物件。
    https://ithelp.ithome.com.tw/upload/images/20211011/20134153niRGaYOzV3.png

  • MeetupList.js 中重複上述的設定並將 MeetupItem.js 元件引入到檔案內,再透過 props 傳遞陣列資料至 JSX 標籤中後使用 map 方法中做應用。
    https://ithelp.ithome.com.tw/upload/images/20211011/20134153YlmIhNo530.png

  • AllMeetupsPage.js 的頁面將剛才設定好的 MeetupList.js 元件引入其中,並在該元件中傳入 props 的資料。
    https://ithelp.ithome.com.tw/upload/images/20211011/20134153D8kHvrooti.png

所以目前畫面中就會顯示出剛才個別設定在 MeetupList.js 中的 MeetupItem.js 元件,如下圖所示:
https://ithelp.ithome.com.tw/upload/images/20211011/20134153U9ChNBDYUO.png


建立 Card 元件和樣式

  • components 資料夾中新增 ui 資料夾,在該資料夾中新增兩個檔案: Card.jsCard.module.css , 另外在 Card.module.css 設定樣式。
    https://ithelp.ithome.com.tw/upload/images/20211012/20134153tOqxEHM2lA.png

    https://ithelp.ithome.com.tw/upload/images/20211012/20134153AfvSnYqeXG.png

  • 一樣在 Card.js 中設定 Function Component 並在返回的 JSX 使用 props.children 來包覆其他元件,另外再引用 Card.module.css 的樣式到其中。
    https://ithelp.ithome.com.tw/upload/images/20211012/20134153PZ4XRhGNna.png

  • Card.js 這個 UI 元件引入到 MeetupItem.js 當中的 JSX ,將每個 MeetupItem 的元件設定為卡片的樣式。
    https://ithelp.ithome.com.tw/upload/images/20211012/20134153fUjwRp1lBv.png

這邊我們可以看到原本在 MeetupList 元件中的 MeetupItem 現在都擁有了 Card 樣式(下方的陰影):
https://ithelp.ithome.com.tw/upload/images/20211012/20134153TZUOhelbth.png


新增整體版面樣式

  • layout 資料夾內新增 Layout.jsLayout.module.css 兩個檔案,並在 Layout.module.css 設定好樣式內容。
    https://ithelp.ithome.com.tw/upload/images/20211012/20134153pwmaWjqWgG.png

    https://ithelp.ithome.com.tw/upload/images/20211012/20134153HjHkridy2W.png

  • Layout.js 元件中,加入之前設定好的 MainNavigation.js 元件,並一樣透過 props.children 和我們所要呈現的畫面撰寫在此元件返回的 JSX 物件當中。
    https://ithelp.ithome.com.tw/upload/images/20211012/20134153nPQgUEhebL.png

  • 最後再將該 Layout.js 元件引入到 App.js 當中,讓該元件處理整個資料以及畫面的呈現。
    https://ithelp.ithome.com.tw/upload/images/20211012/20134153WdR6ma1bht.png

最後我們就會得到目前範例 React.js 網站中的整體樣式和中間 Meetups 的 Card 元件都設定完成了!如下面截圖所示:
https://ithelp.ithome.com.tw/upload/images/20211012/201341531ljHCscun3.png


這篇的實作除了有應用到 [ Day 08 ] 元件的資料傳遞 - Props 中的 children 功能之外還有其他在 JSX 中處理陣列的方法,一樣可以透過傳送門回去複習一下這些功能。
備註:依照慣例附上今天操作的 GitHub Repository 連結給大家參考~

那今天的進度就告一段落了~原本以為這樣的實作教學分配應該是剛剛好的,結果好像一次講太多了XD
沒關係!明天再繼續跟大家介紹如何在範例中加入和使用表單?

有任何問題一樣都非常歡迎提出和指教喔!
那我們下篇見ʘ‿ʘ


上一篇
[ Day 26 ] 實作一個 React.js 網站 2/5
下一篇
[ Day 28 ] 實作一個 React.js 網站 4/5
系列文
React.js 30 天學習全記錄30

1 則留言

1
juck30808
iT邦新手 2 級 ‧ 2021-10-12 18:34:00

恭喜即將完賽!!!

哇!太感謝你ㄌ
剩下最後三天一起努力吧~

我要留言

立即登入留言