iT邦幫忙

2021 iThome 鐵人賽

DAY 26
1
Modern Web

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

[ Day 26 ] 實作一個 React.js 網站 2/5

https://ithelp.ithome.com.tw/upload/images/20211009/201341536aGCxiMys7.png
延續昨天的內容,我們 React.js 專案的基本設定都已經完成了,今天就要來實作 Navbar 和樣式設定啦!
那就馬上開始吧~


新增頁面連結和 Navigation 元件

  • src 檔案中新增 components 資料夾,並在該資料夾內再新增一個 layout 的資料夾來存放此專案中所有會使用到跟版面相關的元件。最後在 layout 中新增該 Navigation 元件 MainNavigation.js
    https://ithelp.ithome.com.tw/upload/images/20211011/201341535gUHy5NWFY.png
  • MainNavigation.js 中開始設定 Function Component 並設定 JSX 結構, 設定完後再引入 react-router-dom 中的 <Link>
    https://ithelp.ithome.com.tw/upload/images/20211011/20134153qkIthwKje7.png
  • App.js 檔案中新增剛剛所建立的 MainNavigation Component 至畫面中,並將該元件放置於 JSX 中 Route 設定的前面。
    https://ithelp.ithome.com.tw/upload/images/20211011/20134153cW3RQvi7u5.png

目前的畫面和 Router 的設定會根據所點擊的 Navigation 內容而更改路徑,頁面呈現如下:
https://ithelp.ithome.com.tw/upload/images/20211011/20134153PlwHMshcPW.png


使用 CSS Modules 來設定 Navigation 的樣式

  • 新增 MainNavigation.module.css 檔案至 layout 資料夾中,並將範例中的預設樣式加入該檔案。
    https://ithelp.ithome.com.tw/upload/images/20211011/20134153UFqUwM7s75.png

    https://ithelp.ithome.com.tw/upload/images/20211011/201341538SbBgd7DpL.png

  • 將剛才建立的 CSS Modules 加入到 MainNavigation.js 檔案中並引入該 Modules 中的 classes ,引入後將所需要的樣式設定到指定標籤中的 className 屬性中。
    https://ithelp.ithome.com.tw/upload/images/20211011/20134153NQgELgw6ka.png

設定好 Navigation 的樣式後,目前我們可以得到這樣的一個簡易的 Navigation :
https://ithelp.ithome.com.tw/upload/images/20211011/20134153t7Z0ANCC3H.png


顯示所有 Meetups 資料

  • 宣告一個 DUMMY_DATA 的陣列並賦予它自定義的 Meetups 物件資料。
    https://ithelp.ithome.com.tw/upload/images/20211011/20134153eTCT0eO1Qv.png
  • 在 JSX 中使用陣列的 map() 方法來處理剛剛建立的 DUMMY_DATA ,並返回所有加上 id 屬性的 title 資料。
    https://ithelp.ithome.com.tw/upload/images/20211011/201341538vYajwbEyU.png

看一下目前的畫面就可以發現我們成功將 DUMMY_DATA 陣列中的資料渲染出來了:
https://ithelp.ithome.com.tw/upload/images/20211011/20134153NuGFWzvey1.png


今天的 React.js 實作應用到了 [ Day 05 ] JSX 語法[ Day 21 ] 路由管理 - React Router 2/2 中的 <Link> 以及 [ Day 24 ] React 中的樣式設定 中的 CSS Modules 樣式設定方法,如果有不熟悉的地方一樣可以透過傳送門回去再看一次!
備註:一樣附上今天實作部分的 GitHub Repository 連結

明天會為大家示範更多元件的應用還有 Props 的使用情境,有任何問題一樣都非常歡迎提出和指教!
那我們下篇見ʘ‿ʘ


上一篇
[ Day 25 ] 實作一個 React.js 網站 1/5
下一篇
[ Day 27 ] 實作一個 React.js 網站 3/5
系列文
React.js 30 天學習全記錄30

尚未有邦友留言

立即登入留言