1 00:00:01,320 --> 00:00:07,620 Hello, and welcome to this project in this project will be building a to do list website from scratch 2 00:00:07,620 --> 00:00:08,790 using the actress. 3 00:00:09,360 --> 00:00:12,480 So this is how the cruelest website looks like. 4 00:00:15,150 --> 00:00:20,330 We'll see the working of the app after seeing what are the tools and frameworks that we learned in this 5 00:00:20,970 --> 00:00:21,350 course. 6 00:00:21,750 --> 00:00:22,830 And this project cost. 7 00:00:23,670 --> 00:00:29,280 So what we will do the first thing basically like the initial step of every project is project set up. 8 00:00:29,640 --> 00:00:34,980 We'll see how to set up the React project and then we'll install some dependencies like material, core 9 00:00:35,220 --> 00:00:39,330 material, new icons exposed and the required dependencies. 10 00:00:39,330 --> 00:00:44,580 So we'll install them in the system and then we'll be having all components. 11 00:00:45,720 --> 00:00:47,060 Excluding apologies. 12 00:00:47,520 --> 00:00:52,560 So in that broadcast, we'll be writing all the business logic code and will be using these four components 13 00:00:52,560 --> 00:00:54,240 so that we can build the reactor. 14 00:00:54,570 --> 00:01:00,690 The four components that header component create area component node component footer component will 15 00:01:00,690 --> 00:01:06,480 be details studying each and every line of code of how to write in these four components so that when 16 00:01:06,480 --> 00:01:08,310 see type that we need to be. 17 00:01:09,150 --> 00:01:14,250 And then finally, we'll have a quick overview of all this component, how to export them and everything. 18 00:01:14,370 --> 00:01:15,840 And then we will finish up the project. 19 00:01:17,040 --> 00:01:22,290 So these are the frameworks and technologies that you will learn components, project structure, lifecycle 20 00:01:22,290 --> 00:01:29,850 methods, react hooks and props the hooks in plural you stocks, react effect, use, affect hooks, 21 00:01:29,850 --> 00:01:36,660 use stocks, state management material, you write code components, spread operator and add on functions 22 00:01:36,660 --> 00:01:37,290 if necessary. 23 00:01:37,710 --> 00:01:40,530 So we learn these frameworks and technologies in this product. 24 00:01:41,340 --> 00:01:44,610 So basically, this is the final product development of this is the heritage section. 25 00:01:44,940 --> 00:01:45,960 It doesn't know section. 26 00:01:46,380 --> 00:01:52,950 So we have added effect on traditional such that when you click on this note, you can see the whole 27 00:01:53,730 --> 00:01:55,890 text is popping the title of the note. 28 00:01:56,190 --> 00:02:00,360 Take like the description of the note and then there is an option subtitle. 29 00:02:00,780 --> 00:02:02,550 Let me give it as a test. 30 00:02:04,330 --> 00:02:09,320 So the description will be this is best work now. 31 00:02:10,510 --> 00:02:15,820 So basically, these are the list item, the note items that we want to make note of so that we can 32 00:02:16,030 --> 00:02:16,720 do everything. 33 00:02:17,530 --> 00:02:24,520 If I click on odd add, then you can see we are having not that is getting added to our list and maybe 34 00:02:24,520 --> 00:02:25,240 the delete function. 35 00:02:25,240 --> 00:02:27,040 If you click on this, it will see that. 36 00:02:28,100 --> 00:02:30,140 So the work will be a study. 37 00:02:33,030 --> 00:02:36,390 Need to study reactor concepts. 38 00:02:38,300 --> 00:02:44,060 And then if you click on particular show like this, you can add all whenever you want platinum deals 39 00:02:44,060 --> 00:02:44,570 with the black. 40 00:02:44,810 --> 00:02:46,130 But it is the beauty of the act. 41 00:02:46,130 --> 00:02:53,330 So if you observe this when I click on add the lipstick is not official, it is only adding an extra 42 00:02:53,450 --> 00:02:55,370 area like a note component. 43 00:02:55,850 --> 00:02:57,110 So this is the beauty of the act. 44 00:02:57,800 --> 00:03:03,950 It only works with components if something changes in the components, only that component will render. 45 00:03:04,100 --> 00:03:06,490 Not all the components, so the header will remain fixed. 46 00:03:06,500 --> 00:03:07,550 The note will remain fixed. 47 00:03:07,820 --> 00:03:12,320 All the remaining Nordstrom to remain fixed, the create area is fixed only the new mode that is added 48 00:03:12,320 --> 00:03:16,010 when we appeared over here, so I can also delete. 49 00:03:17,320 --> 00:03:19,990 Using this great symbol can delete all of them. 50 00:03:21,210 --> 00:03:25,710 So since we are using IRS, just all the data, if you refresh all the notes will be at issue. 51 00:03:26,190 --> 00:03:32,550 But you can use databases such as forced to a sequel, MongoDB sequel database or no sequel database. 52 00:03:32,730 --> 00:03:34,730 And you can store the data in that order. 53 00:03:34,900 --> 00:03:39,840 You can also use your local storage to store the data where it will be the local storage resident. 54 00:03:40,080 --> 00:03:41,010 Go to inspect. 55 00:03:42,750 --> 00:03:48,420 Code and application can see the local shortage, so I clear my local shortage. 56 00:03:48,750 --> 00:03:54,660 Now if you add these components data to the local storage, then if you refresh onto the internet, 57 00:03:54,660 --> 00:03:55,560 data will be visible. 58 00:03:56,070 --> 00:04:00,270 So if this is the extra feature, if you want, we can see that in the end of the project. 59 00:04:00,600 --> 00:04:05,370 So this is the basically the project that we are going to build the Google app or To-Do list or whatever 60 00:04:05,370 --> 00:04:09,270 you call a note taking app, not checkbook or everything, something. 61 00:04:09,900 --> 00:04:15,660 So this is the basically the final version that we are going to be in the next year to will get started 62 00:04:15,660 --> 00:04:22,200 with the react, how to create the React app in a folder and then start to run it on the local. 63 00:04:22,710 --> 00:04:23,790 We see that from the next figure.