In the section we're going to continue working on the index file file We're going to focus on creating
a Riak component for we do that whoever I want to very quickly tell you about exactly what a Riak component
is.
All right so quick diagram orea component is a function or a class back on code with that quick example
we did a while ago you saw an example of a class based component where we can also create them as a
function.
The purpose of a component that is either a function or a class is to produce each TNL that we're going
to show to the user.
Its secondary purpose is to handle feedback from the user.
So for example any time user clicks or types or Drac's or any type of event like that in order to produce
content or e-mail the show the user We're going to write out some amount of GSX remember GSX that stuff
that kind of looks like HD CML in order to handle feedback from the user.
Remember we're going to use those things called event handlers.
We'll talk about this other step right here handling feedback a little bit later on.
Right now our focus is just on showing content to the user and using some amount of GSX.
So let's now flip back over to our index such as file and underneath this comment we're going to create
a new function component.
So I going to say Konst app is equal to a function
and inside if you're going to return a div that has the text Hi there like so.
And that's it.
That is a function based component right there.
Now this is a component that is using a function with the function keyword.
You will very frequently see this rewritten using a yes 2015 ero function instead it would look a little
like that rather than putting the function keyword we put in ero which is the equals and then greater
sign on the other side of the parentheses.
Then inside of the function component we return a little bit of GSX right here.
So now that we've got a function based component put together we're going to take that component and
we're going to show it on the screen in our browser so to do so I'm going to add a little bit more code
down here at the bottom.
I'm going to say re-act Dom member Dom has capital D O M render and then I'm going to open up a function
call and I'm going to expand it like so just give myself a little bit more space to type for the first
argument.
I'm going to take that app component that we just created and I'm going to put it into GSX tax or essentially
looks like h t m l Tex.
So I'll put an app like so or then put a comma for my second argument and the second argument is going
to be a reference to a dom element that already exists inside of our HMO file.
We might pause right there and say seaven wait what HMO filed what its email file.
Well we haven't really spoken about it just yet.
But you'll notice that inside that public directory We have a index done HTL file right now.
Anytime that someone goes to localhost three thousand they get sent this HTL file right here inside
the sage D-Mo. file.
You can scroll down to the body and inside the body you'll see that there is a div with an ID of root.
Convention in a create re-act out generated application.
We're going to take our component and render it or display it inside of this div with ID root right
here.
So we need to essentially get a reference to this div with ID roots and then we are going to pass it
as the second argument to the rock Dom render call back over here inside of our index such as file to
do so.
I'm going to write out document queries selector and I'll pass a string with pounde root like so.
So that call right there is going to get a reference to that div with an ID of roots.
This is a built in native function that is available in all browsers.
So we don't have to import anything or do anything like that in order to use it.
OK so that's pretty much it.
That is the three steps we have to go through to get some content to appear on our browser.
Let's now save this file.
Not just you know when I saved this file you might see my code jump just a little bit because I have
a automatic code formatter.
Yep there it is.
So it just did a little jump right there just reformatted itself.
Still the exact same stuff.
It just condensed down to one line.
Now that I saved this file I should be able to flip back over to my browser at localhost 3000 and I'll
see the content being produced from our function based component appear on the screen.
It says simply Hi there.
OK.
So that's pretty much it.
That's how we get some content to appear on the screen.
We import react and react Domm we create a real component and then we take that component and show it
on the screen using the re-act Dom library.
So now we've got a little scaffold here.
We're going to take a pause come back the next section and start to learn a lot more about sex and how
we interact with it.
So quick pause and I'll see you in just a minute.