| Topic | Presenter | Summary | Duration |
| -------------------------------------------- | --------------- | --------------------------------------------------------------------------------------------------------------------- | -------- |
| Basics of React: Components, State and Props | David Frederick | This video is from a Paired Programming Session and covers the Basics of React including components, state and props. | 18:50 |00:00:07.110 --> 00:00:10.930 So I'm going to go over the basics of react.00:00:10.930 --> 00:00:13.986 Pretty short video on just how to build00:00:13.986 --> 00:00:16.660 a component, what state and props are,00:00:16.660 --> 00:00:19.726 how it handles those and then.00:00:19.730 --> 00:00:22.196 That'll be pretty much set up,00:00:22.200 --> 00:00:25.480 so right here I've got core react build.00:00:25.480 --> 00:00:27.946 It's not. It's not done yet.00:00:27.950 --> 00:00:31.702 Taylor started a few months ago and00:00:31.702 --> 00:00:36.166 I'm kind of taking a lot of it over.00:00:36.170 --> 00:00:39.002 In React, essentially it operates on00:00:39.002 --> 00:00:42.222 two really big ideas, state and props,00:00:42.222 --> 00:00:45.330 and if you can write me mine00:00:45.428 --> 00:00:47.500 around those you can,00:00:47.500 --> 00:00:52.868 you will yeah so excuse me so props.00:00:52.870 --> 00:00:56.874 Yeah, I believe it's short for properties.00:00:56.880 --> 00:01:00.450 Uhm? Which is kind of a weird.00:01:00.450 --> 00:01:02.575 Word to define it when00:01:02.575 --> 00:01:04.700 you realize what it is.00:01:04.700 --> 00:01:07.082 Props are basically any data you00:01:07.082 --> 00:01:10.100 want to pass down from a parent00:01:10.100 --> 00:01:12.335 component to a child component.00:01:12.340 --> 00:01:14.074 That the child component is going00:01:14.074 --> 00:01:16.095 to use when it renders, right?00:01:16.095 --> 00:01:17.985 So it's going to conditionally render00:01:17.985 --> 00:01:19.539 something based on its parent,00:01:19.540 --> 00:01:22.039 so the parent is like, hey, you know?00:01:22.039 --> 00:01:24.978 Like for instance, here's an example.00:01:24.980 --> 00:01:27.549 Should we be showing the login model?00:01:27.550 --> 00:01:29.888 And the login model is like hey,00:01:29.890 --> 00:01:33.560 uhm do you want me to show it show or not,00:01:33.560 --> 00:01:36.360 so we're telling it hey show login00:01:36.360 --> 00:01:38.759 model is either false or true.00:01:38.760 --> 00:01:39.160 Right?00:01:39.160 --> 00:01:41.960 So we're going to kind of build00:01:41.960 --> 00:01:43.758 something similar to that idea,00:01:43.760 --> 00:01:45.350 but that's what props are.00:01:45.350 --> 00:01:47.910 So for instance, if in here instead of,00:01:47.910 --> 00:01:50.448 I'm putting out an example component.00:01:50.450 --> 00:01:52.718 And here you see example component.00:01:52.720 --> 00:01:54.300 Right?00:01:54.300 --> 00:01:56.916 Let's say I want this to be dynamic,00:01:56.920 --> 00:01:58.882 so let's say this isn't like00:01:58.882 --> 00:02:00.190 I'm just called example,00:02:00.190 --> 00:02:03.124 but this could be like header or home header.00:02:03.130 --> 00:02:03.991 Or you know,00:02:03.991 --> 00:02:05.713 heading one hour whatever you want00:02:05.713 --> 00:02:07.725 to build your application, right?00:02:07.725 --> 00:02:10.485 So I'm going to go to it's parent.00:02:10.490 --> 00:02:12.730 I'm gonna close all these really fast.00:02:12.730 --> 00:02:15.670 Which in my case is layout.00:02:15.670 --> 00:02:17.620 And I'm going to give it.00:02:17.620 --> 00:02:20.326 I'm gonna give example this component.00:02:20.330 --> 00:02:22.238 What I want to be here.00:02:22.240 --> 00:02:26.055 So instead of this being example component.00:02:26.060 --> 00:02:29.670 It's going to be props, gods, let's say type.00:02:31.830 --> 00:02:34.140 So now if I say this.00:02:34.140 --> 00:02:36.192 You're going to see.00:02:36.192 --> 00:02:38.757 That it's probably gonna error.00:02:38.760 --> 00:02:40.420 Or it's gonna do nothing?00:02:40.420 --> 00:02:42.730 OK, so see how example components going.00:02:42.730 --> 00:02:44.662 There's just nothing here and that's00:02:44.662 --> 00:02:46.700 because props that title is undefined.00:02:46.700 --> 00:02:48.028 Why is it undefined?00:02:48.028 --> 00:02:50.445 Well, because I didn't give it00:02:50.445 --> 00:02:52.113 a title right here.00:02:52.120 --> 00:02:55.180 So if I say title equals.00:02:55.180 --> 00:02:57.340 Will go classic hello world.00:02:59.770 --> 00:03:02.346 How do I save it and react automatically?00:03:02.350 --> 00:03:04.348 Rebuilds refreshes for you so you00:03:04.348 --> 00:03:06.528 don't do any building or and stuff.00:03:06.530 --> 00:03:09.946 Now you'll see Hello World is showing up.00:03:09.950 --> 00:03:12.610 And that's because I'm passing00:03:12.610 --> 00:03:15.270 a prop down to example.00:03:15.270 --> 00:03:16.974 And then example is saying, hey,00:03:16.974 --> 00:03:19.530 I'm going to take that title you give me.00:03:19.530 --> 00:03:22.086 I'm going to put it inside of an H1.00:03:22.090 --> 00:03:23.510 This is technically not HTML.00:03:23.510 --> 00:03:25.774 It acts like HTML a lot of ways.00:03:25.780 --> 00:03:26.932 It's actually called Jinx.00:03:26.932 --> 00:03:28.900 I can't remember what that stands for.00:03:28.900 --> 00:03:31.350 I just got my head.00:03:31.350 --> 00:03:32.090 Uhm, effectively,00:03:32.090 --> 00:03:35.440 while you're learning react it is it is HTML.00:03:35.440 --> 00:03:37.834 Uhm so it's cool about props is00:03:37.834 --> 00:03:40.278 that you can't just pass strings?00:03:40.280 --> 00:03:42.506 You can also pass an object.00:03:42.510 --> 00:03:43.998 You can pass numbers.00:03:43.998 --> 00:03:45.858 You can pass another component.00:03:45.860 --> 00:03:47.720 You can pass a class.00:03:47.720 --> 00:03:49.580 You have anything you want.00:03:49.580 --> 00:03:51.986 So for instance if I said00:03:51.986 --> 00:03:54.639 hey title now is an object.00:03:54.640 --> 00:03:59.016 With their name, property and that name is.00:03:59.020 --> 00:03:59.530 Or, well,00:03:59.530 --> 00:04:00.040 let's let's,00:04:00.040 --> 00:04:00.805 let's change it.00:04:04.240 --> 00:04:09.040 Now. You're gonna get what reactive00:04:09.040 --> 00:04:12.000 things best to look for title.00:04:12.000 --> 00:04:13.470 And it's not going to find it,00:04:13.470 --> 00:04:15.033 and now it's going to say, hey,00:04:15.033 --> 00:04:17.457 objects are not valid as a React child.00:04:17.460 --> 00:04:19.854 So the problem is that I'm now00:04:19.854 --> 00:04:21.670 passing an object for title.00:04:21.670 --> 00:04:22.670 And then here in example,00:04:22.670 --> 00:04:26.000 let me just open this in a separate site.00:04:26.000 --> 00:04:28.496 Here an example. Or like hey,00:04:28.500 --> 00:04:30.474 put crops up title here and react.00:04:30.480 --> 00:04:31.895 It's like hey no you00:04:31.895 --> 00:04:33.310 can't put an object here.00:04:33.310 --> 00:04:35.245 It has to be a string or a number00:04:35.245 --> 00:04:37.321 or something that can be easily00:04:37.321 --> 00:04:39.860 translated to text, right?00:04:39.860 --> 00:04:42.710 So. What I can do though,00:04:42.710 --> 00:04:44.215 is the same prophet title that name.00:04:44.220 --> 00:04:46.338 Now I realize this wouldn't really.00:04:46.340 --> 00:04:47.339 Makes sense, right?00:04:47.339 --> 00:04:49.670 Like you would probably call this like.00:04:49.670 --> 00:04:51.340 I don't know info right?00:04:56.630 --> 00:05:00.536 So now we're going to do props.info.net.00:05:00.540 --> 00:05:02.997 So everything after info will be referring00:05:02.997 --> 00:05:04.959 to something inside of this object.00:05:04.960 --> 00:05:08.819 So now we save that. Let's save this.00:05:12.440 --> 00:05:15.590 And now we're going to see a lot, right?00:05:15.590 --> 00:05:18.150 But we can do obviously more than that,00:05:18.150 --> 00:05:20.250 right? So we can build like style.00:05:20.250 --> 00:05:23.960 Here and we can say you know, display.00:05:23.960 --> 00:05:27.639 Except 2. Props.info dot name.00:05:30.840 --> 00:05:32.800 Or will say, you know00:05:32.800 --> 00:05:34.920 name is equal to. 2 bars00:05:37.610 --> 00:05:41.300 you could say none, or we can say. Clock.00:05:43.700 --> 00:05:46.012 Right, so you can do this conditional logic00:05:46.012 --> 00:05:48.375 based on this and of course you can put,00:05:48.380 --> 00:05:50.580 you know, show is true and etc etc.00:05:50.580 --> 00:05:52.632 Right? That's more JavaScript and react00:05:52.632 --> 00:05:55.440 so you could pass down props to children.00:05:55.440 --> 00:05:58.032 That's the first big piece, and then the00:05:58.032 --> 00:06:00.300 next big piece is handling the state.00:06:00.300 --> 00:06:02.568 So here you can see an example.00:06:02.570 --> 00:06:04.808 So let's just say we're like, hey,00:06:04.808 --> 00:06:06.894 we're going to be able to toggle00:06:06.894 --> 00:06:08.939 whether or not example art new00:06:08.939 --> 00:06:10.664 component is showing up right?00:06:10.670 --> 00:06:12.946 So this would be like, for instance,00:06:12.946 --> 00:06:16.343 if you were going to have like log in, right?00:06:16.343 --> 00:06:19.794 It's like that's a real example here.00:06:19.800 --> 00:06:22.077 Do we want to show this model or not?00:06:22.080 --> 00:06:22.470 Right?00:06:24.710 --> 00:06:27.223 So to build this again but with00:06:27.223 --> 00:06:29.528 example kind of a more example,00:06:29.530 --> 00:06:31.390 actually really have show right?00:06:31.390 --> 00:06:33.987 OK so we keep that so fun.00:06:33.990 --> 00:06:38.060 Show example. And then set show people.00:06:40.850 --> 00:06:42.998 You state, so we're saying hey,00:06:43.000 --> 00:06:46.483 we wanna we want to create a state piece00:06:46.483 --> 00:06:50.245 right to manage this state of this component.00:06:50.250 --> 00:06:52.588 And that state piece is going to00:06:52.588 --> 00:06:54.871 hold data that's going to inform00:06:54.871 --> 00:06:56.876 our new component of something.00:06:56.880 --> 00:06:58.490 So should it be showing?00:06:58.490 --> 00:07:00.874 Should it not be showing what text should00:07:00.874 --> 00:07:03.321 be in there whatever we want, right?00:07:03.321 --> 00:07:03.963 Completely flexible,00:07:03.963 --> 00:07:05.893 so we're going to say, hey,00:07:05.893 --> 00:07:07.508 let's start off show example.00:07:07.510 --> 00:07:09.436 Its initial value will be here,00:07:09.440 --> 00:07:12.536 so its initial value is false.00:07:12.540 --> 00:07:14.956 Right and then here when we pass show,00:07:14.960 --> 00:07:17.088 that's all this data down to example.00:07:17.090 --> 00:07:18.600 Here we can say, well,00:07:18.600 --> 00:07:19.530 whatever show examples.00:07:19.530 --> 00:07:21.930 That's what we want to show to be.00:07:24.050 --> 00:07:27.410 Now here instead of props.info dot name.00:07:29.880 --> 00:07:36.062 We can say. Uhmprops.info if00:07:36.062 --> 00:07:37.694 we should be showing this block00:07:37.694 --> 00:07:39.170 if we shouldn't be showing.00:07:42.070 --> 00:07:45.090 And now we can dynamically.00:07:45.090 --> 00:07:47.394 Be showing this or not showing it based00:07:47.394 --> 00:07:49.586 on changes to the state of its parent.00:07:49.590 --> 00:07:51.830 And of course you can have local state.00:07:51.830 --> 00:07:53.516 You will have that a lot,00:07:53.520 --> 00:07:56.166 so I'll show you example that00:07:56.166 --> 00:07:58.849 probably be what I end with.00:07:58.850 --> 00:08:00.275 But you can control it00:08:00.275 --> 00:08:01.415 with the parents right?00:08:01.420 --> 00:08:03.464 And the idea is that the smaller00:08:03.464 --> 00:08:05.221 the component to lower it is00:08:05.221 --> 00:08:07.139 closer to like just a single atom.00:08:07.140 --> 00:08:07.971 It is right.00:08:07.971 --> 00:08:10.290 The less state logic is going to hold,00:08:10.290 --> 00:08:11.720 and the higher it is,00:08:11.720 --> 00:08:12.860 the more psychological hold.00:08:12.860 --> 00:08:13.715 So for instance,00:08:13.720 --> 00:08:16.008 in our app layout is pretty high component,00:08:16.010 --> 00:08:17.726 it has a few different state,00:08:17.730 --> 00:08:18.015 right?00:08:18.015 --> 00:08:18.870 That's pretty normal.00:08:21.220 --> 00:08:24.710 So now we have this and if we go back here,00:08:24.710 --> 00:08:26.606 we'll see that there's nothing there.00:08:26.610 --> 00:08:28.822 And to prove that this is what's00:08:28.822 --> 00:08:31.200 controlling this, if I change,00:08:31.200 --> 00:08:33.686 it's true. We will see.00:08:33.686 --> 00:08:37.250 Props that info that name should I got.00:08:37.250 --> 00:08:40.470 And here we have people right there.00:08:40.470 --> 00:08:42.238 So that all of React is built on00:08:42.238 --> 00:08:43.532 this concept that you're going00:08:43.532 --> 00:08:45.134 to pass props down to children,00:08:45.140 --> 00:08:47.108 and then you can also of course pass00:08:47.108 --> 00:08:48.828 data back up to parents as well,00:08:48.830 --> 00:08:52.655 but I'm not going to cover that right now.00:08:52.660 --> 00:08:54.040 Actually, you know, let's do it.00:08:54.040 --> 00:08:56.370 Let's do it right now.00:08:56.370 --> 00:08:59.286 So we're going to wrap this.00:08:59.290 --> 00:09:01.980 Make a new line and a little easier to read.00:09:05.060 --> 00:09:06.866 Let's say that inside of here,00:09:06.870 --> 00:09:08.970 then you probably wouldn't do this right,00:09:08.970 --> 00:09:10.042 but you might come,00:09:10.042 --> 00:09:12.377 let's say that inside of here reacts this00:09:12.377 --> 00:09:14.387 little nuanced where it doesn't like,00:09:14.390 --> 00:09:17.262 kind of like Angular has where it doesn't00:09:17.262 --> 00:09:20.400 like it if you only pass it one element.00:09:20.400 --> 00:09:21.772 Uh, or you pass it multiple elements00:09:21.772 --> 00:09:23.323 inside of the function that you're00:09:23.323 --> 00:09:24.848 returning that's creating your component.00:09:24.850 --> 00:09:26.845 It doesn't like that there has to00:09:26.845 --> 00:09:28.577 be one wrapping element ending have00:09:28.577 --> 00:09:30.840 as much inside of it as you want.00:09:30.840 --> 00:09:33.168 So here we have a button.00:09:33.170 --> 00:09:34.759 And this is going to be example00:09:34.759 --> 00:09:36.250 of props passing a function and00:09:36.250 --> 00:09:37.762 that's going to alter this state,00:09:37.770 --> 00:09:39.486 and that's going to change whether00:09:39.486 --> 00:09:41.340 or not this is showing up.00:09:41.340 --> 00:09:45.330 So. Disappear.00:09:45.330 --> 00:09:47.714 We gotta click listener so you can kind00:09:47.714 --> 00:09:50.476 of like in England where you have energy.00:09:50.480 --> 00:09:54.337 Click in here it's just one click.00:09:54.340 --> 00:09:55.965 So you pass it something00:09:55.965 --> 00:09:57.590 you use brackets to escape.00:09:57.590 --> 00:09:59.300 And then you'd say hey,00:09:59.300 --> 00:10:02.036 when it's clicked what you want to do?00:10:02.040 --> 00:10:05.464 Well, I want to have a function that00:10:05.464 --> 00:10:08.648 will call props dot close example.00:10:08.650 --> 00:10:10.288 Of course you would normally do00:10:10.288 --> 00:10:12.149 like if prop stuck with Android,00:10:12.150 --> 00:10:14.019 but I know it's going to exist00:10:14.019 --> 00:10:15.370 in this small example,00:10:15.370 --> 00:10:16.830 but normally you would want00:10:16.830 --> 00:10:18.581 to have a guard cases, right?00:10:18.581 --> 00:10:20.327 So now we're going to button.00:10:20.330 --> 00:10:22.374 We're going to give it just really00:10:22.374 --> 00:10:25.208 quick styling, so button but primary.00:10:25.210 --> 00:10:27.415 So it's not super ugly and will00:10:27.415 --> 00:10:29.679 give this little margin margin left.00:10:32.780 --> 00:10:35.836 So now we need another prop right here.00:10:35.840 --> 00:10:38.514 We have info now we're looking for00:10:38.514 --> 00:10:41.207 close example and the names all match.00:10:41.210 --> 00:10:45.050 There's no like automatic capital like.00:10:45.050 --> 00:10:47.890 Camel case to kebab case and vice versa.00:10:47.890 --> 00:10:49.546 None of that stuff.00:10:49.546 --> 00:10:52.510 Whatever you called it here like show.00:10:52.510 --> 00:10:54.670 Is what it will be here.00:10:54.670 --> 00:10:56.350 It does not do anything for00:10:56.350 --> 00:10:57.700 you like English asked us,00:10:57.700 --> 00:10:59.534 so now we're going to pass it00:10:59.534 --> 00:11:00.960 this prop close example needs00:11:00.960 --> 00:11:02.997 to be typed exactly like it is00:11:02.997 --> 00:11:04.840 right here and then we say, OK,00:11:04.840 --> 00:11:06.730 well, this is going to try to00:11:06.730 --> 00:11:08.150 execute that as a function,00:11:08.150 --> 00:11:10.068 so this needs to be a function.00:11:12.770 --> 00:11:16.172 Yes, I hear function and all it00:11:16.172 --> 00:11:19.829 does is it sets show example.00:11:19.830 --> 00:11:24.248 Both. So this is going to update.00:11:24.250 --> 00:11:27.757 Show me sample. This will become false.00:11:27.760 --> 00:11:29.746 Therefore, show example will become false.00:11:29.750 --> 00:11:31.370 Therefore show will be false00:11:31.370 --> 00:11:32.990 and therefore when we read00:11:33.057 --> 00:11:34.707 this page should be showing.00:11:34.710 --> 00:11:35.700 No, we shouldn't.00:11:38.620 --> 00:11:39.630 So if we say that.00:11:42.290 --> 00:11:43.278 Here we have it,00:11:43.278 --> 00:11:44.760 we click it and that disappears.00:11:44.760 --> 00:11:45.808 Right now we didn't.00:11:45.808 --> 00:11:47.895 We didn't put that logic on the whole00:11:47.895 --> 00:11:49.950 point that we only put it on the H1.00:11:49.950 --> 00:11:53.660 That stage one is the thing disappear.00:11:53.660 --> 00:11:54.880 And this last example,00:11:54.880 --> 00:11:57.039 something you're going to do a lot00:11:57.039 --> 00:11:59.183 when you build forms is 2 way binding.00:11:59.190 --> 00:12:00.936 That's a pretty common thing nowadays.00:12:00.940 --> 00:12:03.260 What you do is we have an input.00:12:03.260 --> 00:12:05.588 We're going to say that your value is,00:12:05.590 --> 00:12:07.520 so here's an example of00:12:07.520 --> 00:12:09.450 state inside of a component.00:12:09.450 --> 00:12:13.548 So it's you know input value.00:12:13.550 --> 00:12:14.660 Set input value.00:12:17.890 --> 00:12:19.480 You state. We're going to00:12:19.480 --> 00:12:21.070 start with an empty string.00:12:21.070 --> 00:12:23.518 Remember that everything in the Dom.00:12:23.520 --> 00:12:25.668 From a component is always a string, right?00:12:25.668 --> 00:12:28.080 So if you were going to read this H1,00:12:28.080 --> 00:12:29.949 the value you get is a string.00:12:29.950 --> 00:12:31.588 If you're going to read this00:12:31.588 --> 00:12:33.438 input to the value as a string,00:12:33.440 --> 00:12:36.528 even if you put type equals number here.00:12:36.530 --> 00:12:38.320 It will still be a strain when we pulled in.00:12:40.730 --> 00:12:43.166 So. Are you will be thinking about00:12:43.166 --> 00:12:45.999 you so I'm gonna tell this input.00:12:46.000 --> 00:12:47.164 This is your value.00:12:47.164 --> 00:12:49.790 OK so if I put tests right here,00:12:49.790 --> 00:12:53.416 you're going to see. And our little.00:12:53.420 --> 00:12:54.599 Dummy component here.00:12:54.599 --> 00:12:57.715 That input noise test and receive that I00:12:57.715 --> 00:13:00.043 can't change it no matter what I type.00:13:00.050 --> 00:13:02.800 What I do can't change it well, why not?00:13:02.800 --> 00:13:05.814 Well, because we told you hang your value is00:13:05.814 --> 00:13:08.582 test were not responding to the user's input.00:13:08.590 --> 00:13:10.258 So we can do that now.00:13:10.260 --> 00:13:12.546 We're going to update this state so it stay00:13:12.546 --> 00:13:15.005 on change so every time the input changes,00:13:15.010 --> 00:13:19.210 do something we're going to get in event.00:13:19.210 --> 00:13:22.504 And we're going to say hey set input value,00:13:22.510 --> 00:13:25.079 prevent target and this is just JavaScript,00:13:25.080 --> 00:13:26.915 nothing, nothing. React with specific00:13:26.915 --> 00:13:28.750 about the event target value.00:13:28.750 --> 00:13:31.686 If you listen to an event on input,00:13:31.690 --> 00:13:34.574 the value is then target value that's00:13:34.574 --> 00:13:38.428 going to be whatever is typed in input OK.00:13:38.430 --> 00:13:40.180 And now we're going to set input00:13:40.180 --> 00:13:41.389 value to whatever that is.00:13:41.390 --> 00:13:44.550 So hey, when it changes.00:13:44.550 --> 00:13:46.380 Set this, that'll change this value,00:13:46.380 --> 00:13:47.910 which will change input value,00:13:47.910 --> 00:13:50.350 which will change with the value of business.00:13:50.350 --> 00:13:52.790 So this is 2 way binding now right?00:13:52.790 --> 00:13:55.337 And you can see where now if we had00:13:55.337 --> 00:13:58.246 like a form here you know and we had a00:13:58.246 --> 00:14:01.016 button set here we're going to submit it.00:14:01.020 --> 00:14:04.070 We could be like on click make an API call.00:14:04.070 --> 00:14:06.830 Include this value, whatever it is.00:14:06.830 --> 00:14:10.204 OK. So here's local state to use00:14:10.204 --> 00:14:11.440 for two way binding.00:14:11.440 --> 00:14:13.904 Obviously a very common use case for this.00:14:13.910 --> 00:14:16.910 So now we save this.00:14:16.910 --> 00:14:19.688 We should see.00:14:19.690 --> 00:14:21.376 That we can type this now00:14:21.376 --> 00:14:23.000 we can edit it right?00:14:23.000 --> 00:14:25.709 And just to prove that that's what we've got,00:14:25.710 --> 00:14:28.698 we'll do a little spin here.00:14:28.700 --> 00:14:31.196 This will always just put in book value,00:14:31.200 --> 00:14:33.628 right? So it'll update.00:14:33.630 --> 00:14:35.970 As this updates.00:14:35.970 --> 00:14:36.738 Will save that.00:14:41.040 --> 00:14:43.146 And now as I update this.00:14:43.150 --> 00:14:47.035 It'll update this. My name is Bob.00:14:47.040 --> 00:14:49.590 It just changes and it reacts.00:14:49.590 --> 00:14:53.580 Hence the name, right? So.00:14:53.580 --> 00:14:55.330 I know that's a really simple example.00:14:55.330 --> 00:14:57.274 It becomes a little more clear when you're00:14:57.274 --> 00:14:58.818 actually building components that are going00:14:58.818 --> 00:15:00.591 to be meaningful to the application, right?00:15:00.591 --> 00:15:02.157 But here you can see that's00:15:02.157 --> 00:15:03.830 very similar to what I did here.00:15:03.830 --> 00:15:05.750 I just did the same thing00:15:05.750 --> 00:15:07.030 for the login model.00:15:07.030 --> 00:15:09.844 Right, so when you click on when00:15:09.844 --> 00:15:12.390 you click on login up here.00:15:12.390 --> 00:15:14.856 All it's doing is saying hey.00:15:14.860 --> 00:15:16.930 Toggle set the login model.00:15:16.930 --> 00:15:19.720 Show login model to true.00:15:19.720 --> 00:15:21.724 And then show login modal is00:15:21.724 --> 00:15:23.590 fed to the login model.00:15:23.590 --> 00:15:24.256 Instead of that,00:15:24.256 --> 00:15:25.718 when you click it, it's true,00:15:25.718 --> 00:15:28.619 and then this X is wired up to say hey.00:15:28.620 --> 00:15:31.806 Go set this back to false.00:15:31.810 --> 00:15:34.663 So when you click, this goes back to false.00:15:34.670 --> 00:15:36.572 So in React just handles a00:15:36.572 --> 00:15:38.489 lot of that stuff for you.00:15:38.490 --> 00:15:41.073 But I will say the drawback is that this00:15:41.073 --> 00:15:43.575 two way binding thing is very manual,00:15:43.580 --> 00:15:45.476 so you have to say hey,00:15:45.480 --> 00:15:46.752 this is your value.00:15:46.752 --> 00:15:48.978 Hey, this is what did you want?00:15:48.980 --> 00:15:50.400 Change the advantage of that00:15:50.400 --> 00:15:52.610 is that you have an easier time00:15:52.610 --> 00:15:54.070 grasping what's going on.00:15:54.070 --> 00:15:56.359 The harder part of that is that00:15:56.359 --> 00:15:58.613 it's not just as simple as like00:15:58.613 --> 00:16:00.108 it is in the anger.00:16:00.110 --> 00:16:02.110 Jasper, just like energy model.00:16:02.110 --> 00:16:04.609 And then we got basically just says.00:16:04.610 --> 00:16:07.606 You know, set this up with Julie00:16:07.606 --> 00:16:09.910 binding automatically with something in.00:16:09.910 --> 00:16:12.148 The the directive or the controller,00:16:12.150 --> 00:16:13.569 I guess, right?00:16:13.569 --> 00:16:18.401 So, but that is the basics of state and, uh?00:16:18.401 --> 00:16:19.484 In props, UM,00:16:19.484 --> 00:16:22.160 it does take a little bit like,00:16:22.160 --> 00:16:25.100 I think Michael said to get used to be like,00:16:25.100 --> 00:16:26.240 hey this is.00:16:26.240 --> 00:16:28.520 You know how to pass them,00:16:28.520 --> 00:16:30.616 but once you test it a few times00:16:30.616 --> 00:16:32.448 and you start realizing oh,00:16:32.450 --> 00:16:35.042 like OK info ties to info name types to00:16:35.042 --> 00:16:36.977 something inside of this object name,00:16:36.980 --> 00:16:37.260 right?00:16:37.260 --> 00:16:39.220 And you do it yourself and you're00:16:39.220 --> 00:16:40.599 like oh it's working.00:16:40.600 --> 00:16:43.295 That's how it works it it becomes00:16:43.295 --> 00:16:45.328 a lot more to do so.00:16:45.330 --> 00:16:47.120 Does anybody have any questions?00:16:47.120 --> 00:16:49.256 Anything I didn't clarify very well.00:16:56.530 --> 00:16:58.177 Do you think that I should go over again?00:17:02.400 --> 00:17:04.184 Uh, I have like a question that's outside.00:17:04.190 --> 00:17:05.540 I guess the scope of this.00:17:05.540 --> 00:17:07.532 Do you know if we're going00:17:07.532 --> 00:17:09.469 to be using Redux at all?00:17:09.470 --> 00:17:11.755 Oh no, that's that's definitely00:17:11.755 --> 00:17:14.040 in the script of React.00:17:14.040 --> 00:17:15.784 I. Imagine we will.00:17:15.784 --> 00:17:19.585 I'm not going to put it in this00:17:19.585 --> 00:17:22.270 application until we need it.00:17:22.270 --> 00:17:25.066 But the answer is probably yes,00:17:25.070 --> 00:17:27.186 we'll probably need Redux.00:17:27.186 --> 00:17:31.013 Will probably need Redux saga and potentially00:17:31.013 --> 00:17:34.947 Redux thunk as well for handling async.00:17:34.950 --> 00:17:36.505 For for the recording and00:17:36.505 --> 00:17:38.060 for anyone who doesn't know,00:17:38.060 --> 00:17:39.926 Redux is just global state management.00:17:39.930 --> 00:17:42.222 So let's say we've got something00:17:42.222 --> 00:17:44.260 like inside of login modal.00:17:44.260 --> 00:17:46.584 That needs to know about something that's00:17:46.584 --> 00:17:49.020 like deeply nested inside of this container.00:17:49.020 --> 00:17:50.720 Well, instead of passing things00:17:50.720 --> 00:17:52.760 up and down through props, right?00:17:52.760 --> 00:17:54.120 Like I'm doing here,00:17:54.120 --> 00:17:57.315 or like we we we call close example sort00:17:57.315 --> 00:18:00.560 of passing it back up to the parents.00:18:00.560 --> 00:18:02.035 We're calling this function back00:18:02.035 --> 00:18:04.213 up to the parent and then passing00:18:04.213 --> 00:18:06.133 that back down to something else.00:18:06.140 --> 00:18:07.380 Redux basically says, hey,00:18:07.380 --> 00:18:08.000 this component,00:18:08.000 --> 00:18:09.550 and whatever is deeply nested00:18:09.550 --> 00:18:10.480 inside that container,00:18:10.480 --> 00:18:12.286 they can both read the same00:18:12.286 --> 00:18:14.199 data and change the same data.00:18:14.200 --> 00:18:15.750 So global state management so.00:18:15.750 --> 00:18:17.454 But yeah, those big question and00:18:17.454 --> 00:18:19.470 the answer is we probably will.00:18:19.470 --> 00:18:23.376 It doesn't exist in this act yet.00:18:23.380 --> 00:18:26.996 Something I had mentioned in the past is00:18:26.996 --> 00:18:31.080 a context API which is now built into react,00:18:31.080 --> 00:18:33.798 and it's a it's like a00:18:33.798 --> 00:18:35.610 competitor to Redux noise.