iT邦幫忙

2022 iThome 鐵人賽

DAY 8
1

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分析圖

PopularHotels component div github連結
PopularHotels component scss github連結


{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,到時候就比較沒有這麼多的排版圖,而是有關邏輯上應用的關係圖,就會比較資工,也可以想像是為前後端都做了解看自己比較喜歡啥,或是都學多多益善!如果之後要在出類似的教學,我自己就會想搭配自動化的發文設置或是等等的,等於是開始請員工幫忙營運上線的概念,或是朝金流那塊前進!


上一篇
「全端挑戰」React props、Array.map應用與feature資訊主體設置
下一篇
「全端挑戰」單向資料傳遞useLocation與useNavigate實作與介紹,完成homeListPage與其props應用
系列文
自己做一個價值幾十萬的動態網站,學會Mern開發、前台UI設計各式觀念與各式Lib、typescript你該學會的前端技術30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言