1
00:00:00,850 --> 00:00:04,300
In this video I want to share a couple more facts around ASX with you.

2
00:00:04,300 --> 00:00:06,640
Throughout this course we're going to be using ASX quite a bit.

3
00:00:06,640 --> 00:00:10,450
So it's really important for you to have a solid understanding on how it works.

4
00:00:10,480 --> 00:00:10,750
OK.

5
00:00:10,780 --> 00:00:12,450
So a couple different things.

6
00:00:12,460 --> 00:00:17,950
First rule is we can assemble different JSA X elements together as though they were normal HDL elements

7
00:00:18,400 --> 00:00:21,670
so we can nest one element inside of another if we want to.

8
00:00:21,700 --> 00:00:26,440
I'm going to import another J a sex element from React Native up here right next to style sheets.

9
00:00:26,470 --> 00:00:29,430
I'll put a comma and then I'll get the view element.

10
00:00:29,860 --> 00:00:35,270
We can use the view element to position or grouped together multiple other elements inside of it.

11
00:00:35,290 --> 00:00:41,620
So I want to try using this view element to wrap this text to do so I'm going to place a view opening

12
00:00:41,620 --> 00:00:48,750
tag right in front of text then a new line and I'll place a closing view element on the other side now

13
00:00:48,810 --> 00:00:53,910
one really important thing to be aware of whenever you add in a view element like this right here whenever

14
00:00:53,910 --> 00:00:55,490
you add in that view element.

15
00:00:55,530 --> 00:01:00,720
Notice how at the end of the text statement I had a semicolon at the very end of the line as soon as

16
00:01:00,720 --> 00:01:03,540
I wrap that line with the view element react.

17
00:01:03,540 --> 00:01:08,370
Now considers this Semicolon right here to be a piece of text that we're trying to show to the user

18
00:01:08,700 --> 00:01:12,240
even though it is not technically wrapped inside of a text element.

19
00:01:12,240 --> 00:01:17,700
So if I save this I'll then see an error message on my device and it says that tech strings must be

20
00:01:17,700 --> 00:01:19,960
rendered inside of a text component.

21
00:01:20,040 --> 00:01:24,990
So we're seeing that solely because I accidentally left on that semicolon at the end of the line once

22
00:01:24,990 --> 00:01:26,820
I wrapped it with a view element.

23
00:01:27,000 --> 00:01:31,060
So to get this error message to go away I would remove that little semicolon.

24
00:01:31,380 --> 00:01:35,530
I can now see this and the error message goes away.

25
00:01:35,610 --> 00:01:40,020
So as you see we can assemble multiple different elements together just as though they were each team

26
00:01:40,020 --> 00:01:40,650
out.

27
00:01:40,860 --> 00:01:46,140
So for example if I wanted to then produce another text element I can place another text right underneath

28
00:01:46,140 --> 00:01:52,110
the existing one and I'll give it some text like Hi there this second text element right here doesn't

29
00:01:52,110 --> 00:01:53,730
have any styling applied to it.

30
00:01:53,730 --> 00:01:59,220
So it will appear as the default text styling once I save that in check out my device again we'll see

31
00:01:59,220 --> 00:02:06,440
hi there appear as rather small text on the screen sets the default styling for a text element.

32
00:02:06,490 --> 00:02:06,730
All right.

33
00:02:06,730 --> 00:02:13,390
Next up whenever we show a J OSX element we can configure it on the fly by using the props system the

34
00:02:13,390 --> 00:02:18,940
word props right here is short for properties we're already making use of one prop when we created this

35
00:02:18,940 --> 00:02:23,680
text element right here the style thing right here is an actual prop.

36
00:02:23,920 --> 00:02:28,580
So we're trying to configure this text element on the fly when the element is created.

37
00:02:28,840 --> 00:02:34,140
There are several different built in props so you need to know around text and view elements.

38
00:02:34,240 --> 00:02:39,400
In addition once we start to build our own custom components we can build them so they can accept some

39
00:02:39,400 --> 00:02:40,460
number of props.

40
00:02:40,540 --> 00:02:45,640
So you and I can customize our own components that we create for right now just understand that when

41
00:02:45,640 --> 00:02:51,130
we create a j s x element just as we are right here we can specify some configuration options and we

