Understanding JSX

We could describe our application's UI by using the React.createElement 0:00 method over and over again, it really is possible to do. 0:05 However, it's not convenient. 0:09 It's a lot of extra typing, and all of those React.createElement calls make 0:11 things pretty confusing, especially when working with larger apps. 0:15 This is where JSX comes in. 0:19 JSX is an extension to the to the JavaScript language 0:20 that uses mark-up-like syntax to create React elements. 0:25 Most React developers write their UI was JSX, 0:28 because as you'll see, it resembles writing HTML. 0:31 Now that you've gained an understanding of the React.element API, 0:34 I'll teach you how JSX is a simple abstraction on top of it. 0:39 So let's start by converting our createElement calls for 0:42 title and desk to JSX. 0:46 First, I'll replace the titles React.createElement function 0:49 with opening and closing h1 tags, and 0:54 the text My First React Element. 0:59 Then, replace React.createElement in the description with a set of p tags and 1:03 the text, I just learned how to create a React node and render it into the DOM. 1:11 Now, this isn't really HTML that we're writing,or actual JavaScript syntax. 1:18 This is JSX, a syntax extension to JavaScript, and 1:24 you're going to use it a lot while working with React. 1:29 So let's save up that desc and 1:32 head over to the console, refresh and notice how we get a syntax error. 1:35 JSX is not valid JavaScript, so the browser cannot interpret it. 1:41 To create React elements with JSX, 1:46 it needs to be transfiled into react.createElement calls. 1:49 We can use the Babel compiler to do this. 1:53 Normally during development, you'd have a build system set up with Babel in 1:55 a tool-like web pack to automatically process your JavaScript files. 1:59 For instance, the tool create app provides a built system out of the box to do this. 2:02 But it's also possible to use bubble directly in the browser via a script tag. 2:08 And index.HTML, I'll add a script tag that points to Babel stand alone and 2:12 you can copy the script tag from the teachers notes with this video. 2:17 This is going to allow us to use JSX without a built step. 2:23 Now, there's one more thing we need to do in order for babel to work in the browser. 2:27 In the script tag to our app.js file, add the type text/babel. 2:31 This signals to the babel script that the JavaScript and 2:40 app.js should be complied before being executed. 2:44 I'll give this file a save and over in the console once I refresh, 2:49 the error goes away. 2:53 And the same elements are displayed on the page. 2:55 You have a header, with the child h1 and p elements. 2:57 Keep in mind that in production you would not use this text/babel type attribute. 3:01 Most likely your code would already be recompiled using babel and 3:08 a build tool like webpack before serving it to the browser. 3:12 Now JSX still produces objects that describe a DOM node. 3:15 For example, if I console/log(title), notice how 3:21 it's still the same object describing the h1 element like we saw earlier. 3:26 To demonstrate, I'll bring up the online Babel compiler or repl so 3:33 you can see how JSX gets to convert it to JavaScript. 3:37 I'll simply copy the title and desc variables from app.js and 3:40 paste them into this left panel. 3:46 Over in the right panel, we see that babel converts the JSX 3:49 into React.create element calls just like we wrote earlier. 3:52 So this should look a familiar to you. 3:57 During this course feel free at any time to copy and paste parts of your React code 3:59 into this online compiler to check out and learn what's happening under the hood. 4:03