WEBVTT

1
00:00:00.160 --> 00:00:01.420
Hi and welcome back.

2
00:00:01.440 --> 00:00:05.570
In this video we're going to talk
about JSX in react native.

3
00:00:05.600 --> 00:00:09.540
You can notice that actually just switched
from my Visual Studio code editor

4
00:00:09.570 --> 00:00:13.740
to Webstorm, and this is what I'm
going to be using moving forward.

5
00:00:13.770 --> 00:00:18.780
And now let's get to the topic
and talk about what is JSX.

6
00:00:18.810 --> 00:00:24.740
JSX stands for JavaScript XML and it's
a syntax extension for JavaScript

7
00:00:24.760 --> 00:00:29.980
that allows you to write HTML like
code in your JavaScript files.

8
00:00:30.010 --> 00:00:37.500
So if we go to app JS, this will be full
of the examples of where we use JSX.

9
00:00:37.530 --> 00:00:41.300
For example, all of this is using JSX.

10
00:00:41.330 --> 00:00:46.200
But I would like to make
a more concrete example for you and we're

11
00:00:46.230 --> 00:00:51.700
going to start coding and see
how JSX actually looks like.

12
00:00:51.730 --> 00:00:58.400
So let's get rid of some of the items
that we don't need from here.

13
00:00:59.320 --> 00:01:02.980
Great, we don't need this component,
let's get rid of it.

14
00:01:03.010 --> 00:01:06.570
And this is not going to be TypeScript

15
00:01:06.600 --> 00:01:10.050
anymore, so we're not
going to be needing this.

16
00:01:10.080 --> 00:01:19.260
Let's just make this a constant and use
ES6 function to define this constant.

17
00:01:19.290 --> 00:01:21.130
We don't need these styles.

18
00:01:21.160 --> 00:01:23.260
Yes, we can export the app.

19
00:01:23.290 --> 00:01:26.210
We won't need this constants here either.

20
00:01:26.240 --> 00:01:30.660
And let's just return null so far.

21
00:01:30.690 --> 00:01:32.290
Okay, so let's save this.

22
00:01:32.320 --> 00:01:36.420
This was automatically formatted
for me, as you see and great.

23
00:01:36.450 --> 00:01:40.380
Now let's dive into JSX.

24
00:01:40.410 --> 00:01:43.020
With JSX, you can write your UI code

25
00:01:43.050 --> 00:01:46.980
directly in your JavaScript files,
which makes it easier to understand how

26
00:01:47.010 --> 00:01:51.460
your UI is structured and how it
interacts with your application logic.

27
00:01:51.490 --> 00:01:56.460
Plus, since JSX is just JavaScript,
you can use all the features of JavaScript

28
00:01:56.490 --> 00:02:00.930
to manipulate your UI like variables,
loop and conditionals.

29
00:02:00.960 --> 00:02:04.900
Now let's take a look at how
JSX works in react native.

30
00:02:04.930 --> 00:02:09.860
When you write JSX code,
it gets transformed into calls to react

31
00:02:09.890 --> 00:02:14.700
create element by a tool
called the JSX transformer.

32
00:02:14.730 --> 00:02:19.220
This happens during the build process,
so your mobile app only ever sees

33
00:02:19.250 --> 00:02:22.780
the plain JavaScript code
generated by the transformer.

34
00:02:22.810 --> 00:02:27.300
For example, let's say you have
a react native hello world project.

35
00:02:27.330 --> 00:02:32.340
And let's say that you have imported

36
00:02:32.370 --> 00:02:40.340
a text component from react native and all

37
00:02:40.370 --> 00:02:45.780
you do here is just display hello world.

38
00:02:45.810 --> 00:02:50.140
This is using JSX syntax.

39
00:02:50.170 --> 00:02:53.900
Now if you wanted to create the same thing

40
00:02:53.930 --> 00:03:00.610
without the use of JSX,
your code would look something like this

41
00:03:00.640 --> 00:03:06.820
react create element and then you would
say what kind of element you want

42
00:03:06.850 --> 00:03:12.660
to create and then you would pass
the text hello world.

43
00:03:12.690 --> 00:03:15.740
So this is way harder to read,

44
00:03:15.770 --> 00:03:18.420
especially if you're going
to have nested components.

45
00:03:18.450 --> 00:03:21.900
Imagine there's a container such as div

46
00:03:21.930 --> 00:03:26.260
called Views that we're going
to go over in upcoming lessons.

47
00:03:26.290 --> 00:03:29.380
But if you wanted to wrap this inside

48
00:03:29.410 --> 00:03:36.860
the view, then you would have to return
something even more complicated like this.

49
00:03:36.890 --> 00:03:39.980
You would say that you
want it wrapped in view.

50
00:03:40.010 --> 00:03:47.260
And imagine how large this could get when
something like this could be written as

51
00:03:47.290 --> 00:03:53.980
simply as this using JSX
and it's easy to read.

52
00:03:54.010 --> 00:03:58.220
It does resemble HTML as well,

53
00:03:58.250 --> 00:04:05.260
so it is just easier to understand
and manipulate your UI code like this.

54
00:04:05.290 --> 00:04:08.100
The JSX transformer would transform this

55
00:04:08.130 --> 00:04:14.500
code into plain JavaScript that we just
saw and your compiler or mobile app

56
00:04:14.530 --> 00:04:21.180
actually would see the transpiled
code and display it as needed.

57
00:04:21.210 --> 00:04:24.060
So this is what JSX is.

58
00:04:24.090 --> 00:04:25.820
Thanks so much for watching.

59
00:04:25.840 --> 00:04:26.880
See you in the next video.