「全端挑戰」熱門產品排行製作、了解react-router-dom、props與 ` ? : ` 的搭配

14th鐵人賽 react-router-dom props 打造價值數十萬的動態網站熱門產品排行

K.o

2022-09-23 10:57:19

7424 瀏覽

分享至

Day8 自己做一個價值幾十萬的動態網站

第八課：完成homePage主體feature、Announcement其他首頁components，並創造連接新分頁HotelsListPage

Day8.version完成之github連結

再來進到feature設計重點二的PopularHotels，也就是一個網站通常最喜歡放的熱門產品排行

完成feature主體

首先一樣先再subcomponents內創立PopularHotels，並導入PopularHotels進去如下

<div className="listTitle">
    <h2>人氣民宿、公寓類型住宿</h2>
</div>
<div className="listItems">
    <PopularHotels dataArray={PopularHotelsData}/>
</div>//一樣採取跟categories的方式，在這邊就直接導入資料了，當然也可以去PopularHotels在導入，
//因為這次沒有重複兩個PopularHotelsComponent，在這邊選擇早傳入為了一致性

PopularHotels製作

製作概念與categories一樣只是設計感會加上分數評論等等的小細節，這些也將會以dataArray的方式引入

PopularHotels UI分析圖

{item.price.toLocaleString()}這邊有特別用到這個，可以讓數字有","千分位分別，讓使用者好閱讀
{item.rate >= 9.5 ? "好極了" : "傑出"}與簡單的評分迴圈，這邊之後測資變多，如果想再把分數評論從"好極了" : "傑出"新增到兩種以上，之後會講到新的switch case方式取代掉傳統的if elseif，但大概再十幾天講contextapi才會帶到。
最後終於完成了feature主體最後就剩下全球註冊廣告banner與footer

收尾footer與全球註冊banner

其實footer這邊已經在Day5~7上傳時，已經悄悄放上去了

footer.jsx component github連結
 footer.scss component github連結
這邊附上連結，如果好奇的的話
這邊可以自己設計，將重點放在下面全球註冊banner

全球註冊banner Props與`?:`(if else)的搭配

全球註冊banner這邊一樣會想用props的方式搭配?:(if else前面有介紹到的語法)並都寫在announcement component就像上面導入dataArray一樣，告訴他announcement component要用的是全球註冊banner，只是這次是將announcement component分類似上下區塊，如果是全球註冊banner就用下半部而不是就上半部，

這邊完全可以分開來寫component但這邊練習props的用法與?:的熟悉
首先在announcement component中加上GlobalBanner.div

 <div className="GlobalBanner">
    <img src="https://cf.bstatic.com/static/img/genius-globe-with-badge_desktop@2x/1f5a273d871549f00bf6692f7ff612b5e8eda038.png" alt="" />
    <div className="BannerInfoDes">//InfoDes不跟上面打架不然會共用
        <h2>優惠立即享</h2>
        <span>登入您的 Booking.com 帳戶，尋找藍色的 Genius 圖標，輕鬆省一筆，鐵人挑戰後面會越來越難，加油！</span>
        <div className='Bannerbtn'>
        <button >登入</button> <button>註冊</button>
        </div>
    </div>
</div>

排版方式如同discountInfo一樣分左右半部，導入左半部圖片與右半部標題文字，Bannerbtn是為了讓登入與註冊btn到時候可以搭配display flex左右排，不然自然往下排，然後GlobalBanner.div的排版，下列為announcement.scss新增內容

