Kent C. Dodds: 0:00 When a developer user uses this component, the way they're going to do this is by using a JSX element here. We're going to create a React element with our counter component. That's how the developer is going to use it. Then ultimately, at some point, the developer also is going to be calling ReactDOM.render to get that element onto the page.

0:20 They're going to pass not only the element that ultimately renders our element, but they're also going to pass as a second argument a div, which should be inside the document body so that the user can interact with this.

0:33 Before we even get to rendering our stuff, we need to create a div. We're going to say div = document.createElement("div"), and that's going to be the route. Then we'll say document.body.append(div). Now, if we console.log(document.body.innerHTML), we should see our div. There it is, ta-da, sweet.

0:56 The next thing that we want to do is actually render this counter to this div. We're going to say, ReactDOM.render. We want to render the counter. We're going to render that counter to this div that we've created and inserted into the body. If we save this, we'll see the div that we created. That's our container div.

1:19 If we look at the implementation of the counter, it also renders a div. That's the one right here. That's the first child that our component renders, the first child of our containing div. Here, it renders yet another div for that current count and then a button for the increment and decrement right here. Sweet.

1:38 That's the first part of just getting things onto the page for our test. We're going to create an element. We're going to put that element into the document. We're going to render a React element for our component to that div.

1:53 Of course, we could add any props here that we wanted to if there were some like some initial count if we wanted to test that, whatever it is that we need to for our UI that we're trying to test.