使用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')
)
沒有留言:
張貼留言