Kent C. Dodds: 0:00 We're inching closer to Idiomatic React by using JSX. Writing our stuff like this with your createElement API, not super fun. Way more fun is writing our UI like this XML type syntax in our HTML.

0:16 We really like to be able to do that with our React elements that we're creating. We're going to do that with this special syntax called JSX, which is fairly simple HTML-like syntax sugar on top of the raw React APIs.

0:31 It compiles from this stuff that looks like HTML, down to React Create Element calls, which is why it's important for you to understand React.createElement(), so you can use JSX more effectively.

0:43 Because JSX is not JavaScript, you have to use a compiler. Babel is a tool that will compile that. I strongly recommend that you play around with the Babel REPL with this online REPL link that I've got here for you. You can play around with it. It's a ton of fun to interact with what the JSX output will be when Babel has a chance to work with it.

1:07 Play around in here to see what the JSX gets converted into. Ultimately, your job is to take what we have today and convert it to JSX syntax. Play around with that. One thing that I would strongly advise is the better that you're able to take a look at JSX and convert it into createElement calls in your head, the better you'll be able to read and use JSX effectively.

1:33 Definitely, you need to spend some time working with the Babel REPL, spend some time playing around with createElements, and JSX, and see what cool things that you can do.

1:43 In this exercise, in addition to just converting what we have here, we're going to start interpolating different values into our JSX and making our JSX and our JavaScript interoperate nicely with some of the special syntax for JSX.

1:58 Spend some time playing around with the extra credits here. We've got a couple of them. We'll see you soon with the solution.