.GlobalBanner {
    margin-top: 20px;
    display: flex;
    align-items: center;
    border-radius: 5px;
    padding: 5px 20px;
    height: 200px;
    border: 1px lightgrey solid;
    background-repeat: no-repeat;//背景圖導入方式
    background-position: right;//背景圖是那個世界地圖 讓他靠右
    background-image: url("https://cf.bstatic.com/static/img/genius-banner-world-bg/2b5cdbad7b92073bc396b8b59d0bb421b3a01cba.png");
    img {
        display: flex;//左邊
        width: 180px;
    }
    .BannerInfoDes {//右邊
        display: flex;
        flex-direction: column;
        gap: 20px; //讓span title btn有間距
        .Bannerbtn {
            display: flex;
            gap: 10px;//登入 註冊btn 有間距
            button {
                padding: 8px 15px;
                border-radius: 2px;
                color: rgb(53, 164, 127);
                border: 1px rgb(53, 164, 127) solid;
                background-color: white;
                cursor: pointer;
                &:hover {
                    background-color: rgba(53, 164, 127, 0.1);
                }
            }
            button:last-child {
                //做一下差別註冊不要有外匡 
                //last-child是指btn的最後一個物件概念 
                //這邊就兩個 登入與註冊 登入就firse-child註冊就last-child
                border: none;
            }
        }
    }
}

所以完成後應該長這樣

並我們要將Annoucement分開並放在上下概念

所以一樣跟featurea操作兩個categories component找尋common Ancestor，這次AnouncementComponents是共同操作在homePage

這邊就可以用homePage，導入type的Upper half(props)來判讀，在AnnouncementComponent裡面如下圖

這邊附上完整的component對應原始碼連接可以查看
Announcement.jsx component
Announcement.scss
這邊強調上述作法可讀性不好，歡迎大家自己修改成更好的版本！
恭喜你完成homePage!

hotelsListPage製作

終於進到新的頁面，進行到跳轉分頁的第一步就是要了解react-router-dom

react-router-dom使用方式

這邊我們是用本地主機開啟瀏覽器，之後網站上線就要用到雲端伺服器，而我們的目前homePage主頁為下列url，"/"代表預設主頁
http://localhost:3000/
而我們想增加分頁可以在"/"這邊後面寫上分頁如
http://localhost:3000/hotelsList
http://localhost:3000/hotel
http://localhost:3000/login 等等的
所以為了能讓這些不同的url能導到不同分頁或是是說我們設置在Page folder 中homePage component,hotelsListPage component..等等的目的地，使用react-router-dom就可以解決這個問題
首先先install react-router-dom lib 並import 進去在app.jsx
terminal指令

npm i react-router-dom

並import 進去在app.jsx

import {BrowserRouter,Routes,Route} from "react-router-dom";

BrowserRouter類似啟用react-router-dom lib的變數，設置在最外層，routes用來包裹不同路徑，最後Route來決定單一路經會導到哪一個component，運用route的語法path與element來叫出，如下

<BrowserRouter>
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/hotelsList" element={<HotelsList />} />
      <Route path="/hotels/:id" element={<Hotel />} />
    </Routes>
</BrowserRouter>

/hotels/:id這邊是為了之後跳轉到個別hotel資料時，要輸入的hotel資料id，:冒號通常就是為了帶出id這種參數params，後面api連結時會講說這邊！
這邊特別注意path不用寫http://localhost:3000/hotelsList 像這樣的原因是前面http://localhost:3000/ 是預設值url就不用填了
然後就可以輸入http://localhost:3000/hotelsList 來進行hotelsList的設計

結論

今天一樣主要先講解到概念，明天要來一次完成hotelsListPage UI設置、程式碼，並怕程式碼的部分越來越長，這邊會斟酌使用github連結直接對照的那種感覺，再搭配圖文也許會比較好閱讀，這邊目前UI設計進行到2/3左右，預計在Day11會進入到純node.js Api，到時候就比較沒有這麼多的排版圖，而是有關邏輯上應用的關係圖，就會比較資工，也可以想像是為前後端都做了解看自己比較喜歡啥，或是都學多多益善！如果之後要在出類似的教學，我自己就會想搭配自動化的發文設置或是等等的，等於是開始請員工幫忙營運上線的概念，或是朝金流那塊前進！