# JS 型別與 JSX
補充資料：

[介紹JSX](https://zh-hant.legacy.reactjs.org/docs/introducing-jsx.html)
[Day 08 - JSX 的重要特性與規則以及其背後緣由](https://ithelp.ithome.com.tw/m/articles/10296741)

---

### JSX 本身也是 Expression
在編譯之後，JSX expressions 就變成了一般的 JavaScript function 呼叫並回傳 JavaScript 物件。 這表示你也可以在 if 跟 for 迴圈中使用 JSX，將其指定到一個變數，使用 JSX 作為參數並由 function 中回傳。

function getGreeting(user) {
  if (user) {
    return <h1>Hello, {formatName(user)}!</h1>;
  }
  return <h1>Hello, Stranger.</h1>;
}

### 在 JSX 中指定屬性
使用 **引號** 將字串設定為屬性：

const element = <a href="https://www.reactjs.org"> link </a>;

也可以在屬性中使用 **大括號** 來嵌入一個 JavaScript expression：

const element = <img src={user.avatarUrl}></img>;

### JSX 表示物件
Babel 將 JSX 編譯為呼叫 **React.createElement()** 的程式。

const element = (
  <h1 className="greeting">
    Hello, World!
  </h1>
);

const element = React.createElement(
  'h1',
  {className: 'greeting'}, //屬性
  'Hello, World!' 
);

### Rendering JSX

import React from 'react';
import { createRoot } from 'react-dom/client';

// Copy code here:
const container = document.getElementById('app');
const root = createRoot(container);
root.render(<h1>Hello world</h1>);

### 嚴格標籤閉合
在 JSX 中則所有元素都一定要寫閉標籤，即使 children 是空的，否則 JSX transformer 會轉譯失敗

<img src="./image.jpg" class="foo-image"></img>
<input type="text" name="email"></input>

// Fine in JSX:
<br />
 
// NOT FINE AT ALL in JSX:
<br>

children 為空的元素可以用自我閉合標籤作為簡寫，與上面的寫法等價

<img src="./image.jpg" class="foo-image" />
<input type="text" name="email" />

### .map in JSX
簡單：

const strings = ['Home', 'Shop', 'About Me'];
 
const listItems = strings.map(string => <li>{string}</li>);
 
<ul>{listItems}</ul>

進階：

import React from 'react';
import { createRoot } from 'react-dom/client';

const container = document.getElementById('app');
const root = createRoot(container);
const people = ['Rowe', 'Prevost', 'Gare'];

const peopleList = people.map((person,i) =>
  // expression goes here:
  <li  key={'person_' + i}>{person}</li>
);

// root.render goes here:
root.render(<ul>{peopleList}</ul>);