元件

在React裡，產生元件相當容易。元件可以在同一個檔案裡或不同的檔案裡。我們可以利用function定義一個MyName的函數，然後就可以在Home()裡面，直接使用MyName元件。在這裡要注意的是，MyName元件是放在Home元件的return函數裡，細節請參考React基本語法及React元件。

function **MyName**(){
  return(
    <h2>我是吳濟聰</h2>
  )
}
export default function Home() {
  return (<div><h1>Hello</h1>**<MyName/>**</div>)
}

顯示Javascript變數

在javascript裡，要將變數內容顯示在畫面上必須先取得HTML元素，然後再去將變數內容放到HTML元素中，在react裡，只要利用{}就可以將變數內容或者是個計算式(expression)顯示在畫面上。

let name = "吳濟聰"
function MyName(){
  return(
    <h2>我是**{name}**</h2>
  )
}
export default function Home() {
  return (<div><h1>Hello, **{name}**</h1><MyName/></div>)
}

條件

React和Vue不一樣的是，React並沒有條件的語法，而是利用javascript的內建語法「? :」。例如，如果isLoggedIn為真(登入之後)，則回傳AdminPanel元件，若為假，則回傳LoginForm元件。

<div>
  {isLoggedIn ? (
    <AdminPanel />
  ) : (
    <LoginForm />
  )}
</div>

如果不需要else，可以利用「&&」

<div>
  {isLoggedIn && <AdminPanel />}
</div>

迴圈

React和Vue不一樣的是，React也沒有迴圈語法，而是利用javascript的內建陣列語法「map」。細節請參考React元件。

export default function ProductList() {
  let products = [
    { desc: "iPad", price: 20000 },
    { desc: "iPhone 8", price: 20000 },
    { desc: "iPhone X", price: 30000 }
  ];
  return (
    <div>
      <ul>
        {products.map((product) => <li key={product.**desc**}>{product.desc} / {product.price}</li>)}</ul>
    </div>
  );
}

事件處理

React的事件處理其實跟html的事件處理語法類似，在這裡我們利用onClick()來呼叫handleClick()。

<aside> 📢 React的事件處理語法跟html很像，不同的是，不是onclick，而是onClick，C要大寫。另外，被呼叫的方法要放在「{}」裡，不是「””」。還有，最重要的，函數名稱後面不能加「()」，加了「()」實質的意義是不一樣的。

</aside>

export default function MyButton() {
  function handleClick() {
    alert('You clicked me!');
  }

  return (
    <button onClick={handleClick}>
      Click me
    </button>
  );
}

畫面更新

在前面的範例裡，我們介紹了如何呈現變數，然而，如果利用按鈕去更動變數，會發現變數內容不會在畫面上更新。react提供了useState()來處理這件事，簡單的說，透過useState()去更動內容，useState()會去重新產生/渲染(render)畫面。因為是利用react提供的函數，所以，我們要利用import去取得useState()。細節請參考React基本語法。