# JSX 基本語法

###### tags: `程式導師` `React` `JSX`

## 01 語法規則

- 必須用 `(` 與 `)` 包 html
- html 需有最外層的 div 包住

**01-1 ReactDOM.render()**

const hello = <h1>Hello world</h1>;
ReactDOM.render(hello, document.getElementById('app'));
// 參數1:物件；參數2:要取代的目標物 

若對相同目標物進行兩次 `ReactDOM.render()`，只有第一個生效

**01-2 Virtual DOM**

- 主要精神：React 只動需要改變的部分即可。
- 一般 DOM 的問題：改變其中一個 node 時，因樹狀分支結構的原因，會動到所有相關支線，導致運作效率慢。
- React 的 Virtual DOM 如何解決：利用快照原理（virtual DOM），當有 node 變動時，會被記錄在可快速更迭的 Vitual DOM 中，React 透過比較 Virtual DOM 與原本 DOM 的差異（diffing），不需經過層層 parent node，就能直接知道改變的 node 位置。

👉[React: The Virtual DOM by Codecademy](https://www.codecademy.com/articles/react-virtual-dom)

## 02 進階 JSX 語法

**02-1 JSX 中的 HTML 語法**

因為 JSX 是用 JS 解析 HTML 語法，所以 class name 跟 HTML 寫法不同，也要寫成駝峰式命名。

| HTML | JSX |
| ------------------- | ----------------------- |
| `<div class="big">` | `<div className="big">` |
| `<br />` or `br` | `<br />` |

**02-2 在 React html 中跑 JS 語法**

function myFunc() {
  alert('Make myFunc the pFunc... omg that was horrible i am so sorry');
}
 
<img onClick={myFunc} />

- `onClick`
- `onMouseOver`

**02-3 JSX 裡的條件式**

**if-else**
條件式宣告要在 JSX 語法外，獨立撰寫完成，才能被調用。

import React from 'react';
import ReactDOM from 'react-dom';

function coinToss() {
  // This function will randomly return either 'heads' or 'tails'.
  return Math.random() < 0.5 ? 'heads' : 'tails';
}

const pics = {
  kitty: 'https://content.codecademy.com/courses/React/react_photo-kitty.jpg',
  doggy: 'https://content.codecademy.com/courses/React/react_photo-puppy.jpeg'
};
let img;

// if/else statement begins here:
if (coinToss() === 'heads') {
  img = <img src={pics.kitty} />
} else {
  img = <img src={pics.doggy} />
};

ReactDOM.render(img, document.getElementById('app'));

**&&**

&& 左方如果是 true，右方就會執行。

// Example 1
const tasty = (
  <ul>
    <li>Applesauce</li>
    { !baby && <li>Pizza</li> }
    { age > 15 && <li>Brussels Sprouts</li> }
    { age > 20 && <li>Oysters</li> }
    { age > 25 && <li>Grappa</li> }
  </ul>
);

// Example 2
const favoriteFoods = (
  <div>
    <h1>My Favorite Foods</h1>
    <ul>
      <li>Sushi Burrito</li>
      <li>Rhubarb Pie</li>
      { !judgmental && <li>Nacho Cheez Straight Out The Jar</li>}
      <li>Broiled Grapefruit</li>
    </ul>
  </div>
);

**03-3 Ternary Operator**

// Example 1
const headline = (
  <h1>
    { age >= drinkingAge ? 'Buy Drink' : 'Do Teen Stuff' }
  </h1>
);

// Example 2
import React from 'react';
import ReactDOM from 'react-dom';

function coinToss () {
  // Randomly return either 'heads' or 'tails'.
  return Math.random() < 0.5 ? 'heads' : 'tails';
}

const pics = {
  kitty: 'https://content.codecademy.com/courses/React/react_photo-kitty.jpg',
  doggy: 'https://content.codecademy.com/courses/React/react_photo-puppy.jpeg'
};

const img = <img src={pics[coinToss() === 'heads' ? 'kitty' : 'doggy']} />;

ReactDOM.render(
	img, 
	document.getElementById('app')
);

**03-4 Map**

import React from 'react';
import ReactDOM from 'react-dom';

const people = ['Rowe', 'Prevost', 'Gare'];

const peopleLis = people.map(person =>
  // expression goes here:
  <li>{person}</li>
);

// ReactDOM.render goes here:
ReactDOM.render(<ul>{peopleLis}</ul>, document.getElementById('app'));

**03-5 Key**

React 特有種，類似 ID，在以下兩種情況時會需要使用
1. 需紀錄項目間的關係，例如 to-do list 的前後順序
2. 項目有特定順序

**03-6 React.createElement() 轉換 JSX**

// JSX 語法
const greatestDivEver = <div>i am div</div>;

// 等同於
const greatestDivEver = React.createElement(
  "div",
  null,
  "i am div"
);

## 多行 JSX

const myList = (
  <ul>
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
  </ul>
);

參考資料：[Codecademy JSX cheatsheet](https://www.codecademy.com/learn/react-101/modules/react-101-jsx-u/cheatsheet)