「全端挑戰」製作動態網站第一步從了解useState與它的用法開始

14th鐵人賽 react components usestate 打造價值數十萬的動態網站 scss

K.o

2022-09-20 10:47:56

11973 瀏覽

分享至

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

第五課：了解useState與完成在SearchBar與其介面上part1

前情提要，前兩天Day3~4我們完成了簡單的navbar與header，現在我們除了排版要開始來做一些使用者功能，所以製作SearchBar我們要先做UI並加上功能，但可以先來破題了解什麼是useState。
如想先看部分完成樣子
首頁UI完成連接，進度為目前（Day5~8左右）

useState hook與React Hook

useState顧名思義，就是在操作與state狀態有關的函數，hook的開發目的是官方為了解決class舊版的函數寫法問題，才創造了hook，hook的名詞解釋也很有意思，Hook 中文名子是勾子，React 使用了hook來表示一個會勾東西的動作的函數，本作者將它解釋為可以在瀏覽器都有一個localstage的感覺，在component裡面有都會有一個暫存器或是說叫做一個state狀態，可以把網頁上的操作勾到暫存器裡面，也可以把暫存器的data勾出來到網頁更新資訊re-render，所以useState就像你在component裡設立一個小型的資料庫裡面可以放各種你想放的資訊、如開關的按鈕的true or false，到你想紀錄的使用者操作資料。

這個操作就對動態網站非常重要，到後面會有更多的fetchData利用redux或是contextApi其實都是這種勾來勾去的放大版，所以練好了useState就可以用這樣的概念，邁進更大的data轉換擴大你的動態網站！
下列是介紹useState常見寫法，useState是react lib所以使用前也是要記得import且這邊要注意是上面圖有寫到useState是寫在component裡面的意思是也就是rafce召喚出來以後，在const component名=()=>寫在arrow function與return之間那邊，來代表是放在這個component的暫存器

import React, { useState } from 'react'//記得導入
const index = () => {
const [item, setItem] = useState("");//只能寫大括號{}裡面且在return上面
return (
    <div>index</div>
  )
}
export default index

下面三個是範例

const [destination, setDestination] = useState("");
const [openConditions, setOpenConditions] = useState(false);
const [openCalendar, setOpenCalendar] = useState(false);

你會發現有命名的原則，const 會const 一個[]代表const一個array,
前面會擺state或是你可以記暫存器資料，後面是改變state的函數，所以加了一個set，且set後面第一個字母會大寫，命名方式就像駱駝命名的感覺（camel notation)，除了set是固定要加，其他都是可以自由命名的，這邊也要小心=useState()是固定用法，代表"使用State"，useState()，小括號裡面裝的是起始值，你可以寫null，數字，boolean都可以，暫存器必須都先給它，你想要一開始宣告它的值，像是上面用到的false就是Boolean type可以用click這個動作來切換裝態從false到true這樣，就可以有下面的點擊跳出視窗反應這樣等等的，就是如果狀態是true 顯示這個區塊，如果沒有就消失，就像跳出視窗一樣，這邊也就會用到react的if else寫法，之後會講的 ? : 一個問號跟冒號所組成的超隨便寫法來代表if跟else

useState的抓取state與上傳更新state

講完比較好背的useState固定用法，要來講的抓取state與上傳更新state
一般來說來說抓取state非常簡單你只要在下方div 中引入{data} 就可以
如下圖

更改state與上傳state必須要用useState()函數的方式，比如說更改Boolean值，從true變成false，false變成true，或是直接在裡面輸入想要得值，如接input用戶輸入進去得地址等等的，相對會複雜很多，之後也會重點實作這部分
比如說

onClick={() => setOpenCalendar(!openCalendar)}

(!openCalendar)!表示使變數資料相反從true變成false，false變成true得概念
這邊直接舉會實作的useState搭配calendar內容

這邊就大略介紹完useState了，接下來所以接續前兩天結果，我們要套用在實作內，所以首先先來完成UI設計

訂房網Header SearchBar製作

來完成SearchBar UI設計並在之後使他有功能

並在headerSearchBar裡面打上打上三個SearchBarItem
並在個別中放入icon與文字，然後可以先都打上自己想要命名的classname
這邊記得每在新的component裡用一次FontAwesomeIcon都要import，{faBed}也是

header.jsx的div.headerSearchBar檔

