JSX

1.JSX語法是React.createElement的簡寫語法，要使用它需要匯入(import)react函式庫，並且要透過babel工具編譯才可以。例:

//匯入函式庫

import React from "react";

//JSX變數宣告：

const CDom=<h1>myTitle</h1>
ReactDOM.render(CDom,document.getElementById('example'));

等同

const CDom=React.createElement('h1',{id:'myTitle'},'example')

所以兩種寫法都可以，但還是以JSX的方法較為直觀。

2.如果要將JavaScript或變數寫入HTML裡，必需加上大括號{}。

例:加入一個變數。

const name = 'Josh Perez';
const element = <h1>Hello, {name}</h1>;

例:加入一段JavaScript

const element = (
  <h1>
    Hello, {formatName(user)}!
  </h1>
);

3.如果要將 CSS 寫在 HTML 裡，JSX 裡的 style 屬性需要包著一個 {}。style 屬性要以 JS 物件的格式設定 (JSON)，採用駝峰式命名法而不是-，數值的單位是 px，其他單位要用單引號包住 (例:'50%')。外面要再加上一層大括號。

例:通常是用font-size，但這裡用fontSize

<a style={{ fontSize: '16px', color: '#FF0' }}>87</a>

4.註解:同 JS，註解可以用 /* */ 或 //，在 tag 中使用的話則須用大括號 {} 包住