In the last video we wrote out a lot of code to get a component visible on the screen of our device.
Now in this video I want to take a quick pause and review some the code that we've written out in particular
I think that you might have a couple of different questions about the code we just wrote.
So I want to go over a couple of different common questions right here and provide a couple of different
answers for each one.
So first off what's that text thing that we imported inside of our component screen Doc J.S. file.
I'm talking about this text thing right there.
So that text thing is what we refer to as a primitive react element primitive react elements are provided
by the React Native library.
They allow us to show some amount of basic content to a user so a text element is a primitive react
element that shows some very basic text to a user.
There are several other primitive elements that you need to be aware of.
We're going to look at these over time.
Another primitive element is called a view a view allows us to show kind of some general grouping element
that can assemble different elements together and provide some styling to them.
We also have a primitive element called an image that we can use to show an image to a user or a button
that shows a button.
There are several other primitive elements you need to be aware of.
And as I mentioned we'll go over these over time Okay next up.
What's that.
Each team will looking stuff we refer to it as J.S. X..
So I'm talking specifically as this text tag right there.
So this is what we refer to as J.S. X..
This is not technically valid javascript when you write out this code right here.
It then passes into that React Native bundler that's running inside of our terminal that bundler is
using a tool called Babble to turn this J sex into some plain javascript code.
So let me show you exactly what that line right there turns into when we convert it into normal javascript.
So I'm going to copy that J a sex element right there.
The entire text element and then going to go over to a Web site called Babble J.S. dot Io.
So this is a tool that is being used by the react native bundler to turn our code into plain JavaScript
as opposed to the J.S. sex we fed into it on this page.
In particular on the left hand side I can enter in some J.S. sex and we'll show me the resulting javascript
on the right hand side.
So I'm gonna paste in that text element and we'll see the results over here.
So as you can see a j a sex element gets turned into a normal function call.
Nothing weird about this whatsoever is just a normal function call to a function called react dot create
element.
So why do we use gay sex.
Well as you're going to see very soon when we put together react components we frequently write out
many different J.S. sex elements like this one right here.
If we were to write out all those different JS sex elements instead as normal function calls like this
it would result in a component that's really hard to make changes to and really hard to modify and maintain
over time.
So instead we make use of this J.S. sex syntax just to make our lives as developers a little bit easier.
That's pretty much it.
We'll talk more about the rules around J.S. sex very soon.
OK.
So next big question you might have.
What's that app navigator or the navigator thing in general inside the app.
J.S. file okay so back inside of app dot J.S. Right here.
Remember we've got this great stack navigator function this navigator stuff that you see inside the
app dot J.S. file as I mentioned I wrote this out ahead of time just to save us a little bit of complexity
all that navigator stuff is from a tool called react navigation.
This is a library that's used in a ton of different react native projects for handling navigation.
When we talk about navigation we're really discussing about showing different content to the user so
making it appear as though there are different screens of content inside of our application.
We're going to learn about react navigation over time and eventually we're going to wire all this stuff
up from scratch on a future application.
All right.
Final question.
What's that Stiles thing back inside of our component file.
All right.
So back inside of component screen out J.S. I'm talking about this Stiles object right here so just
to be clear because you might have seen a different way of applying styling to an element on some other
react native content maybe another tutorial or a blog post.
We are not strictly required to apply styling to an element using this style secret function call right
here.
The only reason we use style she does create is that it will automatically validate the different styling
rules that we're trying to apply to an element.
Let me show you what I mean.
I'm going to pull my application back on the screen really quickly and I want you to notice that I've
got a font size property right here.
So as you might guess we're trying to use this rule to change the font size of our text element in order
to change the font size.
We have to pass in a property that is specifically font size with a capital S..
So if we change the spelling of this or even the capitalization the rule will not be applied correctly.
So for example if I change font size to have a lowercase s instead and then save this I'll very quickly
see an error message appear.
So it says font size is not a valid style property.
This validation in the Big Red error message that you're seeing right here is provided by this style
she does create function now just to show you a little technicality very quickly.
I'm going to come in out that styles object and then up here on my text element rather than referencing
styles dot textile.
I'm going to delete that and replace it with a plain javascript object to notice I now have two sets
of curly braces and then inside of here I'll say font size of 30 like so so if we want to we can't technically
pass a styling object directly into a J OSX element and everything's going to work just fine.
In addition if we make a typo inside there I instead put in like font size with a lowercase S. we're
still going to see not an error not a big red error message but we will see a warning down here at the
bottom that has essentially the same message something telling us hey we did something incorrectly so
this style she does create function right here.
We're only using because it shows a big red error message to us that tells us immediately right away
that we did something poorly with styling inside of some given component.
So it's an immediate signal to you and I that we need to go and figure out what we did incorrectly and
the only reason I show you this alternate way of applying styling is just to let you know that if we
don't want to always have to create this big style sheet object down here we always have a kind of escape
hatch.
We'll talk about why we might want to pass what we refer to as an inline style right here.
Overtime for now I'm going to undo these changes I made so I'm go into uncommon that and I'll change
this back to styles dot text style and I'm back to you.
Whoops let me change the font size here as well.
There we go.
That's better.
OK so that's the style she does create function.
Again we use it because it's going to validate the different rules that we're trying to apply to some
given element.
All right now that we've gone over a couple of different questions that you might have right here.
Let's continue working on our first full application in the next video.