In this video I want to share a couple more facts around ASX with you.
Throughout this course we're going to be using ASX quite a bit.
So it's really important for you to have a solid understanding on how it works.
OK.
So a couple different things.
First rule is we can assemble different JSA X elements together as though they were normal HDL elements
so we can nest one element inside of another if we want to.
I'm going to import another J a sex element from React Native up here right next to style sheets.
I'll put a comma and then I'll get the view element.
We can use the view element to position or grouped together multiple other elements inside of it.
So I want to try using this view element to wrap this text to do so I'm going to place a view opening
tag right in front of text then a new line and I'll place a closing view element on the other side now
one really important thing to be aware of whenever you add in a view element like this right here whenever
you add in that view element.
Notice how at the end of the text statement I had a semicolon at the very end of the line as soon as
I wrap that line with the view element react.
Now considers this Semicolon right here to be a piece of text that we're trying to show to the user
even though it is not technically wrapped inside of a text element.
So if I save this I'll then see an error message on my device and it says that tech strings must be
rendered inside of a text component.
So we're seeing that solely because I accidentally left on that semicolon at the end of the line once
I wrapped it with a view element.
So to get this error message to go away I would remove that little semicolon.
I can now see this and the error message goes away.
So as you see we can assemble multiple different elements together just as though they were each team
out.
So for example if I wanted to then produce another text element I can place another text right underneath
the existing one and I'll give it some text like Hi there this second text element right here doesn't
have any styling applied to it.
So it will appear as the default text styling once I save that in check out my device again we'll see
hi there appear as rather small text on the screen sets the default styling for a text element.
All right.
Next up whenever we show a J OSX element we can configure it on the fly by using the props system the
word props right here is short for properties we're already making use of one prop when we created this
text element right here the style thing right here is an actual prop.
So we're trying to configure this text element on the fly when the element is created.
There are several different built in props so you need to know around text and view elements.
In addition once we start to build our own custom components we can build them so they can accept some
number of props.
So you and I can customize our own components that we create for right now just understand that when
we create a j s x element just as we are right here we can specify some configuration options and we
refer to them as props okay.
Next up we can refer to JavaScript variables inside of a J OS X block by using curly braces it's only
show you a quick example of this up at the top of my function I'm going to define a new variable called
greeting and I'll assign it the string of hi there if I now want to print out that string anywhere inside
of my j a sex block I can refer to the variable greeting inside of a set of curly braces so for example
if I replace either with curly braces and inside there greeting I can then save this and I'll see the
same result appear on the screen by change it to by there just to make sure it's really working.
Now we'll see by there.
So any time we have a javascript variable if we want to refer to it inside of J sex we're always going
to wrap it with some curly braces we can also say assign a number to greeting.
So if I put in a number of like 1 two 3 and save this we'll see that number up here.
We can also do an array of numbers.
So like one two three or five six we'll see that full number up here.
We can also do say an array of strings so a SDF and then BBB and I'll see that appear as well.
The one big exception to showing some content inside of a block of J.S. X specifically inside of a text
element is that we cannot try to show a javascript object.
So for example if I assign an object of color is read to the variable greeting right here and then save
it will see an error message.
So again specifically we can not show a javascript object inside of a text element.
Otherwise we'll see an error just like the one you see right there.
It's going to change this back to saying greeting of the string Hi there and back to working OK.
So now last thing we can assign JSA X elements to a variable and then show that variable inside of a
J as X block.
It's a very similar to what we're doing right here.
If we wanted to we could instead create the text element up here inside here or maybe I'll say something
like hello to you so now a j a sex element has been assigned to greeting.
And now we're going to try to print out that J a sex element inside of here rather than trying to place
it inside of another text element.
I can remove that text helmet and replace it with just reading so we can really imagine that we could
take this entire element right here.
Copy it and paste it over.
It's kind of like what's happening.
All right so I can save that and we're still going to see the correct thing appear they might be kind
of curious why we would ever want to assign a j a sex element to a variable.
It's really simple over time we're going to want to create some J sex conditionally ahead of time so
we might want to inspect some kind of variable and depending upon its value we might want to put in
a text element right here or maybe an image instead.
Who knows okay.
So now we've got some basic rules around ASX.
Let's take a quick pause and continue in the next video.