HTML Wrapper and React 0:00So now that you've had a quick 3-4 minute teaser of the basic workflow, let's now hit the brakes, rewind, and review each step from scratch. So let's begin with the basic HTML wrapper. And now at the bottom, we want to pull in React.js, of course. Okay, well I have that saved to a little snippet here. This is always a good idea. So what do we have here? Well at the time of this recording, we are fetching the latest version, which is 0.13.1. Okay so that handles this. We're just pulling in the minified React library. Understanding JSXTransformer 0:31Okay so that handles this. We're just pulling in the minified React library. But now what about this second one, JSXTransformer? Well this is something that you would only use in development, and in fact, you don't even have to use it if you don't want to, but you probably do. We touched on JSX just a little bit in the previous video. It allows us to, within our components, write sort of an HTML-like syntax. But then we need to compile that down to method calls, which are a little bit more difficult to take in and consume. That is what the JSXTransformer does.to take in and consume. That is what the JSXTransformer does. And in fact, it can do this in real time in the browser. But of course, one thing to keep in mind is that for production, well you wouldn't want to do this in real time. You would want to precompile. And for those sorts of tasks, we can use a tool like Browserify with what we call transformers to make it really simple. But we'll get into that later. For now, this should be good to go. Creating HelloWorld Component 1:27But we'll get into that later. For now, this should be good to go. So why don't we create our first incredibly basic component. Now in our case, we know we're going to be using JSX, so I will set the type accordingly. And that way, React knows that we're going to be using that special syntax. Think of it that way. Okay, so we will create a class. And you'll see once again, I've created snippets for this. Now you can fetch some of these through package control if you use a tool like Sublime. Or I just create mine manually.Now you can fetch some of these through package control if you use a tool like Sublime. Or I just create mine manually. That way I know exactly what each snippet refers to. But why don't we instead do this from scratch so you see every step. How about we create that obligatory Hello World component. Okay, well var helloWorld equals React. And we're going to create a new class. Now in fact, if you get to use ECMAScript 6, think of that as the next version of JavaScript, we can actually use something a little bit more friendly, where we actually create a dedicated class that has a constructor and things like that.we can actually use something a little bit more friendly, where we actually create a dedicated class that has a constructor and things like that. And we're going to review that in this series, but not quite yet, since most of us won't really know much about ECMAScript 6, or at the very least not know how to compile it down to vanilla JavaScript that any browser understands. Okay, so we have a component here. And when we want to render that on the page, well, we need two steps. One, we actually require a render method. So why don't we just do this, return, and I'm going to say div helloWorld, and close that out.So why don't we just do this, return, and I'm going to say div helloWorld, and close that out. Once again, notice how it just feels like I'm writing HTML here. But just keep in mind, this isn't a deal where React just kind of grabs all of that and throws it directly into the HTML. There's a lot more involved to it. This is more like a description of the DOM. Okay, so we have specified how to render our component. But now, think about it, where do we render it? We have to be explicit about that. Rendering the Component 3:18But now, think about it, where do we render it? We have to be explicit about that. So we will say, React, and I want to render a component. Now in the past, or if you're looking through other tutorials, you might see something like this, renderComponent. You don't need to do that. Just call render. Now, we've created a component here, so we can represent it sort of like an HTML tag. And what you'll find is in future videos, we're going to be able to use this style to our advantage.And what you'll find is in future videos, we're going to be able to use this style to our advantage. For example, imagine that you create a component that, when rendered, references other components. So you kind of get this cascading effect, which is really neat. Anyways, though, we'll get to that. I'm going to render our helloWorld component, and we want to place it, well, just as a child of the body tag. General JavaScript, document.body. Okay, we're ready to try this out in the browser. So if we take a look, it's not the fanciest thing in the world, but it does prove that Recap and Next Steps 4:09Okay, we're ready to try this out in the browser. So if we take a look, it's not the fanciest thing in the world, but it does prove that everything is, in fact, working. Alright, so we will take another step in the next episode. But just remember, if you want to get started, well, you want to pull in the latest version of React. Here, you can see they're using Facebook CDN, but there's lots of CDNs where you can fetch it. So that's one. And then next, because we're using JSX for development, and we want to compile that inSo that's one. And then next, because we're using JSX for development, and we want to compile that in real time, well, you want to pull that one in as well. So if we take a look, we have an HTML skin, we grab our scripts, and then you created your first component called helloWorld.
