ReactJS and Redux - Build 4 Web Apps [1/4]

1. Introducing the Course: welcome to an excellent resource on how to learn reaction. Yes and Redox. Congratulations. Learning react will put you one step ahead because it's one of the most highly demanded and paid for skills in the software industry. I designed this course with one overarching goal to get you to have reacted in a Redux on your resume and prepared to build your own react projects from scratch. In this course, you will build four applications. One will get you up and running with the principles of react and introduce JavaScript es six syntax. The next will using a P I and show you had a deal with Web requests In react. Third, you learn Redux. It builds an application that also stores information locally on the browser. And finally, best of all, we'll have a Redox app that has full up education for signing up users as well. As a back came database, I will explain every new concept precisely checking and measuring every fresh idea. That way you have a thorough understanding of the coat and engineering. Also, I'll let you in on a secret right now. Redux can feel complicated at first, but you can boil it down to three basic steps. All right, if you want to finally unlock the key to react and redux and add them to your skill set or you just want to brush up on your Web development chops, then this course is perfect for you. So what are you waiting for? Let's get started coding. 2. Introducing React: Let's take a moment to introduce. React ES six and Redux. If you made it this far, you probably have a sense that react is one of the most popular and in demand software engineering skills of today. In fact, react is the fifth most start project of all time on Get Hub, and it will only continue to grow in Popular. Built by Facebook and supported by Instagram and other developers, this JavaScript library appears on so many platforms. These include Netflix, Airbnb, Wal Mart's website and even more. Now react runs on JavaScript. But most of the react code you find will be an E a six, the six version of JavaScript, which came out in June 2015. Now some of this code Concil look new for people who even have experience in job script. So don't worry. As each new ES six syntax or concept comes up, I make sure to explain exactly what's going on through this course. Now let's take a moment to talk about. Redox Reacts allows us to build applications that scale. It has a way of managing data to make sure our engineering behaves in a consistent way, and in a way that we can easily test now. Learning Redux can feel like trying to absorb a lot of new concepts at once is a whole lot of new terminology. But the essentials can boil down to three simple steps steps, and I'll share with you as we build applications in this course, overall react is six and relax, make a great combination and allow a software engineers to make awesome Web applications. React has such a promising future, and there's no better time than now to learn. React. We in the developer community can't wait to see how far this JavaScript library goes. 3. Installing React and Tools: we'll use a small number of tools to assist us with react development. First off, you need to make sure that you have no Js downloaded onto your systems. For Mac users, simply go to know jazz dot org's and find the HomeLink in home Download Note version 6.9 point four, the one recommended for most users or the recommended download that is currently on. No Js. Now, if you don't use a maxus of not to Worry, had to downloads and find the link relevant to your platform. Whether you need the Windows installer or the limits installer note has it for you. Once a package has finished downloading, open it. You should find a series of steps for no to fully installed on your computer. Continue through the introduction continued to the license. Go ahead and accept everything, then go ahead and type your password. Once you're done, you should see that no GS was installed at a certain location on your computer. Usually it's user local slash VIN, which is the global one in the PATH environment, just opened up the terminal and an easy way to open up the terminal on a Mac system it's press command space, which opens a spotlight future and go and press TRM. And then as soon as you see the terminal icon pop up press, enter and boom, the terminal launches. For those of you new to the terminal, you could basically think of it as a type version of finder or the folder explore on your system. We can navigate through folders or directories by typing CD, which stands for change directory, so I'll change my coding directory. Now I will navigate to another directory, one called Test Directory. Then I'll type L s, which stands for a list, and then you can see all the contents that are currently in there, just as you would with the finder. You could see files and other folders as well. So go ahead and press clear to clear all those contents type CD tonight to get back to the home directory. Clear once again. And now we want to check if note actually installed correctly. Type note dash V with a space in between and then you should see your version number, which for me is 6.9 point four. The current version and then also type NP envy. You should see a version higher than three. An NPM automatically shifts of no NPM, primarily installs models are packages within note. We use a lot of NPM in this course, so you'll continue to learn all about next. Let's insult our first tool within PN. Head back to your browser, go to Google and search. Create reactor. Go ahead and find the first get hub link that pops up and you should find a project that looks just like this. Create react App is perfect for students just starting with react because it allows us to simply focus on the react code, Run our projects right away and see any errors. Remake automatically reflect in our running applications as we build in the process. So scroll down and we'll find their installation instructions right over here. You notice that in order to install, create react up, we can simply use NPM, so NPM install g create react at head back to your terminal and we'll run that command. Or right now let's do NPM install G, which stands for global create. React at awesome. Your output should look like this in the terminal. So before we actually create our first application will need to insult a code editor, and if you already have one, you can skip the next video. But if you want to install a new one or you have to install your 1st 1 like Adam, for example or sublime, the next video might be worth your while. 4. Getting a Code Editor: the final tool will need for react Development is a code editor. The Web has a ton of code editors out there for you to find, but some of the most popular ones and two of my personal favorites include Adam, which get help, openly supports and sublime, which many other developers use now. I use both editors for different reasons, but I primarily developed in react with that. Now you can add it in any editor you like. You can even use text, edit or ex code. But I highly recommend either Adam or sublime because of their formatting, which helps make life much easier as software engineers. Yet downloading Adam comes with a very neat feature. It automatically creates assembling onto your system, which allows you to open applications from the terminal so opening projects becomes as quick as typing. Adam dot within a current directly or Adam test directory, for example, went out of one to open. Now we can easily open project in the code editor by dragging the files or folders icons onto the editor icon. Just like so. But launching a project in an editor using the terminal feels like engineering magic, so just in case you want to do so with Adam, and it's not working yet or sublime. Even let me show you how to hook your terminal settings to do just self. So. Like I said, Adam should automatically create that sibling for you. Let's test it out. If we could actually open Adam first with Terminal go to your applications folder, find the Adam App, go to its contents. It's resource is find the APP folder and then adam dot shh. Then go ahead and open the current directory that you want. Now, as you can see, Adam launches for us. So what we're going to do is create a symbolic honor terminal that allows us to run this command with a very shortened command whenever you want to open at. And you could do so by typing this very long thing every time. But the similar shortens down that command significantly for us. So you do so type Ellen and s, and then go ahead and write out that whole command. Then type slash user slash local slash Been, which should be your path variable. Then type slash Adam. So the last one after the slash is that command you'll want then? Mind says file exists because I already have this Semling set up. However, if we run adam dot afterwards once you do yours, you notice the same behavior where your code editor launches from the terminal. We could do the same thing with sub line so we can link sublime. And so you have sublime installed now for sublime. You also need to go to applications. You find the sublime text app, go to contents, shared support, you find the bin and then the launching command is s ubl within here and then once again find your local path environment variable and then do sublime or SPL whatever you like. And my file exists because I already have assembly. So now I can use sublime dot and we see the same behavior, but with sublime. So now that we have this engineering magic hooked up to our terminal and we have everything prepared for developing react projects, let's move on to actually starting one 5. Wireframing CountdownChamp - Your First React Application!: Hello. Let's introduce the first application that we will create together called Countdown Champ. In this app, we will have a tool that allows us to know how much time it will take to reach a date of significance. So let's count down to Christmas, December 25 2017. No, the AB you see you're already has a counter going and simply every second the counter updates to show how much time remains until the date. Perhaps you'd like to count to a different date, though. Let's say you need to know how many days you have left to buy present for Valentine's Day. So let's put February 14 2017. And there you go, the updates with the new date on the top and there we have a counter going to the day that we input it. So let's get started building it together 6. Building Your First Application: Let's build our first application with react. To start, let's open a new terminal window on a mag. You can usually find the terminal by present command space and typing in terminal. And as soon as you see the icon pop up, just press enter. So here we have a new terminal window. I'm in the home directory. I'm gonna navigate into my coding directory and then navigate into the React folder. Now, if you don't already have a specific folder or directly for coating, I encourage you to make one. Now it just helps keeps your projects and files organized. Now, in this react folder, I will initialize a project to remember its name. Countdown Chip to build a project will use a package we installed earlier, create react at Let's run, create react and then the second argument. After the space, we specify the name of her application. So count down chip now, depending on your connection, it should take a few seconds or so, but as soon as it finishes will start looking at the files and open it in. Once it's done, your output should look like this. It gives you some directions on how to start the development server, how to build a package, how to test it and also how to completely destroyed. Now the first thing we're gonna do is follow that first direction CD Countdown champ. But before we run it, let's go ahead and explore the AB in our editor. So do Adam Dunn. You hear it? ISS countdown chip. From the left, you can see the directory tree where we have all the files and folders here We have known modules folder, but we have all the react code. It's very dense. So unless you're a Facebook engineer, you won't really need to worry about looking at those folders with the public folder. We're gonna only edit the index dot html later, just a little bit. And then the source folder, where we host all the react code and this is what we're going to be mainly interested in. So let's do that second step that we had terminal earlier. And now let's run in PM start here it launches a new local host window. It says Welcome to react. It has their logo is spinning. It says to get started at its source Abdi s and saved to relook all right. Cool. We have her application running, and now that we do, let's customize it by building our very first component. 7. Editing the Application: Let's start editing the application to begin. We're gonna do something crazy. We're going to lead this entire source folder and get rid of all of its contents. So go ahead, delete it. No, that shouldn't empty all the contents in the source folder. Now we still like the name source. So we're gonna go ahead and keep that, but we're gonna create our own index dot Js file. It's a new file index dot jets. Within this fall, we're going to start creating our react cook. Our very first line is import react from for yet now this allows us to use react all of its components the whole library to build her application. The next one is important react dunk from react does Now this package is a completely separate one from react, the controls actually throwing the react code onto the browser for us. Let's write our own personal cook stability React, dump, stop, render Let's go ednitem spacing. And the first thing we want is a def, which, in Web development, simply represents a section of the page. And in this div will write countdown chip and then we need to target where on the html we're going to render this element now. Luckily, if we look at the index dot html, we already have a component with the idea of route. This will allow to target this I d with our react element to go ahead and create our so we'll simply get the element by I d called fruit. Now, this when we save should render countdown champ onto the screen. And there we go. Our personal text of Countdown Champ is now on the application. Next, we're gonna finally create our first component with react, So go ahead and go to the next video. 8. Creating Your First Component: At this point, we can create our first react component. Inter react components comprised user interface and they usually have some reusable and independent quality about for our first component will call it F. And when we create react components were using dot Js ex extension rather than the dot Js extension. So that's right. Abduct J s ex. Now, those of you with some web development experience might find JSX very familiar. It looks just like HTML. But in actuality, dodgy SX is not. Hmm. Oh, it's javascript with the look of a template language like XML, but we use it to create components and elements within react. So let's create this react component. Now we'll need to import react as usual from react. But now we're missing a step. We also want to import the component feature from react. Let's go ahead and he had the component. That's all we're gonna need to import for now. We don't need the react on anymore. Since the index dot Js file is already covering that to begin writing, our component will declare Eat a six class Now those of you with a computer science background well, like yes, six classes they were introducing Atma Script 2015 and allow us to write Java script in an object oriented model. This is especially useful in creating our custom component because we can simply extend reacts component with our class, inherit all of their default methods which we will discuss later as they become relevant to our applications. But the 1st 1 and the most used one is a render method. The render method allows us to return any GSX that we would like. So let's return a new div that says Countdown chain at component Cool. Now you've already discussed importing when we import react and they react down from the modules. But not this component is our own module that we can export to other classes that will later important. So let's export it now and declare it as the default component. Finally, we need the application to recognize this component as a default component to use. Let's go to Index Thaci s and replaces Div with our APP component. Now, some of you might be wondering why we can use the app component without even importing it first. Well, you guys would be exactly right. We need to import at from the current directory and dot always refers to the current directory slash. And as we save, we should see her Dave update onto the screen. But up there's nothing rendering on the page. Why is that? Well, a common mistake within the render method is to forget to use the return state. You always have to return the JSX. You can't simply write it up. This is something a lot of people starting out with React. Forget to do something I myself had to do with a little bit. As I was learning, I was going to say that I never gave back and never go. Countdown champ at component. Before we move on, let's briefly review the three topics we just discussed. A component React is an independent and reusable piece of you. I next JSX looks just like HTML or XML but is actually JavaScript and allows us to create react components. And finally, importing and exporting allows us to share code between modules and files. Let's move on to the next video 9. Structuring the Application: those of you with experience in what development might recall that with HTML dibs are elements without any inner Children can self in close. The same rule applies to JSX, meaning in her index dot Js file. We can change this app element from two tags to one, so let's go ahead and do that at and a self enclosing tag. Next, we'll focus on structuring this application. First off will add some Temple JSX to the app that we can work off of later. Then we'll add some styling to the peace, but adding a CSS file. Let's go and add the structure. Let's start by adding a title Div to our main component. So let's delete this text right now and add a did for the title. And would you say countdown to December 25 20. 70 Christmas. Now we're gonna add some structure for the countdown clock. Love won out of Div and four introduce When will be for the days. So let's say 14 days and of course we're just making this up for now. I will say 30 hours. We need one for the minutes as well. 15 minutes and then 20 seconds and I would make the days lower case since it made all the other time lower case and they're react updates automatically as soon as the saves thanks to create react up. Next, we'll have an input field where the users can type in a new date, as was a button where they can submit that new date. So what's an input fuel? Once again, we'll have a self enclosing tag. It will have a placeholder for now, that just says New date and then we'll have a button right underneath. That said, it's submit. Let's go ahead and wrap this within a div itself, just so they're placed together in the same section, and there we go. We have some template ing for app, but right now it looks really ugly, to be honest. So let's add some CSS to make this just a little bit. Simply, let's add a new file called app dot CSS to the source folder at that ceases. First, let's make a global app class. Then we'll say we're gonna line all the text to the center. We're gonna make all the funds around 35 pixels so that we can actually see it and they were gonna go ahead and give us a margin. I don't want it to be touching the top, so I'm gonna say 20% because that's a nice, adaptable number. Whenever you're changing the screen with Now, those of you familiar with CSS might already know how it works. Basically, you're adding classes to each of your dibs to apply certain stylings such as Texas line font size or margins to change the appearance of your application. So let's go and add this app closets. You're component. Now, before we add any styling, the first thing we need to do is actually include the CSS within our component. So import at dot CSS. It's really as simple as that. We can already go ahead and start using the CSS within our application. Now, my feel intuitive to just write class equals here because we already named it up within our CSS fuck. However, if we say this, we'll notice that none of the stylings get passed out. That's because class is already reserved keyword within job script, So GSX uses a different keyword to name class names within their templates. I can guess what it is. I said it earlier class name. And there we go. There's our new styling already apply. Now, I want the title to be more distinct. So we're gonna add a title component and to make you more distinct, I'm gonna increase the font size. Then, of course, we need to add the AB title class. Name equals title. And there we go. It's much larger, but I'm gonna go ahead and re size is just so we can have the full effect. Nice. Then each of these dibs are gonna have a separate class name. The 1st 1 is going to be clock days. The next one is going to be clock hours. The next one is going to be a clock minutes. The final one is going to be clock second, Let's add a styling. No. And the reasoning behind this styling is that I want all of these to be in line. I don't like how there's a new line in between all of them, so we're gonna change that now. So for my clock hours, I'm going to say the display is in line. And then for my clock days, I'm also going to say, But the display is in life and there we go. We see them lines a lot. And then, of course, we need to do that for the minutes as well as the seconds. All right, Cool. However, we're kind of being a little inefficient with our CSS. We could actually significantly shorten this by using a CSS trick. It's certain classes should the same property. We can actually shorten it. We can just use a comma and see that clock hours also inherits the display in line As you save. We see that the same styling still applies. Cylinder is the same thing for the clock minutes as well as oclock. Second, to make our code that much more efficient. And then, of course, look, they're pretty much touching each other. I can't really differentiate that These air separate words. Let's give them all a margin of 10 pixels, and there we go. That's enough styling for now. Don't worry. We'll have a trick up our sleeve later to really tie in the whole styling and look of this application. So let's go ahead and move on to the next video 10. Introducing State: let's introduce the idea of state in react components. At this point, we've only added template jazz sex to her application with some default text to update the user interface. However, we want to add reactivity and away for the user to interact with it. Here state comes in. You can think of state as the data that is pertinent to the application. Each component has its own local state with respect to the global state of the entire app, just like in a school. For example, it has a state of its number of teachers, number of students and number of classrooms, etcetera. But each student also has its own state, a number of textbooks, notebooks and pens. Let's go ahead and add state to our components. We need to add a constructor to the class. This allows us to have local state within our class. Now we need to pass a props argument, and by convention, you call this props even though you could name this anything you like, however, for props refers to inherited data from any parent component, this is something inherited from object oriented. Programming will become clear later as we extend our application. No The next thing we need to declare is the actual state of our components. And in react. State is always an object in an object. Property keys, Matt to values. And these values can be any valid JavaScript type, such as a string a number or another object. Now the first thing will declare is our deadline. Here's our key in our value will be, of course, December 25 2017. Since everyone loves Christmas, right, let's go ahead and make this title easier to see. We'll replace the December 25 here to our state and in react. When we referred to a variable within our text, we can use this bracket notation to do so. So this that state that deadline. And as we save, we should see an update within her application. And there we go. We save. It is still the same deadline just to show that it works. Let's go and changes to November, or you can change it to any day that you'd like and nice. It says November now. So there you go revenge and state and some data to our application and our class at Component. Let's go and move on to the next video. We'll re actually update the state dynamically 11. Updating State: let's somehow update the state of our component dynamically. To do so, we can take advantage of a specific method within react called set state. We simply need to call this dot set state through code in order to update our local classes data. First off, Let's aquarium method within this class but updates the state. Let's see, we have a change deadline method, which updates a state. Then, of course, we need to call this dot set stayed within this method. Now there's a very important rule to follow. Whenever updating state, you must never mutate or change state directly. Remember, you repeat that one more time. You must never mutate or change state directly, meaning the component will not rear Ender. If, for example, we called this thought ST dot deadline equals November 25 2017. This is an example of mutating state directly. So is this. For example, if we had a counter within here and we called it zero, at first, we wouldn't be able to say this thought state that counter plus equals one. This would not work. Instead, we used this thought set state method. It passed an entirely new object with the key value pair that we would like to update. So let's say the new deadline is going to be November 25 2017. Mutating the state directly would, of course, lead to bugs and areas within the application. However, if you're declaring a new object like you're doing so within this thought set state, it allows the data to remain pier and bug free. Let's attach this method to her button up well, adding on click listener to the button. Well, say on click equals and then we'll add an Essex Anonymous function to call this not change deadline. Now, you might be wondering why we need anonymous function If, for example, we simply call this not change deadline. Having handlers without an anonymous function just like this need salutes within your app, which could cause it to crash. So instead, we take advantage of the E six anonymous function. In order to call this not changed, deadline method will be able to simply say this not change deadline, because the Essex Anonymous function allows us to call just once without causing the loop to crash your application. As we continue to code, Will Seymour anonymous functions and even non anonymous functions in action in order to update our applications. So let's save. And finally, let's click the submit button to see if it works. And there we go. As I click submit. You see that change from December 2 November 25 2017. Let's move on to the next video. 12. Changing Data with the Input Field: so far, we only have one way for the user to update the deadline. And, of course, it only changes to one single deadline, no matter what the user types. Now that's sick advantage of that input field. In order to truly update the application, let's add a new key to the state. This key will be called New Deadline and let's Camel case it. That's when you have two words. But you combine them together, and the second word you capitalize for now will simply said the new deadline to an empty strict. Next, we'll need to update this new deadline. Well, Adam, on change function to the input field. Let's go ahead and format. It's a bit. And in the on change function, we're gonna add an event variable and similarly to an anonymous function. We're gonna have that equal arrow syntax. For now. Let's simply consul dot log this event variable to see what's going on. Let's say for now we'll go and inspect the element of the app so you can access the council . Let's see what happens when we type November, and there we go. There's a lot of data coming up, and the reason why it looks like so much at it. It's because there really is that much data. But really, what we're interested in is just what the user types and we can access what the user types but adding the target dot value properties, Let's go ahead and save. Let's try that one more time. And as you can see, it updates every time the user changes the input field and we have the most recent change, which is November, which is short for November. Finally, since we can see the data already logged into our consul, we can go ahead and change is constant log function to with this dot set state function the updates and new deadline to that event dot target value. Let's change this. It will say this. That said, state, our new deadline. Remember, it has to be a holy object. Is the event that target Dr Value. We'll go ahead and save. The next thing we need to do is change the actual change deadline method a bit in order to truly update the deadline to our new one. For now, on the method that seek out the best outset state here well, simply, Consul log the current state to see what are application looks like So far. Let's save and then we'll say our new deadline is November 25 2017. Let's go in. Press this change deadline function now. So our object deadline is currently December 25 2017. But here we have a new deadline, which is November 25 2017. So that we go, we haven't updating state component. Now we simply need to set the new deadline for the original deadline to that new deadline or rather, the new deadline within the state. We'll go ahead and delete that. For now. Let's see if the entire application works. Do you remember 25? 2017 will go in press submit and there we go. It changes. We could do November 20 if you wanted to. We can even change up the year to something crazy like 30 17 man. If only we could be alive, then to see what technology looks like. Maybe we code with our minds. In any case, the sizing looks pretty unappealing at the moment, but later on we'll add some styling as well as a neat react trick. In order to make this whole advocation looks slick. Let's move on 13. Creating a Clock Component: Right now we have one large component for however, at this point we need to add plenty of logic to the clock feature of her application. In this collection of four dibs over here looks so related to each other, but we might as well, creating entirely new component for it to do so. But adding the clock dot jsx file with our source folder. New file Clark Don't JSX We'll follow the same code as before, so import react as well as a component from react, and we'll also import our CSS. God sees us. We'll declare the CLA class and extend the component. Finally, let's go in export the clock. No. Well, of course, need to read or something. So just as before will render apparent tive. That's our clock. Let's go ahead and grab the JSX that we wrote before you paste it within here to save some time. So copy this. Place it within here. This will be the structure of our JSX. No, let's go ahead and had a constructor memory. We need to pass your argument up props as well as a super props for the object oriented inherited programming style of US six JavaScript. Finally, let's declare some initial state. We need to have some state for the days. Variable hours variable the minutes variable on the seconds variable. Let's say days for analyses. Zero hours also zero in the minutes as zero. And of course, the seconds as zero as well. And it will change all of these numbers to be this state that we want them to be. So this one will be the service at ST dot days. Ours will be this not state hours. Minutes. You guess it this thought ST dot seconds Not just kidding. Minutes. And then this not state got seconds. Cool. Let's say this important within app and the replace our JSX with oclock component. So let's import our clock in the current folder look and then going to replace the entire clock where the entire did rather with our clock component of the self in closing tag. Go ahead and save. It's really low. Let's go ahead and inspect the element. We got something wrong up and here we go a valid react element or no must be returned. Remember how I said before that Orender method was always returned? The JSX, rather than just write it out. Well, here we go. Many of you probably caught that, but let's go ahead and add that right now. And you guys were probably screaming at the screen. David, you're missing something. I'm gonna go and say this and then we go. Zero days, zero hours, zero minutes, zero seconds. Now that we have our clock component, we can go ahead and move on. 14. Introducing Props: it looks pretty. Sq, when the APP has a countdown date of December 25 2017 but the time it takes to get there sits at zero day, zero hours, minutes and seconds. It's Christmas. His fun is, it would seem the time travel this apple only show the true time takes to reach this awesome day or whatever day you'd like to do so. We'll need a way for the clock component to recognize the date set within the application. The parent component. We could take advantage of something similar to state called props in order to do so. Summer two state props refers to some data within the application, However, with props you pass data or state to child components from parent components, meaning I can specify a deadline within this clock, equal the current state of the deadline. So we'll passes deadline from the parent application state to the clock, which will now be able to recognize this deadline as props. In order to prove this, let's go ahead and console log this stop props within her constructor to see what's going on. As I inspect the element, we'll see that this stop props is now an object, and there's a deadline with our shrink of December 25 2017. Props becomes especially useful because as we update the state of our parent component, any state passes props to child components, automatically update and read. Render thanks to react engineering and software principles. Pretty amazing here received the deadline. As a child of the stock props, we can go ahead and use that in order to calculate the time it takes until the past date. Let's add that method within the next video in order to update these numbers right here. 15. Calculating Time Until: Let's add a method that calculates a time left from the past deadline to the current time. Luckily, JavaScript already comes with a date object with a whole lot of functionality that we can take advantage of. So let's write this. Get time. So method. Right now, Get time until we'll have one argument deadline within the method. Let's declare a variable called time Now. Within Essex, we refrain from using the var keyword used in the previous versions of job script. No use Let or const. We most often want to use cons for variables that never need updating and let for variables that do need. Updating in the scope of this function, however, will only need to calculate this variable of time once so we use the const keyword. Now we'll use some methods within the job script date object to help us. We'll set it equal to a date, not parse method off the deadline, and they will need to subtract another the number by parsing the current time right now. And the reason I can simply say new date is because by default, when we declare a new date object within JavaScript, it simply grabs the current time. It says that time as it's time. So the subtraction calculation is subtracting the current time between the deadline and the current date. Within that time, we'll be able to find our occurred relevant seconds, minutes, hours and days that we need to throw onto our counter in order to update the application. To illustrate this, let's simply console log the time so that we can see this in action. And the more add a call to it within our render method for now, for testing purposes, just a c r function working and what this number actually looks like. So let's say this. So the time is something like three billion 118 number way too long to really recognize and of course not to show on the screen. So now that we see this number, we need to really distinguish the seconds, minutes, hours and days from this long 10 digit length number. So let's add some math and computer science to this function, and we're gonna take advantage of dividing in the Modelo in order to grab are relevant numbers. So similarly, we're gonna declare a const seconds and said that equal to the math dot floor function. Divide this time by 1000 and module. Oh, that whole thing by 60. And the module. It looks like the percentage sign. So the whole calculation by six just like this and those of you unfamiliar with the module . Oh, but module Oh, does is it essentially outputs the remainder of a function. So if I did 10 module Oh, free. The output would be one but six modular three gal put with the zero because six divided by three. The remainder is zero, but 10 divided by three. The remainder is one moving on. In order to get our minutes, they look very similar. However, we need to do an extra division of the time by 60 in order to grab are relevant minutes, hours, look similar. Math floor again and bear with me. Hear these functions are gonna take a little time to calculate. Here we go. We're gonna divide time itself, but 1000 times 16 times 60 again in this time for hours, we're gonna modular by 24. Since there are only 24 hours in the day, let's go ahead and add some spacing, so it's easier to read. And don't worry, I'm not calculating these numbers off the top of my head. I'm not some mathematical genius. I wrote these down previously or maybe, and a mathematical genius. And I just don't want you guys to know. So once again, I'm gonna floor on the days and then divide by 1000 times 60 times 60 times 24. And let's output these variables to see if they seem relevant minutes and then we'll do our minutes. I want to see what the hours look like. Ours. And finally, what are the days since two days? We'll go ahead and safe because it reloads. Looks like we got 347 days, eight hours, 35 minutes and one second until Christmas. So close, huh? And it looks like everything's updating. Great. So the last thing we need to do is simply update the state. So let's first update the state of our dates. We could say days is equal to date, will say this and look at that. We have an incident loop. So we have something very faulty going on here. We can't call, get Tom until within our render method and pass this dot set state function. Otherwise, we'll in current infinite loop within our function. So within the next video, we'll learn about life cycle methods to fix this problem. 16. Hooking with LifeCycle Methods: in react whenever component renders on the screen or comes off the screen. We refer to those events as either mounting onto or announcing from the application. React provides special methods for each component based off of these events in order to allow us to run code for application and react calls. Um, lifecycle hooks. The first hook or method will use is a component Will Mount Hook. It runs before the component completely renders onto the application. We'll use this one because you want to calculate the past props, data and the current days, hours and minutes and seconds we need before we render our data onto the screen. So once we have our data, will update the state over application said that the proper stuff gets rendered. Let's add that component will note function right below the props, and then we'll calculate this thought. Get tile until our props did not. Before I save. Let's go ahead and remove this from the render method to make sure we don't get the same error as before. We'll save and there we go. This is unexpected behavior because I didn't actually write component will. Now, I wrote, Come Ponette will know another one of those areas you guys probably recognize. And there we go receive the updating days who? But we also update be hours to the hours. Whoa, it's working now. A cool yes. Six trick that we can use to make our code simpler is to use the key value shorthand. Syntax. Notice how the key and the value look exactly the same. Well, rather than saying days is days. I can simply specify days as one keyword, you know, automatically recognised that days should be the key, and day should also be the value. So as I save and reload, you'll notice that it still works. Same goes for hours, and now I can significantly shorten this line. But just saying minutes and seconds as I save the whole thing updates, Let's go ahead and get rid of these console logs that we don't need anymore. Say it again, and now we'll take advantage of another life cycle. Hook called Component did mount This one runs after the component has completely rendered onto the application within our component did Mount Hook will call get time until every second. In order to continue updating our time job script ships with a special set interval function that allows you to run some code at a specific interval. It runs in milliseconds, so I'll specify our function as the first argument and 1000 milliseconds, which equates to a second as the second argument. So it's right that now set interval, and we need to specify an arrow function, which is anonymous. It will call this thought. Get Tom to our props deadline, of course, and we'll say it runs every 1000 milliseconds. Let's go and save this and look at that. We have updating time already. Very cool. We have a working application now because we can even change the date. Check it out. Let's say I want November 25 2017 and look. About 30 days were subtracted. That's so awesome. There's just a couple of things to fix, however, for one notice that there's a problem with numbers less than 10 they mess up the spacing of the application because they're missing an extra digit. They need a leading zero prefix. In order to fix us, we'll address that issue In the next video, we'll add a leading zero helper method 17. Adding Helper Methods with Ternary Expressions: let's add a leading zero helper method to ensure that our spacing for our timer always looks nice. This method will be clean and simple. For now, declare a leading zero function. It just takes a number or number for short as its argument, if the numb his lesson. 10. I will return zero string, plus the notes. If not, we'll return the number itself. Well, let's test if this works for the days, the hours and the minutes. So call this dot leading zero around each of our variables. Yeah, there, there in there. Let's go ahead and save and see if this function works. So as you can see our hours function, since it was less than 10 as a leading syrup. And if we wait 10 seconds, you will see that the seconds as well has a leading zero for any number. Lesson 10. So let's check it out. Perfect. Now there's one thing we can do to make this leading zero function, even that we can shorten this function by taking advantage of a job script, ordinary expression rather than having this long. If statement, we can shorten it down toe one line. We'll return the number by itself. But we'll check if it's less than 10. And if it is a question works. What would turn the zero string, plus the number otherwise calling who returned the number itself? Let's save freeload. And as you can see with his Turner expression, it's still functional. Turning expressions are great for keeping code understandable, concise and clutter. Lis. Let's move on to the final coating portion of this app, where we take care of some more styling an appearance by pulling a front end react trick out of the bag. 18. Styling with React Bootstrap: now for our final trick will add React bootstrapped her application to make this whole thing look pretty. Now we have a couple steps to take when installing react bootstrap onto your habitation. First off, navigate to a new browser tab and look up. React. Bouchra. You should see a link that looks like this and eventually get to this website. There. You should see a couple steps to take after you navigate to getting started. For one, we need to insult react bootstrap through and PM so that's not to get to the terminal. The men will call NPM install. React. Bootstrap safe, it says. Next. We need to include the latest compiled in unified CIA SAS file link within our HTML document going copy and paste just the 1st 1 We don't want the optional one for now and go to index html and at the top. Let's include a link right before the title, which is that modified CSS Fuck. Go and save in your application. If you reload, some of the text has already changed for us. Let's go in and check if you're finished downloading and there we go. We have react bouchat completely downloaded it onto a node months now, we can take advantage of some of these components. Never get back to abduct JSX. And we're gonna import a few things. We're gonna import the form, component, form, control, component, as always, button component from react boots. Next, we're gonna change up our input fields a little bit. So that way we can have the react boot shop stylings that we want. What changes Outer div to a form component. And this form will have a key of in line set to truth. However, in react, if we ever have a key that simply set to true weaken shorthand it by just saying the key, which is inland. Finally, we'll changes input or next, rather not finally changes input to reform control component. And finally, this button will be okay. But we'll save and real Uh, and then we go. Things are looking a little better. Next up, let's add a class name to the four control on deadline input. That way we can control the font size of this input field. Let's go back to our CSS fall. We'll have a deadline input, I will say. But the fun size is 25 pixels and has a margin of five pixels there. We have updated styling, and that's three sizes to see what it looks like. And there we can see that it's in line here. Let's changes to November 14 15 2017 and it's looking really good. All right, it looks awesome. And we have a complete countdown application. Excellent work. You can change the default date to any holiday for your birthday or special day that you'd like. Have fun with it. There's a challenge portion and summary in the next piece, and in the next section we will start an entirely new application that handles Web request in order to receive data and continue learning about the great front and framework of react . See you that