Okay, so we have our application open in this program, The code Editor And in the previous video I
clicked command O or I can do file open here like that to open the folder and once the folder is open,
I can see that on the left pane here.
I can also collapse it if I like to make more space for the code.
This main section here is for the code.
So for example, if I open this file, you can see here the file is here and I can collapse it.
You will have more space there.
What else do we have on the left hand side?
We have search so we can search in files.
If you have a phrase or a word that you would like to search for, you can use this.
Then you have integration with Git.
Then you have the back console here and you have some plugins.
So you can also search for plugins and you can install them and there's a hundreds of hundreds of different
plugins for different languages in different frameworks.
So go ahead and install some of of the plugins you like or you will find very useful.
So I will come back here to the source code and on the left hand side we can we have a few files.
So let's go through these files first and it will give us a kind of hint what the React application
is.
We create our app with a single command and all of that has been made for us automatically.
So first let's start with node modules.
You can see it's a kind of gray and there is a reason why this is gray basically.
That's a list of all dependencies.
So all libraries, all that react use for this application will be installed here.
And you can see here hundreds of of different small or bigger libraries and all dependent on each other.
So everything will be installed here.
But in fact you could remove that folder node modules completely if I will remove it.
What I could do is I could do NPM install and it will be installed installed automatically and how the
NPM install will know what to install.
Basically we have package.json and what package.json is, it's a file that.
Has built in dependencies.
So basically, if we want to use some kind of libraries, we will add it to the dependencies, as you
can see here.
So the package.json, we are telling our that's our application, that's our version.
And then we can have some flags like private true or false, and then we have dependencies section.
That means we want to use this, react this version, react Dom, react scripts and so on, and that
if we do NPM install it will be installed in the node modules here.
Another option is NPM update.
It will take the latest version and it will install the latest version and that will be here also written.
So then we have scripts.
Scripts is we already talked about it before.
Scripts are the little snippets, the command line commands that we can do like NPM start will start
our server as we've done before, and then we have NPM build, test, eject and so on.
Then we have some configuration here and then we have browser list and so on.
So basically it we don't need to change much in this package.json it is automatically created for us.
But the important part here is the dependencies.
Dependencies will kind of tell what we need to also have.
At the moment we don't have a dev dependencies, but we can also have another version dev dependencies
and this dev dependencies will be a list of different libraries or modules that we want to install during
our development.
So there are some tools that will help us developing the our application, but they are not needed for
a production build.
So once we put our application on the server, we don't need to include them so we can divide dependencies
that will need to be always there and also dev dependencies that are dependencies only for our development
process.
So basically that's package.json we can close this.
And also we have another file here, package log, Json that's kind of locking whatever we install with
NPM install or whatever we had already.
This because we've done create React app.
This is locked file.
So once we have that file we can give it to someone else and we will be sure that all that things that
has been installed will have this version fixed.
Because if you do NPM update you might have a different version and you might have some problems with
compatibility in between different packages.
So that's a lock is kind of locking to the current, build a different version from this file.
And then we have a simple Readme which is automatically included there.
Then we have a git ignore by default create react app is also initiate the git.
So the git is included in this and in the git ignore.
You have a list of the things that should be ignored like for example node modules.
There is no point to include the node modules inside our git inside our version control because we can
easily recreate it with NPM install.
So that will just put extra files hundreds of or thousands of different files that we don't actually
need to include.
It will just exclude it from from the git because we can easily recreate it.
So git ignore is just a list of things that we should ignore inside our git repository.
Then we have two folders public and then source source is our application.
Public is traditional HTML website.
So if I will open HTML here you can see that's a normal HTML we have from head and we have some body.
So let's go through what we have here and that's a standard setup with some meta and links.
And basically we have a manifest file by default and then we have manifest here.
So basically that manifest it's setup for PWA, which is progressive web app, and by default it's automatically
almost enabled.
You need to do a few more things here, but that's included in the build.
So this is all prepared for being a progressive web app and you have linked to manifest here and then
you have some setup for the favicon which is included here.
So basically that's our landing page.
And React is a single page application.
That means we don't go to another.
If we navigate to another with some links to another section, we are not going to reload this or navigate
to different page.
We will be always staying with index.html and we will just replace the content on the go.
So here what we have, we have two things.
First, if you don't have a JavaScript enabled in your browser, which almost everyone has a JavaScript
enabled, we will display this because React application won't work with JavaScript, but if you do
will do simply simply display a div with ID root and what does it mean?
I will show you that in a second.
If we go to the source and I will go to index.js here and you can see here get element by ID root and
that's that line here allows up to be rendered.
So basically react Dom which is document object model react render this app which is this and we will
be talking more about the components later on.
But basically we take some component from our our source, which is this app.js here and we put it in
the root element, root which is here.
So we have a single div on the page and we take a component and kind of inject it and show it there.
So what is up app?
If you go up here, that's our component.
We'll be talking about component in the next section.
But this you can see here that part, it's our content that we see on this page here.
So you can see, edit and logo and some link.
That's exactly what we see here.
So we have image, we have paragraph, which is edit and then we have that link and then learn, learn,
react.
What I would like to show you is by default, if I will make a little bit more space here, you can
see here and I will collapse a little bit here.
So we'll divide the screen.
Uh, two.
Half.
So basically what we have here is the code editor and here browser.
If I do some changes here, like for example, I will remove that image and remove it and then I will
click save here.
I'm not going to navigate to this.
You can see that automatically refresh because we have our server running and it will look for the changes
in our code and it will be reflected automatically here.
So if I will take this link and remove it, save it Ctrl s, you can see it's already changing.
So I can do here.
Hello from re react five.
Hello from React.
So this is how it works.
We have our code and it will be once we run our server and we can run this server also from here.
So I go view.
And terminal.
And I can go to terminal.
I will click Ctrl C here, I will close the terminal.
So application is not running anymore.
Or if I go here and refresh it, you can see the site cannot be reached, but this time I can do NPM.
Start from here and you will have automatically start your server from here and you can see this will
pick up the new version and it will be shown.
Hello from React.
So now we have everything set up in our ID so this will run our application and then we can lifecode
it here and we'll see the effect here so that what we will do in the rest of our tutorial and I will
show you a piece by piece what React is capable of.