Event

這邊我們演示React中button的事件用法
APP.js修改如下(在JSX中輸入JS程式碼外圍要用{})

import "./App.css";

function App() { 
//按下button執行的function
  const ButtonHandler = () => {
    alert("React 練習");
  };
  return (
    <div className="App">
      <button onClick={ButtonHandler}>點擊</button> 
    </div>
  );
}

export default App;

State

狀態，每當State被改變，所有跟這個State有關的東西都會被即時更新，很適合代替原本變數去使用，這邊我們進行比較。

使用變數

以下利用list變數作為h1的內容，透過按鈕改變h1內容，可以發現，就算按了按鈕網頁也沒更新。
(在JSX中輸入JS程式碼外圍要用{})

import "./App.css";

function App() {
  let list = "第一章";
  const ButtonHandler = () => {
    list = "第二章";
  };
  return (
    <div className="App">
      <h1 className="one">{list}</h1>
      <button onClick={ButtonHandler}>更新</button>
    </div>
  );
}

export default App;

使用State

import React, { useState } from "react"; //取得useState
import "./App.css";

function App() {
  let [list, setList] = useState("第一章"); //useState宣告方式， list為State本身，setList為改變list的function
  const ButtonHandler = () => {
    setList("第二章"); //改變list的function
  };
  return (
    <div className="App">
      <h1 className="one">{list}</h1>
      <button onClick={ButtonHandler}>更新</button>
    </div>
  );
}

export default App;

可以發現網頁能夠順利更新了

【以上為我的學習心得，如有錯誤歡迎糾正】