1 00:00:01,050 --> 00:00:03,390 ‫Many beginners get quite confused 2 00:00:03,390 --> 00:00:06,780 ‫when they start using JSX in their own code. 3 00:00:06,780 --> 00:00:11,340 ‫And in fact, JSX can be a bit tricky to understand 4 00:00:11,340 --> 00:00:12,780 ‫and to master. 5 00:00:12,780 --> 00:00:15,180 ‫But that's why I am here by your site, 6 00:00:15,180 --> 00:00:17,070 ‫helping you along the way. 7 00:00:17,070 --> 00:00:21,363 ‫And so let's quickly check out the rules of how JSX works. 8 00:00:22,830 --> 00:00:25,680 ‫Now, there are some general JSX rules 9 00:00:25,680 --> 00:00:27,060 ‫and there are some rules 10 00:00:27,060 --> 00:00:31,200 ‫about how JSX is different from HTML. 11 00:00:31,200 --> 00:00:33,900 ‫And starting with the general rules, 12 00:00:33,900 --> 00:00:38,900 ‫you should know that JSX works essentially just like HTML. 13 00:00:39,090 --> 00:00:41,940 ‫So it has a very similar syntax. 14 00:00:41,940 --> 00:00:45,000 ‫However, we can enter a JavaScript mode 15 00:00:45,000 --> 00:00:48,120 ‫by using curly braces anywhere in a markup 16 00:00:48,120 --> 00:00:53,120 ‫where a value, like text or an attribute is expected. 17 00:00:53,250 --> 00:00:55,320 ‫Now into this JavaScript mode, 18 00:00:55,320 --> 00:00:58,290 ‫we can place any JavaScript expression. 19 00:00:58,290 --> 00:01:01,200 ‫So anything that produces a value. 20 00:01:01,200 --> 00:01:05,550 ‫So we can reference variables, create arrays or objects, 21 00:01:05,550 --> 00:01:09,000 ‫we can loop over array using the map method 22 00:01:09,000 --> 00:01:10,890 ‫or we can use operators, 23 00:01:10,890 --> 00:01:13,050 ‫like the ternary operator, 24 00:01:13,050 --> 00:01:15,960 ‫what's not allowed, our statements. 25 00:01:15,960 --> 00:01:20,960 ‫So in JSX, you cannot use things like an if/else statement, 26 00:01:20,970 --> 00:01:25,470 ‫for loops, a switch or any other statement. 27 00:01:25,470 --> 00:01:28,140 ‫Now, what's super important to understand 28 00:01:28,140 --> 00:01:33,140 ‫is that a piece of JSX produces a JavaScript expression. 29 00:01:33,540 --> 00:01:35,010 ‫Or in other words, 30 00:01:35,010 --> 00:01:40,010 ‫a piece of JSX is just like any other JavaScript expression. 31 00:01:40,410 --> 00:01:43,440 ‫And this makes sense because we already learned 32 00:01:43,440 --> 00:01:46,170 ‫that JSX is simply converted 33 00:01:46,170 --> 00:01:48,540 ‫to a create element function call, 34 00:01:48,540 --> 00:01:52,350 ‫which is in fact also an expression. 35 00:01:52,350 --> 00:01:56,250 ‫Now, this fact has two important implications. 36 00:01:56,250 --> 00:01:59,160 ‫First, it means that we can place other pieces 37 00:01:59,160 --> 00:02:02,130 ‫of JSX inside the curly braces. 38 00:02:02,130 --> 00:02:04,560 ‫So inside the JavaScript note. 39 00:02:04,560 --> 00:02:06,960 ‫And again, this is only possible 40 00:02:06,960 --> 00:02:09,960 ‫because we can put any JavaScript expression 41 00:02:09,960 --> 00:02:12,210 ‫inside those curly braces 42 00:02:12,210 --> 00:02:16,740 ‫and that includes the expressions produced by JSX. 43 00:02:16,740 --> 00:02:19,080 ‫The second implication of the fact 44 00:02:19,080 --> 00:02:21,900 ‫that JSX produces an expression 45 00:02:21,900 --> 00:02:26,490 ‫is that we can write JSX anywhere inside a component. 46 00:02:26,490 --> 00:02:29,490 ‫For example, we can assign a piece of JSX 47 00:02:29,490 --> 00:02:33,030 ‫to a variable like in this code snippet. 48 00:02:33,030 --> 00:02:36,120 ‫We can also use it inside in if/else statement, 49 00:02:36,120 --> 00:02:39,273 ‫pass it into functions and many other things. 50 00:02:40,140 --> 00:02:45,140 ‫Finally, a piece of JSX can only have one root element. 51 00:02:45,180 --> 00:02:48,060 ‫So basically, one parent element. 52 00:02:48,060 --> 00:02:50,490 ‫If you need more than that, for example, 53 00:02:50,490 --> 00:02:54,090 ‫when you need to return two elements from a component, 54 00:02:54,090 --> 00:02:57,060 ‫you can use something called a React Fragment, 55 00:02:57,060 --> 00:02:59,013 ‫which we will talk about later. 56 00:03:00,000 --> 00:03:02,760 ‫Okay, and now let's see the differences 57 00:03:02,760 --> 00:03:06,540 ‫between JSX and regular HTML. 58 00:03:06,540 --> 00:03:09,690 ‫Now, I will actually not go through this entire list here 59 00:03:09,690 --> 00:03:13,470 ‫at this point because these are just some very simple, 60 00:03:13,470 --> 00:03:15,180 ‫straightforward rules, 61 00:03:15,180 --> 00:03:18,480 ‫which are best explored by using code. 62 00:03:18,480 --> 00:03:21,000 ‫But I still wanted to include this list 63 00:03:21,000 --> 00:03:23,430 ‫in this slide here, so that you can keep it 64 00:03:23,430 --> 00:03:26,493 ‫as a reference when you download these slides. 65 00:03:27,330 --> 00:03:29,940 ‫So again, we will encounter these rules 66 00:03:29,940 --> 00:03:31,650 ‫as we keep writing code, 67 00:03:31,650 --> 00:03:34,383 ‫which is exactly what we're gonna do now.