42
00:02:51,130 --> 00:02:54,990
refer to them as props okay.

43
00:02:54,990 --> 00:03:01,440
Next up we can refer to JavaScript variables inside of a J OS X block by using curly braces it's only

44
00:03:01,450 --> 00:03:06,460
show you a quick example of this up at the top of my function I'm going to define a new variable called

45
00:03:06,550 --> 00:03:13,590
greeting and I'll assign it the string of hi there if I now want to print out that string anywhere inside

46
00:03:13,590 --> 00:03:20,310
of my j a sex block I can refer to the variable greeting inside of a set of curly braces so for example

47
00:03:20,340 --> 00:03:28,980
if I replace either with curly braces and inside there greeting I can then save this and I'll see the

48
00:03:28,980 --> 00:03:34,140
same result appear on the screen by change it to by there just to make sure it's really working.

49
00:03:34,290 --> 00:03:36,050
Now we'll see by there.

50
00:03:36,120 --> 00:03:41,010
So any time we have a javascript variable if we want to refer to it inside of J sex we're always going

51
00:03:41,010 --> 00:03:46,320
to wrap it with some curly braces we can also say assign a number to greeting.

52
00:03:46,320 --> 00:03:51,220
So if I put in a number of like 1 two 3 and save this we'll see that number up here.

53
00:03:51,600 --> 00:03:53,450
We can also do an array of numbers.

54
00:03:53,490 --> 00:03:58,910
So like one two three or five six we'll see that full number up here.

55
00:03:58,940 --> 00:04:07,350
We can also do say an array of strings so a SDF and then BBB and I'll see that appear as well.

56
00:04:07,390 --> 00:04:13,630
The one big exception to showing some content inside of a block of J.S. X specifically inside of a text

57
00:04:13,630 --> 00:04:17,210
element is that we cannot try to show a javascript object.

58
00:04:17,260 --> 00:04:23,560
So for example if I assign an object of color is read to the variable greeting right here and then save

59
00:04:23,560 --> 00:04:25,770
it will see an error message.

60
00:04:25,770 --> 00:04:31,330
So again specifically we can not show a javascript object inside of a text element.

61
00:04:31,330 --> 00:04:34,300
Otherwise we'll see an error just like the one you see right there.

62
00:04:34,430 --> 00:04:42,760
It's going to change this back to saying greeting of the string Hi there and back to working OK.

63
00:04:42,810 --> 00:04:48,190
So now last thing we can assign JSA X elements to a variable and then show that variable inside of a

64
00:04:48,190 --> 00:04:49,630
J as X block.

65
00:04:49,750 --> 00:04:51,770
It's a very similar to what we're doing right here.

66
00:04:51,850 --> 00:04:58,240
If we wanted to we could instead create the text element up here inside here or maybe I'll say something

67
00:04:58,240 --> 00:05:04,640
like hello to you so now a j a sex element has been assigned to greeting.

68
00:05:04,850 --> 00:05:10,160
And now we're going to try to print out that J a sex element inside of here rather than trying to place

69
00:05:10,160 --> 00:05:11,480
it inside of another text element.

70
00:05:11,510 --> 00:05:16,920
I can remove that text helmet and replace it with just reading so we can really imagine that we could

71
00:05:16,920 --> 00:05:18,820
take this entire element right here.

72
00:05:18,960 --> 00:05:20,470
Copy it and paste it over.

73
00:05:20,490 --> 00:05:22,930
It's kind of like what's happening.

74
00:05:22,980 --> 00:05:27,020
All right so I can save that and we're still going to see the correct thing appear they might be kind

75
00:05:27,020 --> 00:05:30,480
of curious why we would ever want to assign a j a sex element to a variable.

76
00:05:30,600 --> 00:05:35,640
It's really simple over time we're going to want to create some J sex conditionally ahead of time so

77
00:05:35,660 --> 00:05:40,250
we might want to inspect some kind of variable and depending upon its value we might want to put in

78
00:05:40,370 --> 00:05:43,300
a text element right here or maybe an image instead.

79
00:05:43,340 --> 00:05:45,170
Who knows okay.

80
00:05:45,170 --> 00:05:47,350
So now we've got some basic rules around ASX.

81
00:05:47,360 --> 00:05:49,430
Let's take a quick pause and continue in the next video.