Section 9 (React): Lesson 3 - Components

Описание: Hey you and welcome.

In this video we will work with React components.

So let's dive right into it.

In the previous video, we had created a Create React app project and we deleted a few files and deleted

a reference for it.

So the server should still be good to go in my terminal.

I do have NPM start still running.

Let me just close it and show that it's working.

NPM start.

That should start the server for me.

It opens the project in the browser.

I'll close this out and go back to my Firefox refresh, but it does look messy.

I do want to create my own project and in order to do that we have to learn about components because

React doesn't just serve a giant HTML file, it will break everything into tiny little components that

then gives you a lot of control over what you want to render at certain times.

All right, so let's see what that looks like.

I'll go back to my VS code in the SRC.

The first component that is already created for us is the app dot TSX.

Remember that an index dot TSX we are importing app dot slash app and that is being rendered using JSX

on line number 11.

So that's our first component.

Usually you would want to come up with a folder structure that makes sense and then create components

inside that.

So in this case, I'll start with a very basic folder structure by adding another folder under SRC called

Components.

There are many schools of thought on this.

Some people don't like just the components folder.

They would say maybe components folder should be broken up into atomic design where tiny little components

are atoms.

Bigger components are molecules and bigger components than that would be organisms and bigger components

that that would be templates.

But our project is not going to be that big.

So we're okay with just having one components folder and it will just have our TSX files as is.

We're not going to create too much of a structure here.

All right.

So I'll right click on the components folder and click new file option and let's create our first component.

Let's call it Hero dot TSX.

So that will be our hero banner that we want to work with.

All right, perfect.

So I'm starting with a fresh, empty file.

I'll take away my file Explorer.

Let's write our first React component.

In order to do that, I will import React Capital R from React Library.

That's always the default to work with.

Now, remember, you don't have to memorize any of this.

Just so you know you can.

I could easily go to app dot TSX copy the whole thing paste that in here, take away the return and

start from here.

This is just all I need to get a component going, but I want to break it down for you.

That's why I'm writing it manually.

Usually I would just copy paste those things, so don't memorize it.

Just know that components in React are functions.

Okay, I'll delete all of this.

All right.

Next thing I would do is start a function and call this one hero name.

It won't really matter because we'll be doing a default.

Export name would matter when we don't do a default export.

I will explain to you what I mean in a bit.

So I'll do a return null semicolon and then at the bottom export default and then pass it the component

that I want to return in this case hero.

Perfect.

That's our React component created.

Of course it returns null.

That means it's not rendering anything, but it is a component, however.

So I'll open my file Explorer go to app dot TSX and in the app dot TSX, let me hide my file explorer

here in the app dot TSX, I will delete line number two.

Delete everything from the return statement and import.

Oh, sorry.

Yeah.

Import.

Let's give it a name hero from and I'll use relative path here.

So dot slash.

That's how you start a relative path.

And when you do that automatically vs code picks up that this is the path relative to where you are

right now, which is in the SRC folder.

And we can now go to different folders.

In this case it tells me components folder is available.

Do you want to go there or do you want to use any other files?

In this case, components folder is the one I want to use, so I'll select that slash again.

Now it tells me there is a hero file.

You want to use that?

Yes.

Perfect.

So I'll get that hero name and I will end the return use Gsx, which is just like an HTML tag starting

with the less than sign.

Put the component name and this is going to be a self-closing tag.

So I'll do slash greater than sign.

And that's me rendering the function.

All right.

So if I go to Firefox.

Uh, let me see.

Where is it?

Okay.

It is empty, which is is reasonable because we haven't rendered anything.

So let's go to the Firefox.

Sorry vs code and let's make some changes.

Okay.

So in the hero component.

Let's render something out.

I'll do p tag or actually this is a heading.