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

第七課：homePage主體feature製作包括資訊廣告、飯店排行與熱門景點
先附上

Day5~7.version完成之github連結

訂房網Covid-19與折扣廣告Banner製作

中間廣告會跳過div與scss解說，但會附上UI設置原理圖，這邊可以自己練習看看排版 重點將放在下面的依住宿類型瀏覽,熱門景點,與台灣住宿推薦等看板

Announcement bannerUI設置原理圖

這邊因為scss設計與前面相同，可以順便複習，這邊特殊的地方也是利用了較多，區塊取間距

display: flex;
gap: 10px;
border-radius: 5px;

與圓角的搭配，使用者看起來比較舒服

Announcement component github連結

Announcement.jsx github連結
Announcement.scss github連結

訂房網feature製作 包含橘色部分

這邊會先完成上面的部分，最下面"人氣民宿.."區塊會放在明天製作

遇到設計區域較大且重複的地方，下方將利用ReactHook特性來實作並導入data測資

UI設計預覽圖與其命名原則

第一步先了解各個區域特性並將此塊先設立為feature(橘色區塊，此命名有網站特色與重要區域之意) 與categories(淺藍色區塊，此命名有依照不同類型與城市分類，故命名為分類)

feature與Categories Components

首先了解home component導入feature component並在feature中再導入第一個subcomponent Categories

所以雖然說上下層關係是home->feature->categories
但製作上導入會上categories->feature->home讓他成功導入到home頁面顯示
先製作好Categories並相關設置scss等都先預備好

feature component

feature.div 導入

<div className='feature'>
    <div className="container">
        <div className="listTitle">
            <h2>依住宿類型瀏覽</h2>
        </div>
        <div className="listItems">
            <Categories /> 
        </div>
    </div>
</div>

feature.scss

.feature {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center; //讓container置中 
    .container {
        width: 100%;//有給他設定寬度
        max-width: 1024px;//讓container沒有置中所以會讓
        //listTitl與listItems自然在container裡面靠右整齊排列
        .listTitle {
            padding: 15px 10px;
        }
        .listItems {
            padding: 0px 10px;
           
        }
    }
}

並到home.jsx導入feature

分析想要的輸入與輸出資料型態

因為上述情況所以統一命名type與city為name如下圖

這邊節省時間，amount直接加入單位，但也可以只amount:"873,205"不加單位只有數字這樣，這邊也可以: 873,205間飯店等敘述拆成，amount+間飯店，也就是amount+間+type（name），下面會敘述帶入的方式並以此類推，但測資之後都會換掉成真實後台資料，所以都可以試試看。

這邊一樣提供github data.js folder內容
裡面會一次包含CategoresType,CategoresCities...等等的
如果要手動建立測資，記得要export這樣component才能import

目前測資準備好了，就可以往下進入與暸解如何讓使用map資料自動排序

React+Map迴圈用法 取代for與while迴圈

官方js map連結想要了解更詳細的可以去下方觀看
一般來說array裡面可以裝integer數值、object物件等等而下方舉例就為我們實作的叫出物件小型版，

//示範const array = [{},{},{}];
const array=[
{ id:0, name:"飯店"},
{ id:1, name:"公寓"},
{ id:2, name:"小木屋"},];
//一般來說要把整個物件都列陣出來會使用for跟while迴圈 比如說
for(let i=0; i<array.length; i++){
    //叫出瀏覽器主機觀看
    console.log(array[i].name)
}
//或是while迴圈
let i = 0;
while(i<array.length){
    console.log(array[i].name);
    i++;
}
//應該會看到飯店 公寓 小木屋
//map的示範方式為
const map = array.map(item => console.log(item.name));
//效果也一樣

上述效果都一樣，但map展現出了它簡潔的優勢，因為map也可以設定條件子句，可以也一併學習他的第二個變數index(跟item一樣，都是自由命名，也可以寫成i,key...第二個變數不一定要寫成index，但他性質都還是會一樣代表index)

const map = array.map((item,index) => 
console.log(`index=${index}+物件名稱:${item.name}`)
);

有了這些概念後就可以把他帶到component利用item與index來幫資料用div列陣排開
首先回到Categories

Categories製作 "依住宿類型瀏覽"CategoriesType

Categories.div 把data.js的CategoriesType import進去Categories.jsx

{CategoriesType.map((item, index) =>
<div className="item" key={index}>
 <img src={item.img} alt="" />
 <div className="itemInfo">
   <div className="title">
     {item.name}
   </div>
   <div className="desc">
     {item.amount}
   </div>
 </div>
</div>)}

並簡單排版Categories.scss

.item {          
    img {
        border-radius: 2px;
        object-fit: cover;
        width: 200px;
        height: 150px;
    }
    .itemInfo {
        padding: 5px 0px;
        .title {
            font-weight: 800;
        }
        .desc {
            color: gray;
        }
    }
}

好了應該會像下面一樣，item自動往下排正常，所以要跳到上一層feature
幫他包裹外衣container讓它不要自然往下而是往左右擴展與可以滑動

