1 00:00:01,110 --> 00:00:02,970 ‫So as always, let's start 2 00:00:02,970 --> 00:00:05,130 ‫by setting up a new project, 3 00:00:05,130 --> 00:00:07,890 ‫and by taking a look at the final version 4 00:00:07,890 --> 00:00:09,813 ‫of the app that we're going to build. 5 00:00:11,340 --> 00:00:14,040 ‫So let's fire up our terminal, 6 00:00:14,040 --> 00:00:16,590 ‫or the command prompt in Windows. 7 00:00:16,590 --> 00:00:18,780 ‫And then as always, we navigate 8 00:00:18,780 --> 00:00:21,753 ‫to the folder where we want the project to live. 9 00:00:22,830 --> 00:00:24,330 ‫So for me, that's the desktop, 10 00:00:24,330 --> 00:00:27,660 ‫for you it can be any other folder on your system. 11 00:00:27,660 --> 00:00:29,730 ‫And so now as always, let's type 12 00:00:29,730 --> 00:00:34,730 ‫npx create-react-app, version five 13 00:00:36,090 --> 00:00:41,090 ‫and then here, the name of the project is eat-n-split. 14 00:00:41,340 --> 00:00:45,420 ‫So basically eat and split, but for short. 15 00:00:45,420 --> 00:00:48,510 ‫And the name of the app is eat-n-split 16 00:00:48,510 --> 00:00:52,590 ‫because this is the application that we are going to build. 17 00:00:52,590 --> 00:00:55,290 ‫So it's an application where you can basically 18 00:00:55,290 --> 00:00:58,500 ‫go out with friend to have dinner or lunch, 19 00:00:58,500 --> 00:01:01,950 ‫and then you can split the bill using this application. 20 00:01:01,950 --> 00:01:04,770 ‫So, here we have our list of friends 21 00:01:04,770 --> 00:01:08,520 ‫and we can also add some other friends down here. 22 00:01:08,520 --> 00:01:11,490 ‫Let's say Jane, and then the friend 23 00:01:11,490 --> 00:01:14,880 ‫will get a random image exactly like this. 24 00:01:14,880 --> 00:01:18,420 ‫But as I said, the main functionality of this app 25 00:01:18,420 --> 00:01:21,450 ‫is that you can share a meal with a friend, 26 00:01:21,450 --> 00:01:23,580 ‫and then you can select that friend, 27 00:01:23,580 --> 00:01:26,220 ‫and share the bill with that friend. 28 00:01:26,220 --> 00:01:30,390 ‫So for example, let's split a bill with Anthony. 29 00:01:30,390 --> 00:01:35,370 ‫So let's say in total we spent 100 euros or $100, 30 00:01:35,370 --> 00:01:39,120 ‫and let's say my part of the bill was 40, 31 00:01:39,120 --> 00:01:42,510 ‫so I consumed food worth 40 euros. 32 00:01:42,510 --> 00:01:43,680 ‫And so then that means 33 00:01:43,680 --> 00:01:47,340 ‫that Anthony spent the other 60 euros. 34 00:01:47,340 --> 00:01:50,610 ‫Then, down here we can select who is paying the bill. 35 00:01:50,610 --> 00:01:53,010 ‫So let's say that I am spending the bill, 36 00:01:53,010 --> 00:01:56,313 ‫so that's you, but it could also be Anthony. 37 00:01:57,210 --> 00:02:00,720 ‫So if I pay the bill, then after splitting the bill, 38 00:02:00,720 --> 00:02:04,290 ‫Anthony should owe me 60 euros, right? 39 00:02:04,290 --> 00:02:06,570 ‫So right now it says here that we are even, 40 00:02:06,570 --> 00:02:09,210 ‫but now, as I split the bill, 41 00:02:09,210 --> 00:02:12,750 ‫Anthony owes me 60 euros, right? 42 00:02:12,750 --> 00:02:15,420 ‫And it could also be the other way around. 43 00:02:15,420 --> 00:02:18,330 ‫So let's just reload here to reset. 44 00:02:18,330 --> 00:02:21,000 ‫So again, let's say the bill was 100 euro 45 00:02:21,000 --> 00:02:23,010 ‫of which I spent 40. 46 00:02:23,010 --> 00:02:26,580 ‫And so now if Anthony pays the entire bill, 47 00:02:26,580 --> 00:02:30,780 ‫I will owe him 40 euros just as it says here. 48 00:02:30,780 --> 00:02:33,990 ‫And of course, this logic will become more clear 49 00:02:33,990 --> 00:02:36,690 ‫as we start building this functionality. 50 00:02:36,690 --> 00:02:38,430 ‫But before we go do that, 51 00:02:38,430 --> 00:02:41,940 ‫let's again split this UI into components, 52 00:02:41,940 --> 00:02:46,203 ‫which is the first step of the thinking in React process. 53 00:02:47,250 --> 00:02:49,800 ‫So here is the entire UI at once, 54 00:02:49,800 --> 00:02:52,950 ‫which makes it a bit easier to split UI 55 00:02:52,950 --> 00:02:55,950 ‫into the components that we need to implement. 56 00:02:55,950 --> 00:02:59,100 ‫Now, splitting a UI into different components 57 00:02:59,100 --> 00:03:01,650 ‫can be a pretty subjective process 58 00:03:01,650 --> 00:03:03,690 ‫but we will learn some techniques 59 00:03:03,690 --> 00:03:06,780 ‫about how to do this in the next section. 60 00:03:06,780 --> 00:03:08,400 ‫But for now, in this case, 61 00:03:08,400 --> 00:03:11,040 ‫I think that it's actually pretty obvious. 62 00:03:11,040 --> 00:03:14,850 ‫So, we have our list of friends here at the left side, 63 00:03:14,850 --> 00:03:18,930 ‫and then in there we have a few friends themselves. 64 00:03:18,930 --> 00:03:21,570 ‫So, just like we did many times before, 65 00:03:21,570 --> 00:03:25,290 ‫we have basically one component for the list of friends, 66 00:03:25,290 --> 00:03:29,460 ‫and then we have one component for each friend itself. 67 00:03:29,460 --> 00:03:33,630 ‫Then down here we have this form where we add new friends 68 00:03:33,630 --> 00:03:36,030 ‫and then here on the right side we have the form 69 00:03:36,030 --> 00:03:40,500 ‫where we input the bill data and how it should be split. 70 00:03:40,500 --> 00:03:42,360 ‫So, pretty straightforward. 71 00:03:42,360 --> 00:03:43,830 ‫And so let's now move on, 72 00:03:43,830 --> 00:03:47,370 ‫and start implementing some of these components statically, 73 00:03:47,370 --> 00:03:49,143 ‫so without any state yet.