鐵人賽 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所以希望大家能有耐心看完

總結

以上是生活随笔為你收集整理的「全端挑战」製作动态网站第一步从了解useState与它的用法开始的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。