‫Now before we go learn
‫about how React works behind the scenes,
‫let's quickly set up and walk through a small demo project
‫that we're gonna need in a few lectures of this section.
‫Now, this time around, we will do things a bit differently.
‫So we will not create a new project using Create-React-App.
‫Instead, in the starter files,
‫I already basically have that entire project
‫for you to copy.
‫So open up the starter files,
‫and then here in this folder called how-react-works,
‫let's copy this entire starter folder.
‫So copy all of this right into the folder
‫where we are building our project
‫and so then simply call it how-react-works.
‫So you see that here we actually have the source folder,
‫we have the public folder,
‫and also these other files
‫that are always automatically created by Create-React-App.
‫But again, this time we are not doing that
‫because, well, everything has been done already for us.
‫And so now all we have to do is to take this folder,
‫open it up in VS Code, like this,
‫and then we need to install all the packages.
‫So the node modules folder,
‫which is the folder where all the NPM packages are installed
‫is, of course, not here.
‫So all the libraries like React, ReactDOM, and so on,
‫they are not here.
‫So we need to install them,
‫but that's fortunately very easy.
‫So let's open up our terminal here.
‫Ah, it's here in View.
‫And, oh, that's really small here.
‫And as always, make sure that you are in the correct folder.
‫And then all we have to do is to say npm install,
‫or npm i for short.
‫So hit Enter, and then this will install all the packages
‫that are necessary for this Create-React-Application.
‫So it will get this information
‫here from this package.json file.
‫Okay, and we see that it's already done,
‫and so we can now start this project.
‫So just write npm start.
‫And then in my case here, it's asking me
‫if I want to run the app on another port.
‫And so that's because I already had something
‫running here on 3000.
‫So that's basically the demo project.
‫But let's close that for now, actually.
‫So just inspecting this,
‫and then let's open up our app.js file as always.
‫So this time around, in this section,
‫I gave you this already started project
‫so that you can now get the experience
‫of looking at a project
‫where someone already started writing some code.
‫So that's exactly what we have here.
‫So some code here has already been written
‫and so you can now pretend
‫that basically some other developer on your team wrote this.
‫So it's extremely important
‫that you'll be able to understand other developer's code,
‫especially when you work on a team
‫as a professional React developer someday.
‫And so, before we now start the section,
‫I just want us to quickly walk through this code here
‫so I can explain you how it works on a high level.
‫And then by doing so,
‫you can see how we can effectively read code
‫that we didn't write ourselves.
‫So let's start in the app component here,
‫and all that one does is to include the tabbed component.
‫And it passes the content in there
‫which is simply this array of objects here.
‫So, pretty standard.
‫Then the tabbed component has some state variable here
‫which indicates the current tab.
‫So it seems like this is a number.
‫And then down here, we can see that the active tab state
‫is used to render this tab content component
‫using as the content, the content array,
‫at the position of the currently active tab.
‫So this at here is basically modern JavaScript
‫which is the same as this here,
‫so basically reading something out of an array,
‫and that array, again, is this content array up here.
‫So for example, if the state here was two,
‫then the content here in the tab would be zero, one, two,
‫so it would be this object right here.
‫All right, let's just put this back here
‫to this more modern form.
‫And then let's check out
‫what this tab content here actually is.
‫And it's also always a good idea
‫to take a look at the component tree.
‫And so, let's make this here bigger.
‫And so, indeed, we have the app, we have tabbed,
‫and then we have the tab content in there.
‫And of course, we also have these four tabs,
‫but we will leave them for a bit later.
‫So in here, in the tab content, let's see what we have.
‫So we get the tabbed item,
‫which is basically the content that we're going to use here.
‫So we can double-click on that
‫and then we see where it has been used.
‫So we see that we use item.summary and item.details.
‫Then we also see that we have two state variables here,
‫so that's showDetails and setShowDetails.
‫And again, by double-clicking,
‫VS Code will then highlight all of them.
‫So here, we can see that we're doing
‫some conditional rendering with this showDetails.
‫And so, yeah, by default this is true.
‫And then only in that case,
‫we are displaying the item details.
‫And then we change that state down here
‫where we have setShowDetails in this button.
‫And so, this here is exactly that button.
‫So if we click that, then here, the text disappears.
‫So this paragraph right here disappears.
‫Right, then we also have these two buttons down here
‫but we see that they have no event handler attached.
‫So if we click here, then nothing happens.
‫Then, finally we also have those hearts here,
‫and that's why we have this second state of likes.
‫So you see that likes is indeed used here.
‫And then this button here has the handleInc function,
‫so this first one here,
‫while the second button again has no handler.
‫So here, nothing happens.
‫But here, each time we click,
‫basically one like is added there.
‫And so that's because of the handleInc function.
‫So what this one does
‫is simply take the current likes and adding one,
‫and then setting that as the new likes state.
‫Now notice how here we didn't use a callback function
‫in order to set state based on the current state,
‫but more about that later.
‫So I think this component here is pretty clear.
‫And so, let's now go back here
‫and see what these tabs here actually are.
‫So here we have these four tabs
‫and notice how we are actually writing them
‫one by one manually
‫and not looping over some array.
‫So our array has these three elements here.
‫And so the first three elements...
‫So these three are for those three objects
‫and then we have another one where the number is three.
‫But let's take a look at that a bit later.
‫So here we have the num as a prop,
‫we have the active tab, and we have the onClick prop.
‫And as onClick, we are simply passing
‫the setActiveTab state setter function.
‫Now let's go here into the tab and see what happens there.
‫So basically, a tab is just a button,
‫so it's these buttons right here.
‫And what happens when we click on this button
‫is that the onClick function is called
‫with the current number.
‫So let's then actually go back
‫to where these props are passed
‫so that we can understand what the onClick
‫and the num actually are.
‫So onClick is setActiveTab,
‫and num are these numbers here.
‫And so basically, when we click on this first tab,
‫it means that the active tab will get set to zero.
‫And the same down here.
‫So when we click on this tab right here,
‫then the active tab will get set to one,
‫which is exactly what we have here.
‫Then based on this date, as I explained in the beginning,
‫we see that the TabContent will be rendered,
‫at least if that value is less or equal to.
‫So if it's greater than two, which happens in this case,
‫then the different content will be displayed.
‫So let's check that out.
‫And so this one is simply this one div
‫which has a simple h4.
‫Okay, so again, basically,
‫the goal of this other tab right here is just to display
‫this DifferentContent component right here.
‫So let's see that in action.
‫And so, indeed, when we click on Tab 2,
‫you see that the content here changed.
‫And so the title here and the text
‫are exactly what we have here in this second object.
‫And then the same here,
‫so here we now have the third object,
‫so the title and the text.
‫And finally the last one is for,
‫well, for that different content.
‫And you saw that down here,
‫actually, the component tree changed.
‫Now, right, and here,
‫if we wrote any other number, like zero,
‫then, of course, you see that the number changed here.
‫So that is always the number, plus one,
‫and we get then the very first object.
‫So now it says, "React as a library for building UIs,"
‫so just like here.
‫And also both of them are now marked active,
‫which also happens inside that tab component.
‫But of course, let's put it back to two.
‫And with this, I think it is pretty clear
‫what this very small demo application does.
‫But before you move on to the next lecture,
‫make sure that you take some more time
‫to analyze this code on your own
‫so that you truly understand what exactly is happening here.