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 - React.js Tutorial
From the course: React Foundations by Pearson
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
-
-
-
-
-
-
(Locked)
Learning objectives1m 21s
-
(Locked)
Getting started with JSX6m 40s
-
(Locked)
Creating a simple user interface via JSX13m 27s
-
(Locked)
Evaluating JavaScript expressions in JSX7m 4s
-
(Locked)
Data-driven JSX10m 52s
-
(Locked)
Passing properties to a component via JSX12m 56s
-
(Locked)
Additional JSX techniques16m 44s
-
(Locked)
Lab: using JSX9m 47s
-
(Locked)
Lab solution: Using JSX5m 24s
-
(Locked)
-
-
-
-
-
-
-
-
-