All right, guys.
So we're going to get started on our project.
And there's a few ways to spin up a React application.
And what we're going to do is just stick to the tried and true Create React app because it's been around
for a long time.
It has a lot of documentation, a lot of support and so on.
But there are other ways to create a new boilerplate.
React application is another one which I've actually been using a lot lately.
I actually just did a crash course on my YouTube channel on V, but it is faster.
It does have some, you know, some advantages, but it hasn't been around as long as Create React app.
So I'm just going to stick with the safe option.
And this is probably what most of you know if you already know react, which I'm guessing you at least
know the basics.
All right, so let's jump into terminal here and just navigate to wherever you want to create this project.
And we're going to create a new folder.
You can either do it through your operating system or you can do make dir mkdir and I'm going to call
this pro shop and I'm just going to add V two because it's version two just so people don't get confused
with the older version because this is a complete revamp.
And then I'm going to CD into Pro Shop V two and I just want to show you the folder structure that we're
going to have so you have an idea moving forward.
So we just created the pro shop folder and in that we're going to have three other folders.
One is going to be front end.
That's where our React application will go.
That's where we're going to start.
So our entire user interface, all of the front end dependencies like Redux, React, Bootstrap and
all that stuff, Axios So it'll have its own node modules folder and its own Package.json Okay.
For the front end, then we have our back end folder, which is going to be all of our server side code,
including our models, anything to do with Mongoose, express, our controllers, our routes, all that
is going to go in the back end folder.
And then we have an uploads folder for image uploads because products are going to be able to have images.
All right.
So in the route, so in the pro shop folder, we'll have a node modules and that will be all of our
server dependencies.
So Express Mongoose, et cetera.
The back end folder will have all of the code that has to do with Express and Mongoose, but node modules
will actually be where those packages live and then Package.json will be our server server side.
Package.json And then we'll have a dot env for environment variables, things like the MongoDB Uri.
When we use Json web tokens, we'll need a secret.
We'll put that in there as well.
This will not get pushed to your main repository.
You actually want to put that in your gitignore file.
Okay.
And then dot git and dot git ignore.
Just have to do with version control.
All right.
So now that you have an idea of the overall structure of the project, let's create our front end folder
because that's what we're going to be working in first.
And we can actually use Create React app.
Actually, we need to do Npx x, let's say Npx x.
Make sure you have NodeJS installed and then create React app and we're going to call this folder front
end.
Okay.
So that'll put all of the react stuff, including the node modules.
All that stuff is going to go in the front end folder.
Okay.
So now that we have React set up in our front end folder, I'm going to open up vs code in the root,
not in front end but in the root or whatever text editor you're using and just make sure you can actually
see the front end folder.
All right, now I'll go ahead and run the server, so I'm going to do that for my VS code terminal.
Now the server, the React dev server obviously is in the front end folder, so let's CD into front
end and then from there I'll run npm start.
And that will open on localhost 3000.
So now what we're going to do is just a little bit of clean up, get rid of some of the boilerplate
here.
So let's delete the logo, file the APT test, the app, CSS, those, those three files I'm just going
to completely wipe away.
It's going to break because in our app, in our app.
JS it's bringing in two things that aren't there.
So what I'm going to do is actually just clear everything out and then run our a FC with my Es7 React
Redux snippets extension, and it's just going to create an Arrow function component.
Okay.
And we want it to be called app for this.
Let's change it to we'll do an H1 and change that to welcome to pro shop.
And if we save that, we should now see our application.
And I'm also going to go into public index.html and just change the title because that's basically the
global title.
So let's say welcome to Pro Shop or whatever you want to put is fine.
Okay, so now that should change the title.
So next thing that I want to do is, is get set up for Git because you should be using Git version control.
So when we create an app with create React app, it creates a git, ignore a git ignore file, which
is where you put things that you don't want to push to the main repo like node modules and your build
folder and so on.
And it also creates a git repository in a git folder which you can't see here.
But if we stop the server and we do an LS dash A so we're listing all of our files, including hidden
ones, you'll see there is a git folder.
So what I want you to do is remove that with dash rf dot git.
Okay.
So that will completely get rid of that git repository and then we're going to take the dot git ignore
and we're going to move that to the root.
Okay.
And the reason I'm doing this is because our git repository is going to be in the root, because we
will also have, you know, a back end folder and uploads folder and some other stuff in the root directory.
So that's our project.
And what I want you to do is in the git ignore.
For one, I just like to remove the slash here on node modules just to make sure that it gets all the
node modules folders, whether it's in the root or in the front end or anywhere else.
And then down here we have different dot env files we can have.
The one we're going to create is going to be just dot env.
So let's add that as well and then save.
Okay.
So now what you should do is initialize a git repository in the root.
Now I'm in the front end in this terminal, so let's open up another terminal and now we're in the root
in this one.
So if we run git init that'll then initialize a git repository.
So if I do ls dash a in the root you'll see we have a dot git folder.
All right.
Now you should use something like GitHub.
It doesn't have to be GitHub.
It can be Bitbucket or GitLab, but GitHub is definitely the most popular, so I already have a repository
with the final code right here.
I do have some touch touch ups to do, but that's basically the course code.
But just for for explaining this, I'm going to create a new repository.
Okay.
So let's go to new repository and I'll just call this pro shop.
We'll just say pro shop dash demo, and I'm just going to make this private.
If you want yours public, which you probably do, then just choose public and then let's create that
repo.
All right, then we want to add this remote repository as our remote repo.
So let's go ahead and copy that line there.
And then.
Let's first, before we paste that in, let's make a commit.
So we'll say git add all.
Okay.
And then we can say git commit, dash m and then a comment will say initial commit.
Okay.
Now what I'm going to do is paste in that git remote.
Okay, that git remote command.
And then you'll see here we can also just we want this to be in the main branch.
So we'll paste that in and then finally we can push to that remote repository.
So if I come back here and reload now I have my git repo.
Now you can just as well use the integrated git within vs code.
So if I make a change.
So for instance, if I change this to a paragraph, you guys don't have to do this.
But if I, if I make that change, you'll see that this icon now has a one because I've made that change
and I can see the change right here.
If I click on it, it'll show me what has been changed from the last time that I made a commit.
So if you do that, let's say you want to push to GitHub, you can either come down here and say Git
add all and git commit or you can simply put a message up here.
So let's say I'll just say test.
I'm not going to keep this repository anyway.
And then if I click commit and then click the refresh.
Now, if we come over here and reload, you can see that I just made this commit called test.
So, I mean, it's easier to use this to use the integrated tool, but I know not everybody is using
vs code.
All right.
I'm just going to put that back to an H one.
And you can see now I have a one here because I've made another change to that file.
So that's all I want to do in this particular video.
Now that we're set up and we're you know, we have our app running in the next video, I want to set
up React Bootstrap, which is what we're going to use for our UI.
Basically, we can have we have bootstrap components available as React components and we're going to
create the header and footer as well.
All right.
So I'll see you in the next video.