Okay, so we've got our react application up and running, and we're going to take a look at what's
responsible for the output that we can see here in our browser, because some magic is going on here
to produce that.
And let's take a look at what's contained or some of the important files contained in there.
Just a high level overview, because we're going to be working on this project of course, as we build
our application.
But a few highlights, and we'll start off with the fact that we're working on a single page application.
And our single page is this index.html.
Now, if you've seen a bit of HTML before, then this will all look very familiar to you.
We have our HTML standard tags with the HTML tag, the head, the meta, and we've got our title, which
affects what we see inside the tab at the top here.
So we can change that to whatever we wish.
I'm going to change this to re store the name of our app.
And then we've got our body tag.
And inside here we've got a div with the ID of route.
And then we've also got a script tag which is opening up the main TSX file that's included in our project.
So let's go take a look at that one next and see what's contained inside there, because we don't see
any react code inside here.
But if we do, take a look inside the source folder and take a look at main dot TSX, then we can see
that we've got some JavaScript code here to get the element by the id and the id is route.
And what this is, is some react code to create route and render effectively our react application.
So what's contained inside this strict mode.
And that's the mode that we run in to keep us aligned with best practice as we build our react application.
Strict mode will warn us about anything that we're doing incorrectly, and a few other things that help
us build our react application safely and effectively.
And we've got some imports here where the create route is coming from.
At the top here we've got an import from that's coming from react Dom client, and we've also got strict
mode coming from react, and we've got some CSS being imported here.
And we're also importing the app component.
And the app component contains the code that we actually see inside our browser layer.
So if we go and take a look at this which is the app dot TSX, then we can see that this has a JavaScript
function that returns something and it returns what looks like HTML.
But this is not strictly speaking HTML.
It's just designed to look like HTML to make it easier for developers to learn react and create react
applications.
But what this is, is a JavaScript function that returns something, and this something is called or
referred to as JSX or TSX in our case, because we'll be using TypeScript.
And like I say, it looks a lot like HTML.
And there are some differences where we see stuff inside curly brackets.
That's actually JavaScript code.
This is using something that's being imported at the top here, the V8 logo and the react logo as well.
And we've also got some JavaScript functionality here as well where we've got the button, we've got
an onClick event which is effectively updating some state, some memory that's contained inside this
component, and it's tracking the counter.
So if we go and click on the count button, then we can see that this goes up.
And this state is only retained in the component's memory.
So as soon as we refresh the page it resets itself to its initial value which is zero.
As we can see up here, we'll get into what this code does and what this means as we talk more about
react.
I'm not going to worry too much about it right now, but we will come back to that.
And what else have we got going on in here?
We've also got some differences between what you would see here and what you would normally get with
HTML.
We don't use class inside here, because what we're working with at the moment is actually JavaScript,
even though it looks like HTML and class is a reserved word in JavaScript.
So in order to provide the styling class, we use class name instead.
So that's our react component.
And let's go ahead and simplify things, because we don't need all of this code and we won't work with
all of this code.
I'm just going to remove all of the imports at the top.
I'm going to remove this code for using state as well.
Please do the same of course on yours.
And inside this return statement, I'm going to take out all of this code and this opening angle bracket
and closing angle bracket.
I'm also going to remove that as well.
I'll talk about what that means soon, but we'll just have a simple div and we'll just have the name
of the app of restore.
As simple as that.
Just the very, very basics.
And just to mention how we give inline styling to something.
If we did want to give it some style, we do use the style keyword.
But inside here we provide this as an object.
So if I wanted to give this a font size, for instance, then inside double curly brackets I'd specify
font size and then I could in quotes, give it the size and I could say I want this to be 1.2 rem,
for instance, to make the font a bit bigger.
If I go and take a look at the progress, well, I can see that restore is centered on the page.
That means we've still got some styling going on there, and I would like to remove any styles that
have been provided as well.
So inside the app dot CSS, I'm actually just going to delete this file.
We don't need this particular CSS file.
So I'm just going to move that to trash.
And the other styles are coming from the index dot CSS.
I'm just going to control A and delete all of the styles inside there.
And where this was being used was in the main dot TSX.
If we go back and take a look, we can see that restores on the top left hand corner.
I'm not convinced the styling of the font was applied there.
And let's just make it much bigger and say 1.6 REM.
And sure, that has increased its size.
Okay, so that styling class has been applied.
Now other things to point out.
Just before we move forward, a couple of other important files.
We've taken a look at the package.json.
This describes all of the dependencies, and these dependencies translate into actual files and folders
that are contained inside this node modules folder.
So when we install something an npm package into our react application, then it downloads and saves
the files for that package into node modules.
A very big folder contains thousands of files, and we will not typically go and look at what's inside
there.
We've got a public folder and anything contained inside here, things like images.
Then these are not going to be shrunk or managed or compiled.
They're just going to be used as they are inside the public folder.
We'll be using that to store some images we'll add soon.
Inside the source folder we've got our app TSX, the index dot TSX.
We've looked at that already.
And the only other thing I want to point out is the v config file, which again we've already looked
at.
So that's just a very brief high level overview of what's contained inside our projects.
And before we move forward, there's just a couple of extensions I want to add to VSCode to improve
our developer experience with react.
So if you're using VSCode, please follow along.
If you're not using VSCode, then just move on to the next lesson.
But one extension we need if we are using VSCode, if we just type in react, we're going to use some
snippets to help us create the boilerplate when we create a new react component.
So I'm just going to search for react and install Es7 plus react Redux, React Native snippets.
Just go ahead and install that one, and we'll also add another extension which will really help us
out, which is called ESLint.
And this is going to give our compiler our react compiler.
It's going to allow VSCode to display very noisily any issues, syntax errors, whatever else with our
code as well.
So please make sure you have that one installed.
Okay.
Now we're ready to move on.
And what we'll take a look at next is some basics of react components.
And that's coming up.