WEBVTT 00:00.440 --> 00:03.560 Okay, let's now take a look at some react components basics. 00:03.560 --> 00:07.910 And we are looking at a react component right now inside our app dot TSX. 00:07.940 --> 00:11.270 Let's close the others down to focus purely on this one. 00:11.300 --> 00:15.890 And we'll make a few adjustments inside here and get it nice and simple. 00:15.890 --> 00:20.240 So this div this surrounding div inside here I'll just add an H1 tag. 00:20.270 --> 00:24.230 And let's just give the name of the app restore. 00:24.230 --> 00:27.680 And below this div we'll create a list of products. 00:27.680 --> 00:34.580 So just above the function let's add a const and we'll specify products. 00:34.610 --> 00:37.910 We'll say equals and open square brackets just for an array. 00:37.910 --> 00:40.610 And we'll just have a couple of example products. 00:40.610 --> 00:44.540 One called with a name of product one. 00:44.540 --> 00:49.790 And we'll give it a price and we'll just say 100.00. 00:50.030 --> 00:52.070 And I'll just copy this line down. 00:52.070 --> 00:53.930 And this can be product two. 00:53.960 --> 00:56.540 And the price can be 200. 00:56.570 --> 00:57.530 Very basic. 00:57.530 --> 00:59.630 Nothing really much going on there. 00:59.630 --> 01:05.310 Just a list of products that we can use just to demonstrate a few straightforward concepts with what 01:05.310 --> 01:06.240 we're doing here. 01:06.300 --> 01:09.360 So I mentioned before that this is a JavaScript function. 01:09.360 --> 01:15.930 And inside the return statement here where we've got JSX, we can also supply JavaScript code or TypeScript. 01:15.930 --> 01:22.140 I'm going to use those two terms interchangeably because TypeScript is really just a superset on top 01:22.140 --> 01:23.220 of JavaScript. 01:23.220 --> 01:28.350 And it looks pretty much the same, at least how we're initially going to use it inside here. 01:28.380 --> 01:31.740 So inside here I'm going to display the list of products in the browser. 01:31.740 --> 01:33.900 And we can do that using an unordered list. 01:33.900 --> 01:35.340 So we'll say UL. 01:35.340 --> 01:39.210 And then to use JavaScript or TypeScript. 01:39.240 --> 01:40.920 Then we open curly brackets. 01:41.190 --> 01:44.970 And then I can use the products variable I've created above the component. 01:44.970 --> 01:49.680 And I wish to loop over this so that I can display the products in the browser. 01:49.950 --> 01:54.870 So to loop over something in JavaScript, what we typically do is use the map function. 01:54.870 --> 02:01.200 And if we look at the description of the map function and then open parentheses, and our map function 02:01.200 --> 02:03.840 is a function that accepts up to three arguments. 02:03.840 --> 02:08.850 The map method calls the callback function one time for each element in the array. 02:08.850 --> 02:15.420 So this is a function that we can use on an array, and we can provide it with a callback function to 02:15.450 --> 02:18.480 do something with each element in that array. 02:18.510 --> 02:25.140 Now all we really want to do is display them as list items inside this unordered list. 02:25.140 --> 02:33.360 So we can say that we want the argument, the item to be passed to the function that's going to be carried 02:33.360 --> 02:35.790 out on each item in the array. 02:35.790 --> 02:41.550 And then we use an arrow function and that's just equals and right angle bracket. 02:41.550 --> 02:43.800 And then we can open parentheses. 02:44.310 --> 02:48.060 And inside the parentheses we can specify a list item. 02:48.060 --> 02:52.500 And then we can specify in curly brackets we can say item dot name. 02:52.500 --> 02:57.510 And we'll just add a dash and open curly brackets again and say item dot price. 02:57.510 --> 03:03.450 And if we go and take a look at our browser and see the effect of what we've done here, then we can 03:03.450 --> 03:09.110 see that we've got the heading the H1, and we can see we've got product one and product two. 03:09.140 --> 03:14.090 So we're displaying the contents of this and a couple of things I want to point out here as well these 03:14.090 --> 03:21.890 brackets, these parentheses what we're doing here when we use parentheses like this then inside parentheses 03:21.890 --> 03:27.410 we're implicitly returning what's inside the parentheses. 03:27.440 --> 03:30.080 If this was curly brackets for instance. 03:30.080 --> 03:37.310 And I swapped the parentheses for curly brackets instead, then I'm getting a warning here. 03:37.310 --> 03:42.440 And if I hover over the warning then type void is not assignable to blah blah blah. 03:42.470 --> 03:47.780 It's because we have to explicitly return something if we're inside curly brackets. 03:47.780 --> 03:53.120 And I have to say I wish to return the list item from the function. 03:53.480 --> 03:54.830 So do watch out for that. 03:54.830 --> 04:02.150 And it's easier just to use parentheses unless you need to write a block of different statements inside 04:02.150 --> 04:02.780 here. 04:02.840 --> 04:05.450 So I'm just going to go back to parentheses. 04:05.450 --> 04:10.910 But I just wanted to point that out because it may be hard to see that I'm using parentheses here, 04:10.910 --> 04:18.470 but the difference between parentheses and the curly brackets is we implicitly return when we use parentheses, 04:18.470 --> 04:20.120 and we see the results on the screen. 04:20.120 --> 04:26.330 But not everything is perfect because if I just close the other tabs down to clean things up here, 04:26.330 --> 04:31.250 if I go and take a look at the Chrome developer tools, which we can get access to by right clicking 04:31.250 --> 04:36.950 and say inspect, and I take a look at the console, then I'm seeing a bunch of errors. 04:36.950 --> 04:39.530 Now a lot of these would be due to hot reloading. 04:39.530 --> 04:45.110 So if you do see a busy console in your Chrome developer tools, just give the page a refresh and see 04:45.110 --> 04:46.790 what you're actually dealing with. 04:47.120 --> 04:53.270 Now, we do have a warning here, and it tells us that each child in a list should have a unique key 04:53.270 --> 04:53.990 prop. 04:53.990 --> 05:02.150 And if I go back to the code, then what we have here is a list item or JSX effectively that's being 05:02.150 --> 05:02.750 looped over. 05:02.780 --> 05:10.370 Now react needs to uniquely identify each element inside a component, and if we don't provide this 05:10.370 --> 05:12.210 with a key, then it's not able to do that. 05:12.210 --> 05:16.020 So what we can do to remove that warning is give our list item a key. 05:16.290 --> 05:19.110 And we can just use item name for instance. 05:19.110 --> 05:20.850 And that will resolve the problem. 05:20.850 --> 05:24.690 And if I go back to the browser I refresh the page again. 05:24.720 --> 05:27.510 Now we don't see any issues inside there. 05:27.510 --> 05:28.530 So great. 05:28.560 --> 05:32.430 Now it tells us to download the react Dev tools for a better development experience. 05:32.430 --> 05:37.230 We'll take a look at those a bit later on, and we'll continue just taking a look at react component 05:37.230 --> 05:38.220 basics. 05:38.310 --> 05:44.010 So supposing for instance, I added another product and we added a product called product two. 05:44.040 --> 05:48.030 We duplicated the name because why not just for an example. 05:48.030 --> 05:49.800 And we set the price to 300. 05:49.830 --> 05:50.940 Does this work. 05:51.060 --> 05:52.170 Well it works. 05:52.170 --> 05:57.960 But now we've got the error that tells us that it's encountered two children with the same key. 05:58.320 --> 05:58.710 Aha. 05:58.740 --> 06:00.150 So what do we do to resolve this? 06:00.180 --> 06:05.130 Well we could just give this an ID property, for instance, and make sure that the ID is unique and 06:05.130 --> 06:06.960 then use that as the key. 06:06.990 --> 06:15.180 Alternatively, we could also just use the second parameter inside the map function and use the index. 06:15.180 --> 06:23.130 Now each one of the items in the array has an index, and instead of using itemname in this example, 06:23.130 --> 06:27.540 we could just specify index and that will remove the error. 06:27.540 --> 06:30.480 If I go back to the browser, I refresh the page again. 06:30.510 --> 06:34.560 Now we've got our three products and we don't see an error inside here. 06:34.560 --> 06:41.100 So another thing that we've kind of already looked at, of course, is we can give inline styles inside 06:41.100 --> 06:43.350 JSX to our different options. 06:43.380 --> 06:49.830 And I could just give our H1, for instance, some style, and I could specify color and give it a color 06:49.830 --> 06:50.310 of red. 06:50.340 --> 06:55.890 Now we're not going to do much with styling I guess, inside this training course, because what we're 06:55.890 --> 07:04.260 going to take a look at soon is Material View, which is a react component library, which gives us 07:04.260 --> 07:10.140 some pre-styled components using material Design that we can use in our application to help us with 07:10.140 --> 07:12.150 the styling of our application. 07:12.150 --> 07:17.530 So it's not too often that we'll take a look at this approach for styling our components, but if we 07:17.530 --> 07:20.770 go back and take a look, we can see that's taken effect. 07:20.800 --> 07:26.890 Another thing I wanted to mention was if I delete the div then well, that's annoying because it didn't 07:26.890 --> 07:31.090 delete the closing div and it's left me with a warning. 07:31.090 --> 07:33.040 So we'll do something to adjust that. 07:33.040 --> 07:42.880 Actually, if we go to code and settings, and if we take a look inside here for linked editing or just 07:42.880 --> 07:48.160 search for linked, this linked editing controls whether the editor has linked editing enabled. 07:48.160 --> 07:55.210 Depending on the language, related symbols such as HTML tags are updated while editing, so let's enable 07:55.210 --> 07:55.720 that. 07:56.320 --> 08:02.830 And what this should allow us to do is when we delete the word div, it should also update its closing 08:02.860 --> 08:04.120 tag as well. 08:04.120 --> 08:06.010 So just slightly more efficient. 08:06.370 --> 08:11.560 Now the reason I wanted to do that is I wanted to point out that this is referred to as a fragment, 08:11.560 --> 08:16.240 and because this is JavaScript code, we can only return one thing. 08:16.240 --> 08:24.730 We can return one object, we can return one level of JSX inside here, and if I was to remove the angle 08:24.730 --> 08:28.270 brackets which don't look like they're doing anything, then I'm going to see a warning saying that 08:28.270 --> 08:29.650 hey, I can't do this. 08:29.680 --> 08:35.500 JSX expressions must have one parent element, so we do need that fragment inside there. 08:35.530 --> 08:43.420 And what this is shorthand for is there is actually a react element or component called fragments that 08:43.420 --> 08:47.620 we could use in place of the shorthand angle brackets. 08:47.620 --> 08:49.810 And that's an approach we could take there. 08:49.810 --> 08:55.780 But I'm just going to go back for simplicity at this time to just returning a single div which contains 08:55.810 --> 08:56.980 our JSX. 08:57.310 --> 08:57.910 Effectively. 08:57.910 --> 09:00.250 That's giving us the output we see now. 09:00.280 --> 09:05.830 Now, supposing I wanted to add a button which added a product into our products list. 09:05.860 --> 09:11.020 Now this is hard coded array of products effectively in this component. 09:11.020 --> 09:15.880 But if we want to make this dynamic, then we need to take a look at using some react hooks. 09:15.880 --> 09:19.300 And the first hook that we're going to take a look at is the use state hook. 09:19.330 --> 09:21.760 And we'll take a look at that next.