# JSX的使用方法
###### tags: `六角筆記王`

[TOC]

## 透過 Babel 轉譯

透過 [Babel](https://babeljs.io/repl#?browsers=defaults%2C%20not%20ie%2011%2C%20not%20ie_mob%2011&build=&builtIns=false&corejs=3.6&spec=false&loose=false&code_lz=Q&debug=false&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=false&fileSize=false&timeTravel=false&sourceType=module&lineWrap=true&presets=env%2Creact%2Cstage-2&prettier=false&targets=&version=7.15.1&externalPlugins=&assumptions=%7B%7D) 將React轉成JS。

原本React的寫法：

<Button size="XL">Hello World!</Button>

Babel轉譯完之後：

這一行直接貼在React內也可以實現。

React.createElement(Button, {
  size: "XL"
}, "Hello World!");

## JSX的概念

### 為什麼需要JSX

透過JSX，我們可以直接把HTML放到Javascript。不需要再使用`querySelector`選取該元素後，才可以操作。取而代之的是，==可以直接在HTML中操作Javascript變數==。

換句話說，==JSX就是一種增強版的HTML==，讓我們可以很方便的對HTML進行修改與操作。

<div id="root"></div>

`ReactDOM.render()`語法，

1. 第一個是放入JSX，簡單來說就是HTML內容。
2. 第二個是說明這個==JSX的內容要被放在HTML中的哪個位置==。

const word = "React"

ReactDOM.render(
//   JSX
  <h1>Hello,{word}!</h1>,
//   要被放入哪個位置
  document.getElementById("root")
)

JSX 中標籤內如果沒有內容的話，==可以自己關閉==。

<div className="chevron chevron-up" />
<div className="chevron chevron-down" />

## 在JSX中套用CSS樣式

在 JSX 中我們需要把`class=" "`都改成`className=" "`。

const Counter =(
//   為了避開衝突關鍵字衝突，需要將class改成className
  <div className="container">
    <div className="chevron chevron-up" />
    <div className="number">256</div>
    <div className="chevron chevron-down" />
  </div>
);

ReactDOM.render(Counter,document.getElementById("root"));

### 使用行內樣式

需要在 JSX 中撰寫 `inline-style` 的話，可以在HTML標籤內的style屬性中帶入「物件」的方式完成。

JSX可以使用括號`{}`來帶入變數，當我們撰寫 `inline-style` 的時候，就可以在`<div style={}>`的`{}`中放入物件。

物件的名稱會是CSS屬性，但會使用「==小寫駝峰==」來表示，屬性值則是CSS的值。

// 定義inline-style行內樣式
const someStyle ={
  backgroundColor: "#4f69ff",
  fontSize: '20px', // 也可以寫20，引號和px可以省略
  border: '1px solid black',
  padding:10, // 省略px，樣式會自動帶入單位變成'10px'
};

const Counter =(
// 在style中帶入物件，就可以使用inline-style
  <div className="container" style={someStyle}>
    <div className="chevron chevron-up" />
    <div className="number">256</div>
    <div className="chevron chevron-down" />
  </div>
);

ReactDOM.render(Counter,document.getElementById("root"));

### 補充

1. 屬性名稱以小駝峰來命名，例如：`backgroundColor` 和 `fontSize`
2. 須記得這是Javascript物件，所以想使用顏色的時候，需要使用字串的方式表示。例如：`"white"`
3. ==須記得這是Javascript物件，所以結束換行是== `,` ==而不是== `;`

有時候開發者可能不會直接先定義一個 `inline-style` 的物件，而是把物件直接寫在`style={}`的`{}`內。就會看到有連續兩個大括號。

<div
    className="number"
    //  兩個大括號 
    style={{
        color:white,
        textShadow: '2px 2px #434a54'
    }}
>
245
</div>