All language subtitles for 016 First Component.en_US

Once we have removed all the boilerplate, let's kick things into gear and start our react land adventure

and the first thing I want to do is to create our first component.

Normally, in order to do that, we will need only two things a import from react dependency and a function.

Or keep in mind that since indexed gas is our JavaScript entry point, we'll need to add some additional

code.

But normally it's just react and a function.

So let's start working on that now.

I will toggle my sidebar just so we have a little bit more realistic and I'm doing that.

We a command of command and B, notice here.

Now I'm toggling the sidebar in Visual Studio Code.

And like I said, we would need to import react from our react dependency.

Now, please keep in mind that the code that I'm writing, I'm starting with the import and I'm looking

for react and learn from react.

So this code is not react specific, essentially.

This is something called ESX modules where essentially we can get a piece of functionality into our

file.

And if you have been taking my Joske, of course, of course you are already familiar.

However, if you haven't, don't later.

And of course, we'll spend entire video on taking a look at the syntax and what will be the purpose

of using ESX modules.

Keep in mind, this is just JavaScript.

This is nothing specific to react now, since a react is our main dependency for a project, I don't

need to go with a specific path.

But later you'll see that when we're setting up our own files, you'll have to specifically say, well,

which file are you looking for?

Again, we don't have our files.

So normally if it's just a dependency that is for the whole project, meaning it is in the node modules,

then you simply go with whatever is the name.

So I'm importing react from react.

And now we want to set up my function because I would want to create my component.

Now there is a gotcha meaning I can create whatever function I want, whether it is a function or whatever

that is going to be good.

All function with a function keyword.

However, as far as the name for react to know that this function is special and the dysfunction is

a component, you must capitalized the name.

So again, we can create a function.

However, we would like function, keyword or function.

And throughout the course I will switch just so you can see that of course it will work regardless.

But what we need to do in both cases, regardless which option you choose, is to capitalize the name.

So, for example, if I'm creating a component by the name of greeting, I must start with a capital

G and then I'm going to go with name when we have the parameters, which eventually we'll use.

But for the time being, we'll just leave them empty.

So we go with parentheses and then we have curly braces.

So as you can see, traditional JavaScript syntax, we just create a function, not one.

Gocha was the fact that we needed to capitalize the first letter.

So that way JavaScript knows or I'm sorry, react knows that this is special.

So this is a component and learn from react component.

We would want to return H.T. and now technically it is not called the amount or you'll see that in a

lot of blog posts and videos and all that.

Technically it is called Jass X and don't worry, we'll cover sex in more detail for now.

We just want to have something on the screen.

So from this function, we must, must, must, must, must return again.

I will call this email and you'll see that as html a bunch of places here.

Keep in mind that it is officially called.

So we go with our return and then we simply come up with a heading for.

So that's the email that will be eventually displayed on the screen.

So I go with my heading for I'm here.

All right.

This is John and this is my first component.

Awesome.

Now, once I've created, as you can see, even though I saved oh, nothing is happening.

But there's no reason to worry because remember I said Index JS is a JavaScript entry point, which

means that, yes, normally this is the only thing you'll need to set up the component import as well

as the function, which essentially is your component.

However, since indexed is an entry point only to add some additional code and.

What we're trying to do, we're trying to add this functionality at the moment or whatever functionality

you have into our index issue.

Remember I said there was a div with an idea of.

So now what I would want is take whatever functionality I have, which in my case is just this one component

and somehow, someway injected into my div with an idea.

Now how do I do that?

Well, I'm going to go with import than react Dom and that is coming from other dependancy.

So there were multiple dependencies.

You can clearly see them in packages and one of the other dependencies was react Dom.

So we import this from react and then react.

Dom has the render method, so we go with React Dom, then Dot and then we type hereunder.

Now Render Method is looking for two things.

It is looking for what we're going to render, which of course in our case is going to be greeting.

And the second thing well where we would want to render it and of course that's why I showed you there.

So now first let's pass the greeting.

So I'm going to go here with a greeting and I'll close it out and I'll talk about why we would need

to close the components as well in a second.

And the second thing, so we add comma and then we go with document and then get element by day.

And now I'm looking for that route.

And the moment I save it, if everything is correct, I should see it.

Now, let me double check.

Of course, what happens right now, my dear server is not running.

So of course, that's why I cannot see anything.

So go with NPM start spend up my dev server.

And now on the screen, I should see my heading four and the text will be.

This is John and this is my first component.

And of course, there it is now.

It's kind of small.

So let me zoom in and I can clearly see that this is John and this is my first component.

Now, the gotcher about the closing tax and react is simple, where even though your HDMI element might

not have a closing tag as example, that could be, for example, image, because you know that for

the image you don't have closing tax, you still need to self-closing.

So what I'm trying to say in this greeting, I cannot pass it like this, so I'm going to get error.

So in order to avoid atter, either I would need to set up to to act like.

So I have the greeting and then I'm closing out the greeting component as well.

And once I served notice how everything works or if you don't want this empty closing time or for example,

in the image that you already don't have that closing tag, then you would still need to add this closing

tag inside of the opening brackets.

So that's something you need to keep in mind, because with all five, of course, we can do that willynilly

for the image we can included, we can augment and it's up to us.

But in react you must, must, must, must, must have the self-closing that if there is no closing

time.

And let's go over the set up one more time where if we would want to create a component, we need to

import, react from react.

We need to set up a function.

That function will be component.

So this is our component.

However, in order for you to know that it is going to be a component, you need to set this up as a

capital case letter.

So that's how Riak knows.

All right.

So this is not just the regular function.

This is going to be my component.

And then from the component, we are returning HTML, which officially is called USX, because, of

course, there are some nice goodies that we can do.

It's not just going to be a simple demo.

And since this is a entry point, so only in this case, and essentially I can tell right away that

in most cases is just going to be in one place in your application.

So you only have to do it once.

And by the way, if you're using create react app, you won't even have to do that.

But normally you would do that in one place where you inject your JavaScript into the index and we do

that by importing react down and then we have a render function.

And then in that function we pass in two things.

We pass in whatever we're going to render and then where we're going to render.

And then since, of course, in the index, we already have the div with an idea what.

That's why we're targeting that there.

And now, of course, we have our first component successfully displayed on a screen.

Awesome.