# 渲染 ## 單元素渲染 >[success] 元素是構成 React 應用的最小單位。 首先在最頂部引入 ```js import React from 'react'; import ReactDOM from 'react-dom'; ``` 先看一個最簡單的例子 ```js ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('root') ); ``` 這里使用了 `ReactDOM.render` 渲染一個單DOM元素，指定了掛載位置為 id 為root 的元素。 ## JSX 當然也可以是使用JSX聲明的元素: ```js const element = <h1>Hello, world!</h1>; ReactDOM.render( element, document.getElementById('root') ); ``` 這里，使用JSX語法，將一個元素賦給一個常量element，在使用 `ReactDOM.render` 渲染。 當然也可以在JSX中使用JS表達式 ```js function formatName(user) { return user.firstName + ' ' + user.lastName; } const user = { firstName: 'Xiao', lastName: 'yu' }; const element = <h1>Hello, {formatName(user)}!</h1> ReactDOM.render( element, document.getElementById('root') ); ```