All language subtitles for xd

Now that we know the basic workings of a react application, or at least a very rudimentary one, let's

actually go ahead and build a component.

So I'm going to delete app.js,

and app.css.

All right.

Now if I save it, it fails to compile because it cannot find app.js.

It's attempting to import here.

There is no file, there's no export,

so it's not going to happen.

So in the source directory

create a new file and

let's call it application

.js

Now in here

the first thing we need to do is to import react and react component class so that we can create our

own component,

and so let's do that.

So import React

Component, and the curly braces there are important, from react.

Now drop down a few lines and we're actually going to start building out our component.

So we're going to write class Application

extends Component, and we're going to open that up.

Now by itself this does not export it.

So every time we create a class that we want to use in another file, if it's gonna be imported in another

file, we're gonna need to export it.

So the syntax for that is export default

and then the class name, so Application. Then we're gonna save. Now in our index.js file I'm going

to remove that import and replace it with our new one.

So import the exports name, so application, from,

and here we need to specify it's in the current directory,

so ./

Application, and hit semicolon.

And by itself this will still fail because it's attempting to mount app.

We don't have a class called app. It says the app is not defined.

So we are going to have to render our own component. So a component in React,

so in ES6, is going to be written the same as HTML is.

So you're going to open it with a pointy bracket,

and then application, and then it's self closing.

So you're going to close it. It can be self closing, for the most part it will be. We will cover

how to wrap components later on in the course, I'm sure.

But for right now, this is the syntax for mounting our component.

Now if we go back to our browser,

we don't have render.

So this is a necessary method within our class.

So what we need to do now is in Application, the one essential method for a React component is called

render.

And what this method does is it returns HTML, or text, or variables, whatever the case may be.

So we're going to return just for right now a string, which we're going to say hello world, and then we're

going to end that with a semicolon.

Now if we go back to our application we see that that's exactly what we get, just a string.

And if I right click and go to inspect, we're gonna see that it has mounted into the div by ID root.

We also will get into React tools shortly,

but for right now we can see that it's mounting.

So a few things about the render method itself.

It's like any other method. You can declare variables and whatnot and use them, and we can return

in brackets HTML content.

So I could change that to h1 Hello, World, and then hit save, control + s, and then open up my browser. We

should get an H1.

Now you'll notice that I'm not refreshing this. And that's because when when you run npm start,

what's happening is it loads in a hot loader, which every time a change is detected it will recompile

and then refresh any connected clients.

In this case, this browser.

So this is automatically updating when I write new code and save it.

Now we can't in this return method have a top level element, and then another top level element.

We're gonna see an error here.

JSX expressions, this is E6 JavaScript,

the current implementation, must have one parent element.

This means we can only have one top level element.

So I'm going to wrap both of these in a div and call it a day.

There we go.

Problem solved.

So now if I save, you're going to see it's going to compile, and the browser automatically refreshes,

and we get this here.

We get this

So that's basically how to write a render method in our own component.

Now we can also print out variables in here and use content like that. And how we do that is within the

render method, not the return statement, within the render method itself

we can declare variables. So I'm going to write let, and for those of you who took

The Complete Front-End Web Development Course, and you learn JavaScript there, we use the keyword var to

create variables.

And this has scoping issues.

If we declare it here it can be used outside of this function,

and that's not really safe.

So we're going to always scope our variables correctly. We're gonna either use let or const.

So const is,

it basically means it's a constant.

It can't be changed after it has been set.

So we're gonna say let name equals Nick, and then

we're gonna save it.

And now how we actually use this within the return statement is similar to other technologies that use

curly braces.

If you've used any model view controller kind of framework this should be second nature to you by now.

But in this instance, it's just one set of curly braces that wraps it, and then we print out the variable name.

And we can load up our browser, and we see that it prints it out correctly.

So, I think that's it as far as this goes. We've just written a component. We've mounted it into a

DOM element by Id root.

And in the next video we're going to talk about more special React methods for the component class.