1 00:00:01,140 --> 00:00:03,480 ‫In the second part of this section, 2 00:00:03,480 --> 00:00:05,580 ‫let's now build our first project 3 00:00:05,580 --> 00:00:08,190 ‫that has some real interactivity. 4 00:00:08,190 --> 00:00:10,743 ‫And so let's get straight to it. 5 00:00:12,060 --> 00:00:14,100 ‫And by now you know the drill. 6 00:00:14,100 --> 00:00:17,070 ‫So if you're on Windows, open up your command prompt. 7 00:00:17,070 --> 00:00:20,283 ‫If you're on a Mac, open your terminal, please. 8 00:00:21,240 --> 00:00:23,760 ‫And then as always, navigate to the folder 9 00:00:23,760 --> 00:00:25,983 ‫where you want to create your project. 10 00:00:27,210 --> 00:00:28,980 ‫So that's my desktop. 11 00:00:28,980 --> 00:00:33,980 ‫And then in there, run NPX, create-react-app. 12 00:00:36,150 --> 00:00:39,810 ‫And then please specify version number five here. 13 00:00:39,810 --> 00:00:42,660 ‫And then finally the name of the project, 14 00:00:42,660 --> 00:00:44,913 ‫which is going to be travel-list. 15 00:00:46,110 --> 00:00:51,000 ‫Then hit enter, and then let create-react-app do its thing. 16 00:00:51,000 --> 00:00:53,910 ‫And in the meantime, I will give you a quick tour 17 00:00:53,910 --> 00:00:56,460 ‫of the app that we're going to build. 18 00:00:56,460 --> 00:00:58,770 ‫So this is the Far Away app 19 00:00:58,770 --> 00:01:01,800 ‫which is a simple travel list where we can add 20 00:01:01,800 --> 00:01:05,460 ‫all the items that we need for our next trip. 21 00:01:05,460 --> 00:01:09,120 ‫So for example, let's say we need two boarding passes 22 00:01:09,120 --> 00:01:12,600 ‫that we really cannot forget, 23 00:01:12,600 --> 00:01:15,270 ‫and then we can hit enter or click here. 24 00:01:15,270 --> 00:01:18,690 ‫And then that item gets added here to the list. 25 00:01:18,690 --> 00:01:21,690 ‫And also you see that down here we have these statistics 26 00:01:21,690 --> 00:01:24,240 ‫that just got updated. 27 00:01:24,240 --> 00:01:27,270 ‫So that's already some interactivity right there 28 00:01:27,270 --> 00:01:29,400 ‫but of course we can do more. 29 00:01:29,400 --> 00:01:31,740 ‫So for example, let's say we don't need 30 00:01:31,740 --> 00:01:34,380 ‫the charger anymore for some reason, 31 00:01:34,380 --> 00:01:37,710 ‫so we can just click there and it's gone. 32 00:01:37,710 --> 00:01:40,980 ‫We also can mark these items as completed, 33 00:01:40,980 --> 00:01:42,990 ‫so basically as packed. 34 00:01:42,990 --> 00:01:45,930 ‫So let's say we already packed that one and that one, 35 00:01:45,930 --> 00:01:48,390 ‫and then down here it says we already packed two 36 00:01:48,390 --> 00:01:52,470 ‫which is 50%, but there is even more. 37 00:01:52,470 --> 00:01:56,670 ‫So we can also sort by these three things here. 38 00:01:56,670 --> 00:02:01,670 ‫So input order or by description or by the packed status. 39 00:02:01,950 --> 00:02:05,370 ‫And so then the packed items here, they appear at the end. 40 00:02:05,370 --> 00:02:08,730 ‫And finally, maybe once we are back from our trip 41 00:02:08,730 --> 00:02:10,530 ‫and want to prepare our next one, 42 00:02:10,530 --> 00:02:14,040 ‫we can just clear the entire list at once. 43 00:02:14,040 --> 00:02:18,240 ‫So it then asks us if we are sure, and yes, we are. 44 00:02:18,240 --> 00:02:21,990 ‫And indeed then our list becomes completely empty 45 00:02:21,990 --> 00:02:23,310 ‫and that's it. 46 00:02:23,310 --> 00:02:26,160 ‫So I think this is a really nice little project 47 00:02:26,160 --> 00:02:29,130 ‫for us to learn some more interactivity, 48 00:02:29,130 --> 00:02:32,370 ‫and it has all these nice but simple features 49 00:02:32,370 --> 00:02:33,810 ‫that we are going to build. 50 00:02:33,810 --> 00:02:35,460 ‫And on top of that, 51 00:02:35,460 --> 00:02:38,460 ‫I also really like this nice design here. 52 00:02:38,460 --> 00:02:41,850 ‫It's a bit retro, which I think really fits 53 00:02:41,850 --> 00:02:44,430 ‫the vibe of this application. 54 00:02:44,430 --> 00:02:46,890 ‫And now before we start writing any code, 55 00:02:46,890 --> 00:02:48,900 ‫let's actually take a look at how 56 00:02:48,900 --> 00:02:52,773 ‫we can break up this entire design into components. 57 00:02:54,030 --> 00:02:56,130 ‫So this first big yellow part, 58 00:02:56,130 --> 00:02:59,640 ‫I think we can call this the logo of the application. 59 00:02:59,640 --> 00:03:01,890 ‫And so we're going to create one component 60 00:03:01,890 --> 00:03:04,980 ‫called logo just for this part. 61 00:03:04,980 --> 00:03:08,550 ‫Then next up, we clearly have some form here 62 00:03:08,550 --> 00:03:12,030 ‫and so that's where we are going to put these elements. 63 00:03:12,030 --> 00:03:13,923 ‫So yet another component. 64 00:03:14,850 --> 00:03:17,220 ‫Next, then we have this entire list 65 00:03:17,220 --> 00:03:20,171 ‫which I think can be called the PackingList. 66 00:03:20,171 --> 00:03:22,650 ‫And then in there each of these items 67 00:03:22,650 --> 00:03:25,320 ‫is well just called an item. 68 00:03:25,320 --> 00:03:27,600 ‫We could call it a Packing item maybe, 69 00:03:27,600 --> 00:03:30,360 ‫but we'll see once we get to the code. 70 00:03:30,360 --> 00:03:32,790 ‫Finally, down here we have this other area 71 00:03:32,790 --> 00:03:37,290 ‫which I think we can just call Stats or statistics. 72 00:03:37,290 --> 00:03:39,210 ‫So this is how we are going to break up 73 00:03:39,210 --> 00:03:41,910 ‫this user interface into components. 74 00:03:41,910 --> 00:03:45,480 ‫And we will talk a lot more about how we actually do this 75 00:03:45,480 --> 00:03:48,300 ‫so how we arrive at these different components. 76 00:03:48,300 --> 00:03:51,120 ‫But that's not the focus of this application. 77 00:03:51,120 --> 00:03:54,030 ‫Here, we just want to work a little bit more with state, 78 00:03:54,030 --> 00:03:55,950 ‫with events, and also learn 79 00:03:55,950 --> 00:03:58,770 ‫about how we can handle form submissions. 80 00:03:58,770 --> 00:04:01,650 ‫So if that sounds fun, then let's quickly move on 81 00:04:01,650 --> 00:04:05,223 ‫to the next lecture and start implementing this layout.