freeCodeCamp/curriculum/challenges/chinese-traditional/03-front-end-development-libraries/react/render-html-elements-to-the-dom.md

id, title, challengeType, forumTopicId, dashedName

id	title	challengeType	forumTopicId	dashedName
5a24bbe0dba28a8d3cbd4c5f	渲染 HTML 元素爲 DOM 樹	6	301406	render-html-elements-to-the-dom

--description--

到目前爲止，已經瞭解到 JSX 是一種在 JavaScript 中編寫可讀 HTML 的便捷工具。 在 React 中，可以使用它的的渲染 API（ReactDOM）將此 JSX 直接渲染到 HTML DOM。

ReactDOM 提供了一個簡單的方法來將 React 元素呈現給 DOM，如下所示：ReactDOM.render(componentToRender, targetNode)，其中第一個參數是要渲染的 React 元素或組件，第二個參數是組件將要渲染到的 DOM 節點。

如你所料，必須在 JSX 元素聲明之後調用 ReactDOM.render()，就像在使用變量之前必須聲明它一樣。

--instructions--

代碼編輯器有一個簡單的 JSX 組件。 使用 ReactDOM.render() 方法將該組件渲染到頁面。 可以將定義好的 JSX 元素直接作爲第一個參數傳入，然後使用 document.getElementById() 來選擇要渲染到的 DOM 節點， 在這個挑戰中，請渲染到 id='challenge-node'的 div 中。 確保沒有修改 JSX 常量。

--hints--

常量 JSX 應該返回一個 div 元素。

assert(JSX.type === 'div');

div 應該包含一個 h1 標籤作爲第一個元素。

assert(JSX.props.children[0].type === 'h1');

div 應該包含一個 p 標籤作爲第二個元素。

assert(JSX.props.children[1].type === 'p');

提供的 JSX 元素應該渲染到 id 爲 challenge-node 的 DOM 節點。

assert(
  document.getElementById('challenge-node').childNodes[0].innerHTML ===
    '<h1>Hello World</h1><p>Lets render this to the DOM</p>'
);

--seed--

--seed-contents--

const JSX = (
  <div>
    <h1>Hello World</h1>
    <p>Lets render this to the DOM</p>
  </div>
);
// Change code below this line

--solutions--

const JSX = (
<div>
  <h1>Hello World</h1>
  <p>Lets render this to the DOM</p>
</div>
);
// Change code below this line
ReactDOM.render(JSX, document.getElementById('challenge-node'));