Original subtitles

Welcome back.

Now, before we get into the next video, where we're going to build some of these components and actually

start making our app, I want to go over something.

You notice here that we're rendering this app, which isn't ASML, but our own custom component, that

is we're importing this app file, which is app dogs.

And don't worry about this code.

This is something that we're going to write later on.

But we see over here that we're returning under the render some estimate.

Now, the way react works is that we can combine these ASML like elements such as DIV or H1, but also

create our own custom ones, like we will like search box or card list.

And just like we saw on our developer tools with React these components, we have capital letters and

I've used some highlighting here so that it doesn't highlight them.

You can see the difference between a component that we built, which starts with a capital letter and

a component that comes pre-built and reacts, which are like a Shimao dev or H1.

These are lowercase.

And as you remember, with the react component architecture, all we're doing is just creating and combining

these Lego blocks together.

And the syntax is either using declasse syntax with a capital letter.

So now we can use the app component.

Or if we go to something like search box or Carlist less to search box again, we won't have this year,

but we will build them over the next couple of videos.

You'll see that here I have a different way of building a component.

And this uses just an arrow function.

So remember when we first did the create react app, how we had function?

Search box, or in our case, we had the app.

That in here we returned some like H1.

Well, this is the same thing, except that we're using the arrow function way, so there's two ways

like this of creating components, the class component and functional component.

Now, that's something that we're going to go get into a lot because it's an important concept and react

and has some implications.

But we're getting ahead of ourselves.

The key here is to realize that we have for now two ways of building components, either just as functions

like this, again, using capital naming system or using classes like this.

And both of these, no matter what, always return some sort of.

For us, some sort of react elements.

Now, another thing I want to mention is the folder structure that we're going to build throughout our

course and a good folder structure is really, really important on any project.

As projects get bigger and bigger, as we get more and more JavaScript files, things are going to get

complicated.

So we need to be organized.

So we're going to be structuring our app like a lot of professional reactive helpers are so that we

stay organized.

And what you'll notice here is that Equa, when creating components, likes being very explicit.

That is if a component in this component folder.

Has sex in it, he actually ends the file with Dot Gere sex, and you see we have that little react

icon.

If I go down to the bottom over here, you see that it's JavaScript react.

So just simply means it's JavaScript, but with this syntax.

Now, if I change this to a simple JavaScript file, it's still going to work.

It's why App Dogs still works the way it does.

And this is actually just personal preference, this is how Equa enjoys organizing his code, because

this right away, I can look at it and say, oh, this is a react JavaScript or sex file.

But at the end of the day, remember, Craig Reactant takes everything through Web pack and Bable will

actually convert this file into a JavaScript file.

So whether you do J sex or Jesus, it doesn't really matter.

Maybe your editor will help you with an icon, but that's about it.

Is just personal preference, it's all about structuring your application in a way that's easy to understand.

That makes sense.

Even the naming convention here is important where again, just by looking at the file, even though

it's in the components folder.

Right away, I know.

Oh, yeah, this is a component and this is the style for the component.

Now, these styles, these access files that we're going to be writing and trust me, we're going to

be writing a lot of them at the end of the day, what happens underneath the hood is that create react

that combines everything all together.

And if you remember, if we go back to our test folder, when we run NPM Run built and we go to the

file, you see over here that we have a chunk.

Of course, with a map, this is a source map, which just helps us debug our code and production,

but we have just one massive file and that's what we racked up does.

Even though we'll have different access files in our work space, in our source folder, at the end

of the day, when we released to production, all of these are going to get combined together.

And although we're still early in the course, although we haven't really built out these components,

I want you to start noticing these things as we build things, we're going to be thinking about how

to stay organized instead of just having all the files in one directory, instead of not having any

organization.

Right from the beginning of the project, we're starting to think about how we want to architect it.

And this is an important principle that we're going to take with us throughout the rest of the course.

Let's keep going.