Getting started with React JS | Daniel Nastase | Skillshare

Getting started with React JS

Daniel Nastase, Software Developer

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
13 Lessons (55m)
    • 1. Introduction

      1:45
    • 2. Your First React Component

      3:25
    • 3. Nested Components

      2:33
    • 4. JSX and Interpolation

      2:48
    • 5. React Component Properties

      4:27
    • 6. Basic UI Events

      2:18
    • 7. Events Scope Binding

      3:26
    • 8. Component State

      5:35
    • 9. Styles

      5:35
    • 10. How to use the React Children Object

      5:47
    • 11. Create a game with React part 1

      4:45
    • 12. Create a game with React part 2

      5:55
    • 13. Create a game with React part 3

      6:12

About This Class

Hi there and welcome! In this course, we are gone see how React JS works how it can help your day to day job and career.

First,  you are going to learn how the fundamentals concepts of React work. Short, modular lessons will explain things like: React Components, React State, Props or how to use CSS with React. Then we will take this knowledge and apply it to make a complete full working application.

The course is designed as a practical workshop and provides you with great real-life coding examples. While taking your first tour, my recommendation is to focus on the general aspects of the lesson and to understand its application. Whenever you feel ready, press replay and start writing code alongside me. Remember, knowledge is of no value unless you put it into practice. So keep calm and code on :) 

There are projects files for you to complete, so you can practice your skills and the used concepts.

What knowledge & tools are required?

  • JavaScript, HTML, and CSS fundamentals are required
  • no prior experience with React is required
  • setup your create-creat-app environment by using this guide 
  • not required, but experience with JavaScript ES6+ is beneficial
  • throughout this course, we will use Sublime Text as a code editor but feel free to install your editor of choice if you prefer something else.

Transcripts

