1 00:00:00,990 --> 00:00:08,550 In this video, we are going to learn how we can embed expressions in GSIS. 2 00:00:08,970 --> 00:00:10,380 All right, great. 3 00:00:10,620 --> 00:00:14,790 So let's remove our statement and expression from here. 4 00:00:15,640 --> 00:00:16,300 All right. 5 00:00:16,300 --> 00:00:19,390 So this is how we are going to do. 6 00:00:19,930 --> 00:00:26,000 We are going to create a component just to greet somebody, a user. 7 00:00:26,020 --> 00:00:27,910 So let's go ahead and create one quickly. 8 00:00:27,910 --> 00:00:36,520 So here inside my component, let's create one file and call this one as message dot, just like that. 9 00:00:36,520 --> 00:00:41,050 So let's quickly create a function const message. 10 00:00:42,390 --> 00:00:43,620 Is. 11 00:00:44,430 --> 00:00:46,530 Equal to every function. 12 00:00:46,530 --> 00:00:49,800 And this function is going to retain some G's here. 13 00:00:50,310 --> 00:00:59,100 So let me quickly export the function export default menu component, which is message. 14 00:00:59,220 --> 00:01:07,050 So when working with React, it is often necessary to insert JavaScript expressions into your code. 15 00:01:07,410 --> 00:01:12,430 These are known as embedding or interpreting expressions. 16 00:01:12,450 --> 00:01:18,120 There are a few ways to do this, but the most common one is to use a carry braces. 17 00:01:18,150 --> 00:01:19,950 This might look something like this one. 18 00:01:19,950 --> 00:01:21,240 So let me show you what I mean here. 19 00:01:21,540 --> 00:01:27,750 So this component is just going to take a name and then display to the user. 20 00:01:28,110 --> 00:01:32,990 So here we can declare a variable cost name. 21 00:01:33,000 --> 00:01:34,680 Let me make it larger here. 22 00:01:34,710 --> 00:01:38,520 Like that name is equal to John. 23 00:01:39,770 --> 00:01:44,460 Okay, John, here and now for my gsx here. 24 00:01:44,510 --> 00:01:50,270 What I'm going to do is that I need to bring and then my div like. 25 00:01:51,040 --> 00:01:51,360 Occurrence. 26 00:01:51,490 --> 00:01:54,190 Each one for the for this one is hh1. 27 00:01:54,610 --> 00:02:02,320 Remember, if you have only one element here, I have installed extension called Pythia and is going 28 00:02:02,320 --> 00:02:04,450 to format it input on one line. 29 00:02:04,450 --> 00:02:12,400 So if I save this one select as remove the basis because there is only one JCS or element here. 30 00:02:12,430 --> 00:02:16,960 If you have multiple element, for example, you can add, let's say P tag inside. 31 00:02:17,230 --> 00:02:19,990 Inside here if I save it is to remain the same. 32 00:02:19,990 --> 00:02:23,110 But if you have only one element, it moved in this line. 33 00:02:23,110 --> 00:02:26,920 So if I save this one is the same as this. 34 00:02:26,920 --> 00:02:28,270 Okay, don't worry. 35 00:02:28,540 --> 00:02:31,060 So how can we embed this one? 36 00:02:31,060 --> 00:02:35,620 For the meantime, let's try to call this component. 37 00:02:35,650 --> 00:02:38,440 It's the first time we are calling a component. 38 00:02:38,440 --> 00:02:42,610 For now, I don't want to worry about how we are passing components around. 39 00:02:42,610 --> 00:02:50,320 For the meantime, let's go ahead to the index and then let's require the message component message. 40 00:02:51,140 --> 00:02:57,770 And then it's from that component and half my message and now less. 41 00:02:57,920 --> 00:03:00,950 I mean, call the message component instead. 42 00:03:01,800 --> 00:03:02,850 Or is import. 43 00:03:02,850 --> 00:03:05,880 Sorry, not cast as that. 44 00:03:05,880 --> 00:03:11,870 So if I save it, you see that I see nothing because the component of message is returning nothing. 45 00:03:11,880 --> 00:03:15,540 If I put something here, you see that is going to be displayed. 46 00:03:15,870 --> 00:03:20,550 So I have my JavaScript, I mean expression here. 47 00:03:20,760 --> 00:03:26,700 How can I put them here so I can say that welcome. 48 00:03:26,700 --> 00:03:33,090 Let's say good morning then the name of the product and say good morning, John. 49 00:03:33,940 --> 00:03:34,600 Like this one. 50 00:03:34,600 --> 00:03:35,320 Let's see. 51 00:03:35,470 --> 00:03:36,010 I have. 52 00:03:36,010 --> 00:03:37,240 Good morning, John. 53 00:03:37,660 --> 00:03:41,410 But a component must be reusable as we talk about. 54 00:03:41,410 --> 00:03:43,000 But for now, don't worry. 55 00:03:43,030 --> 00:03:48,160 Let's say that now I want to add this JavaScript inside my Jesus. 56 00:03:48,160 --> 00:03:50,590 How am I going to do it? 57 00:03:51,050 --> 00:03:53,020 We are going to use a carry basis. 58 00:03:53,140 --> 00:03:56,500 So like that opening and closing can like this one. 59 00:03:56,500 --> 00:04:04,240 And here we can put, we can write any valid JavaScript, here we can write a left here, whatever we 60 00:04:04,240 --> 00:04:08,560 can do whatever right any JavaScript syntax inside this carry basis. 61 00:04:08,860 --> 00:04:13,930 But for us, let's just inject the name from here, which is this one. 62 00:04:14,470 --> 00:04:16,600 So if I add that, let's see. 63 00:04:16,600 --> 00:04:17,980 Good morning John. 64 00:04:17,980 --> 00:04:21,640 So if I change this one to Ima here, save it. 65 00:04:21,880 --> 00:04:23,110 Good morning, Emma. 66 00:04:23,140 --> 00:04:25,180 If I change this one to Cindy. 67 00:04:26,080 --> 00:04:27,550 Good morning, Cindy. 68 00:04:27,820 --> 00:04:31,930 And then I can also add h so u const. 69 00:04:32,350 --> 00:04:35,950 And let's say age is equal to 30. 70 00:04:36,370 --> 00:04:38,530 I can say good morning. 71 00:04:38,530 --> 00:04:40,600 And then your. 72 00:04:42,230 --> 00:04:44,730 Your age is. 73 00:04:44,750 --> 00:04:47,330 Then I can inject the age. 74 00:04:48,020 --> 00:04:49,130 So let's see. 75 00:04:49,160 --> 00:04:50,060 Good morning, John. 76 00:04:50,090 --> 00:04:51,310 Your age is 30. 77 00:04:51,320 --> 00:04:56,510 Now, see that we are making our component a little bit flexible than before. 78 00:04:56,540 --> 00:05:00,790 So that now that we know, just as you are adding more things to a component. 79 00:05:00,800 --> 00:05:09,500 So now that we know how we can use expressions in Java, sorry, in the next this video, let's start 80 00:05:09,500 --> 00:05:20,150 with how we can use CSS in React or in React so that we can add some attribute to I mean, it just syntax 81 00:05:20,150 --> 00:05:25,790 to make it more nice and beautiful than this one as you see. 82 00:05:25,790 --> 00:05:28,760 But this is the right step in the right direction.