We've now finished up our first example, but you might have a couple of questions around the code that
we just wrote out.
So in this video, we're going to tackle a couple of different questions that you might have about all
that code.
Here's a list.
The questions are going to go over right here.
We're going to first start off explaining exactly what that app function was inside of our apt that
file.
I'm talking specifically about this function right here.
You'll notice that at the bottom we are returning what looked like HGL right there.
So this whole app function is a little bit mysterious.
Let's take a look at a couple diagrams and get a better understanding of what it is all about.
OK, so the app function referred to as a react component.
It is a react component because it is a plain JavaScript function that returns some JSA X.
Components in REACT have two jobs.
First off, they produce J.S. X, which tells react what we want to show on the screen to the user.
And components also handle user events, such as the user typing into a text input or clicking on a
button.
All components we create are going to be functions that return J.S. X, G.S., X, is that H.T. male
looking stuff?
You can really think of G.S. X as being a set of instructions to tell react exactly what content we
want to show on the screen at any given time.
So if we look at the JSC that we have over here, we were essentially trying to tell react that we wanted
to show a div with some content inside of it.
J X looks very similar to H.T. Male and follows many similar rules.
So for each tag or each element as referred to it, we have a either a closing element, as you see
over here, or we have a self-closing tag, as in the case of the H.
R right here, a self-closing tag is one where we do not have a separate closing element like so.
So what are these G.S. sex elements all about?
Well, quick follow up diagram.
So we make use of sex elements to either tell react that we want to create a normal H.T. male element
such as a div or a span in input, a table where any other age female element.
We can also use J sex elements to tell react that we want to show another component.
And we actually did that several times inside of our app component.
We told using J.
We told to react using J.
RSX that we wanted to show a field component, a translate component in languages.
That's what these things were right here.
Beeld languages and translate.
Now it's really important for us to understand exactly what react does with all this G.S. X.
Let's take a look at one more diagram.
So whenever we return J.S. X from a component react is going to start to iterate over every element
inside that block of G.S. X or every single element.
React is going to ask itself a question.
It's going to say, OK, for this first element right here.
Just this div.
Is this a DOM element?
If it is, then REAC says, OK.
Fantastic.
I'm going to create a div and show it on the screen to the user.
React well, then walk into all the contents of that div.
So in this case, the field tag languages HRR in translate.
And for each of those, it's going to ask itself a very similar question.
React we'll look at that field element right there and ask, is this a DOM element on this case?
No, it's not a standard normal vanilla HGL element.
Instead is a reference to a react component that we built or to be precise.
I built for you for this particular project.
If React decides that a given tag is a component, then React is going to call that component function
and inspect all the JSF X that it gets back.
Let's kind of walk through that process very quickly.
So here's the field element right here.
Let's take a look at the definition for that field component.
We can find the definition for it inside the components directory.
And then the field does James file.
So we have another function over here that returns some J.S. X, so because back inside the apt j ust
file react saw a field component right here.
React is going to call this function right here.
Get back this block of G.S. X and then start to iterate over all the elements inside of your as well.
Really quickly.
Let's walk through that process.
Here is some of the J.S. sex that was returned from the field component.
React is going to walk through all this stuff as well.
So it's going to take a look at that opening div say, is this the DOM element?
Yes.
OK, I'll show that on the screen.
It then moves onto the label right there.
Is this the DOM element.
Yes.
Showed on the screen and then onto the input.
After React has covered or walk through all the jail sex that has returned from the field component,
it will then move on to the next element.
We'll take a look at languages and once again, will say, is this a reactors mean?
Is this a DOM element?
Once again.
No, it's not.
So reactor is going to find the language component function all it get back some G.S. X and then walk
through it in an identical fashion.
It then repeats that entire process over and over again until it has walked through all the different
elements that we returned from the app component.
OK, so there's a whole bunch.
Exactly what was going on with the app function?
They're now going to move on to our next big question.
How did some content get displayed on the screen?
In other words, how did react somehow get this content visible over here?
All right.
Yet another diagram.
So this is another kind of in-depth diagram.
We'll walk through it step by step.
So on the right hand side of Code Sandbox, this preview window right here, we are essentially looking
at a little miniature Web browser.
You'll notice that there's even an address bar right here.
And we can even refresh that page.
So whenever your browser makes a request or tries to load up some content for this page, here's what
has happening behind the scenes.
So in that mini browser window, that little mini window is going to make a HTP request over to Code
Sandbox.
And that is the tool that is running this entire online editor for us.
From this initial request, our mini browser is going to get back in index dot, hgl file inside the
response.
Our little mini browser window is going to load up that index dot HMO file and pass all the H.T. mail
and script tags inside there.
One of the script tags inside there is going to tell that little mini browser window to make another
request and get some JavaScript files.
In this case, a very special JavaScript file called a bundle dot G.S. file.
This bundle dodgiest file combines all the different JavaScript files that are present inside of our
project.
So it combines the index dot J.S. app field languages and translate all into one single JavaScript file.
Code Sandbox then sends that entire bundle dodgiest file back over to us.
And then all the JavaScript inside there is executed.
The key thing to take away here is that we have a little mini browser window that makes a request,
gets back and indexed on HGL file.
The HMO file has a couple of scrip tags in it that caused the mini browser window to make a followup
request and get a bunch of JavaScript and executed.
So where does that really leave us?
What does that really mean?
Well, let's take a look back inside this code.
Ed, really quickly.
Back over here, I want you to take a look at the public directory.
So that is the index dot, each nail file that gets loaded up over here on the right hand side.
So then we make that follow up request to get some different JavaScript files.
And when we get back all those JavaScript files, the first file that is executed automatically.
Is the index stopped?
J.S. file right here.
So this is the file and all the code inside of it that initially boots up our REACT application and
gets everything running from the get go.
The key line inside of here to really understand is this react, dom, dot, render a call.
So it's going to break down that line of code right there and really understand how react is starting
up our project.
OK.
Another slightly complicated diagram.
But don't worry.
Well, we will walk through it step by step.
So on the right hand side is our index dodgiest file.
And there's the react dom dot render call.
And I've split it up into a couple of different lines of code.
The first argument to react on that render is a reference to our app component or the app function,
that little color right there, or bypassing that first argument.
We're essentially telling react that we wanted to call our app function and get back all the J.S. X
we had written out inside there and then eventually go through that process of turning it into HDMI
all.
The second argument to react on that render is a reference to where we want to show our react project
inside of the index Stutt H.
T.M. file.
So here's some kind of generic HGL right here.
Inside there is a div with an I.D. of root.
And we can actually see that element if we go back over, go into that public directory and find index
dot HDL.
Once we have that file open, we can then scroll down a little bit and right here is that div.
So we are going to tell react to render our application or show all of our different components inside
of that div right there.
That is how our application first get started up.
We turn our app component into HD mail and then tell react where we want all that H.M. to be displayed.
All right, just two more quick questions here.
Inside that index dot James file.
We saw two different libraries.
One was called React and the other was called React Dom.
Why are there two libraries?
Why isn't there just one?
We're just here to learn about react anyways, right?
Well, yet again, let's take a look at a diagram.
So whenever you work with React, we we're actually working with two separate libraries.
One is called yakked.
The other is react.
Um, the React Library itself has a bunch of code inside of it that knows how to get a bunch of different
components to work together, how to call a component function, how to get back that J.
ASX and how to essentially iterate over all those elements and decide whether to create some kind of
H.M. element or whether to call some other component function.
We referred to the React Library as a reconciler.
That's the kind of technical term for it.
The other library that we're going to work with is react, um.
This is a very specialized library that knows how to take a set of instructions on different elements
that we need to create and actually create female out of it.
You can really imagine that react, Dom, is what takes all that J.S. X turns it actually into HMO and
then puts all that HDMI out into the DOM and shows it to the user.
Because React, Dom is responsible for rendering content or showing content to a user.
We refer to it as a render.
All right, last question here.
About all that you state stuff that we saw inside of our app function.
So inside of our app, dot, J.S. file, all this you state stuff right here.
OK, so you state that is a function that we make use of to work with a system in react called the state
system, the state system is all about managing data inside of your application, specifically data.
That is going to somehow change over time without going too deeply into the code we wrote out here.
You can kind of get the impression that we are trying to store some piece of data related to the language
that the user has selected and the text that a user has entered into that text input right there.
Both the value inside this text input and the language that a user selects are going to change over
time.
And that's why we are using the state system to keep track of that data.
In general, we make use of the state system.
Anytime that we want to get react to somehow update the content on the screen.
And so whenever a user type something into that text input or whenever they select a different language,
we've got some code inside of here to essentially do our translation and then update the translation
text right there.
So we're trying to use the state system to update some content on the screen.
All right.
So that is a not so fast overview on a lot of the code that we just wrote out in that sample application,
everything that we discussed in this video is not stuff you need to memorize just yet.
We're going to go over all these different topics once again.
This was just kind of a quick overview on some high level concepts.
Let's take a pause right here.
We're going to continue the next video.
We're gonna start to work on an even larger application.
Should be a lot of fun.
So I'll see you in just a minute.