ReactDOM.render(componentToRender, targetNode)
, where the first argument is the React element or component that you want to render, and the second argument is the DOM node that you want to render the component to.
As you would expect, ReactDOM.render()
must be called after the JSX element declarations, just like how you must declare variables before using them.
ReactDOM.render()
method to render this component to the page. You can pass defined JSX elements directly in as the first argument and use document.getElementById()
to select the DOM node to render them to. There is a div
with id='challenge-node'
available for you to use. Make sure you don't change the JSX
constant.
JSX
should return a div
element.
testString: 'assert(JSX.type === "div", "The constant JSX
should return a div
element.");'
- text: The div
should contain an h1
tag as the first element.
testString: 'assert(JSX.props.children[0].type === "h1", "The div
should contain an h1
tag as the first element.");'
- text: The div
should contain a p
tag as the second element.
testString: 'assert(JSX.props.children[1].type === "p", "The div
should contain a p
tag as the second element.");'
- text: The provided JSX element should render to the DOM node with id challenge-node
.
testString: 'assert(document.getElementById("challenge-node").childNodes[0].innerHTML === "Lets render this to the DOM
", "The provided JSX element should render to the DOM node with idchallenge-node
.");'
```
Lets render this to the DOM
Lets render this to the DOM