Unless section we started working on our first re-act component remember a component is something that
produces some amount of text or content that we can render on the screen of our mobile device.
We're going to continue working on this component in this section as well.
As I said previously I'm a big fan of understanding every single line of code that we put into our code
editor.
So as we continue through the course we're going to have a lot of long discussions about every piece
of code just like we didn't last section but as we cover each topic will significantly speed up the
pace.
One of my favorite aspects of react is that the library is just has a tiny API.
There's not a lot of ways to work with it.
So once you learn those ways you can make some pretty awesome apps without worrying about a whole bunch
of complexity.
Anyways just real quick aside.
So Step two on our three part journey of making our first component is to actually create the components
self we've already imported some amount of code to help create it and now we need to actually make the
component remember that component is an object that produces something that can be placed on the screen
of our mobile device.
So to define a component we write out a javascript function.
This function must return some object that describes what it should look like on our device.
So we're going to write out our first component and it's going to be a function we're going to call
this function app because we called it app right here.
We will refer to it as the app component for our device.
Next we're going to add a little bit of code in here that is going to look a little strange but we'll
discuss its purpose immediately.
OK.
So right out return I'm going to place some parentheses and then in-between those two parentheses right
here.
All right.
What looks like HVM out.
We use what we refer to as the text tag.
And then inside of that text tag placed the just the content some text right here.
So let's now stop again.
You know when you're writing a lot of single lines of code and and talk you know what they do.
Let's talk about what is happening right here.
So this bit of code tells re-act native that we want to render some text to the screen of our device.
But you know that's not the weird part here.
The weird part is that this certainly looks like H.T. mail that is being written inside of our javascript.
Right we've got AIDS team looking TOG's right here.
So you might be thinking Steven you know why are we writing CML in our javascript are mobile devices
and even rendering HD you know.
And that's totally correct.
We are not writing a e-mail here.
We are instead writing a dialect of javascript called GSX GSX is an extension to the javascript language
that is used to write re-act components.
In practice GSX follows the same semantics of HCM out.
We have opening and closing tags so we have opening closing and the name of the text is used within
a set of brackets.
Finally some content is placed between the opening and closing tag.
When we place one tag inside of another we refer to that as nesting or if we place some text within
a tag.
We also refer to this as nesting some content in here will be using GSX throughout this course as it
is our one and only way to communicate with re-act native to of about what we want our app to look like
on the screen of the mobile device.
So the last thing I want to mention here about GSX is that even though it looks like each team it is
still javascript that we're writing GSX exists only to make our lives easier.
As a developer it's really just syntactic sugar to make our code a little bit more legible.
To prove this to you I'm going to open up my browser and I'm going to navigate to Babel.
J.S. IO battle is a tool that takes GSX and turns it into normal Javascript.
So up at the top center here and click on try it out and this will take us to the battle of Ruppel.
So if we place some amount of GSX on the left hand side it will turn it into raw javascript on the right
hand side.
So on the left hand side is the JSF So we might write inside of a component and on the right hand side
is the compile javascript that is actually what is being executed on our mobile device.
Notice how in this case I've already got some amount of GSX on the screen.
I have a single text tag and within that I've got several other text tags and when this all gets converted
into X it turns in a series into a series of calls to react Daut create element.
So this is like the big surprise here.
Jase X is really just a mask over normal function calls.
As I said earlier we use GSX just to make our lives easier.
So even though you know you might think to yourself well why don't we just write a series of re-act
create element calls and the answer to that is as we start to get more tags on the screen you know as
we add more tags to our component it starts to turn into a big mess to function calls.
So the authors of the re-act library realized well nobody really wants to write a whole bunch of calls
a function calls to react create element.
It's a lot easier to read a whole bunch of nested H.T. now or you know what looks like is over here
on the left hand side.
So that is the sole purpose of GSX is just to make the code that we're working with appear a little
bit more legible on the screen.
OK so let's do a wrap up here and this in this section we wrote our first component a component is a
javascript function that returns some amount of GSX in turn.
GSX is a dialect of javascript that tells re-acclimate of what content we want to show on the screen.
In this case we created a text tag and inside that text tag we placed just the string some text which
presumably is going to tell Riak native to render like you just this text on the screen.
So let's continue the next section and figure out how to render this component on our device or how
to make it appear on the screen of our device.