From the course: React Foundations by Pearson

Unlock this course with a free trial

Join today to access over 25,500 courses taught by industry experts.

Lab solution: Using JSX

Lab solution: Using JSX

Okay, now I'm going to walk you through the solution code for Lab 4 using JSX. So here we are, React Dev Solutions 04. I'm going to open index.html in the text editor, and I'm going to walk you through the main points in the code. So here we are. So from the top, I've included or I've downloaded the Babel transpiler into the browser so that it is capable of converting JSX into pure JavaScript. The input map is the same as before. This script tag here on line 23 is basically the entirety effectively of my web page and all of it will be subjected to Babel. Babel will analyze the code in this script section and look for any XML and convert it into react.createElement. So that's a necessary step. And then inside here, if I just skip over my data classes, book and film, and come down to line 63, this is my first component. So oh, this is interesting here. What I've done is I've declared a variable. I don't know why I've got it in uppercase. Yeah, let's just leave it like that. Let's not…

Contents