‫So as always, let's start
‫by setting up a new project,
‫and by taking a look at the final version
‫of the app that we're going to build.
‫So let's fire up our terminal,
‫or the command prompt in Windows.
‫And then as always, we navigate
‫to the folder where we want the project to live.
‫So for me, that's the desktop,
‫for you it can be any other folder on your system.
‫And so now as always, let's type
‫npx create-react-app, version five
‫and then here, the name of the project is eat-n-split.
‫So basically eat and split, but for short.
‫And the name of the app is eat-n-split
‫because this is the application that we are going to build.
‫So it's an application where you can basically
‫go out with friend to have dinner or lunch,
‫and then you can split the bill using this application.
‫So, here we have our list of friends
‫and we can also add some other friends down here.
‫Let's say Jane, and then the friend
‫will get a random image exactly like this.
‫But as I said, the main functionality of this app
‫is that you can share a meal with a friend,
‫and then you can select that friend,
‫and share the bill with that friend.
‫So for example, let's split a bill with Anthony.
‫So let's say in total we spent 100 euros or $100,
‫and let's say my part of the bill was 40,
‫so I consumed food worth 40 euros.
‫And so then that means
‫that Anthony spent the other 60 euros.
‫Then, down here we can select who is paying the bill.
‫So let's say that I am spending the bill,
‫so that's you, but it could also be Anthony.
‫So if I pay the bill, then after splitting the bill,
‫Anthony should owe me 60 euros, right?
‫So right now it says here that we are even,
‫but now, as I split the bill,
‫Anthony owes me 60 euros, right?
‫And it could also be the other way around.
‫So let's just reload here to reset.
‫So again, let's say the bill was 100 euro
‫of which I spent 40.
‫And so now if Anthony pays the entire bill,
‫I will owe him 40 euros just as it says here.
‫And of course, this logic will become more clear
‫as we start building this functionality.
‫But before we go do that,
‫let's again split this UI into components,
‫which is the first step of the thinking in React process.
‫So here is the entire UI at once,
‫which makes it a bit easier to split UI
‫into the components that we need to implement.
‫Now, splitting a UI into different components
‫can be a pretty subjective process
‫but we will learn some techniques
‫about how to do this in the next section.
‫But for now, in this case,
‫I think that it's actually pretty obvious.
‫So, we have our list of friends here at the left side,
‫and then in there we have a few friends themselves.
‫So, just like we did many times before,
‫we have basically one component for the list of friends,
‫and then we have one component for each friend itself.
‫Then down here we have this form where we add new friends
‫and then here on the right side we have the form
‫where we input the bill data and how it should be split.
‫So, pretty straightforward.
‫And so let's now move on,
‫and start implementing some of these components statically,
‫so without any state yet.