Welcome back.
So I'm back in my text editor and my terminal, we have the robot friends app and we haven't really
done anything but install the Korea reactor.
So let's go to package on JSON and just see what it actually did for us.
Let me just make this a little bit smaller.
So we have package that, Jason, that set up and the thing that we really care about is this scripts
you see here that I have a couple comments the start, the build, the test, any checked script and
all of these run the command, react scripts start or build or test or reject.
So what is this?
This is what create, React app is.
Create, React app is this React scripts?
And when we ran the command inside of our known modules, you'll see a ton of packages that installed
for us.
Actually, it's quite a lot, isn't it?
So if I scroll all the way down?
Holy Moly, that's a lot of packages.
You see that I have a react scripts right here, and this is where the magic happens in.
Here are the scripts like build eject units, start all these things.
This massive file is being run.
Through here and this is what Create React app provides, it provides us a couple of commands plus all
these packages for us to use to have a really nice developer environment.
So we're able to run things like npm test to test our project and you'll see here that it will run a
test for us.
So if I run a, it's going to test our app Dodge's file and look at that, we have one passing test.
Again, we're not getting into testing, so we don't need to worry about that.
But you see here that we have this out of the box.
Another cool feature that we have out of the box.
Again, let's not worry too much about what this is.
I'm going to go over in detail what this file does, but let's say Abdul is where our app is.
Maybe I messed something up.
Maybe instead of return, I'll say we turn and I spell it wrong if I save this.
And I do and p.m. start.
Let's run.
All.
We get O Line five and App Dogs Return is not defined, and even in here, I get return is not defined
line five and app tags.
How cool is that?
I get that out of the box, so let's say I fix that as soon as I save.
OK, compile successfully.
Everything is working.
So as I'm working on this file, let's say I messed something up.
I keep getting these errors.
As long as I run npm start, it's constantly running, limiting and checking in the background for me.
How cool is that?
OK?
Let's get back to what we're talking about.
So we have packaged JSON, we have all these things that are happening for us.
You see here that we have some dependencies.
These are the things that were installed when we ran that NPC's command.
So we have react.
We have reactor, Don.
We have reactor scripts, which is the Create React app and then something called web vitals.
So it installed a bunch of dependencies for us, as well as some testing libraries.
Now we also have package locked up JSON and this is automatically generated by the package that JSON
file.
And it makes sure that the versions that I'm using right now of our dependencies, every single thing
that you see in node modules, it locks the version numbers so that if I sent this project to you across
the sea, across the world, you open this file or this group of files, it's going to work the exact
same way because these version numbers are locked.
So this package to a lock makes sure that we can run this project anywhere in the world, and it's automatically
generated every time we update package that JSON.
We also have a Remmy, which is a nice Create React app, Remy, that you can read through some of the
things that we can do.
Again, I'll leave that up to you.
It's not important.
We have something called get ignore and has a dot in front of it, which means it's a dot file.
What this means A dot file is a configuration file and get ignore tells whenever we run a get command.
Let's say we're going to push this project to GitHub after we're done with it before our get commands,
it's going to check this and say, Hey, I'm not going to commit, I'm not going to add, I'm going
to completely ignore.
I'm going to get ignore any files or folders that are in here.
So for example, I'm going to ignore the node modules folder.
Remember how I said, we don't want to push that onto GitHub?
Well, it's going to ignore that.
It's going to ignore any other things that we have.
It's going to in our coverage.
If there's a testing coverage, it's going to ignore any random files or folders.
So these store is like a common Mac specific thing that people mistakenly upload to GitHub.
So it just kind of has this niceness about it.
So we can always add things in here that we don't want to push to get hub.
We have the node modules folder, which is where all the third party libraries that we're using are.
And then finally, we have these two important folders.
One is public.
This is where we have things like the favicon.
So that is this little icon that you see here.
That's the favicon.
We have indexed HTML, so this is the HMO page that actually renders.
So we see here you have racked up.
So react to this is the Asian male page that gets rendered.
We have some logos in here.
We have manifest that, Jason, it's a special file that if now there's new features on the web where
users can download or bookmark your website and put it on their home screen or put it on their desktop
as an icon and kind of like a desktop icon, a ball, you can add those on here.
We don't need to worry about that.
We have robots that text.
Just some nice niceness that they provided for us, we don't need to use all of them, all we really
care about is this index that A.T.M. And the most important part is this this Div ID.
Equals route.
As you can see here, there's nothing inside of the body.
Yet on the page, we see this reactor or at least some animation with some text.
This Div ID of Root is actually where React grabs on to the HTML page.
Now where is this happening?
This is happening inside of our source folder.
So the source folder contains our logic, our app as programmers.
This is where we're going to work with our React app.
Public simply has the index that H.M. files and some assets, but where the logic lives, where we build
our React app is right here in the source folder and inside of the source folder.
There's something called index dogs, and this index suggests if you see here might have something that
you recognize, document, get element by ID Root.
This route.
Is exactly what we're grabbing here.
That line says, grab this, and once we grab this, I want you to do something.
What do you think that is?
Let's take a cliffhanger break and I'll see you in the next video.
Bye bye.