1 00:00:02,320 --> 00:00:04,980 It's time to practice what we learned, 2 00:00:04,980 --> 00:00:07,680 because thus far over the last modules, 3 00:00:07,680 --> 00:00:09,530 we learn a lot about React. 4 00:00:09,530 --> 00:00:11,160 We learn a lot about the core 5 00:00:11,160 --> 00:00:13,140 features that make up React. 6 00:00:13,140 --> 00:00:15,580 And you actually already have enough knowledge 7 00:00:15,580 --> 00:00:19,490 to start building your first simple React projects. 8 00:00:19,490 --> 00:00:21,990 To specifically practice these 9 00:00:21,990 --> 00:00:25,580 super important core concepts we covered thus far, 10 00:00:25,580 --> 00:00:27,730 I get a dedicated project 11 00:00:27,730 --> 00:00:28,970 for which I want to go with you, 12 00:00:28,970 --> 00:00:30,610 which is relatively simple 13 00:00:30,610 --> 00:00:32,570 but which picks up all these 14 00:00:32,570 --> 00:00:34,960 core things you've got to know. 15 00:00:34,960 --> 00:00:38,140 We're going to build this relatively simple, 16 00:00:38,140 --> 00:00:42,060 yet not too simple, application here. 17 00:00:42,060 --> 00:00:43,840 It's application where you can add 18 00:00:43,840 --> 00:00:46,220 fictional users like Max 19 00:00:46,220 --> 00:00:48,810 you can enter an age and add a user. 20 00:00:48,810 --> 00:00:51,420 Now you won't be able to edit or delete the user 21 00:00:51,420 --> 00:00:53,640 but we've got a couple of other nice features 22 00:00:53,640 --> 00:00:55,840 which we haven't built thus far 23 00:00:55,840 --> 00:00:58,800 but which we actually will be able to build. 24 00:00:58,800 --> 00:01:01,950 For example, if I have my empty inputs here 25 00:01:01,950 --> 00:01:04,010 and I click on add user, 26 00:01:04,010 --> 00:01:06,430 you see I get this warning dialogue, 27 00:01:06,430 --> 00:01:07,920 this warning overlay here, 28 00:01:07,920 --> 00:01:10,330 which we can dismiss by clicking on, okay 29 00:01:10,330 --> 00:01:12,053 or by clicking on the backdrop. 30 00:01:12,940 --> 00:01:14,400 You will also see that if I enter 31 00:01:14,400 --> 00:01:16,880 let's say a negative age here, 32 00:01:16,880 --> 00:01:18,610 I get a different error message. 33 00:01:18,610 --> 00:01:21,200 So we got a little bit of a more complex validation 34 00:01:21,200 --> 00:01:24,470 and we of course got this modal component. 35 00:01:24,470 --> 00:01:26,490 This overlay here, which is something, 36 00:01:26,490 --> 00:01:29,273 you know from a lot of web pages as well. 37 00:01:30,210 --> 00:01:32,790 Last but not least, if you add a user successfully 38 00:01:32,790 --> 00:01:35,370 we also reset these inputs here. 39 00:01:35,370 --> 00:01:36,983 So that also works. 40 00:01:37,830 --> 00:01:39,960 So while it's certainly not the most 41 00:01:39,960 --> 00:01:42,440 complex application of the world, 42 00:01:42,440 --> 00:01:44,860 it is a great project for practicing 43 00:01:44,860 --> 00:01:46,700 what we learned thus far. 44 00:01:46,700 --> 00:01:48,740 You can absolutely skip this module 45 00:01:48,740 --> 00:01:50,120 if you're not interested in that 46 00:01:50,120 --> 00:01:52,840 and you just want to continue to the next concepts 47 00:01:52,840 --> 00:01:55,810 to the next things you need to learn about React. 48 00:01:55,810 --> 00:01:57,430 But I would recommend that you go 49 00:01:57,430 --> 00:02:00,320 through this module to make sure you really 50 00:02:00,320 --> 00:02:02,700 understand all those core concepts we 51 00:02:02,700 --> 00:02:05,043 worked on over the last modules. 52 00:02:06,240 --> 00:02:09,820 And I actually encourage you to go ahead 53 00:02:09,820 --> 00:02:12,270 and try this on your own first. 54 00:02:12,270 --> 00:02:16,120 You of course don't have to get the exact styling right. 55 00:02:16,120 --> 00:02:20,030 Instead it is about building these React components 56 00:02:20,030 --> 00:02:22,430 and adding the general logic 57 00:02:22,430 --> 00:02:25,760 I showed you over the last minutes. 58 00:02:25,760 --> 00:02:27,670 Of course this will be challenging, 59 00:02:27,670 --> 00:02:31,420 but you will only need concepts and features 60 00:02:31,420 --> 00:02:34,250 you learned about so you can build this. 61 00:02:34,250 --> 00:02:37,320 But again, it definitely will be challenging. 62 00:02:37,320 --> 00:02:39,450 Nonetheless, definitely give this 63 00:02:39,450 --> 00:02:41,560 a try on your own first. 64 00:02:41,560 --> 00:02:42,960 But of course thereafter 65 00:02:42,960 --> 00:02:46,020 have a look at my course lectures 66 00:02:46,020 --> 00:02:48,960 in this section where I show you 67 00:02:48,960 --> 00:02:51,400 my approach and my solution 68 00:02:51,400 --> 00:02:54,433 which you can then use to compare your solution.