Original subtitles

OK, so I know those last few sections were really theoretical, but I'm glad you stuck in there because

now comes the exciting part.

We're going to build our e-commerce platform.

So first, let's use, create, react at.

To build out our project for us.

So I'm going to call it Crown Clothing, actually.

Now, this is going to take a little time, so we just have to wait for cracked up to finish setting

up our project.

Awesome.

So what we're going to do is we're going to seed into our new project and let's open it up.

Now, just like last time, it's given us a couple of files that we don't actually need.

So we don't need any of this service worker code inside of index as.

So let's just get rid of it.

We also don't need any of this stuff inside of our Abduh as file, including this class name.

And instead, I'm just going to write Hello, World.

And we also don't need this logo.

Now, in access, we don't need any of this CSI, so let's get rid of it.

And there we go.

OK, now our project is pretty much set up for us to start working with.

So what we're going to do is we're going to evaluate what it is that we need to build.

So when we look at this, this is the home page and on the home page, there is a header component,

which we can build after.

But looking at just the content of the page, there are these five menu item components, right?

And these three look similar and these two look similar.

But if we look closely watched, you realize that all five of them are the same component.

The only difference is that these ones are bigger than these ones.

So we definitely have to build this menu item component.

And there's also a component that's holding these five elements together, so there is like a directory

menu component we've got to build as well.

But when we look at this component, we'll see that there is outside container of some kind and an inside

container that holds a title and a subtitle, right.

So it's a div with a div.

And then there are two text HTML elements inside.

So let's build that first.

Now.

What I'm going to do is I am going to make a new file called Home Page Component Dot Jassi.

We're going to import react from react.

And we're going to make it a contest homepage, which is going to be a functional component because

we don't really need any life-cycle methods at this point, nor do we need to store any state.

So let's add in our first outside container, which will be our homepage.

And then inside will be those two components that we're talking about, the container for the menu and

then the actual menu items.

So we will move them into their own files after, but let's just put it down so we can see it first

and this I'm going to call directory menu.

And then the inside d'Hiv, I'm going to call.

My menu item.

Inside of our menu item.

We know that there's this content container, right, so let's just make another div.

And give it the last name.

Content and then inside of our content, we want an H1.

That is our title.

And here we just want to put the text hats.

And then we also want.

A span right after that will be our subtitle.

With the text shop now.

Now, let us copy this five times just for now, will end up making the components later.

And we are going to put jackets.

And then this will be women's and this will be men's.

Now, if we save this.

We have to also remember to export our new function outside, right?

So let's just export as the default.

Because we're probably not going to export anything else from our home page component file.

Let's import in homepage.

Homepage.

I think it's Capital One, yes, it is OK now, instead of hello, world, let us render.

Our home page component.

OK, so we have to remember to run our project.

And.

Let's see now.

OK, there we go.

So this is just our directory without any of the styling.

So for the styling of this project, we're actually going to use something called SAS, and SAS is just

a upgraded version of success.

So it's a it is a different language and it has a different file type called SAS, but it reads very

similar to success, but it has a lot of quality of life improvements.

And I'm going to show you what it looks like.

So in order for us to include it, we first have to add.

Noad sace to our project now the great thing about Create React is that it actually comes with the configuration

for SACE right out the gate.

As long as we include this package, create react app will actually configure web hack and be able to

convert our SAS files into X Files because the browser can only read X Files.

Right.

So this is actually really convenient and now that that's included, we have to remember to restart

our server again.

OK, now this might happen, you might see this bug, all this is saying is that our version of babble

just that got installed when, which is probably a dependency of our notes noses is now different from

what our Jaan file is expecting.

So what our initial package was expecting is different now.

So we just got to follow these instructions.

Right.

And we'll just follow the yarn instructions because we're using yarn.

So let's first delete the yarn lock.

So let's delete, you're in lock.

Dhanda Lokke.

And then let's delete the node modules folder.

Now, here it says the removeable just from our package, Jason, but we actually won't have that seen

because it's something that create racked up hides from us because those are all dependencies that it's

managing.

So we won't do step three.

And instead we are going to run yarn to install all of our new packages all over again.

And hopefully this time all of the versions will match appropriately.

So there is a lot of waiting, there's definitely always so much waiting.

Come on, you're almost there.

Awesome.

OK, so now if we run, you can't start again.

OK, so now that our project is loaded, let's just include in that sass file.

So I will show you.

What are Sasko is going to look like, so we're going to make another file called Home Page Dot Styles

Dos ASP.NET.

And we're going to paste our Sassan.

Now, it actually looks very similar to see if you've noticed, right, this is pretty much just a classic

selecter that has some styles in it and then another class selecter with some styles in it.

But inside of this one will see that there are other things inside other than just our typical classes.

Right, are our typical style.

So here, whenever you see this Ambersons symbol, this ampersand pretty much means this class that

is above it, and then it wants to append this additional selector, right, this first child.

So it's saying menu item, first child gets this style.

So anywhere where a menu item is, the first child is going to get this style.

Same with this one.

It's the equivalent of writing a menu item and then first child.

In our regular season, right, but Sash just lets us test it so that it's easier to read, and then

you'll see this content class name with its own styling as well.

Right.

If you hover over this, you'll see that what it's saying is that any class of content that sits between

any element with the class of menu item will get these styles in it.

So rather than writing, normally what we would do would be menu item and then content like this.

Right.

Instead, what we're going to do is we are going to just write it nested inside and Titan is going to

be the exact same.

So any element with the class title inside, any element with the class content inside, any element

with the class menu item.

Right.

Is going to get these styles.

And that's what's great about SACE is that it just lets us not have to write a bunch of CSFs selectors

that look unconnected to each other.

Right.

We can just nest them all inside of the block of their relevant parent child relationship.

And you'll notice that we did the same thing in our HTML for our home page, right?

We have this menu item that has a content right child.

And then inside of that content is the title and subtitle.

Just like our sassier.

Our menu item has a content child, which has a title and a subtitle inside of it.

Now we just have to make sure to import our new source file into this file.

And.

If we save.

If we go now to our project.

We'll see that it looks very much closer without the images right to this now.

Now, in the next lesson, we are going to start moving these components into their own folders, as

well as exploring what our final folder structure is going to look like.

Now, our project is actually not on GitHub yet, so let's do that.

Let's go back to our browser.

Let's go to GitHub and let's create a new repository.

I'm going to name my repository Crown Clothing after our project.

And then we're going to create it and copy this key that they give us.

Then we got to go back to our terminal, into our project and right.

Get remote, add origin and then paste in that code.

And now we've linked our project to that remote that we just created on GitHub.

And now if we check the status with git status, we'll see.

These are the modified files and these are the new files that we added.

So we want to add them all with get add a two hour kimmett and then we're going to write get Kimmet

Dash M for message and we're going to say in our commit message something that is explicit about what

this Kimmet contains.

So I'm going to say created project with Create React app and added files for Home Page.

Now I'm going to get push all our coming to origin master.

And now if we check.

And we refresh.

We'll see all our code up awesome now that we have a repository set up.

Let's move on.