第八課:完成homePage主體feature、Announcement其他首頁components,並創造連接新分頁HotelsListPage
再來進到feature設計重點二的PopularHotels,也就是一個網站通常最喜歡放的熱門產品排行
首先一樣先再subcomponents內創立PopularHotels,並導入PopularHotels進去如下
<div className="listTitle">
<h2>人氣民宿、公寓類型住宿</h2>
</div>
<div className="listItems">
<PopularHotels dataArray={PopularHotelsData}/>
</div>//一樣採取跟categories的方式,在這邊就直接導入資料了,當然也可以去PopularHotels在導入,
//因為這次沒有重複兩個PopularHotelsComponent,在這邊選擇早傳入為了一致性
製作概念與categories一樣只是設計感會加上分數評論等等的小細節,這些也將會以dataArray的方式引入
PopularHotels component div github連結
PopularHotels component scss github連結
{item.price.toLocaleString()}這邊有特別用到這個,可以讓數字有","千分位分別,讓使用者好閱讀
{item.rate >= 9.5 ? "好極了" : "傑出"}與簡單的評分迴圈,這邊之後測資變多,如果想再把分數評論從"好極了" : "傑出"新增到兩種以上,之後會講到新的switch case方式取代掉傳統的if elseif,但大概再十幾天講contextapi才會帶到。
最後終於完成了feature主體 最後就剩下全球註冊廣告banner與footer
其實footer這邊已經在Day5~7上傳時,已經悄悄放上去了
footer.jsx component github連結
footer.scss component github連結
這邊附上連結,如果好奇的的話
這邊可以自己設計,將重點放在下面全球註冊banner
?:
(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!
終於進到新的頁面,進行到跳轉分頁的第一步就是要了解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,到時候就比較沒有這麼多的排版圖,而是有關邏輯上應用的關係圖,就會比較資工,也可以想像是為前後端都做了解看自己比較喜歡啥,或是都學多多益善!如果之後要在出類似的教學,我自己就會想搭配自動化的發文設置或是等等的,等於是開始請員工幫忙營運上線的概念,或是朝金流那塊前進!