- Objective:
- Breadcrumb:
# 概念阐释
React渲染关心两件事情，首先是在哪里渲染，其次渲染的内容是什么。`render()`渲染的内容只发生在有变化的DOM中，这就是[[JavaScript HTML DOM API|Virtual DOM]]。
```jsx
const root = createRoot(domNode, options?)// 放在哪
root.render(reactNode)//渲染的内容是什么
```
# 实例
reactNode可以是[[JSX Elements]]
```jsx
import React from 'react';//导入react库
import { createRoot } from 'react-dom/client';//从react-dom/client中导入createRoot
// Write code here:
//1.获取元素放在哪个父级元素下的id
const container = document.getElementById('container');
//2.创建一个React根，内容放在哪？container变量中
const root = createRoot(container);
//3.放什么？render()中的内容
root.render(<h1>Hello world</h1>);
```
reactNode可以是变量
```jsx
import React from 'react';
import { createRoot } from 'react-dom/client';
const container = document.getElementById('container');
const root = createRoot(container);
const toDoList = (
<ol>
<li>Learn React</li>
<li>Become a Developer</li>
</ol>
);
root.render(toDoList);
```
# 相关内容
# 参考资料
- [react-dom/client](https://react.dev/reference/react-dom/client/createRoot)
- [Passing a Variable to render()](https://www.codecademy.com/journeys/full-stack-engineer/paths/fscj-22-front-end-development/tracks/fscj-22-react-part-i/modules/wdcp-22-jsx-752c2293-9f61-412a-92e2-70ad6e01a0a7/lessons/react-jsx-intro/exercises/reactdom-render-variable)