‫So, in this section,
‫we will start to learn about events and state
‫by building a very simple components
‫where we can navigate through a few steps.
‫And so let's now, in this lecture,
‫start by building out the static part of that component.
‫Now, in order to build that component,
‫we will actually create a brand new project
‫using Create-React-App.
‫So if you're on Windows,
‫go ahead and open up your command prompt.
‫And if you're on a Mac, then just open your terminal.
‫And remember that in the terminal,
‫you're always in a folder.
‫So you can see what folder that is here
‫in your command prompt.
‫And then from there, just navigate to the folder
‫where you want to create your new projects.
‫And for me, that is, again, the desktop.
‫So remember that you can see all the folders
‫that you can navigate to from here.
‫So I am here in this home folder, basically.
‫And so I can navigate to any one of these.
‫And so that's what I'm going to do with cd.
‫And just by the way, again, on Windows
‫that's dir instead of ls.
‫But anyway, I will now navigate to the desktop.
‫And so now here, let's create our new project.
‫So that's npx Create-React-App and now here,
‫remember to lock in the version number five
‫just so we are all building the same thing here.
‫So using the same versions.
‫And then I will simply name this project here, steps.
‫So then hit enter
‫and then Create-React-App is doing its thing.
‫And in the meantime, let's actually check out the component
‫that we are going to build.
‫So that's this one right here.
‫So it's basically this component where we have
‫these three steps.
‫And as I said in the beginning, we can basically navigate
‫through them by clicking here on these buttons.
‫So when we click next, we go to step number two.
‫And so then we get apply to jobs.
‫So first we had learn react, then apply to jobs
‫and then invest all your new income.
‫So we can click this buttons here
‫so we have some interactivity here
‫and we can then also close and open up this component again.
‫All right, so again, in this lecture, we will start
‫by building out the static part of this component.
‫So just the component basically without any interactivity.
‫So just writing the JSX.
‫But anyway, Create-React-App has now finished.
‫I will just quickly again rename the folder here
‫and then let's drag and drop it here onto VS code.
‫And as always, you can also open it right here.
‫Okay, so let's clean up our starter files a little bit.
‫And in fact, I will delete almost everything here.
‫So we will just leave app.js and index.js
‫so all of them can go to the trash.
‫And now let's open up index.js.
‫Now, this time we will actually not write all
‫of this here again by hand
‫because now you already know how that works.
‫And so we can basically keep the code here
‫that Create-React-App put there for us.
‫We just need to get rid of this part
‫and also of this import.
‫Now we also got rid of the index.css file.
‫So this import right now doesn't work
‫but I do actually have a CSS file in the starter files.
‫So let's open up the files that we downloaded
‫in the beginning.
‫Then here in the steps starter files, we have these two.
‫So let's copy them.
‫And then in steps, let's place them here in the source.
‫And then let's also just move this vanilla.HTML
‫into the public.
‫So we're going to check out later what that is.
‫Okay, then going back here
‫notice how we are importing this app from this file app.js.
‫And so that's this one.
‫But here, let's clean everything.
‫And let's once again start from scratch
‫by creating a new component.
‫And as always, that component will be the app component.
‫So function app and so you see that usually we use
‫a component called app as the root component
‫of our application.
‫So basically as the component that is the parent component
‫of all the other components.
‫Let's just return something here.
‫Hello React.
‫And finally all we have to do is to export this function
‫from here.
‫So export default, so that now index.js can import it here
‫and render it into the dom.
‫So just again, like we wrote before by hand
‫but now we will just leave the code here.
‫Of course, we don't always have to do everything manually.
‫Now let's come here to our integrated VS code terminal.
‫So just by clicking here, and as you see
‫this is already automatically in our project folder
‫or at least it should be.
‫So now there's no need to navigate anywhere.
‫All we need to do to start a project is to run NPM start.
‫So this will then automatically open up a new browser tab.
‫And yeah, here it is.
‫So this is the content of our app.js.
‫Alright, just giving ourselves a bit more space here.
‫And so you notice that the file name here
‫app.js is exactly the name of the component.
‫And so this is going to be a pattern
‫that we will see throughout the course.
‫But anyway, let's not together write the JSX here
‫so that we end up with something like this again
‫just without the interactivity.
‫So we actually start with a div
‫that has the class name of steps.
‫And if you're interested in the CSS, then of course
‫make sure to check out the CSS file that we just included.
‫And now this div here has three child elements
‫so it has a div with the class of numbers.
‫And so here we will have these numbers.
‫1, 2, 3.
‫And now to make this a bit faster, I will just
‫duplicate the code here, which as I explained to you before
‫we can simply do with this command here.
‫So copy line down, I think I actually personalized
‫this command right here.
‫So for you, it's probably another one, but you
‫should see which one it is right here.
‫And if you want, you can also personalize all your shortcuts
‫right here.
‫Okay. But anyway, let's now move on to the next one.
‫And here we actually want a paragraph,
‫so a paragraph with the class name of message.
‫Let's just use a placeholder for now.
‫And then finally a div again for the buttons.
‫So here we then will have one button element.
‫Let's see.
‫Yeah, this first one says previous
‫and then another one which says next.
‫So here basically we have the numbers
‫then the message and the buttons.
‫And so what we have here is already looking
‫pretty close to that.
‫Now the buttons here are not purple like in the demo
‫and that's because we will later have another button
‫which should not have that background color.
‫And so let's add those stylings here directly
‫to the two buttons.
‫And so with this, we can then also practice again
‫how we add styles to some individual JSX elements.
‫So remember that we do that by passing in basically
‫the style prop into this element.
‫So then we enter JavaScript mode
‫and then here we can define our object of styles.
‫So background color
‫and here the color is 7950F2.
‫And also the text color, let's set it to white,
‫which is FFF, and it needs to be a string of course,
‫since again, this is just a JavaScript object.
‫Now, in case you're wondering why these colors
‫are so nicely highlighted, that's simply because I have
‫this extension called color highlight.
‫So a very popular one with 5 million installs.
‫And so if you want to replicate the way this looks
‫then you can just also install that.
‫But here, let's just copy all of this
‫to make it faster.
‫Next.
‫And yeah, that's looking pretty close.
‫All we are missing now is the highlight here
‫of the current step.
‫So here we are in step number one, and therefore
‫it's now highlighted with this purple color.
‫And for that we have yet another class name.
‫So class of active now okay, now finally, let's also
‫add the message here.
‫And those messages are actually in the CSS file
‫that I provided for you.
‫So I placed this JavaScript object here as a comment.
‫And so let's paste that out here outside of the component.
‫So this data doesn't depend on anything
‫that is inside the component.
‫And so it should be located outside
‫because otherwise each time that dysfunction here
‫is executed, this data, so this array will be created again
‫but we will learn all about that a bit later, of course.
‫So when objects are created
‫and when these functions are executed and so on.
‫So right now we are only learning really
‫how we use these react features
‫but not yet how they work behind the scenes.
‫So the mechanics of react are still a bit hidden to us.
‫We are only just learning how we use the different features.
‫So now we need this message here basically.
‫So the first element of the array right here
‫but we're not going to just copy it, right?
‫So we want to read it dynamically.
‫And so let's hear inside this component, define a variable
‫which will tell us which step we are currently in.
‫So let's do const step and let's just set it to one.
‫And by the way, it is this step here
‫that we will want to update later
‫as we click on these buttons.
‫But for now we are just building here the static part.
‫So we are just manually setting it to one.
‫So then let's write step and then the number of the step
‫and then let's read the value out of the array.
‫So that's messages at position step.
‫And we need to minus one here
‫because of course the array is zero based.
‫Alright? Ah, beautiful.
‫So if we now manually change it here to two
‫then that will then change the message here.
‫But what didn't change is that this step number two
‫was not marked as active.
‫So basically we need to now set the styles here
‫on these elements conditionally.
‫So if we just add the class name active to all of them
‫then they would always be active
‫but that's not what we want.
‫So we need to basically determine this string here
‫based on a condition.
‫So just like we learned in the previous section.
‫So let's enter JavaScript mode
‫so that we can write a template literal.
‫And so here we will then produce either active or nothing.
‫So let's enter the JavaScript mode basically
‫of the template, literal.
‫And then let's just ask if the step is greater or equal one.
‫And if so, then the result of the operation
‫should be the string of active.
‫And if not, well then just nothing.
‫So you see that this one here already became purple.
‫And so that's of course because two is greater than one.
‫Right let's add this to all of them.
‫But then here, of course we need to adapt and yeah,
‫nice, that's working.
‫So if we had number three
‫then all three of them would become active.
‫All right?
‫And let's just quickly check this out.
‫So you see now this one has the class of active
‫and these ones still have the class attribute
‫because we specified it here
‫but then there is no string to it.
‫So that's basically just this empty string that we return
‫in these two cases.
‫Great. So that's the static part of the application.
‫But of course, we want to now navigate here
‫by clicking on these buttons
‫so not changing manually here, this step variable, right?
‫And so that means that it's now time to learn
‫how we can handle the click events on these buttons.
‫And so that's what the next lecture
‫is going to be all about.