.feature {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;//新增的 要上下置中一下
    overflow: hidden;//新增的 超出範圍的部分自動隱藏
    .container {
        width: 100%;
        max-width: 1024px;
        .listTitle {
            padding: 15px 10px;
        }
        .listItems {
            padding: 0px 10px;
            display: flex;//新增的 加上df item自然就會左右排
            overflow-x:scroll; //新增的 並將超出範圍的部分設定可以滑動
        }
    }
}

完成模樣應該會長這樣

接下來接著做"探索臺灣"的部分

Categories製作 "探索臺灣"CategoriesCities

一樣我們要利用Categories來導出"探索臺灣"CategoriesCities的資料，但這一次有兩個dataArray要共用一個Categories component並在feature裡面展現，這邊可以用長得像bianary tree的概念來講解，因為我們要稍微改變一下dataArray導入的位置

所以改變想法，有點像刷leecode或是hackerrank的binary tree search for common ancestor，不要強制
叫categories硬吞兩個資料列陣，叫出兩個categories一人吞一個就好了，只是要告訴他要吞哪一個，所以會用到react props，這個要告訴兩個categories得地點，就在他們共同的上一層也就是他們的common ancestor，feature這邊，如下圖

所以先處理feature Components 將dataArray引入

import { CategoriesCities, CategoriesType } from '../data'

<div className="listItems">
    <Categories dataArray={CategoriesType} />
</div>
<div className="listItems">
    <Categories dataArray={CategoriesCities}/>
</div>

並將listItems＊2，在div打上< dataArray={CategoriesCities}/>
並去CategoriesComponent接住這個props(就是CategoriesCities)

Categories div.就會長這樣 接住{dataArray} 然後幫他加上classname因為這邊沒加的會後面popularHotels也有item怕之後都css搞混做出區別，所以命名叫catogories裡面的item

const Categories = ({dataArray}) => {
  return (
    <div classname="catogories"> 
      {dataArray.map((item, index) => 
        <div className="item" key={index}>
          <img src={item.img} alt="" />
          <div className="itemInfo">
            <div className="title">
              {item.name}
            </div>
            <div className="desc">
              {item.amount}
            </div>
          </div>
        </div>)}
    </>
  )
}

並在幫categories.scss再補上去

.categories{
display: flex;
gap: 10px;//新增的 
    .item {          
        img {
            border-radius: 2px;
            object-fit: cover;
            width: 200px;
            height: 150px;
        }
        .itemInfo {
            padding: 5px 0px;
            .title {
                font-weight: 800;
            }
            .desc {
                color: gray;
            }
        }
    }
}

完成後我們要在中間塞
類似明信片設計的各個景點推薦

首先在subcomponent創建postCards.jsx與scss
並在feature內加上postCards component，同時補上剛剛categories
的categoriesCities要加上標題與描述

<div className="listItems">
   <Categories dataArray={CategoriesType} />
</div>
<div className="listItems">
   <PostCards/>
<!-- 創建好導入 -->
</div>
<div className="listTitle">
   <h3>探索臺灣</h3>
<!--  補上title -->
   <p>這些熱門目的地魅力無窮，等你來體驗！</p>
<!--     desc -->
</div>
<div className="listItems">
   <Categories dataArray={CategoriesCities}/>
</div>

PostCards製作

如同廣告banner將推薦的地點，放在這邊，就像明信片一樣所以取名為PostCards

PostCards UI分析圖

Array之Array.slice取代if

這邊示範本作者一開始的醜寫法，運用map與使用if條件子句來切分data，卻忘記了最簡單的data.slice且分完後在帶入map，並就像categories一樣，將重複的部分拉出來變成新的一塊，也就是拉出postCard再導入postCards，如下圖

更改後的寫法postCards

import React from 'react'
import { Attractions } from '../data'
import PostCard from './PostCard'
import "./postCards.scss"
const PostCards = () => {
    return (
        <div className='postcards'>
                <div className="line">
                    <PostCard dataArray={Attractions.slice(0,2)} />
                </div>
                <div className="line">
                <PostCard dataArray={Attractions.slice(2,5)} />
                </div>
        </div >
    )
}

PostCards.scss github連結 這邊就相對簡單 line裡面包含PostCard

PostCard component div，導入PostCards的{ dataArray }也就是切分過後的Attractions Array

const PostCard = ({ dataArray }) => {
  return (
    <>
      {dataArray.map((item, index) => {
        return (
          <div className="CardContainer" key={index}>
            <img className='imgBg' src={item.img} alt="" />
            <div className="itemInfo">
              <h1>{item.name}<img src={item.flag} alt="" /></h1>
              <p>{item.amount}</p>
            </div>
          </div>
        )})
      }
    </>
  )
}

PostCard component scss github連結

結論

這次抱持著全站內容最多的挑戰，我廢話可能太多了XD，中間scss的排版有時候不一定最好的，到後面day20幾天時，有時候也有針對UI做修改，或是當所有功能都ok後開始製作RWD之時，也開始整理重複的scss，所以這邊快速的排版，期許能以最簡單的概念來做到最多的事情！總之繼續加油！