前言

今天真的要進入 useState 了!!!!!
進入今天文章前請看一下昨日文章，
裡面有寫到關於 Navbar 的架構介紹，
今天就不會再講到這部份~

本日正文

覺得程式碼可能還是要再貼一遍，
不然直接看今天這篇的人可能會不知道我下面在說什麼XD

import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
import React, { useState } from "react";
import { Collapse, Navbar, NavbarToggler, NavbarBrand, Nav, NavItem, NavLink } from 'reactstrap';

export default function App() {
  const [collapsed, setCollapsed] = useState(true);
  const toggleNavbar = () => setCollapsed(!collapsed);
  
  return (
    <div className="px-2">
      <Navbar light expand="md">
        <NavbarBrand href="/" className="mr-auto">reactstrap</NavbarBrand>
        <NavbarToggler onClick={toggleNavbar} className="mr-2" />
        <Collapse isOpen={!collapsed} navbar>
          <Nav navbar>
            <NavItem>
              <NavLink href="https://reactstrap.github.io/components/alerts/">關於我</NavLink>
            </NavItem>
            <NavItem>
              <NavLink href="https://reactstrap.github.io/components/navbar/">與我聯繫</NavLink>
            </NavItem>
          </Nav>
        </Collapse>
      </Navbar>
    </div>
  );
}

接下來要更進一步說明了，

<Collapse isOpen={!collapsed}>

先從 <Collapse> 的 isOpen 說明，
isOpen 意思是何時要打開 <Collapse> 裡面的內容，
而它的設定是 {!collapsed}，
collapsed 又是什麼，讓我們往上看，
會發現有 const [collapsed, setCollapsed] = useState(true); 這樣的設定，
我記得我一開始看到這個完全問號XDDDDDDDDDD
就算看了官方文件還是霧煞煞QAQ

這邊我用我理解的方式簡單說明一下，
(PS. 不一定貼近真正 React 的意思，但覺得這樣的理解方式可能比較好入門)

const [collapsed, setCollapsed] = useState(true);

是指宣告一個變數 collapsed，setCollapsed 是改變 collapsed 值的方式。

而為什麼要這樣，
const 的宣告方式是不能改變變數的值對吧？
假設我現在寫這兩行 code：

const test = 1;
test = 2;

就會出現以下 error：

TypeError: Assignment to constant variable

然後再拿這個 error 去查詢可以找到對於這個錯誤的說明：

The const declaration creates a read-only reference to a value. It does not mean the value it holds is immutable, just that the variable identifier cannot be reassigned.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Invalid_const_assignment

由以上得知用 const 宣告的變數是 read-only，且不可被改變的(cannot be reassigned)，
但你還是想改變它的時候該怎麼辦？
在 React 提供了 useState 的方式，
讓你還是可以去改變用 const 宣告變數的值。
在這裡可以把 setXXX 看成是一個 useState 的 function
setXXX 的 XXX 是可以自訂的，但為了維護跟程式易讀性，
通常 XXX 會放變數的名稱(搭配第一字大寫)，
因此 const [collapsed, setCollapsed]
的意思是有一個用 const 宣告的變數 collapsed，
改變 collapsed 值的 function 是 setCollapsed，
而 setCollapsed 做的事就是用 useState 去改變值。

const [collapsed, setCollapsed] = useState(true);
那這整句話又是什麼意思？
當一個變數宣告了總是要給它初始值吧，
所以這邊意思是 collapsed 初始值被宣告為 true。

我覺得拿 JavaScript 的寫法來翻譯有點像是這樣：
(PS. 以下程式是不正確的，只是想要翻譯成剛開始接觸 React 的人比較看得懂的樣子)

const collapsed;
setCollapsed(true);

funtion setCollapsed (value) {
	collapsed = useState(value);
}

所以如果之後我要改變 collapsed 的值，
我只能透過 setCollapsed，
例如 setCollapsed(false)，
collapsed 的值就會被改為 false 這樣。

有這樣的基礎後，我們就可以再往上看這句了，

<NavbarToggler onClick={toggleNavbar} className="mr-2" />

onClick 顧名思義就是指當 <NavbarToggler> 被點擊時要做什麼動作，
跟我們之前在 HTML 寫 onclick="myFunction()" 是相似的。

所以這邊的意思就是當 <NavbarToggler> 被點擊時要執行 toggleNavbar，
toggleNavbar 又是什麼？再往上看會看到這句：

const toggleNavbar = () => setCollapsed(!collapsed);

這個意思是 toggleNavbar 是一個 function，
要執行 setCollapsed，且要以 collapsed 的相反值去執行(!collapsed)。

所以當目前是折疊狀態 collapsed 為true，
<NavbarToggler> (menu icon) 被點擊時，就會變為 false，(將選單展開的狀態)
反之則又變為 true。

這邊我們回過頭看 toggle 的意思，
就是(輪流)切換的意思，
通常看到元件是 toggle，
代表它的狀態會在啟用、關閉中切換，
所以 toggleNavbar 會設置成 !collapsed 就不難理解了。

然後今天雖然都在翻譯程式(?
但還是附一下今日連結(其實跟昨天是同一個) → Day13.14 - Reactstrap (Navbar)

也許從 React 開始接觸的人看這邊會覺得很直覺，
但我是從 Reactstrap 反過來接觸到 React 的，
而且在這之前只有接觸 HTML/CSS, JavaScript 的寫法，
所以一開始我也只能自己多改程式測測看，
然後才慢慢了解它的用法。

希望我這樣的解釋方式可以讓從寫 HTML/CSS, JavaScript 跳到 React 的人比較看得懂orz
(如果有錯請多多見諒QQ)

一直到現在我也不敢說我真的會 React 了，
我算是用自己理解的方式在寫就是了XD

不過學語言好像就是如此，
要先從模仿開始，
無論是學外語或是程式語言都一樣，
在還不了解文法跟單字的時候，
就是先模仿，多試多學多講多用，
久了就會知道怎麼用了。

後記

今天終於來到第二週結束！
但明天開始的文章我又沒梗了orz
關關難過關關過，
希望我能完賽orz