初探 React - 用計數器來當範例

將一般 HTML 改成 JSX 。並寫成 React 組件。

function Counter() {
  return (
  <div className="container">
      <div className="chevron chevron-up"}>
    </div>
      <div className="number" >
        256
      </div>
    <div className="chevron chevron-down">
      </div>
    </div>
  )
}

這是來自PJ大大這邊的範例。
好像蠻簡單的，就是用一個 function 把整個 HTML 包起來，然後回傳回去。

現在加上一點簡單的事件監聽。

function Counter() {
  const [count, setCount] = useState(256)
  return (
  <div className="container">
      <div className="chevron chevron-up" onClick={ () => {
          setCount(count + 1)
          }}>
    </div>
      <div className="number" >
        {count}
      </div>
    <div className="chevron chevron-down" onClick={ () => {
          setCount(count - 1)
          }}>
      </div>
    </div>
  )
}

onClick 是一個事件監聽器，裡面我們要放觸發事件時要執行的方法。
再來看 const [count, setCount] = useState(256) 和 setCount(count + 1)。
React 會針對變化的部份重新渲染。我們用 useState 告訴 React 要改變的資料和方法。
useState，他會回傳一個陣列。陣列第一個元素是要監聽的資料。第二個元素則是一個 function ，傳入你要改變資料的方法。然後 useState(裡面放 count 的初始值) 。
另外，這裡宣告一律用 const。我的理解是，我們只希望 count 是被 setCount 改變。雖然用 let 也可以跑。但這樣不正確。
成果：
一個計數器