React JSX語法 簡單範例

使用JSX撰寫React的簡單範例。

JSX為JavaScript的擴充，簡單說就是JavaScript + XML。React官方教學中對於JSX的介紹非常清楚，本篇只是用來練習的範例。

本篇範例修改於「React 我的第一支React - Hello World」。下面是原來的React程式碼。

ReactDOM.render(
    <h1>Hello, world!</h1>,
    document.getElementById('root')
)

把ReactDOM.render()的第一個element參數<h1>Hello, world!</h1>取出為常數hello。

const hello = <h1>Hello, world!</h1>

ReactDOM.render(
    hello,
    document.getElementById('root')
)

顯示效果相同。

可在JSX中以大括弧{...}撰寫JavaScript表示式嵌入變數或函式。例如下面嵌入變數name。

let name = 'John'
const hello = <h1>Hello, {name}!</h1>

ReactDOM.render(
    hello,
    document.getElementById('root')
)

嵌入函式。

function empFormat(emp) {
  return `ID:${emp.id}, Name:${emp.name}` // ES6 template literals
}

const emp = {
  id: 1,
  name: 'John',
  age: 33
}

const hello = <h1>Hello, {empFormat(emp)}!</h1>
ReactDOM.render(
    hello,
    document.getElementById('root')
)

可直接撰寫html element屬性。例如下面加上style屬性。

const hello = (
  <h1 style={{ color: 'red', backgroundColor: 'blue' }}>
    Hello, world!
  </h1>
)

ReactDOM.render(
    hello,
    document.getElementById('root')
)

JSX本身也是JavaScript表示式，也能嵌套在其他的JSX敘述。

const hello = <h1>Hello, world!</h1>

const block = (
  <div>
    <p>greeting block</p>
    {hello}
  </div>
)

ReactDOM.render(
    block,
    document.getElementById('root')
)

• JavaScript ES6 Template String
• React - 深入 JSX