# 渲染 ## 单元素渲染 >[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') ); ```