1 00:00:01,870 --> 00:00:02,440 All right. 2 00:00:02,440 --> 00:00:03,520 We come back. 3 00:00:03,820 --> 00:00:08,650 In this video, let's see how to create G. 4 00:00:08,740 --> 00:00:10,090 S X. 5 00:00:10,330 --> 00:00:21,670 So it simply means that how we can write JavaScript in combination with a HTML in react component. 6 00:00:22,150 --> 00:00:23,950 So let's get rockin. 7 00:00:23,950 --> 00:00:25,630 Well, this is where we left. 8 00:00:25,630 --> 00:00:29,980 So let me collapse everything and then start from scratch. 9 00:00:30,460 --> 00:00:33,140 Well, let's bring it. 10 00:00:33,160 --> 00:00:40,900 Let's remove the bottom component, because we are going to use a mean class based component. 11 00:00:40,900 --> 00:00:42,790 So let me trash this one. 12 00:00:43,120 --> 00:00:49,150 And now application will crash, don't worry, because that bottom component doesn't exist in the end. 13 00:00:49,180 --> 00:00:51,470 The HTML5 sorry, in this dot. 14 00:00:51,520 --> 00:00:51,960 Yes. 15 00:00:51,970 --> 00:00:52,810 As far here. 16 00:00:53,440 --> 00:01:02,140 So let's replace that one with our app and now let's remove the button because it doesn't exist anymore. 17 00:01:02,170 --> 00:01:05,349 So now React is happy. 18 00:01:06,010 --> 00:01:10,210 Well, how can you create J as X? 19 00:01:10,210 --> 00:01:11,980 And we have done it before. 20 00:01:11,980 --> 00:01:15,010 So let's get to the component that is the app. 21 00:01:15,040 --> 00:01:17,380 So here, let's remove this one. 22 00:01:17,380 --> 00:01:18,730 Let's close now. 23 00:01:18,760 --> 00:01:19,530 There you go. 24 00:01:19,540 --> 00:01:29,650 You could see that we have already created what is called Gsx and that is this. 25 00:01:30,520 --> 00:01:32,780 So that is Gsx for you, right? 26 00:01:32,800 --> 00:01:40,660 So in React Gsx is used to define how a component should render. 27 00:01:41,080 --> 00:01:48,760 We can create element by using the gsx syntax well and the technical term here to understand is called 28 00:01:48,790 --> 00:01:50,830 react element. 29 00:01:51,040 --> 00:01:55,810 Guys, remember back to HTML and CSS. 30 00:01:56,320 --> 00:02:01,420 We call something a HTML element in react. 31 00:02:01,600 --> 00:02:03,100 You call it as what? 32 00:02:03,100 --> 00:02:05,340 React element. 33 00:02:05,350 --> 00:02:09,639 So in a normal html, what is a HTML element? 34 00:02:10,060 --> 00:02:20,800 A html element simply means the combination of attack and a content makes up what I mean a html element. 35 00:02:20,800 --> 00:02:25,270 So in a normal html we call this one. 36 00:02:25,300 --> 00:02:28,420 We will call this one as. 37 00:02:29,480 --> 00:02:37,370 Atmo element but in react we called us what react element. 38 00:02:37,430 --> 00:02:40,460 So it simply means that J. 39 00:02:40,490 --> 00:02:44,600 S X produces react. 40 00:02:45,880 --> 00:02:46,830 Element. 41 00:02:46,840 --> 00:02:47,800 That is it. 42 00:02:48,040 --> 00:02:59,380 Well, so the cool thing about Gsx is that we can write JavaScript inside this and then then don't worry, 43 00:02:59,380 --> 00:03:00,850 we get back into that. 44 00:03:00,850 --> 00:03:10,460 So here we can create a variable second and called us element here and then is equal to the sum around 45 00:03:10,460 --> 00:03:12,040 to create let's say. 46 00:03:12,220 --> 00:03:15,930 I mean h two elements here. 47 00:03:15,940 --> 00:03:18,910 H two now I'll call this one. 48 00:03:18,910 --> 00:03:25,720 This is my first gsx syntax. 49 00:03:27,450 --> 00:03:29,070 Like that. 50 00:03:29,880 --> 00:03:30,290 Great. 51 00:03:30,300 --> 00:03:38,310 So now I can replace this one with my element because it wants to retaining the element to be displayed. 52 00:03:38,490 --> 00:03:39,400 Check it out. 53 00:03:39,420 --> 00:03:44,340 This is my first g x syntax. 54 00:03:44,370 --> 00:03:45,410 Great. 55 00:03:45,420 --> 00:03:46,800 I are happy with that. 56 00:03:47,160 --> 00:03:50,550 Oh, boy, that is how it is. 57 00:03:50,940 --> 00:03:54,090 Well, there is more into this. 58 00:03:54,390 --> 00:04:00,250 So now that we know how to create JSON syntax like this one, the next video. 59 00:04:00,270 --> 00:04:08,670 Let's go ahead and talk about how we can Nest Genesis or Nest Element and react gsx. 60 00:04:09,220 --> 00:04:11,930 Let's say that you want to add more content in the mix. 61 00:04:11,940 --> 00:04:18,720 For example, I want to add let's see p tag here and then I would add some more tax here if I do that 62 00:04:18,720 --> 00:04:18,990 one. 63 00:04:18,990 --> 00:04:27,600 Let's see if I add P element here and see that hey, let's say hey this up, not this one. 64 00:04:27,960 --> 00:04:30,360 Hey, this is mine. 65 00:04:30,750 --> 00:04:31,980 It's working now. 66 00:04:31,980 --> 00:04:34,770 It doesn't render, right? 67 00:04:34,770 --> 00:04:39,480 So the next video, I'm going to talk about how we can nest. 68 00:04:40,540 --> 00:04:43,490 Element in react g. 69 00:04:43,840 --> 00:04:44,440 S. 70 00:04:44,470 --> 00:04:45,250 X.