<div className="headerSearchBar">
    <div className="SearchBarItem">
        <FontAwesomeIcon icon={faBed} />
        <input type="Search" placeholder='你要去哪裡？' className='SearchInput' />
    </div>
    <div className="SearchBarItem">
        <FontAwesomeIcon icon={faCalendar} />
        <span className="SearchText" >08/16/2022-08/16/2022</span>
    </div>
    <div className="SearchBarItem">
        <FontAwesomeIcon icon={faPeopleGroup} />
        <span className="SearchText"  >3位成人 · 2 位小孩 · 1 間房</span>
    </div>
    <button className='SearchBarBtn' >搜尋</button>
</div>

這邊可以練習的有input type="search" 跟type="text"意思差不多下面有相關連結可以多練習input type
https://www.w3schools.com/html/html_form_input_types.asp
熟悉後這邊placeholder='你要去哪裡？' 就可以知道是預設字，還沒有輸入的預設字行

<input type="Search" placeholder='你要去哪裡？'/>`

搞定後這邊應該會長這樣
因還沒有scss排版所以會自然div往下排

所以稍微快速scss排版可以打巢狀裡面，或如覺得太亂或是巢狀太大可以打在外面，這邊是程式碼

header.scss的.headerSearchBar

.headerSearchBar {
    height: 55px;//設定SearchBar高度
    width: 95%;//原本設100%雖然此本專案沒有做到RWD網頁 但發現他超過太誇張修正為95%
    max-width: 1024px;//這邊一樣會希望他能不要太寬 所以最寬1024px
    display: flex;//打上df 讓這邊的都可以橫著排
    align-items: center;//df 後可以打aic讓他上下置中
    background-color: rgb(223, 130, 0); //這邊會特別下面圖層講解
    border: none;
    border-radius: 5px;//讓他有圓圓角
    svg {
        color: lightgray; //特別注意這邊fontawsome是svg檔
        font-size: 24px;    //所以可以在這邊控制全部icon屬性
        margin-left: 10px;
    }
    input {
        border: none;    //輸入欄這邊下面也會特別說
        outline: none;
        width: 100%;
        font-size: 16px;
        text-overflow: ellipsis; //特殊用法要搭配下面width 
    }//他字數超過框框時可以從“你要去哪裡？”變成“你要去...”這樣就不會超出版型
    .SearchBarItem:first-child {//第一個SearchBarItem
        width: calc(34% - 20px);//加上這個，可以讓”你要去哪裡“縮小的比別人快
    }
    .SearchBarItem {
        height: 50px;//這邊高度我設略小於上面headerSearchBar55px的50px
       width: 320px;//寬大約抓最大寬1024px的三等份之類的 略小情況下面表示
        margin-left: 2px;//Item直接的空隙
        display: flex;
        align-items: center;
        gap: 10px;//Item裡面中icon 與input 或是 text的間距
        color: black;
        background-color: #fff;//欄位顏色
        border-radius: 2px;
        cursor: pointer;//讓他們觸控時鼠標會變顏色
    }
    .SearchBarBtn {//最後就基本btn設計
        border: none;
        margin: 0px 2px 0px 2px;
        width: 60px;
        height: 50px;
        border-radius: 2px;
        background-color: var(--primary-color); 
        //有問題的記得去看app.scss裡面有沒有放:root{變色主色調那邊} 可以看前幾天的文章
        color: white;
        cursor: pointer;
    }
}

SearchBar,BarItem,input圖層上下關係與欄位

下圖來表示上述scss疊圖方式

接下來完成好SearchBar就可以將它移動到綠色與白色中間，為了跳脫原本container的框架，到container以外我們使用絕對定位座標
讓SearchBar位置position:absolute 但使用這個要配上
header打上position:relative
.header{}新增這條

position:relative;

才能將座標定位範圍還在header裡面
不然會是以整個頁面的定位為主，如果你打上座標top:0就會在網頁最上面
bottom:0會直接飛到網頁最下面，可以自己動手試試看

完整後會長下面這樣，我們明天可以開始進到主題功能性網站

結論

這邊明天跟今天的內容量其實是3:1，原本是想要平分，但因為想要堅持在了解與實作不同的主題，所以實作上內容必定比較多，所以之後的網站平均都會在這些量之間，都會有點爆量，並希望能整個講到後台部分，但因為原本自己排的版本是5版10篇，但後來是5版15篇，大部分是因為每篇內容都太多XD所以希望大家能有耐心看完