1 00:00:08,050 --> 00:00:09,250 In this video. 2 00:00:09,250 --> 00:00:12,640 Let's get started with use reducer. 3 00:00:12,940 --> 00:00:20,500 Because of that, we are going to build a simple to do application to demonstrate use reducer. 4 00:00:20,770 --> 00:00:23,440 So let's see the demo for this project. 5 00:00:23,440 --> 00:00:32,950 If I add to do for example, go shopping and I hit enter, you can see that I have the number of to 6 00:00:32,950 --> 00:00:42,880 dos and let's say studying and I hit enter you can see that I have the list of to dos and this data 7 00:00:42,910 --> 00:00:46,420 are persistent using what is called low cost storage. 8 00:00:46,480 --> 00:00:51,280 So even if I refresh my page, I still have mine to dos. 9 00:00:51,400 --> 00:00:57,700 When I click on Delete, it's going to remove the data from the low storage. 10 00:00:57,700 --> 00:01:02,680 So this is what we are going to build using use reducer. 11 00:01:02,680 --> 00:01:11,410 So if understand what you are going to do, then you are ready to build large applications using React. 12 00:01:11,410 --> 00:01:13,360 So back to business. 13 00:01:13,480 --> 00:01:16,150 So we are continuing from the previous video. 14 00:01:16,150 --> 00:01:23,890 So we are going to move this component and start with our new concept called use reducer. 15 00:01:24,190 --> 00:01:28,210 In your case, we can make some duplicate for future references. 16 00:01:28,210 --> 00:01:32,950 So let's go ahead and do some housekeeping here inside the app. 17 00:01:32,950 --> 00:01:42,310 I'm going to remove this component from here and this component from here passing see components. 18 00:01:42,580 --> 00:01:45,280 And inside the components. 19 00:01:45,280 --> 00:01:53,230 Let me remove all waiting for me here and let me start from clean sheet go away. 20 00:01:53,230 --> 00:02:01,810 And for the context to let me remove the context to our application, we'll crash and add an index where 21 00:02:01,810 --> 00:02:09,970 we are requiring let me remove it from here or so and this one for me here and let's save it now. 22 00:02:09,970 --> 00:02:12,700 Everything is back to normal. 23 00:02:12,940 --> 00:02:19,780 So first is let's go ahead and then create the form component called add to do. 24 00:02:19,930 --> 00:02:24,190 So let's go ahead and then create one component for that. 25 00:02:24,190 --> 00:02:34,000 So inside here I'm going to create one component called ADD to do DOT JS because this action is really 26 00:02:34,000 --> 00:02:35,470 about CSS. 27 00:02:35,470 --> 00:02:42,820 I'm going to copy my CSS for it and I'll provide as a resource attached to this particular section. 28 00:02:42,820 --> 00:02:45,340 So this is mine to do CSS. 29 00:02:45,340 --> 00:02:50,740 So let's go ahead and then create the RTT component. 30 00:02:50,740 --> 00:02:54,400 So here we go for this. 31 00:02:54,400 --> 00:02:57,430 We are going to keep track about the title only. 32 00:02:57,430 --> 00:03:03,670 So let's bring in the you state to manage in ten states. 33 00:03:03,670 --> 00:03:16,270 So here const and then title and then set title great is equal to use state by default is empty. 34 00:03:16,480 --> 00:03:19,630 So here let's add our form. 35 00:03:19,630 --> 00:03:29,470 So I'm going to have some fragments and inside I'm going to add the form element and I'm going to have 36 00:03:29,470 --> 00:03:31,300 one input and a button. 37 00:03:31,300 --> 00:03:41,500 So we impute with a value core title and then on change it doesn't exist yet, but we'll create it very 38 00:03:41,500 --> 00:03:42,100 soon. 39 00:03:42,100 --> 00:03:42,850 I'll start. 40 00:03:42,850 --> 00:03:51,370 So let's go ahead and then create that one here quickly const hand over title change and it's going 41 00:03:51,370 --> 00:03:55,630 to be a function great. 42 00:03:55,630 --> 00:04:06,010 So for a hand with change and it's going to set the title to E or target dot value going to be as E 43 00:04:06,010 --> 00:04:10,210 to target dot value. 44 00:04:10,510 --> 00:04:16,329 So why is not okay, something is equal to this. 45 00:04:16,510 --> 00:04:17,170 All right. 46 00:04:17,170 --> 00:04:23,230 Next is our button to submit or add add to do. 47 00:04:25,210 --> 00:04:25,900 All right. 48 00:04:25,900 --> 00:04:29,800 And let's give it a type or submit. 49 00:04:33,790 --> 00:04:38,650 Let's go ahead and then render this component inside the app. 50 00:04:41,680 --> 00:04:42,280 Great. 51 00:04:42,670 --> 00:04:50,320 Let's remove this one and put it inside a fragment and add the art to save it. 52 00:04:50,320 --> 00:04:54,030 And now let's check in the browser and this is what we have. 53 00:04:54,040 --> 00:04:58,270 So let's go to the to do and let's bring in the CSS. 54 00:05:03,300 --> 00:05:04,680 What to do. 55 00:05:04,890 --> 00:05:09,900 Dart, CSIS, save it and let's see if we're going to have the effect. 56 00:05:09,900 --> 00:05:12,240 And here we go. 57 00:05:12,300 --> 00:05:14,820 Now we have the act to do. 58 00:05:14,850 --> 00:05:20,820 The next component that we need is going to be list of to do so. 59 00:05:20,820 --> 00:05:22,650 Let's go ahead and then create that one. 60 00:05:22,650 --> 00:05:32,700 Also quickly here inside the components is going to be the to do list towards is also I'm going to bring 61 00:05:32,700 --> 00:05:35,850 in the CSS for the to do list. 62 00:05:35,880 --> 00:05:40,860 Well, the CSA is going to be optional because you want to focus on the actual logic. 63 00:05:40,860 --> 00:05:41,250 All right. 64 00:05:41,250 --> 00:05:50,730 So inside it to do list here, let's scaffold the components and here we go for this one. 65 00:05:50,730 --> 00:05:56,370 I'm going to have a parent, Dave, going to be at the to do list container. 66 00:06:03,170 --> 00:06:07,340 And then inside I'm going to have one day. 67 00:06:07,370 --> 00:06:10,730 It's going to be the to do item. 68 00:06:11,000 --> 00:06:20,180 So here with a class name of to do dash atom dash container. 69 00:06:22,100 --> 00:06:22,640 Great. 70 00:06:22,640 --> 00:06:34,130 And inside I'm going to have H three and then I'll add a title here, say to do one and a button for 71 00:06:34,130 --> 00:06:40,160 delete and you're going to be as delete. 72 00:06:40,790 --> 00:06:41,810 All right, let's save it. 73 00:06:41,900 --> 00:06:47,840 Now, let's get back to the main app here or before we save it, let's bring in the case. 74 00:06:53,690 --> 00:06:54,440 Let's save it. 75 00:06:54,440 --> 00:06:55,600 And now, let's see. 76 00:06:55,610 --> 00:07:00,650 Well, we need to mount it inside the app component. 77 00:07:00,650 --> 00:07:09,620 I'm going to be asked to do list here and let's add it below this one as to do lists, save it. 78 00:07:09,830 --> 00:07:12,980 And this is what we have. 79 00:07:12,980 --> 00:07:13,490 Great. 80 00:07:13,610 --> 00:07:18,950 So now we are done with the structure of our entire application. 81 00:07:19,040 --> 00:07:20,210 Then this video. 82 00:07:20,210 --> 00:07:27,650 Let's get started with the main concept by talking about create context and then use reducer.