鐵人賽 Day3 自己做一個價值幾十萬的動態網站

第三課：了解Scss與React Component與首頁概念圖與UI實作 part1

Css與Scss差在哪裡

要暸解這兩者得差別就也要先了解Sass，Scss與Sass屬於原生家族，而如要使用Scss下載的模組也會下載node-sass，而不是直接下載Scss的原因是因為Scss是取之於Sass模組的其中一個套件，下列會講如何下載scss套件

首先使用過Css 搭配Html來開發網站的形式一般來說如下圖
一個class 所命名的區塊會對應到相印的Css而了解Css語法就能客製化出任何畫面與介面

但Css很常會遇到的問題是大量需要編寫的區域都要手動對應到Css進行編排
而有些時候重複性高的如Container或是wrapper都需要用併排的方式來開發，所以巢狀結構的優勢就將此點解決，就如同Html的div 可以一層包著一層，將可以方便管理重複的區域，解決css有重複命名判斷的缺點，並這邊如果有學到，如tailwind就會知道tailwind也直接不分css把需要的styling都直接打在classname裡面，直接解決命名問題，但這個有好有壞，壞處是可能可讀性會很低並更容易搞混難以維護，密名classname有時候是為了可讀性與大家協同合作上有一點依據去分工，不然就像你把所有的表格label拿掉，叫大家直接看裡面寫來啥來判斷，有時候真的會完全無法理解。

-Scss :如同把css也變成nest巢結構 叫做Superpower Css可以同步疏離上下層脈絡
-Sass :Scss的簡化版卻因其太簡略，使用排縮跟斷行來判斷其依據會變得反而難以管理普遍使用者還是偏於Scss，但其餘都跟Scss一樣

而scss跟css比起來 又更為優秀與使用方便

如何下載scss套件

回歸實作並等下了解到React component後就會創立第一個Scss資料夾
在這之前先來安裝scss套件，上面有說到 Scss是取之於Sass模組的其中一個套件 所以安裝要安裝下列

npm i node-sass

如已經用習慣css的人或是想要轉換成scss練習的人
只要將其命名的.css改為.scss即可，上述如有失敗可以檢查package.json中的dependencies有沒有node-sass(不是scss)

了解React component配置與UI分析

分析BookingChallenge介面與相關的component配置
總共目前有五個page要完成 最重要的其中三頁分別為
首頁、搜尋後畫面出現的飯店列表、確認搜尋後的飯店細節畫面
分別為Home page, Hotelslist page, Hotel page

並今天會著重在首頁，並會創建出NavBar與Header為目標

首先了解NavBar的名稱與Navigation bar 與其UI配置

NavBar:navigation bar的簡寫，一開始本作者在了解navigation bar時常常因為中文為航海而難以背誦與誤會，但依照筆記與時間，才將這個網頁常見的導覽行為navigation bar為Navbar記起來而不搞混。

並開始帶入Css區塊概念 來完成我們想要這樣的UI
下方才會真的開始實作 這邊只是再更進一步劃分清楚其區域

再來了解首頁的Header的名稱與其UI配置

再來了解Header 首頁中包括搜尋欄，可以搜尋去哪裡地區、時間與設定條件等等，與其中第一眼進來的標題欄，而這次實作重點為功能最為複雜的SearchBar

與其UI配置

創建第一個出一個React component 與實作scss排版原理

首先在React裡面component的形式如下面

const component = () => {
    return (
        <div className='header'>
            我是component
        </div>
    )
}
export default component

這邊利用的ES6的新語法也是現在普遍在使用的Arrow function
ES6你就可以想像成是newer version of JavaScript，相對於之前的
一般認知functions

(function (a) {
  return a + 100;
});

上面為原本function的形式，arrow function將此(變數){return}都保留加上修改就變成上面component那樣，這邊建議Js因為是動態語言會有些不嚴謹在寫function時的寫法可以盡量多一些原則性，為協同合作打好基礎。

使用Arrow function多了更一目瞭然的指向性，就像高中學過的函數一樣，要讓函數跑你必須給他個變數（或是變因）他才能導出結果給你
const component = (變因variable) => return (結果Value)
你也可以想成是給你一個X跑完funciton後，還你一個Y

而export default component這邊是將React component導出的意思，才能在比如說用在你想用在的其他Page上甚至其他component上import導入進去，就會是類似 import component from"./src/component/component.jsx"
所以首先進入正題，先創建相關folder，依照我們剛剛排版所致，我們可以在src folder裡面再創建兩個folder分別為pages,components
這兩個的分別可以舉Navbar來說，Navbar就是基本上所有Page都會有的，
包括Home Page,HotelsList Page..裡面都會有的共同component
所以就是圖層概念Page =>component

雖然有上下層關係，但注意這邊通常不會把components folder創建在pages裡面，創建好後在裡面在創建相關的NavBar 與 Header file與scss file

並使用這邊常用的快捷鍵rafce 直接打不用打開terminal

並去 左方vscode sidebar 的最下面按鈕搜尋react 或是打全名ES7+ React/Redux/React-Native snip 完成下載 就可以使用快捷鍵rafce

並恭喜完成到這邊已經成功的做出了一個簡單的component架構，完成後可以按儲存，或是確認你有儲存鍵可以按Vscode快捷鍵 S+command(mac鍵盤)。

附註：這邊如果是抓取，day2下載下來的initial project，必須先注意，如果你要開啟網頁，記得要先npm i 下載node_module，然後npm start才有用（詳細都有在day2)或是確認你有儲存可以按
S+command(mac鍵盤)

結論

這邊因為內容太長，所以拆成上下部分，明天會繼續創建下面 Component，並把先架設好所有環境，並讓root component App.js 導流到home 再到navbar，並直接完成navbar的coding實作，今天就比較像是UI的分析，讓我們有個概念會是到時候這樣排版，Day3與Day4到時候可以一起觀看，day3看scss的排版邏輯，對應day4上傳的coding碼，內文也會有註解解說，並上述排版完全是可以自己想怎麼排就怎麼排，並RWD的教學解說可能內容因就太長就先不重點講解，但demo網站有大家可以去看看，大家熟悉後或是其他老手，其實就可以跟我一樣把他在做RWD，然後加一些小互動慢慢練習與自己思考完成這份挑戰，一起加油！！！也感謝看到這邊的你！