1. Introduction: Hi. My name is Daniels. I'm a developer here. Rescue ship. And I'd like to welcome you to this. Getting stuck with the Of course. The goal of this course is to give you the needed concepts and ideas. To be able to start using blogs in your Web applications. The court is pitting two sections. The fundamental spark. We'll discuss the building blocks of react, things like Leah Components, Properties state or how to use CSS to style your components. All the lessons from this section I showed more direct and to the point so you can use them later as references and also that he's example spark. He here will be more complex examples that I've developed, of course, multiple essence. We'll see how the basic concepts are react are combined together. You know that to be the full application and could you to follow along and called alongside the course comes with more than 54 7 and every lesson has its starting project and also unending sample off how those while should look like any end of the list. Also, before selecting discourse, please make sure you have installed create the after utility. The links are provided in the description of discourse. Please note that why this is a course dedicated to introduce you to the RGs. You should have ah, basic and extending cough, JavaScript, HTML and CSS in general. So let's get started and see hope you can make your life easier and boost your career. 2. Your First React Component: distracting template 4. Awful first exercise. It's almost empty. We have this index chase file that only contains on alert and also in days that HTML which one empty body keep in mind that in object to start our exercise, I've only did our stacked in template a zip it. And after gunning NPM Install and MPM start, we should have this island popping up whenever we save a fire. This couple of this lesson is to make our first component. For these are first need to add in the index that Jay's the import statement for react. There are multiple ways to create their components. The most classical approach is by using JavaScript classes four days for skater class called first going bone and and this first component will extend. React that component. The cocoa for your component is there, and the function react will expand the tag corresponding toe that component toe whatever is returned from their and their function. So in our case, if we want our first component just Toby on h one, you'll hear. I will say that I want to return h one with the text. You know what Now? If we save in the page refreshes will still get only the select as an output. This is because we did not tell react were in the html to place this component. So first resident moved this alert and after I'll go inside the index that html here create and ive with the I d off good, This new created Dave will serve as the container for our component Back in the index, Jess, I will add a new impose statement this time for react. Don't react. Don't also has a vendor function, but this one takes a specific will be a component and attaches it toe on html note. So we can say the addendum that okay and ducks. And as the first park, Amita will give our books component. And as the second Packer, Mitag would use the document that get element by i d. And you say that we want to attach this focus component to the I d off for good. And now if I save, we can see on the screen are folks to the component. So as a conclusion, the idea is that any Leah component has this render function and react will expand by default. The actual react tag toe the what is returned from the surrender function 3. Nested Components: the component we have witness screen. It's a very simple It just has a H one html node with some content, but from a window function well can also eater more complex HTM Minister objects, for example. In here I can add a link. And if we say we can see that things work as before, What if our component needs to deter now even more complex? Director, Let's say that after this age one, we also want tohave horizontal line. If we save, we'll see that will get on a roll. This is happening because you know my conditions. The vendor function should just get there in a single good element in new other of the innovations they walk around for disabled. But the easiest speaks. In our case. It will be just to adhere Closing Dave that will serve as the good element. And if we save, we can see that now. Our component also has a H one link, but also this horizontal like we are added value, but things can get even more interesting. What if we need another component that is made off two components off this type? In the end, the act application is a collection off React elements that all together in order to achieve a common goal well at the new component and this component will be called up in order to build it are just copy paste, disclose component, change its name to APP and from Doug, and their function initially will just return this empty deep now in the AG dome. If we place that would component, Toby said to app and safe, we'll just get the empty screen and this is happening off course because from the second function we just returned the empty deep. But we can come here and from that time statement also at two components off type for its component. And if we save, we can see on the screen that our application just got more complex. So it's possible to go as complex as we want with this type of structures. We will see in the future lessons how we can use things like properties context 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. So we have JavaScript class and also some other JavaScript objects that are imported and used. You may wonder, even if we have in a job us keep fight. How that we can use HTML structures like this one. Well, this is because over syntax called J six that comes from JavaScript examine and was developed by the folks at Facebook. Toby used react. The cool stuff is that we can use this type of mixed between HTML and JavaScript even at a deportable this again. That method is a job asking function in yet. So by using J six I can intact relate some java Steve variable into the actual HTML. This means that I can declare here of variable called eggs we for value off then and inside of the little statement at the new parent left that says something like the value Off X is , and using curly braces are just input here. The name off the valuable in our case X, and if I save, we'll see on the skin that we have this new paragraph that is made off some static, a schimmel text but also over value that comes directly from Java. Skip this step even more so we can add to the algebra skipped expressions here. Something like the double off X is any here inside. Calibrates is I can add anything I want as long as it is a job escape expression and say something X multiplied by two and we'll get the double Off. X is 20 and this is not the city. Two numbers, for example. I can use JavaScript objects or some other stuff. Let's say we will define here. New Valuable called my spring with the value off React is cool. And after that, go in the little statement Any here, the new parent that says the 1st 5 characters are, and by using curly braces, I will take the my string and says and say, Sub string off zero and five And this will work as we can see on the screen. The 1st 5 characters are you be act. So this is how we 10 years J six and intact relation in order to make our components displace and complex data 5. React Component Properties: you know that to explain what he had properties are let's start from the current example we have with the act up that displaced two programs, 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 disease, redundancy and builder yet component that displays this text Something like, uh, the say hi component. And from it together, method. I just took on empty paragraph with the contact. Hello. My name is, and in theory, we should be able to replace these two elements. We for something like, Say, hi component for the parks 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 2nd 1 the name is Joe. We had a weapon. It is on exactly what HTML attributes. For example, if I take a link note here with some text, I have this atrial fatty boot that I can point this link to something like Google. That and I can come here and say OK, The name for the first component equals with Bob, and the name for the second component equals we've Joe. And with this in place inside of the actual say hi component In the end automated, I'll create a new constant called name. And this name will be equal with these that hopes that name and having this name extracted . I can now replace this with and using interpolation the name off the constant I've just created. So we feel safe now. We can see that for the first component, and we have Hello, My name is book The value we have sent here. And for the 2nd 1 we have Hello, My name is Joe. Anything that it stood in this dust property references is a constant. We cannot modify the value or for property. So, for example, fight type here, these that hopes that name equals Daniel. And if we say we'll get the following a box saying that we cannot be assigning you grand uto property, so keep in mind that probabilities are constant. However, what we can do is to use javascript this structuring in order to write less cold. When we extract our properties By having these things in place, I can now remove the static paragraphs you may want to rethink react application. I can say there's a perimeter, something else beside the streak, something like, let's say, the age of the ones who say its height and their cities of course years, I can use numbers, bulletins, objects or even functions as paramedics. The only difference is that for things that are not strings, I will need to use curly braces in order to send their value. For example, if I want here to add age equals and I was saying Curly Braces 25 his final sent this 25 as a string inside off my component. This will be picked up also as a stink. So it's here where will use cuddly bases in Nordic to send a number and in the same high component will the structure also the sage party and he here at something my age is any psychology braces the age, so if we save now, will say that for the first component it would tell us that my age is 25 for the 2nd 1 nothing will be printed out as we didn't send any age property 6. Basic UI Events: in this lesson. We're gonna take a look at how we act. You events are working. All components are not worth too much if they don't know how to handle user events. And maybe the most use event is that basically, let's say that we want to make this bottom toe, show us um, alert one click So I would have peeng function called show message. And this show message function will have an elect saying something like a little dick. The ad knows how to handle events by using function properties. There are some built in properties that know how to handle basic events like on click. I will say that for my own click event, I want to call this function that I just It'll say this that show message and after I was saved. Now, if I replace this bottle will get the elect, we just put in the show message function and we have more givens. For example, if we want to Inter except most Santa event are just that here on moral center. And I will point this event toe this that on most center and off course, I also have to create this function and for now, here are just add a simple Casa log message saying something like This is on mouse. And now if we save and open up, the console will see that all the time we are having the bottle will get this message pointed out in the concert. In the React documentation, there is a completely off the U events that I've supported. I will put this link in the description of the lesson. We have things like DoubleClick, mouse over, mouse out people, events, focus events and much more. 7. Events Scope Binding: maybe the most common pitfall when starting to use the care components. Is the scope binding? And what is this called binding? Let's say we have the current situation, a bottle that has on click handler in a on mouse and later on in our application, we have the need toe have multiple of these bottles. So in this case, I want to create a new class called My Barton. And this my button will just return a button that has these own click and on most handlers attached to it. And, uh, inside off the up, I will be moved the hand legs and just used instead of the standard HTML button. I'll just use this my button class that I just created and, as said, we want tohave talked these buttons in our applications. Now the interesting part. It will be Toby able to customize this to Barton says both of them now are displaying exactly the same message, and we can do that by using a property, and I will say here that for the first bottom, the message equals some message. And for the second bottom, the message equals some hot dog message and having these properties. I can come here now in the leg and use instant off the standard message something like this that props that message. However, now when we take the bottom, we'll see that will get the several cannot eat pickups on and defined. And this is because off the problem we mentioned earlier about this combining the idea is that when we pass in the hand leg, we are in a different context and the act doesn't know about the car in class. So in order to fix this, we have two options. The first option. It will be in here toe bind the show message function so that this element and if we save we can see now that if our click will get a show message and if I click, the 2nd 1 will get the some other message. But somehow this is a bit cumbersome toe. Always add toe handler that bind toe This we can use, you know, advantage. The fact that the ego functions for magma skip six are directly bound toe the barren scope . So, by this, what I can do is tow take this so message and make it anabel function. And now I can easily removed the bind. And if I'll click, things will work, as expected, as a general goal. Whenever we're using Sigma script. Six classes in object to create their components, always use Addo functions in order to create event Hamlets. 8. Component State: the React state is allowing us to manage the changeable elements from Leah components. An update a visual succor gently. In order to introduce this concept off state in the components, let's simulate the behavior of users looking in in an application. Initially, we have these two bottles with Click Landers attached to them. So if I click on this bottom, we'll get the following consul off message. And if I click on this, one will get another consular message. And this is happening because in here I have own Click set to log the news at and longing on me. That being said, What I want to happen in the final application is also toe have here displayed the user type that is currently logged in. So, for example, if I click looked in as a meaning here, it will have to write. The use of type is mean, and if I will click looking as standard user in here, it will have to write. The user type is using, you know that to use the state, we have first to declare it, and when music EG must keep six classes, we can declare the state in two ways the less valuable way is by using class every boat. So we hear no see state equals. And the state of our area component is always an object containing the state variables. In our example, we just need one off these variables and it will be called user tight. And initially, it will have a value overstating not the second way to declare. The state is inside off the glass constructed and the sea tax looks something like this Indian. The result is the same only that this constructor function takes a bit more time to write. So I really move it and use the initial variation. And what I can do here after the state is declared, is that I can go here and right this that state. And I was saying that I want to display they use their type and even though in the moment we save, we'll see that the result is exactly the same. What we can do having this mechanism off state set in place is that in here I can replace the consulate message. We for method called, said state. And this that said, state is always the metal that we want to use in order to modify the state in a yak component and whatever dough is, give it a object with the things I want to change into that state. Any here, I'll say that the user type I want Toby Set, toe User. And for the second consul of message, I will have this. That said, State and I will say that the user type needs to be changed to admit. So let's see what happens now after I say if I will go here and press logged in as a mean, I will have the text change in the user type isn't mean any here you follow Press Logan as standard result, I'll have the user type is using. So what I managed to accomplish is to have that state off a component update, but also the visuals off that component. Toby changed accordingly. A few things I would like to point out first, always use the set state to change the state. If we just do something like these, that state, that user type equals something when I was safe. 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 that status change the league and the method was not called. So if we want our you are also to be on they did always. Here I have something like this that said state and whatever we want to change. The second observation will be that we always have to initialize this the state before we we use it. So, for example, he probably lied here. The initialization off Always state. If we save, we'll see that we get the networks telling that we cannot use something like using type until that state is not initial list. And finally, the 3rd 1 This that said, state motives this perimeter 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 have a new state variable off, X said to five when they were called in bloody news about dog near as mean. This says state and I will give a new value for the user type. Only this user type will be changed. That initial X will be set to five and no change will be done to it. And then we have. These are the first steps, but also the first pitfalls you'll encounter when using the act sets tape. 9. Styles: The scope of this lesson is to see how we can you see assess in order to start We are component by the end of the lessons, we want to be able, build components that look as squares and that we can specify what baby on Carla that squared should be as a starting set up. I already have here Class Square, a component that only returns a Dave on and it gets as a property, a text and that text is displayed on the screen. The first thing that we want to do is tow attach your CSS file toe. This index digests and forties. I'll go here and create a new file. This file will be saved as index that CS is. And the interesting stuff react is the fact that we can import for every five some CSS files that we need in there. So here I can say that I want to import and from the current folder import index that CSS. And just to see that everything is working, I will go here and I will take the html atty boat and I will say that I want a border great off twice, pig cells, Toby attached to it. And now, if we say we can see that basically the index, Jess and Index CSS are now willing, and the styles from the CSS are applied in my index that Js file. So knowing these and having as a final goal components like this one, I'll go back in the index CSS and here create a class called squid, and I'll start to least this uses for parties that I need in order to make our dips to look like the ones in the image. So first, I will need toe add a border off black off one pixel. After that, I will say that the line height for our text is 100 pixels. Also, the with or for components are 100 pixels. Um, also need text, the line set to center and finally will need a bit off marriage ing off 10 pixels. And this glass quick will give us the basic layout for our components. So now if we go in the index, see asses, what we can do is come here and say glass name equals and I will say that I want that these diff toe have a glass off square. And if we save, we'll see that now. Our Deems also got the CSS probabilities that at least it in this class. One thing that I would like to point out is the fact that he here I've used the class name toe, assign a CSS class toe on HD A military boot. And this is because in the Js world, we already have the class as a key word. So intolerable circumstances. You would use class name in order to assign CSS classes toe html tax. Still, our example is not complete. It would be nice to be able to say that this is a risk work and this is a yellow what and for these will use the in lifestyles off react in the year component. It's possible to go and set style at the boot that receives as a perimeter a new object containing this in lifestyles off that component. So I will say Here is something like the style equals and let's say the color initially is red and if we save and go back in our application, you see that both our squares now have a text said to read. But the interesting stuff is that we can match these value to the value off a property so I can come here and say the car lurk equals get. And for this one, the color equals yellow. And finally, we can change the static value of red here, toe this that polities and I will say the color. So if we save, we'll see that for the first square, the colonies. Okay, then for the final one, the color, it's yellow. The city does a big uncle ago just have here to write. This is a big Ocala and Camel case. The color work and if we save, will finally see our desired output as a conclusion. Keep in mind that we can attach CSS files to our year components and we are able to style this component or by using the class name and attach a specific CSS class to it, or by using a light styles with this style at a book in order toe at more flexibility toe all steak 10. How to use the React Children Object: hi there and welcome. There are pretty high chances. You may have heard about this, that problems that Children before in its essence, that probes that Children is used when you have with your component like this gallery and you want to use inside it the HTML content that the area component declaration receives. For now, we have one empty image gallery. So if I want to add some content here, let's say this simple telegraph tag and this paragraph Toby rendered in our gallery component. I can't go and guide inside curly braces. This does put the Children and done. We have it working. And, of course, you replace this taste with a cap it jerk and voila! We have all the folks get into the gallery by the act also knows how to display multiple child elements, not just one. So nobody can stop us from adding one more picture because you can never have enough pictures. And if we get fresh, we have when you picture one walked. If you take a look into the React Jails docks, you'll see that there is actually the Children object that gives us access to a set off methods. It may be a good idea. Toe later. Check all of these methods from here. For example, if you want to show how many child elements uh, yeah, component has you can use the count method. You know that Not toe have to write all the time. We act that Children, I will lead the Children object as a separate import. And now I will create a new paragraph with some content, and here use Children that count and pass it. What do we want to count? And after the re fresh, we can see now that we have on the screen also the number off the Children. Okay, If we want to force our gallery component just to receive one child, we can use Children that only and sword. But maybe the most useful Children method is the map Using it, we can pass for all of the Children and map them to returning element. So 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 all library toe, allow only images as Children. We can say here if element that type not equals image, then through a new book. And for now, everything is the same as before. But if I add in the gallery, let's say, uh H one, well, we'll get this ever. We'll have to delete this for now, Just toe have all code working again. And another thing that we can use math for is to manipulate this child elements now just to restrict them. For example, if the image does not have a title at the book, we like to add a default. One. This element perimeter is off type of your component. So we can say here something like, If there is not element that provokes that title, then element that perhaps that title equals just a cap. Mm, so we'll get the same now. Well, you may be called that the properties over here component are read only. Fortunately, we can work around this by using the clone element. We'll assign this element talk loan off itself, but in a react clone element, we can also pass in a second perimeter to set up new properties. In our case, I will set the title, Toby, just a cap and we should be good to go now. When I was safe, we'll see that when we inspect this element, we also get this default title at people. I hope you have enjoyed this. So to react. Tutorial. If you have questions, feel free to ask them in the comments below. I am Danielle and see her the next time checks. 11. Create a game with React part 1: Hello and welcome. My name is Daniel and I'll be on instructed for these practical blogs. Example, I was called for. This tutorial will be to build this very simple game off ago. Paper Caesar's In this game, we have two players, the good one and the blue. When we praise the ground game button our game, we show shuffling animation and randomly select one of the free available elements based on what are selected for each player. Our application will decide which of the players is the winner. So let's get toward in the starting template for this project. Aragon NPM Install. If you have not done it before, you can see in the links for this episode a guy don't how to set up your environment. After the NPM install is complete, we can type NPM, Start and Walla. We should have our application up and running. Let's take a look at what we currently have into the starting coat first index Js file, which only renders out our application alongside with it we have these abscesses that contains the styles forgot application. Now, given the fact that this is a react, Jess scores will not discuss too much details about how the CSS styles were built only when you did will deal with the CSS parts that are important for our application. The most important part is this up that Js file that to serve as the ending point for our application. For now, it only rentals out a simple area component that has just on empty dif. The first thing that we are going to tackle is the creation of these two player cuts. If we think a bit about them, they are stateless components that that depended on two properties the color of the player and the symbol. We have this in mind. I will go back into the coat and create a new stateless component. This stateless component will be named player card. Initially, all player God will just be an empty div. We for class name, said toe player dash card. This class name is only defined in the abscesses and ensures the basic rendering off our cuts. Now, with this stateless component created, I can go back into the organic method and in here at toe new components, off type player Karkh. And now, after we save and the page refreshes, we can see on the right side the two new created components. As he said, the year all player cards are dependent upon two properties. They are depending on Carla and also on the symbol with the new declared properties. Ill said the car Look for the folks card to bread and its symbol to paper. And for the 2nd 1 I will set the car log, toe blue and the symbol Do I look just to insure that everything is OK? I will go back into the player car component in here. I will display the symbol property after we saved. We can see now that our components also have the given symbols, you may be at wandering. Why the second component has its text written upside out. Well, this is because inside the app CSS file, we have a special rule that will discuss at the end off the next episode. If we go back at our final example, each of discards should be car loved in the corresponding Carla. This is a great opportunity to use the online styles off react for days, I will go and create a new object called style, and inside it I will set the background, Toby equal with what we received from the color para meter. Finally, in the return statement off the handle method, I will assign the style of the Deve Toby equal with this style object we have just created . So now, after we saved, 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 all game to select a random symbols, you know that to achieve these will first need to tell to the game what are old available symbols. I will go in the main app and added the four constructor that for now only makes a super call with the default properties. The next step will be to add a symbols feels on the diesel reference. It'll point toe owner gay that contains all of the free available symbols ago. Paper and Caesars will also need a bottom to start the game. I will go in the main Renda Any here at this button with the text the guy G. I will also add a gang game method that initially will just have a simple console log with the text stuck the gate. This method will be assigned to the own click event off the bottle after we save. If I open up, the console will see that every time we progress the bottom. 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 door or Gundam element at the bottom . Click. Basically, we need to generate a random index and get a corresponding element out off the Sergey. First, I will create a random index and give it a name off index to generate a random number. I'll use math data Gundam and will multiply this by the maximum number off symbols in our case. Three. We also used mad that broke to insure that will not get numbers like 2.5 or one point flee or anything. That is not a whole number. And we've descend. Um, index constructed. We can just go now and do a consul oak off these that symbols and off index. Now, if we get raised a page when we put it, the button will get a Gundam element. After that, Another one when I go on and so on. Let's get these random symbols into the view now will have to replace the static value and also this one with something like the random element generated in here. Look, this is a perfect example to use the state of the components first. I replaced this with this. That state Blair Red. And also for this one other guide these that state player blue. These two state values will be set in the ground game method, Given the fact that we have to deal with state properties will have to use the this that says state and pass it and object inside off the subject. I will say that the player Red equals with this, that symbols and as the index I'll paste this whole formula. Will we use exactly the same formula? But this time for the player Blue will delete the nodded it cold. And after we save, we'll see that we get a network. This is because in here we're 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 guide that this that state equals on empty object and with this set in place, or go back into the game window and now we'll see that every time we place the gun. Barton, we gave okay random symbols displayed on our screen. Let's go and take another look at the final version of all game in here. We have this nice icons for the symbols and not a static text coming back to the code in the public folder, we have this image folder that contains the faulty symbol I cause all of them have a PNG extension. Toby, listen, our project. I will use the bedroom, the Bishop property for the in line styles here. All said that the you ogle will be the image folder, plus the corresponding symbol and plus the file extension off PNG. I will be moved the folk more code. And now if we save and under 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 off this CSS property that I read it here and that defines that for the second item off this type, we should have a CSS scale and CSS flip as a filter 13. Create a game with React part 3: we're to the latter for replication. Our game has now basically out knows how to do it somewhere in those symbols and also how to show the corresponding I construct the symbols. One thing that we could do next is to show this cheerful in animations when the button is pressed, there are multiple techniques that we can use to accomplish this. But for the sake of our example, they just speak the pure JavaScript on in job escape, we have two main time MK functions. First, we have the city in the world and second the set time out for both off them. The main idea is that the real exit with a specific function. After some time, we give them a function to execute and the delay toe ah, apply toe dysfunction. The main difference between them is that set time out will execute that give up function just once. Meanwhile, set interval will execute it Until cancer. You were the fact that in our example this shuffling effect is made from multiple random pigs will use the set interval function. Things being said. What we should do now is toe go back into our code and first I will take old the spark that generates that random symbols in the wrap it in a function and use this function with the city in Taiwan. I will set an interval off 100 milliseconds, meaning that dysfunction will be around every 100 milliseconds until cancelled and after we save. If we praise the gun game, Barton will see the animation in action. Still, things are not yet complete. One new issue that we face now is that our animation is not stopping for now. I'll just stop it manually by the finishing the page. We need to find a way to stop the execution of dysfunction in a programmatic way. If we go back into the documentation, will discover this clear, integral faction that we can use, combined with four reference to a specific set into what, knowing this, the plan will be like, so well, let the function ran for 40 times and after this will use the clear Ginter while to cancel the execution of all function. First, I will go back into the source any here I'll create a new variable called contact This counter, stocked with the value off zero in a new game. Every time dysfunction rounds, the counter gets implemented. Next leader inference toe are being talked about. And for this I will define here the new variable called My Interval and as you can see, it will point out to the set in Taiwan. After this, I will use a statement to check if all contact had reach a level above 40. And if so, I will say clearly integral off my integral. After this, when the page refreshes when well, done again the game. We'll see that our animation will stop after 40 rounds. In the final step, we should teach our game how to decide. The winner for this will introduce a new value onto the state called Winner and set it initially to an empty street. The decision will be taken in a new function called the side window, and dysfunction will be called after we clear the setting that what, given the fact that we have to deal with state variables, will use the say state method and say that the winner should be this that decide winner and out of dysfunction will get on the result off our game will start by using a destructive statement to extract the value off player blue and play. A read out of this state initially will check if player Red is equal with player glow case in which will get open that we have a double result. Next couple check. If Blair get is not the win being a locavore statement, I'll just paste the code but basically will just check here for every off the free cases that could make player with the winner and in this case will get ugly. That play good is the winner. And finally, if we don't have what the goal result and play again 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, mastered any here in a paragraph. I will display the state valuable for the winner and also closed the paragraph so our game should be ready to go forward Thursday. If we're under game, it'll select for the Great player paper for the Blue Prayer Hoke and it will tell us that the great player just want and this concluded our application within this example we have seen in action. Things like basically are components, even hand looks or how to use a JavaScript. Timing functions with react. Thank you for watching and helping enjoyed it. Happy coding ensued the next time.