Welcome back.
Does your head hurt yet?
I remember when I first saw REAC code, I was really confused.
It looked impossible to learn.
It seemed so different from what I've known before.
But as with anything, it's just a matter of time and getting used to it.
And trust me, by the end of the course, you'll get used to it.
But I do want to mention a few more things before we start building our Robot Friends app.
First is that in this source folder, we have a few more things like set up tests or report web vitals,
which we're not really going to worry about.
These are just configuration files that are nice things to have.
Again, create React app provides a lot of nice extra things, but they don't really help us build the
app, so we're not going to worry too much about it.
If you want, you can always go to the React app documentation.
You can click on, get started and read some of their documentation.
The key for us and the things that we want to focus on is index stages and app dogs.
These are the main things that allow us to build components and build this reactor.
Now I want to test our assumption.
Remember how I said that the reactor gets rendered right in here inside of this?
So as a developer, always test your understanding.
How can I test my understanding to verify that what I said is correct?
Well, we can simply go to app dogs and update this like I did.
But we can go even a level higher.
Remember how I said we're rendering the app right here?
Well, could I do this each one?
Hello, world and render each one header like this.
Hmm.
Pause and think, is this going to work?
Well, let me find out.
I'm going to save this.
It's compiled with warnings line for app is defined, but never used again.
Another nice thing about react.
And that makes sense, right?
I'm importing app from App Dogs, but.
I'm not using it, so it's just a warning it's still fine, because instead of app, I now have Hello
world.
Let's see if this is still working.
Fight, go to my app.
And I refresh.
I get.
Hello, world.
That's working.
And why is that as we're going to discover with React, we're essentially using HMO like syntax like
H one plus creating our own custom H HTML like syntax using something called GSX.
Again, we're going to learn more about that in the not coming videos.
So I could have something like this here where, say, app.
Safe.
Go back and refresh, and I have hello world and.
Our default app.
So again, I'm testing my assumption that I can add things in here and react.
Dom renders it on the Asimo page for us.
Very, very cool.
Now, in some of the upcoming videos, you might not see things like report web vitals.
Instead, you might see something like register service workers.
That's an old version of Cory racked up and something we won't really get into in this course because
again, it's outside of the scope of what we need to know.
The key and the focus that I want you to have for the next couple of videos is what we do inside of
the source folder.
To be a good react developer is learning how to work within this source folder and building the React
components.
And that's what we're going to teach you throughout the next couple of videos.
The final thing I want to show you is this if you're on sublime text, you might have.
The syntax highlighting a little bit messed up like this.
So if that's the case, why you need to do is instead of JavaScript, because these are DOGE's files
you can actually select.
OpenGL with current extension and use GSX.
So go to JavaScript and select GSX and this.
We'll give you proper syntax highlighting for what we call these GSX files that the React package allows
us to write more on that later.
For now, let's take a break and I'll see you in the next one.
Bye bye.