Getting started with React JS

1. Intro: Hi there. My name is Daniel. I'm a developer here at Skillshare and I would like to welcome you to this getting started with React codes. The goal of this course is to give you the needed concepts and ideas to be able to start using ReactJS in your web applications. The course is split in two sections. The fundamentals part, where we will discuss the building blocks of React, things like React components, properties, state, or how to use CSS to style your components. All the lessons from this section, I will show modular and to the point so you can use them later as references. Also, there is the examples part. In here, we'll build more complex examples that I developed across multiple lessons. We'll see how the basic concepts of React are combined together in order to build a full application. I encourage you to follow along and code alongside. The course comes with more than 15 concepts and every lesson has its starting project and also an ending sample of how those files should look like at the end of the lesson. Also, before starting this course, please make sure you have installed the Create React app utility. The links are provided in the description of this course. Please do note that while this is a course dedicated to introduce you to ReactJS, you should have a basic understanding of JavaScript, HTML, and CSS in general. Let's get started and see how React can make your life easier and boost your career. 2. Your First React Component: The starting template of our first exercise is almost empty. We have this index js file that only contains an element and also a index.html with one empty body. Keep in mind that in order to start our exercise, I've downloaded our starting template, I zip it, and after running npm install and npm [inaudible], we should have this alert popping up whenever we save a file. The scope of this lesson is to make our first react component. For this, I will first need to add in the index.js, the import statement for react. There are multiple ways to create react components. The most classical approach is by using JavaScript classes. For this, I'll first create a class called first component. This first component will extend React.Component. The [inaudible] cocoa for react component is the render function. React will expand the tag corresponding to that component to whatever is returned from the render function. In our case, if we want our first component just to be an h1, in here, I will say that I want to return h1 with the text, hello world. Now if we save and the page refreshes, we'll still get only this alert as an output. This is because we did not tell react where in the HTML to place this component. First, let's move this alert and after, I'll go inside the index.html in here, create a div with the id of root. This new created div will serve as the container for our component. Back in the index js I will add a new impulse statement. This time for a ReactDOM. ReactDOM also has a render function but this one takes a specific react component and attaches it to an HTML note. We can say ReactDOM.render and as the first parameter, we'll give our first component and as the second parameter, we would use the document.getElementById and we will say that we want to attach this first component to the ID of root. Now, if I save, we can see on the screen our first react component. As a conclusion, the idea is that any react component has this render function and react will expand by default the actual react tag to what is returned from this random function. 3. Nested Components: The component we have on the screen, it's a very simple one. It just has a h1 HTML node with some content. But when we're in that function, we can also return more complex HTML structures. For example, in here I can add a link. If we save, we can see that things work as before. What if our component needs to be turned out even more complex direction? Let's say that after this h1, we also want to have a horizontal line. If we save, we'll see that we'll get an error. This is happening because in normal conditions, the render function should just return a single root element. In new innovations, there are workarounds for this world. But the easiest fix in our case, it will be just to add here closing div that will serve as the root element. If we save, we can see that now our component also has an h1, a link, but also this horizontal line we added earlier. But things can get even more interesting. What if we need another component that is made of two components of this type? In the end, a React application is a collection of React elements that work together in order to achieve a common goal. We'll add a new component, and this component will be called App. In order to build it, I'll just copy-paste this first component, change its name to App, and from that end of function initially, we'll just return this empty div. Now in ReactDOM, if we replace that with component to be set to App and save, we'll just get the empty screen. This is happening, of course, because from this end of function, we'll just return the empty div. But we can come here and from the return statement also add two components of type first component. If we save, we can see on the screen that our application just got more complex. It's possible to go as complex as we want with these type of structures. We'll see in the future lessons how we can use things like properties, context, or events to send data from one component to another. 4. JSX and Interpolation: Let's take a look at what we have on the screen. We have a JavaScript class and also some other JavaScript objects that are imported and used. You may wonder, even if we are in a JavaScript file, how that we can use HTML structures like this one? Well, this is because over syntax called JSX that comes from JavaScript XML and was developed by the folks at Facebook to be used with React. The cool stuff is that we can use this type of mix between HTML and JavaScript even at a deeper level. This render method is a JavaScript function in the end. So by using JSX, I can interpolate some JavaScript variable into the actual HTML. This means that I can declare here a variable called x with a value of 10, and inside of the return statement, add a new paragraph that says something like, the value of x is, and using curly braces, I'll just input here the name of the variable, in our case x, and if I save, we'll see on the screen that we have this new paragraph that is made of some static HTML text, but also offer value that comes directly from JavaScript, this 10, even more so we can add Ruby or JavaScript expressions here. Something like the double of x is, and here inside curly braces I can add anything I want as long as it is a JavaScript expression and say something x multiplied by 2, and we will get the double of x is 20, and this is not restricted to numbers. For example, I can use JavaScript objects or some other stuff. Let's say we will define here a new variable called my-string with the value of React is cool, and after that go in the return statement and in here add a new paragraph that says the first five characters are and by using curly braces, I'll take the my-string and say sub-string of zero and five and this will work as we can see on the screen the first five characters are React. This is how we can use JSX and interpolation in order to make our React components display some complex data. 5. React Component Properties: In order to explain what react properties are, let's start from the current example. We have our React app that displays two paragraphs. One with the content, "Hello, my name is Bob", and the other with the content, "Hello, my name is Joe". Given the fact that the content is very similar, it will make perfect sense to eliminate these redundancy and build a react component that displays this text. Something like, the say hi component, from its render method, I will just return an empty paragraph with the content, "Hello, my name is". In theory, we should be able to replace these two elements with something like, say hi component for the first paragraph and the second component for the second paragraph. But there is a problem here, and that is the fact that for the first paragraph, the name is Bob, and for the second one, the name is Joe. React properties are exactly what HTML [inaudible]. For example, if I take a link note here, with some text. I have this href attribute that I can point this link to something like google.com. I can come here and say, okay, the name for the first component equals with Bob, and the name for the second component equals with Joe. We have this in place inside of the actual, say hi component in the render method, I'll create a new constant called name, and this name will be equal with this.props.name. Having this name extracted, I can now replace this using interpolation, the name of the constant I just created. If we save now, we can see that for the first component we have, "Hello, my name is Bob", the value we have sent here, and for the second one, we have, "Hello, my name is Joe". Anything that is stored in this property references is a constant. We cannot modify the value of a property. For example, if I type here this.props.name equals Daniel, and if we save, we'll get the following error saying that we cannot be assigned a new value to a property. Keep in mind that properties are constant. However, what we can do is to use JavaScript destructuring, in order to write less code when we extract our properties. By having these things in place, I can now remove the static paragraphs. You may wonder if in a react application I can say there's a parameter, something else besides a string, something like, let's say the age of the ones who says hi, and the answer is of course, yes. I can use numbers, booleans, objects, or even functions as parameters. The only difference is that for things that are not strings, I will need to use curly braces in order to send a value. For example, if I want here to add age equals, and I will say in curly braces, 25. If I will send this 25 as a string, inside of my component, this will be picked up also as a string. It's here where we'll use curly braces in order to send a number. In the say hi component, this structure, also this age property and in here add something, "My age is" and inside curly braces the age. If we save now, we'll see that for the first component, it would tell us that, "My age is 25", and for the second one, nothing will be printed out as we didn't send any age property. 6. Basic UI Events: In this lesson, we are going to take a look at how React user events are working. Our components are not worth too much if they don't know how to handle user events. Maybe the most used event is the basic click. Let's say that we want to make this button to show us an alert when clicked. I'll have here a function called show message. This show message function will have an alert saying something like ''Hello there''. React knows how to handle events by using function properties. There are some built-in properties that know how to handle basic events, like onClick. I will say that for my onClick event I want to call this function that I just wrote. I will say this, that show message. After we save, now, if I'll press this button, we'll get the alert we just put in the show message function and we have more events. For example, if we want to intercept a mouse enter event, I will just add here onMouseEnter. I will point this event to this that onMouseEnter and of course I will also have to create this function. For now, here I will just add a simple console log message saying something like ''this is on mouse enter''. Now if we save and open up the console, we will see that all the time we are hovering the button will get this message printed out in the console. In the React documentation, there is a complete list of the UI events that I've supported. I'll put this link in the description of the lesson. We have things like double-click, mouse over, mouse out, keyboard events, focus events, and much more. 7. Events Scope Binding: Maybe the most common pitfall when selecting to use the gear components is the scope binding. What is this scope binding? Let's say we have the current situation. A button that has onClick handler and onMouseEnter. Later on in our application, we have the need to have multiple of these buttons. In this case, I want to create a new class called MyButton. This MyButton will just return a button that has these onClick and onMouse handlers attached to it. Inside of the app, I will remove the handlers and instead of the standard HTML button, I will just use this MyButton class that I've just created earlier. As said, we want to have two of these buttons in our application. Now the interesting part, it will be, to be able to customize these two buttons sets, both of them now are displaying exactly the same message. We can do that by using a property. I will say here that for the first button, the message equals some message. For the second button, the message equals some other message. Having these properties, I can come here now in the alert and use instead of the standard message, something like this.props.message. However when we click the button, we will see that we'll get this error, "Cannot read 'props' on undefined." This is because of the problem we mentioned earlier about this combining. The idea is that when we passing the handler, we are in a different context and React doesn't know about the cargo class. In order to fix this, we have two options. The first option, it will be in here to bind the showMessage function to the this element. If we save, we can see now that if I'll click, we'll get the show message, and if I'll pick the second one, will get some other message. But somehow this is a bit cumbersome to always add to a handler that bind to this. We can use in our advantage. The fact that the arrow functions for ECMAScript 6 are directly bound to the parent scope. By this, what I can do is to take this showMessage and make it an arrow function. Now I can easily remove the bind and if I'll click, things will work as expected. As a general rule, whenever we are using ECMAScript 6 classes in order to create their components always use arrow functions in order to create event handlers. 8. Component State: The React state is allowing us to manage the change of all elements from React Components and update the visuals accordingly. In order to introduce this concept of state in the React Components, let's simulate the behavior of users logging in in an application. Initially, we have these two buttons. We've clicked land ducks attached to them. If I click on this button, we'll get the following console log message and if I'll click on this one, we'll get another console log message. This is happening because in here I have onClick set to logged in user and logged in admin. That being said, what I want to happen in the final application is also to have here displayed the user type that is currently logged in. For example, if I click "Log in as admin" here, it will have to guide the userType is admin and if I'll click "Log in as standard user" in here, it'll have to guide the userType is user. In order to use the state, we have first to declare it. When using Enigma skip six classes, we can declare the state into wait. The less verbal way is by using class attributes. Somewhere here I will say state equals, and the state of a React Component is always an object containing the state variables. In our example, we just need one of these variables and it will be called userType. Initially, it will have a value of a string none. The second way to declare the state is inside of the class constructor and the syntax looks something like this. In the end, the result is the same only that this constructor function takes a bit more time to write. I will remove it and use the initial variation. What I can do here after the state is declared is that I can go in here and write this.state and I will say that I want to display the userType. Even though in the moment we save we will see that the result is exactly the same. What we can do having this mechanism of state set in place is that in here, I can replace the console log message with a method called set state and this.setState is always the method that we want to use in order to modify the state in a React Component. What I will do is give it an object with the things I want to change into that state. In here, I will say that the userType, I want to be set to user. For the second console log message I will have this.setState and I will say that the userType needs to be changed to admin. Let's see what happens now after I save. If I'll go here and press "Log in as an admin", I will have the text change in the user type is admin and in here, if I'll press "Log in as standard user" I'll have the user type is user. What I managed to accomplish is to have that state of a component update, but also the visuals of that component to be changed accordantly. A few things I would like to point out. First, always use the set state to change the state. If we would just do something like this.state.userType equal something. When I'll save, first of all, we'll see that we'll get a warning in our console, but also if we press the user button, no change will happen on our screen. This is happening because even though the state is change, the render method was not called. If we want our UI also to be updated, always in here, have something like this.setState and whatever we want to change. The second observation will be that we always have to initialize the state before we use it. For example, if I will delete here the initialization of our state if we save, we will see that we get an error box telling that we cannot use something like userType until that state is not initialized. Finally, the third one, this.setState merges this parameter with the current state, it does not replace the current state. Basically what that means is that in here, in the initial state, if I will have a new state variable of x set to five, when I'll call in LoginUser or LoginAdmin, this set state and I will give a new value for the userType. Only this user type will be changed. The initial x will be set to five and no change will be done to it and then we have it. These are the first steps, but also the first pitfalls you will encounter when using React setState. 9. Styles: The scope of this lesson is to see how we can use CSS in order to style our React components. By the end of the lessons, we want to be able to build components that look as squares and that we can specify what background color that square should be. As a starting setup, I already have here the class square, a component that only returns a div and it gets us a property of text, and that text is displayed on the screen. The first thing that we want to do, is to attach a CSS file to this index.js. For this, I will go here and create a new file. This file will be saved as index.css. The interesting stuff in React, is the fact that we can import for every file some CSS files that we need in there. Here, I can say that I want to import, and from the current folder, import, index.css. Just to see that everything is working, I will go here and I will take the HTML attribute. I will say that I want a border gray of white pixels to be attached to it. Now if we say, we can see that basically the index js and index css are now linked, and the styles from the CSS are applied in my index.js file. Knowing this and having as a final goal, components like this one, I'll go back in the index CSS and here create a class called square. I'll start to list the CSS properties that I'll need in order to make our divs to look like the ones in the image. First, I will need to add a border of black of one pixel. After that, I will say that the line height for our text is 100 pixels. Also, the width of our components are 100 pixels. I'll also need text-align, set to center. Finally, we'll need a bit of margin of 10 pixels. This class square will give us the basic layout for our components. Now, if we go in the index CSS, what we can do is come here, and say className equals. I will say that I want that this div to have a class of square. If we save, we'll see that now our divs also got the CSS properties that are listed in this class. One thing that I would like to point out, is the fact that in here I've used the className to assign a CSS class to an HTML attribute. This is because in the JS world we already have the class as a keyword. In normal circumstances, you'd use a className in order to assign CSS classes to HTML tags. Still our example is not complete. It would be nice to be able to say, that this is a red square and this is a yellow one. For this, we'll use the instyles of React. In a React component, it's possible to go and set a style attribute that receives as a parameter, an object containing this instyles of that component. Now I will say here something like, the style equals. Let's say the color initially is red. If we save and go back in our application, now you'll see that both our squares now have a text set to red. But the interesting stuff is that we can map these value to the value of a property. I can come here and say the color equals red. For this one, the color equals yellow. Finally, we can change the starting value of red here to this.properties, and I will say the color. If we save, we will see that for the first square, the color is red. For the final one, the color, it's yellow. To set it as a background color, I will just have here to write, this is a background color, and camelCase the color worked. If we save, we'll finally see our desired output. As a conclusion, keep in mind that we can attach CSS files to our React components, and we are able to style these components or by using the className and attach a specific CSS class to it. Or by using inline styles with this style attribute in order to add more flexibility to our styling. 10. How to use the React Children Object: Hi there and welcome. There are pretty high chances you may have heard about this data for children before. In its essence, the probes that children is used when you have a react component like this gallery. You want to use inside it the HTML content via component declaration receives. For now, we have an empty image gallery. If I want to add some content here, let's say this simple paragraph tag and this paragraph to be rendered in our gallery component. I can go and write inside curly braces, this that props their children and done. We have it working. Of course, we replace this text, we forget picture and we have our folks cat into the gallery. But React also knows how to display multiple child elements, not just one. Nobody can stop us from adding one more picture because you can never have enough pictures. If we refresh, we have a new picture on board. If you take a look into the React js docs, you will see that there is actually this children object that gives us access to a set of methods. It may be a good idea to later check all of these methods come here. For example, if you want to show how many child elements your component has, you can use the count method. In order not to have to write all the time react that children, I will add the children object as a separate import. Now I will create a new paragraph with some content and here use children.count and pass it, what do we want to count? After the refresh, we can see now that we have on the screen also the number of the children. If we want to force our gallery component just to receive one child, we can use children that only, and so on. But maybe the most useful children method is the map using it, we can pass through all of the children and map them to our returning element. In our case, we could say something like children, that map plus this anonymous function. It will take one child at a time and return what it should be displayed. For now, the output is exactly the same but the cool stuff is that now we can control these elements. For example, if we want our library to allow only images as children, we can say here, if element that type, not equals image, then throw a new error. For now, everything is the same as before but if I add in the gallery, let's say h1, well, we will get this error, we'll have to delete this for now just to have all code working again. Another thing that we can use map for is to manipulate the shared elements not just to restrict them. For example, if an image does not have a title attribute, we would like to add a default one. This element parameter is of type via component. We can say here something like if there is not element that props that title, then element that props that title equals just the cat. We'll get this error now. Well, you may recall that the prop is over via component read-only. Fortunately, we can walk around this by using the clone element. We will assign this element to a clone of itself. But in a react clone element, we can also pass in a second parameter to set up new properties. In our case, I will set the title to be just a cat, and we should be good to go. When I will save, we'll see that when we inspect this element, we also get this default title API look. I hope you have enjoyed this show to the app tutorials. If you have questions, feel free to ask them in the comments below. I am Daniel and see you then next time. Cheers. 11. Create a game with React part 1: Hello and welcome. My name is Daniel and I'll be your instructor for this practical VRGS example. Our scope for this tutorial will be to build these very simple game of rock, paper, scissors. In this game, we have two players, the red one and the blue one. When we place the "Run Game" button, our game will show a shuffling animation and randomly select one of the fully available elements. Based on what are selected for each player, our application will decide which of the players is the winner. Let's get to work. In the starting template for this project, I work on NPM install. If you have not done it before, you can see in the links for this episode, a guide on how to set up your environment. After the NPM install is complete, we can type NPM start and we should have our application up and running. Let's take a look at what we currently have in to the starting code. First, index.js file, which only renders out our application. Alongside with it, we have this app, CSS, that contains the styles for our application. Now, given the fact that this is a ReactJs course, we'll not discuss too much details about how the CSS styles were built. Only when needed, we will deal with the CSS parts that are important for our application. The most important part is this app that JS file, that will serve as the entry point for our application. For now, it only renders out a simple React component that has just an empty div. The first thing that we are going to tackle is the creation of these two player cards. If we think a bit about them, they are stateless components, that are depended on two properties, the color of the player and the symbol. With this in mind, I will go back into the code and create a new stateless component. This stateless component will be named player card. Initially, our player card will just be an empty div with a class name set to player-card. This class name is already defined in the app CSS and it shows the basic rendering of our cards. Now, with this stateless component created, I can go back into the render method, and in here add two new components of type player card. Now, after we save and the page refreshes, we can see on the right side the two new created components. As we said earlier, our player cards are dependent upon two properties. They are depending on color and also on the symbol. With the new declared properties, I'll set the color for the first card to red and its symbol to paper. For the second one, I'll set the color to blue and the symbol to rock. To ensure that everything is okay, I will go back into the player card component. In here, I will display the symbol property. After we save, we can see now that our components also have the given symbols. You may be wondering why the second component has its texts written upside down. Well, this is because inside the app CSS file, we have a special rule that we'll discuss at the end of the next episode. If we go back at our final example, each of these cards should be colored in the corresponding color. This is a great opportunity to use the inline styles of React. For this, I will go and create a new object called style, and inside it, I will set the background to be equal with what we receive from the color parameter. Finally, in the return statement of the render method, I will assign the style of the div to be equal with the style object we have just created. Now, after we save, we can see that we have one player card colored in red and the other one colored in blue. 12. Create a game with React part 2: Hello, and welcome back. In the first part, we added the basic elements for our game. Let's now make our game to select a random symbol. In order to achieve this, we'll first need to tell to the game, what are all the available symbols? I will go in the main app and add a default constructor that for now only makes a super coil with the default properties. The next step will be to add a symbols fields under this reference. It will point to an array that contains all of the free available symbols, rock, paper, and scissors. We'll also need a button to start the game. I will go in the main render any here, add this button with the text Run game. I will also add a run game method that initially well just have a simple console log with the text start the game. This method will be assigned to the on click event of the button. After we save, if I open up the console, we'll see that every time we press the button, we have this message appearing in the console. Having the set in place. The next logical step will be to teach our game how to do random element at the bottom click. Basically, we need to generate a random index and get the corresponding element out of this array. First, I'll create the random index and give it a name of index. To generate the random number, I'll use Math.random, and we'll multiply this by the maximum number of symbols in our case, three. We will also use Math.floor to ensure that we'll not get numbers like 2.5 or 1.3 or anything that is not a whole number. With this random index constructed, we can just go now and do a console log of these, that symbols and of index. Now, if we refresh the page, when we press the button, will get a random element after that, another one, another one, and so on. Let's get this random symbols into the view now. We'll have to replaced this static value and also this one, we have something like the random element generated in here. This is a perfect example to use the state of the components. First, I will replace this with these that state playerRed, and also for this one, I will write these that state, playerBlue. These two state values will be set in the Run game method. Given the fact that we have to deal with state properties, we'll have to use this that setState and pass it an object. Inside of this object, I will say that the playerRed equals with these that symbols, and as the index, I'll paste this whole formula. We'll reuse exactly the same formula, but this time for the playerBlue. We'll delete and add it it code and after we save, we'll see that we get an error. This is because in here, we are trying to access something from the state and we have not yet created that state. This is very easy to fix. I will go inside the constructor and a guide that this that state equals an empty object and with this set in place, I'll go back into the game window and now we will see that every time we press the Run button, we get a random symbol displayed on our screen. Let's go and take another look at the final version of our game. In here, we have this nice icons for the symbols and not the static text. Coming back to the code in the public folder, we have this image folder that contains the three symbol icons. All of them have a png extension. To build this into our project, I will use the background image property folder inline styles. Here, I'll set that the URL will be the image folder, plus the corresponding symbol and plus the file extension of png. We will remove the formal code and now if we save and run the game, you'll see that we also have these icons on the screen. You may wonder why this second image is rotated 180 degrees. Well, this is because of this CSS property that I've added here and that defines that, for the second item of this type, we should have a CSS scale and CSS flip as a filter. 13. Create a game with React part 3: We achieved the luck of our application. Our game has now a basic layout, knows how to draw some random symbols, and also how to show the corresponding icons for the symbols. One thing that we could do next is to show these shuffling animations when the button is pressed. There are multiple techniques that we can use to accomplish this but for the sake of our example, let's just pick the pure JavaScript one. In JavaScript, we have two main time of functions. First, we have the setInterval, and second, the setTimeout. For both of them. The main idea is that they will execute a specific function after some time. We give them a function to execute and the delay to apply to this function. The main difference between them is that setTimeout will execute that give a function just once. Meanwhile, setInterval will execute it till canceled. Given the fact that in our example, this sharpening effect is made from multiple random pigs will use the set interval function. This being said, what we should do now is to go back into our code. First, I'll take all this part that generates the random symbols and wrap it in a function and use this function with the setInterval. I will set an interval of 100 milliseconds, meaning there's dysfunction will be run every 100 milliseconds until canceled. After we save, if we place the run game button, we will see the animation in action. Still, things are not yet been complete. One issue that we face now is that our animation is not stopping. For now. I'll just stop it manually by refreshing the page, we need to find a way to stop the execution of this function in a programmatic way. If we go back into the documentation, we will discover this clear integral function that we can use combined with a reference to a specific set interval. Knowing this the plan will be like so. We will let the function ran for 40 times and after this, we will use the clear interval to cancel the execution of our function. First, I will go back into the source. Here, I will create a new variable called counter. This counter starts with the value of zero in a new game. Every time this function runs, that counter gets incremented. Next, we'll need a reference to our interval. For this, I will define a new variable called my interval. As you can see, it will point out to the setInterval. After this, I will use a statement to check if our counter had reached a level above 40 and if so, I'll say clear the interval of my interval. After this, when the page refreshes, when we began again, the game will see that our animation will stop after 40 rounds. The final step, we should teach our game how to decide the winner. For this, we will introduce a new value or to the state called winner and set it initially to an empty string. The decision will be taken in a new function called the side. This function will be called after we clear the setInterval, given the fact that we have to deal with state variables, we will use the assist state method and say that the winner should be this.decideWinner. Out of this function, we will get them the result of our game. We'll start by using a destructive statement to extract the value of player blue and player red out of the state. Initially, we'll check if player red is equal with player blue, case in which we will return that we have a duo result. Next, I will check if player red is not the winner. Being a log statement, I will just paste the code. But basically, we'll just check here for every of the three cases that could make the player red with the winner. In this case, we will get that player red is the winner. Finally, if we don't have a duo result and player red is not the winner, it's safe to assume that player blue won the game. Now, all that is left for us to do is go inside the random method. In here in a paragraph, I will display the state variable for the winner and also close the paragraph. Our game should be ready to go for a test drive. If we run the game, it will select for the target player paper, for the blue player. It will tell us that the red player just won. This concluded our application. Within this example, we have seen in action things like basic React components, event handlers, or how to use JavaScript timing functions with React. Thank you for watching and I hope you enjoyed it. Happy coding and see you the next time.