1
00:00:02,280 --> 00:00:04,080
The first common concern that I hear is

2
00:00:04,080 --> 00:00:08,440
that JSX differs from HTML. As I showed

3
00:00:08,440 --> 00:00:10,760
earlier, React uses an optional syntax

4
00:00:10,760 --> 00:00:13,950
that looks a lot like HTML called JSX. I

5
00:00:13,950 --> 00:00:16,200
say optional because JSX needs to be

6
00:00:16,200 --> 00:00:18,445
compiled down to plain JavaScript so that

7
00:00:18,445 --> 00:00:20,840
the browser can understand it. The code on

8
00:00:20,840 --> 00:00:22,840
the bottom is what is sent to the browser,

9
00:00:22,840 --> 00:00:25,210
so you're free to just use this syntax on

10
00:00:25,210 --> 00:00:27,850
the bottom if you prefer. But most people

11
00:00:27,850 --> 00:00:30,670
prefer using JSX since it feels extremely

12
00:00:30,670 --> 00:00:34,110
similar to HTML, and it's easier to read.

13
00:00:34,110 --> 00:00:38,580
Now JSX's syntax is 99% the same as HTML,

14
00:00:38,580 --> 00:00:41,440
but it does differ in a few ways, such as

15
00:00:41,440 --> 00:00:45,470
htmlFor instead of for and className

16
00:00:45,470 --> 00:00:48,890
instead of class. Inline styles are

17
00:00:48,890 --> 00:00:51,780
declared in JSON format. And finally,

18
00:00:51,780 --> 00:00:54,260
comments are handled in JavaScript style

19
00:00:54,260 --> 00:00:57,300
instead of HTML style. So as you can see,

20
00:00:57,300 --> 00:01:00,660
learning JSX's differences is trivial. The

21
00:01:00,660 --> 00:01:02,490
list of differences is quite short and

22
00:01:02,490 --> 00:01:06,250
thus easy to adopt. Now maybe you're still

23
00:01:06,250 --> 00:01:08,140
worried, but I have a lot of existing

24
00:01:08,140 --> 00:01:10,510
HTML. Won't that be a hassle to convert

25
00:01:10,510 --> 00:01:13,620
into JSX? Well the good news is, that's

26
00:01:13,620 --> 00:01:15,420
easy. There are multiple ways to handle

27
00:01:15,420 --> 00:01:18,920
it. Honestly, since there are only a few

28
00:01:18,920 --> 00:01:21,460
differences between HTML and JSX, I

29
00:01:21,460 --> 00:01:24,060
typically convert existing HTML with a

30
00:01:24,060 --> 00:01:26,550
simple find and replace. The list of

31
00:01:26,550 --> 00:01:28,500
differences is so small that it typically

32
00:01:28,500 --> 00:01:30,980
only takes me a moment. But there's also

33
00:01:30,980 --> 00:01:34,840
an online HTML to JSX compiler and an npm

34
00:01:34,840 --> 00:01:40,240
package called htmltojsx that you can use.

35
00:01:40,240 --> 00:01:43,120
With this online HTML to JSX compiler, you

36
00:01:43,120 --> 00:01:45,020
enter your HTML on the left, and it

37
00:01:45,020 --> 00:01:47,740
displays the resulting JSX on the right.

38
00:01:47,740 --> 00:01:49,450
As you can see, the two sides are quite

39
00:01:49,450 --> 00:01:51,620
similar, but I deliberately created an

40
00:01:51,620 --> 00:01:54,010
example on the left to show the core

41
00:01:54,010 --> 00:01:58,620
differences. Now if you have a lot of HTML

42
00:01:58,620 --> 00:02:00,650
to convert to JSX, you can convert it in

43
00:02:00,650 --> 00:02:04,890
bulk using the htmltojsx package on npm.

44
00:02:04,890 --> 00:02:06,690
This is a command line tool, and it uses

45
00:02:06,690 --> 00:02:08,140
the same code that's running behind the

46
00:02:08,140 --> 00:02:11,740
scenes on the online HTML to JSX compiler

47
00:02:11,740 --> 00:02:14,120
that I just showed you. So you can point

48
00:02:14,120 --> 00:02:20,000
this at a set of files and convert your HTML in bulk.

