React for Beginners: Complete Guide to Mastering React Fundamentals | Tuomo Kankaanpää | Skillshare

Playback Speed

  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

React for Beginners: Complete Guide to Mastering React Fundamentals

teacher avatar Tuomo Kankaanpää, Software Developer

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

30 Lessons (1h 50m)
    • 1. Introduction

    • 2. Class project

    • 3. Introduction to React

    • 4. Adding React

    • 5. Creating element

    • 6. Rendering element

    • 7. JSX

    • 8. What are components

    • 9. Creating component

    • 10. React developer tools

    • 11. App component

    • 12. Structuring App with components

    • 13. Props explained

    • 14. Modifying Task component

    • 15. Passing tasks as props

    • 16. Key property

    • 17. Recap on props

    • 18. State explained

    • 19. How to add state

    • 20. From functional to class component

    • 21. Adding state to a component

    • 22. Events in React

    • 23. Modifying state

    • 24. Bindings with event handlers

    • 25. App component's state

    • 26. Adding a task

    • 27. Removing a task

    • 28. Setting task done

    • 29. BONUS: Refactor components to own files

    • 30. Final thoughts

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.





About This Class

Learn React without distractions! In this course you will learn the fundamentals of React.js and learn to create your first React application.

The internet is full of tutorials and guides about React. As a newcomer to React, this isn't always the best case. The quality of tutorials may vary and it is hard to know which things are actually important and which are not. It can be also confusing because you don't know in what order should you study topics to learn React efficiently.

This course will teach you the very fundamentals of React! You don't have to worry if you are learning things in the right order or what might be important and what is not. We will cover only the most important things you need to know about React to get started. After this course you will have very solid knowledge about React and you will be able to create your own interactive application using React.

Some of the topics we will cover

  • React Elements & Components
  • Working with JSX
  • Using data with Props
  • State
  • How to create stateless & stateful components
  • Building your first application

What prior knowledge is required?

  • Basic knowledge of HTML, CSS and JavaScript is required
  • No prior knowledge of React is required

What tools are required?

You don’t need any fancy software or equipment. All you need is your computer and your favourite text/code editor. We will be using VS Code in the course. You can download it for free here.

More React courses

Meet Your Teacher

Teacher Profile Image

Tuomo Kankaanpää

Software Developer


Hello there! My name is Tuomo Kankaanpää and I am a software developer and teacher living in Finland.

With over seven years of experience developing web and mobile applications professionally I am excited to share my knowledge with you! My goal is to help you learn new topics with ease and hopefully to help you avoid some of the mistakes I have made in the past.

If you have any questions please don't hesitate to contact me! Also be sure to follow my social media, especially here on Skillshare and also sign up for my newsletter so you never miss an update!

See you in class!


See full profile

Class Ratings

Expectations Met?
  • Exceeded!
  • Yes
  • Somewhat
  • Not really
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.


1. Introduction: Hello and welcome to this course. Throughout this class, I would be to the fundamental scope, react and only the most important things that need to know. As a beginner react. We won't cover anything related to external dependencies. Success. Three. Ducks, bobble or ***. We've been only focused on a react. After this course, you will have a very slowly no, it's about react, and you are able to create your own in directed up cases using react. My name is Gormogon Compound, and I've worked in what development for the past 10 years. I was first introduced to react about five years ago on. Since then, I've been committed small and large applications using react. Nowadays, whenever I need to work on an application with interactive user interface react, this might go to frame. This glass is aimed for students with zero or very little knowledge about react. React is itself frame berg, so it relies on mortar and principles. So you should be somewhat from the air with programming in this class and is great for beginner programmers who already know it's our script but want to learn how to build more complex applications using modern techniques for developers who want to move from heart to maintain both bases. Field maybe with a bundle of great Shakeri to amore, easily maintainable, modern, going basis with react. But in this class you will know how to be happy cases using react, you will have a very select understanding react fundamentals and you are ready to move on to more. At Mast reacted very excited to get started on this course with you. So without further ado, let's get started. 2. Class project: on this course, we will create a task list application as a class project. The APP will. So a list of tasks and whether or not they are done user can also at new tasks and remove existing desks. I think it's done by typing the test name and pressing inter on the key port or clicking the task. But tasks can be removed with to remove button displayed on each task. Desks can be marked down by taking the chick books next to each task. If task is done, it is automatically placed on the bottom off. The list on some styling is added to the task name. I chose this project because it's easy to understand how the APP works, and it actually covers all the essential parts in a react. I strongly believe in the concept off learning by doing whenever I'm studying in using. I always like to get my hands dirty and do the coding myself, too, especially when I'm wanting an online course like this one. So I encourage you to code with me as we go through the videos. Off course, you contest what's the videos and not to do any coding, but you will definitely get the most out of this course if you work on the project yourself too. And don't forget to share your protect in the protects and resources section off this course so I can see your work and help you with any questions you might have. 3. Introduction to React: in this video, we'll have a brief introduction, but to react really east on how does it work, react or react? Serious is a JavaScript framework for building user interfaces. React makes it easy to build interactive you ice, and it enables more efficient and flexible way for us. The build and maintain Our you, I quote in the core of react is something called components. These are small and reusable parts of coat that let you build your applications user interface. We will take a look on these more in depth later on this course. One of the biggest advantages that react has is that it automatically keeps your applications data also known as state and your user in the face in sync, meaning that react automatically updates the you I whenever the date changes. If you have experience building applications with for example, one in lots of a script or say Curreri, you might know that most commonly, the hardest thing to do is to keep your your eye and data in sync, especially when the application gets larger and more complex. Not to mention when you need to add new features to an existing coat. This was a brief introduction to react in theory in the next videos, when we get the coding, you'll get a better understanding how react works in practice. Up next, we learned how to at react to our approach. 4. Adding React: we can get started by navigating to react home. Bates. What's gonna be found from reactive Tiesto work? From there, we click the docks link to open up the recommend days. Peace talks are east read, and they have a lot of useful information. Your devil it to keep them within read, so you may refer them whenever you are working with react. So as we can see from the looks, there are a few ways to at react our project. One off them is by using cdn this way. React Library Goat is hosted in 1/3 party server and weakened just at it or rep. EDS with script decks. This is a good and easy way to at react to an existing project. Another way is to use a tool called Create React at Create Racked Up was created by Facebook to help developers get up and running with react Project fast and easily. It is the best way when creating a new project, and we will be using create direct up for our project. What create react up dust is it creates a development environment so that we can use the latest JavaScript features, and it provides a nice developer experience. Plus, it optimizes our app for production. It also comes with a bunch of useful stuff, like life editing. See, assess and tell US files in development Better Erakat sing and ability to use MP in packets . It requires a basic knowledge of terminal or command land use, but other than that, it requires no configuration to get started. We will need to, however, have Note and NPM installed in order to use Create Racked Up at the time of recording Tous . Here are diversion requirements for a note and NPM note that ask. You are watching this video. They might might have changed, so make sure you have the required note and MPM versions installed. You can find tutorials on how to install note and MPM from the resources six and off this course. Okay, So in order to create our protect with create Racked Up, I will open up my terminal window. If you are on Windows you can use come online or put ourselves go to the director. You want to create your project in and as listed indirect talks will read the comment in PX Create direct up followed with the project name. I will name our protect asked. That's coolest app and then I'll hit. Enter. This will take some time, so don't worry. Just wait patiently until it's done. Once it is run, we can change to the Project directory with Command CD Task List app and in order to start our app, we're we're on in PM start and it will automatically open our app in the pressure in the address. Local host 3000. Okay, if you are seeing the screen, it means that our app is up and running. So in this video we learned about the waste at react to our project. We didn't chose to use the tool called Create Racked Up to set up our project, and we could it up and running. In the next video, we'll learn about react limits. 5. Creating element: in this video, we learn about react elements which are in the court, off react. We learn what they are and how they work. But before we jump in, if you are not already familiar, I want to give a quick recap on document object model. So whenever Web Bates is rendered in the browser, something called Dome or document optic model is created. Don't is a programming interface for eight steam. Among documents. It represents the Bates as note on objects so that the pro sir can change the document structure, style or contact a webpage or a Web application is a document. This document can be either displayed in the pro sir or as HTML source, but it's the same document. In both cases, Bump represents that same document so it can be manipulated. The dome is an object orient that representation off the Web Bates, and it can be modified with JavaScript. React is about creating on updating HTML elements in our user interface. The way react justice is by creating react elements that are then used in rendering the dog and that way displayed on the webpage to get the basic understanding how this is done we are going to take a look how to create react elements using that react a p I Okay, so right now we had the application running, and I will switch to my terminal window and stopped the application with control. See next, I'll open up my coat. Editor. I'm using Wish Custody. A coat. I always like to start fresh, so let's do some clean up first, let's move all files from the Source folder. I'll select all of them on right click and delayed. No, let's create a new file. Call it index dot Js. Okay. So to create direct element, we can use the create element function that is provided by react. So first, let's import react. Then we will create an element we'll name it. A spare craft on it equals and we can access the create element function with react built, create 11. The function takes three parameters. First, it's the type off the element. In this case, we wanted to pee p element spare aircraft this again parameter. Yes, an object containing any attributes we want this element to have. So, for example, I d or class in this case, Well, leave it. No because we don't want any attributes. And last east the contents or try Children off the element and well, right here. Hello, world like this? No, we have Parker element. And that's it. No, we have react element created in the paragraph. Variable. Let's write console log and lug it to the council to see what what it looks like. Now we save the file on fleet back to the pro, sir. And actually, we need to start the development server again. So open up the terminal window on right and pm start. Okay, so all we get is what pates. And that's fine. We did Look. The what value off the paragraph vary both into the console. I will open up the council by right clicking on the page and selecting, inspect, and here meets us. Make it a little bit bigger. Like so. Here we see that we get an object looked into the consul. If we open up the object, we can see that it tests type property, which this piece that we just defined it has something called props. And inside of it this Children and the text. Hello world and some other properties. Also, it's important to note that create element does not create dom elements, whether it creates an object that describes a dumb note and react, then updates the don't based on to react element. In this video, we learned what don't and react elements are and how they work. Don't worry, if you didn't fully comprehend everything we went through in this video, it will all make sense when we move on in this course. And to be honest, how we created direct elements in this course is not the most convenient way of creating elements. And in the future we want too much. Rather use something called say is ex special syntax poor, creating react elements and using components. We will learn about Jay's X and components in the upcoming radios, but I think it's important to know the underlying logic behind react elements and creating them with to create element function. In the next video, we'll learn how to render the element into the Dom 6. Rendering element: in the previous video, we created the react element and just inspected it with console lock. In this video, we will take that element and learn how we can actually render on display that element on the Web. Bates for rendering We Will leaves library React don't. So I'll flip back to my coat editor and let's import reacted. Um, like taste react Dump has a render function that will render the given element on the Web pates. So let's place it on the bottom. Off the file. I also removed the console log and I'm gonna type react. Don't render as a first parameter would will pass the react element to be rendered. And in this case, it's Dick Parker. If and the second parameter is the container where we want to render to react element in this case, we will get the container element with document. Don't get element by i d off route like this. This element is defined in the index dot html file. We can inspect it from the public folder and it is just a deep with the i d off route. So our element will be rendered inside tasty. Now I will save the index file and flick back to the browser, and we can see that we get the hello World text rendered on the Web pates. In case you are getting a white pates and element is not rendering, you can try. Do please affected the terminal and restart your development server. In this video, we learned how to render the react elements to the Web. Bates In the next video, we will Learn on Alternative Way to create direct elements with JSX. 7. JSX: In the last video, we learned how the creator act elements with create element function and hope to render them. In this video, we will learn how to create elements with JSX J six stands for JavaScript X amount, and it looks like HTML. But we can create our own XML like tax. It is not mandatory for writing react, but it is recommended by react talks to be used with react and all real world applications are actually written with SX. At least I haven't friend in one yet. That doesn't use TSX. TSX is translated to JavaScript and more specifically, create element calls by itself a script compiler, Bobbo, which is included in create direct up. So at the end of the day, we are actually using create element functions. But the reason we used says X, is because it is easier to write on understand that create element calls. So what does it say is X looked like? Here is a simple example where we create H one element with the text Tell a world and story variable called Element. As we can see, it reminds a lot off HTML but is written directly in JavaScript, Telus Corp. Ex prisoners can be used in Syria. Cesc's with curly praises. As we can see here, we can use the name variable inside TSX once we place it inside the curly praises. And with express, since I mean variables, functions on properties off them can be placed inside. It's Essex when using the curly braces. Here is another example where we called the function for my name and place to return value inside the H one element. Note the parentheses around the year. Six. Whenever we write, multiply until six. It ISS recommended to wrap the TSX inside parentheses When specifying attributes with JSX. We use quotes to specify string laterals as attributes, and we can use curly process ambit seven script expressing in an attribute since TSX is closer at the JavaScript, then two eights Tamil reacted amuses Camel case. Property naming convention instant off. Html. Attribute names. So, for example, class becomes glass name. That index becomes step index with capital and on click becomes on click with the Capital C . Now that we have a basic understanding off JSX, let's take an convert our park off element that we created to create element function to use TSX. So first I'm gonna flip back to the coordinator, and I lied. His create element a function called and replace it with p tax. And inside the P Tex, I will write Hello World on semicolon at the end. Now if I said file on, flip back to the Perros or I can see that I still get the hell work text and if we inspect this, we can see that inside the deal with the idea route we have aircraft element with the external world rendered. Now, let's say if we wanted to make this paragraph to use variables, So let's say we have a variable named name and we want to display the value off the name inside the paragraph. We would do that by using current praises. So let's say we want want the paragraph to say hello and then the name. So hello, curly praises and then the name off the variable. What's his name and curly praises at the end. Now, when we save and they look, we can see that the variable name is rendered on the page. In this video, we learned about his ex on alternate way to create react elements We learned that JavaScript Express since can be placed inside genetics with curly praises and attribute names used. Camel Case naming convention In the next video, we will learn about components. 8. What are components: you have already heard me talking about components. So what are they exactly? Basically, a component is a part of you I that we can reuse much like we can reuse coat with functions in JavaScript, we can use components to reuse a coat that renders apart off the U. I. This ability to split our your I two smaller, reusable pieces is one of the best aspect off react. Whenever we are building an APP ways, I think our up in a small, simple components. So what's the difference between react elements on react components? Well, components they attributes and props and create a react element based on those and then return that created react element? Let's take a look at the finished version off the application that we are going to build and figure out what components we will want inside of it. So first we should have a nap component that holds everything inside of it. Next, we have the task list hitting, and we should create own component for the hitter section. Next we have the text input and the button that enables us to at I asked, and we should also create own component for those next. We have the list of tasks, and what we want to do is create a component for a single task and then use that one component to display eats off these tasks. Now that we have an idea what kind of components we want in our up, we can continue in the next video by creating our first component. 9. Creating component: I have my trusted A code open and let's create our first component. First, I'm gonna delete Teaster lines. And as we learned, components return react element. So basically, what we need is just a function that returns react element. And we have a component so we can define a function like this. Now, my components name would be hello, or we can use some East six index. Andi, define our function as an Arab function that would go something like this. I'm gonna use the arrow function. Sin ducks here in SE six lower case text are considered to be html tax when upper case text are considered as custom components. That's why I have capital aids on my hello component. Next, we want to return a fixed or parker element from our components. So we write return Hello world like this. So we're using TSX inside the hello component. And as we learned earlier when we used to six thesis translated to create element, call and touch. When we are returning this, we are returning a react element. Finally, we still need to render our component. So in direct, um, Orender function, we would pass hello component as the first parameter. Now, when we say and so expected the pressure, we can see that we have in the world printed out on If we inspected it's the same way a P element inside the TV. Let's take a quick break and continue in the next video. 10. React developer tools: since we are writing components that render it's the milk to the dome. When we inspect our you write with chrome or Firefox developer tools, we see the eight steam melt that is rendered most of the time, though we are more interested on the components and the component here. Arc forties we can use React Developer tools extension. I'm on chrome, but you can also get it on Firefox. So let's install it. I will go the Google on type in reactive tools. From there, I will click the link to the chrome store, and I have already installed it so it says, removed from chrome. But you can install it from here. After installing it, you will see it in the developer tools off your browser. So if I open up the developer tools on our app, frankly, inspect. If you don't see it right here, you can click from the arrows and it should say components. So pick there, and from there you see all the components that are rendered on the Web pates. So now we have only the hello component. So we chose shows it here. But later on, when we have more components and also nested components. They appear here and we can tell the component hierarchy also, and from right here we also see that the component has something called props, and that is something that we will talk about in just a bit. There's also a shirts bar. We can use the shirts for components and as sit, we only have one component, so it's pretty much no use now. But when we have more components and more complex application, this is very valuable. But for now, just make sure you have this Iraq defectors installed. We are going to use it along the way on this course is big and understand our up and components better. 11. App component: in this video, we will start to work on our APP component. We will write all off the market for our up and place everything inside the APP component. But first, let's create a new file here in the source folder and call it style Start CSS. I'm going to open it and we're gonna place here all of the styles for our application on. What we're gonna do is I'm gonna switch the browser and go to this address in Get up. I really leave a link in the protect resources section that you can click on it and it opened up this pates and let's take and a copy everything from here, all of the CSS and sweets back to the starts that CS is fine and paste everything inside of here like this. So this is all of diseases that our app needs and the reason why we are a testicle basting it here is that we don't have to concentrate on the styling part off our up and we can just focus on the react side so pasted in here on to save the file and, as expected, the index file. And now let's create the app component. I'm just come up renamed process up, then removed, I created with the class name up and we're gonna place everything inside here. So first we had the header six and I'm gonna create deal with class name hitter and inside of it, I'll place and it's one with the header text like this. We can actually save this on, see how it looks. And now note that our component name is up. We updated also in the rectum Orender method like this. No one we save. Flip back to the pressure we can see that we get. It's one element here. There was actually something that we still need to do in order to include the styles. We just add it. So let's go up here and it's just typing import styles. The C S s like this Now that saved and take a brochure again. We can see that now. Our hitter has some styling applied to it. So the styles are important. Next worst, they will take up the finished up. We have the text input on the task bottom. So let's at toast are up now. So I'll riding de even with the class name, Task input container. Like so, then inside of it. I'll just place the text input on the button. And for now, I'm just gonna give that attributes type. He calls text, and next, I'll add the bottom like this. Now, if we save and so expected the pressure, we can say that we get the input and the butter. Then we still have three tasks with each desk having checkbooks, the task text and removed bottom. So let's create toast. I'm going to create the new with the class name Task Container and inside of the task container. Dave. I will place three tasks. It's in their own separate deep, and I'll give each day a glass desk. We are using the's class names to style our applications. Or, if you look at the CSS file, you can see that terrorists styles applied by all off the class names that were defining here. So that's why we are defining all of the's glass names. Okay, so first is the checkbook, then we'll add detects. Let's place it inside a span element and committed class name Teske fixed and inside of the span. Let's at the task text and last the removed bottom. But I'll define a class name off removed desk, let them on, give you the text removed like this. Let's see how that looks. Onset file and flick back to the pressure. It seems OK, but now we have only one task and let's at a couple of more. We can notes. Just taken a copy. Paste this task, Steve two times on. Just change the text, so learn. React on instead of interested in gold like this. Now safeties on. Let's see how it looks. Okay? No, our up is starting to look okay. It has all the components that we need. But yes, he might have figured out there is no functionality it. So if we type something here and press at a desk or enter, nothing happens, There is no styling and it if the task is marked complete and we can't remove these tasks, we will at all of the functionality in the later videos, one step at a time. But now that we have our EPS markup written and we see the up looking good, we can take a quick break and continue in the next video by splitting the up component in the smaller components 12. Structuring App with components: in the last video, we wrote the up component for our up and placed all off the mark up inside of it. So we got our task list up looking good in this video, we will take our up component and split it in the smaller components. So let's get started by seeing what components we want to create. What we're gonna do is create own component for this header Dixon, then a known component for the task input section where the input and the bottom is. Then we create attacks component that will render a single task. And it's good to have a test component because, as we saw in the previous video, now it's just copy paste. It thes three tasks and the only thing we change on eats was the text off the task. So everything else remained unchanged. Let's get started by creating the header component. I will define it the same way we did the component and then return inside of it. And we can take this deep from here on corporate based it inside of three turn statement like these. Then we placed the hitter component on the place where this originally washed like this now . When we saved and sweet Specter the browser, we can see that it still works. Nothing changed. Next, let's create this task input container component. I'm gonna name it as at desk input. So constant that desk input. And again, I will copy Paste this desk input container diva from here inside of the component. And we will return that deep. So return parentheses and date asking container containing the input on the bottom. No, one way save. And actually we're still it included here. So let's type at task input. But no one we save on pro, sir. We can see that it's working. And last. Let's create a test component like this Andi inside of it, a copy paste that I like this. But now we have a problem because we have the desk fixed that is different for its task. So what we can do is use something called props, which we will discuss more in the next video. But for now, just follow my lead and let's typing props as a parameter for this desk component or dysfunction. And inside of the span, we will dyp Curly praises props dot next and close to girl appraises like this And here, where we want to render the task, we will at the desk and give an attribute or a prop called text equals and quote her and chalice creep. So we place the task text its value for this text attributes and then I can test type it again. Task text equals, learn, react and I ask, takes equals you still be so studio coat like this and the night removed these two from here. Now let's save the file and to inspect the browser and we can see that they're all rendered correctly. So in this video, we took and speak our up component in the smaller components header component A at Taschen component. And then we created a test component which we used three times. And as we can see all of these components, we defined the same way as we did up. So as function and returning tell you six with the task component, we used something called props that were given as a parameter for this component. And then we referenced prop, stopped text inside of the basics and passed in text attributes where we used to component in the next video, we will learn more about these. Perhaps 13. Props explained: in the last video, we split up into smaller components, and we also used props in the process. In this video, we will learn more about props are like attributes in HTML, just like HTML elements. Components can also receive attributes. Piece attributes are called props. We use perhaps the past data component, and they enable us to make our components reusable. In the last video, we in fact, made our test component already reusable with props. Props are defined in the components TSX tack. The common convention is to use camera case naming, convinced for proper names. Let's exit. Take a look at the test component that we created in the previous video. I will open up, are up in the browser and let's take a look at the test component in the reactor death tools. So if I right click one of the tasks and select inspect, the deaf doors will open and then I will choose the components tap. Now I have my reactive tours open, and as we can see now here is the up component and as we hover or these components, we can see them on the right, so the up component and inside of it. We have the header component at task input component and three task components. And if we click one of thes test components, we can Excellency in the prop section that there is a variable called text on its value. Is the text off the task? And if we choose another test quick and see that the text proper changes depending on the desk. So this is one way we can expect the props that are components get so perps are passed to the component as parameter, and we can access them inside the component by referring to the props popped. Let's do this with the header component by making the text of the header a prop, So I will change back to resource today. A coat. Andi, open up the hitter component and ill defined. The props object as a parameter to the function. And let's first, they can console locked props object. This way we get a better understanding what it looks like. So now I saved and let's see the browser. We can see that mature men we can see that it's an empty object right now. That's because we didn't actually pass any props for the hitter component. So let's do that. Next. I'll go to the up component where we used hitter component and I'll give it a prop. Text equals ask list. No, when I say and so it's back to the pressure, we can see that the object has a text property with the value off task list. So the value that we just passed in for it, and as we see the prop subject is plain toast object so we can access the different properties like we would with any other JavaScript object. Now, when we want to used that takes the past as a prop inside the hitter, I removed the scars. Look, we can just access it with the props dot on the proper name. In this case, it's text and close to curly praises and know when we save, we can see that the hitter text east the same as we passed in as a prop. No, if we wanted to change the hitter, we would do it here, where we called the hitter component and changed the text prop. So, for example, I'll change the epic task list and save, and our hitter is automatically updated so components communicate with each other using props with perhaps we can pass data down from parent component to the child component. It's important to know that props cannot be changed from inside the component they are passed to, and they can only be right. So, for example, inside header component, I can't do this. Perhaps not text equals hello like So we will talk more about this in upcoming videos. But for now, you should just know that you can't do this In this video, we learned how to use props past data to make our components reusable. In the next video, we will add more props are components. 14. Modifying Task component: Right now, our test component is using only the text prop, but it also has the checkbooks that indicates if the task is done or not. So let's passing that information also as a prop for the task component. So first we'll pass in. Let's call. It is done and a note that we're using the camera case naming convention here equals on Let's say that this is not done, so it's false. The next desk is also false on Let's say that the last desk is done so it's done. Is through like this nowhere passing is done prop for each of these days. Components. Next, we need to handle that. He's done information inside our test component. So basically, what we want to do is take this tech books, if the is done is through. And if it's false, we are not gonna take the stick books. So what we're gonna do issues the checked value for the checkbooks or ticket attribute, and we can actually place that is done information right here. So if the stone is through to detect, so we reference it with the props dot is done like this. Now, if we passing Eastern falls checked value for it is input will be false. And if we pass in the true, it will be value for district. A tribute will be through. So let's save this and check out in the pro. Sure. Okay. Weekend. Ever a message saying that we provided a chick prop hand. We need also unchanged handler for the input. So let's just at a dummy on 10 Tendler Fortis in boots. We are gonna change it in the upcoming videos, but for no, it's just that own change and passing on empty function like these. So just to get rid of the error and we will modify dysfunction in the upcoming radio a turnout, let's save it Onda, where you can see that there goes way great and also that our take books is checked. The last one that we said Eastern value for True now a free, for example, changed just went through and save. We get both of theist checked. Great. There's still one thing we can do forties test component to make it a bit cleaner. As we can see, we reference the props is done and perhaps text here, So let's save toes Eastern and text values in variables, so we don't have to reference the props on its line. So I will use some ear six syntax for defining these variables. So I'll say let and curly prices is done on dext equals props. If you're not familiar with your six index, this means that take the text value and save it to variable text on Eastern value and save it is playable from the props object. So this line is Samos. This would be so. These two lines can be defined with this one life like this. Then we will update the JSX, and we can get through these props references like. So now when we say it's work the same way, Yeah, we have two tasks don't. And in our application we also applied some custom styling for done tasks, and that is done by adding a class done Fortis tasks. So like it is now, all of our tasks should have the styling yes, or they are italic and we strike through and again T styles come from the stars that CSS file that I created beforehand so we can just focus on the react side. So how we can at the styling here is we can define a variable. Let's call it extra class on its equal. Done. If the Eastern is through and if the stone is false, then it's testing industry. So let's do East done on. If it's done is through, it will be space and don't. And if they stand, is false. It's system industry like this. Then in the class name attribute. We will define it with curly braces on desk, plus the extra glass. So in case off Eastern is true, the extra class is set as done. And if he's done, is false it Isett as empty string. And in the class name definition here, the class name value is desk plus the string that is defined here. Okay, let's safeties on flip active, prouder and now are done. Tasks have the correct styling on them and we can inspect these. If I will inspect this done task, I can see that this desk has the class down. So that's so does this last one on the first task on Lee has the class desk. Okay, so no, our header component at this test component are both reusable and they facilitate what is known as separation off concerns, meaning that its component is only responsible. For one thing, let's take a quick break and continue in the next video. 15. Passing tasks as props: Right now, we are adding our test components manually in the up component like we see here. This is not really the way we want to handle this. And most often, the data we want to show comes from a different source, for example, from an a p I. So what we do next is let's make a JavaScript array off these desks and passed that array as a prop for the APP component and then render the tasks based on that given array. So first, I'll at an a rape up top here ghost tasks, and this is an array off task objects. So each object in test array will represent one task, so I'll define an object on. Then I will give each task property text Andi East Done property, indicating If the task is done or not. Then I can couple this and at Fume or and I'll change text 14 And let's say that the last one is done so through, Okay, next we will pass in that array as a prop for the APP component so well at it here and let's call the prop desks equals tasks at array, and now we need to at the props object for the app component. And just to make sure that everything works, let's look the props object in the app component. So, Consul, look, Brooks. So we see that we get all the desks correctly. No, I was expected to pressure Andi. I can see in my console that the props is indeed on object that tasked a tasks array on here. We see all of the desks, we add it. So that looks good. Next, how we gonna render its task east by going through the props dot tasks array and for its object, we will render the test Gambone. So inside that container, I will use the a radio met function. So perhaps dot tasks don't map. And we call this like so and note here that we are using curly prices because we are embedding JavaScript inside JSX and inside the function we will return, attest component. And here we will pass in the current tasks. Props Fortis desk. Um Bolden. So we had the text prop that equals desk don't text. So the current desk that is rendered and then he's done prop that is the task dot is done like peace Now let's delete T's aesthetic tasks from the bottom and save the file and see if we get our tasks displayed. Yeah, it looks great. We have deep to first tasks that are not done in the last desk that is done. So we're currently getting the desks from the array we passed in as a prop for the APP component. However, we are getting an error here. Each child in a list should have a unique key property. This is because we are missing a key property for our test components. Let's take a quick break and fix the error in the next video. 16. Key property: In the last video, we modified our up to use desks that come from JavaScript array. But when we rendered those tasks week of an error, saying that we need a key prop on our tasks. In this video, we will learn what the's key perps are on, how we can use them to fix the error. Keys help react. Identify which items are changed at it or removed keys should be given to the elements inside off array to give the elements a stable identity. And the key values should be unique. This way. React can fast and efficiently rear ender. Only the items affected by the change also react ox predicament that we use strings as a key value. So let's jump back to the coat and see how we can at keys to our components. First, what we'll do is at an I. D property for each task in our array. Usually this is not done manually. And, for example, if this data would come from an A p I, the items would have an idea. Property already that is unique, so I'll add I d one then I'd be, too the last month. Idea three. Next Let's use the I D properties as a key for each task component when we render them, so we'll go back to the component and inside the malfunction when we return the test component. What we need to do is at a prop Keith on equals. Teske, don't I d like these? So? No, it's time a task is rendered. They get a key prop that is unique. Now, if we saved this on flip back to the browser, we can see that that Berks and we no longer get any errors. And I see we still have the Carcel log here. So let's delayed that from there. Like so. Okay, good. No, let's take a quick break and continue in the next video. 17. Recap on props: our app is starting to look good, but it's still static, meaning that we load the tasks from a JavaScript array and we can't really add or remove tasks on. If the task is set has done, it is not automatically dropped to the bottom off the least. In order to add dynamic behavior, we need to work with the data that can say it's in other words, when we make changes in the year I say, for example, at a task, the data should change, according in the next video, we would learn how to do just that. 18. State explained: right now our app aesthetic, because the data we use aesthetic we cannot add or remove tasks or set tasks done. So far, we've used functions that take props as a parameters and return react element. As we learned earlier. Props are eat only and cannot be changed within the component. So how can we make our up dynamically changed? Well, the answer is we need to use state State is a challenge for object that represents the components date. The difference with props is that props get passed down to the component like function parameters. Whereas state is man, it's quitting the component like variables declared inside of function in react status. Basically, the data you use in your component. It allows you to create components that are dynamic and interact. State starts with the default value when the component dismounted and then modified throughout the components lifetime most often based on user interactions. For example, taking a cheque books in the your I status private meaning that component cannot modify another components state directly and component can only modify its own state internally. So when should we then use state instead of props? Well, anytime component needs to alter one of its attributes at some point of time on those attributes should be part of the components state. In the next video, we learn about adding a state or a component. 19. How to add state: there are two ways to add state are component. First is to convert our component toe class, making it class based, and the other one is by using react hooks. In this course, we will use clasp its components at state. Even though react hooks is a near future off react, they are not in the scope of discourse. I think hooks are important learn, but they are not necessary for react basics. I decided to dedicate the whole course on react hooks, and I'm red now in the process off publishing that. So if you are interested about learning react hooks, go check my profile pages for that. And if it's not yet live, keep an eye on that because it soon will be. Some might argue that since The React Hooks is a New York feature in react for adding state , why should really learn about classes? The answer is that class based components are still a vital part. Off React and Track team have also said that there is no plans to remove classes from react . I also actively work on many different react projects, and I can tell you that most of the existing code out there is using class based components . So it is safe to say that when you start working on some existing project, there most definitely is class based components in play, and you need to understand how they work. Okay, now that we know we really use class based components to at State are up, let's get actually started with the coding and create our first class based component. Let's do that in the next video. 20. From functional to class component: in react. We have two ways to create a component, a function and a class. So far, we have created our components as functions. These are all stateless, functional components and they do not use state. They only received input as props and render to you. I functional components are faster and easier, right and understand. And it's a steak. Props hasn't parameters and return TSX. But now that we want to use other, more powerful features in our app such a state, we will use classes. So let's convert some of our components the classes using E. S 2015 Classes Index. If you want to learn more about yes 2015 classes, there is a link in the resources sex and off discourse so you can take it out. So let's think about which components we want to convert clasp its components. So which components have some information that is changed well, our up component. When we at tasks or remove tasks, the tasks array will change. So we need to convert our up to a class based component and also when user at a desk, the value off the text input is changed on. Then, when the button is clicked. The task is added to the task list. So let's convert our APP task input components for class based component. Also, let's start with that. A class based component is created by defining the class that extends reacted out. Component Will, right les at desk input extents react dot component like so then we will need a render myth it They're intermittent that, as the name suggest, returns the basics that used to be rendered. And we don't need anything else for a component to work other than or intermittent. So take the return statement that we had and place it inside of threat Demented. Now, if I save it on ticket out processor, we can see that the up this work great. So now our task input component is using glasses. Next, let's convert the APP component also the same way. So class at extents, reactive components on at our inn Demented and placed the return statement inside of it and save flip back to the pressure. And now we're getting an error. Let's see, Hope I forget the latest old trope. Okay, now we get an other era. It says that perhaps is not divide cases because we're using the props inside of the APP component. So with functional components, we got the props object as a parameter for the function. But with classes, we receive props with Teesta props where this refers to the component itself. So perhaps our property off the component itself. So to fix this error, which just need at this dot before the props. So now we are referring the components props. Let's save it on. I see it in the pro, sir, and now it's Rick. Okay, now we have converted our functional components to a class based components. In the next video, we'll see how to you state in south our class components. 21. Adding state to a component: In the last video, we converted our functional components to class components. Now let's see how to use state in our component. We will work on the task input component first inside the component. The information that changes is devalue off the text in boot and that value will be our state in this component, So state is an object and we can created in the components construction. In case you're not that familiar with constructors and classes, be sure to review the resource is six and off discourse. I would leave a link there for more information. So first, let's create a constructor. And first we need to do the super Call, which means that we call the constructor off the class that this class is subclass off. This needs to be done first before anything else. So super props like this. Then we will initialize our state on that's done by typing piece that state equals and it will be an object. And inside of the object, we will define the initial state, so give it the name text and said it as an empty string and note that this variable name needs to be state in order for it to work. Now let's save this and actually flipped to the pressure and I will inspect the at risk input component. If you don't have the doors open, you can red click it, inspect and then select the components dead and you can see all the components and then click the at desk input component and we can see down here we have a state which has a value off text and the text this empty stry. So our component now has estate. And if you don't see this state here right away, you can try restarting your development server and off the debt. It should work. Okay, so that's one way off. Defining a state for a component. Another way to initialize state is directly with class property. This is not supported by all Pro Sesto, but since we are using create, react up on create react up years, it's possible to transform our coat. It will work on all browsers, so let's try to define the state with the class property, too. So I'll take this construction and remove it. Then I'll write state equals on the ill defined an object with the property text and let's so that we contested. Let's just give it a value off test on Save it. No, let's flip to the pressure and we can see that we have the state with the property off text and valley off test. So using a class property is a bit cleaner and easier, since you don't need to call super or define the construction. So let's use the class property instead off the constructor to define our state from now on . But now let's take a quick break and continue in the next video. 22. Events in React: in the last video we initialized state in our at task input component in this video, let's see how we can update that state. The first I'll actually the latest test and we want to initialize it as an empty street. And then whenever the text inputs value is changed, we want to store it in the text variable inside the state. First we need to function or even Tendler that is executed. When the value in the text input is changed. On in the event handler, we will call Reacts Set state method to update the state. Whenever status updated, the component will rear ender itself. We can define the even Tendler as emitted off the glass, so I'll name it on next change and we will call the event handler whenever own change event triggers on the text In reactive INTs are months light JavaScript events, except they are written in line and name to using camel cased naming convention. This important that we named the event on change because it is specific to react. React has other building events also success on submit or on click. So let's define the event for texting. But even our past as TSX X Person, using curly prices and the event under is placed inside of them. A note that we are not using parentheses here, and we are not using parentheses when passing event handler. We are passing a reference to it if we use parentheses. We called function right when the element is rendered. Since we want on, Lee called the function. When the event happens, we will past event handler function as a reference. And just to test that our event handler is wired up correctly, let's consider log inside of it. Hello there Now I saved on the pro serve. I'll have my control open on. I will write something inside of the texting, and we can see that whenever the text value changes, we get a new console. Look in this video, we learned how to hook up a event handler for our text input. Let's take a quick break here on continue in the next video by modifying the state whenever the text changes 23. Modifying state: Now that we have our event handler wired up, we just need to modify the state accordingly. In it, state is never modified directly in a component state can only be changed with reacts built in set statement. React needs to be told when the state has changed and this is done with the set statement. It, after said State is called React re renders the component and makes changes to the component based on the state. Change, said State Takes an object as a parameter on the object contains part off the state we want to update. So let's see how we can do that with our own component. So what we want to do is update the state inside of this on exchange event handler. I'm going to remove the consul log and at a parameter for dysfunction called event, because when this one change event happens, it passes an event parameter for the function or the event handler, and we can get the current value off that text in both from the event parameter. So let's first create variable called text and we can get the current value off the text in boot with event. I don't target don't value. Next. Let's consul oddities and check that we get the right value. I'll save it and flip back to the brochure. And now if I type something here, we can see that we get the current value off texting boot. Look it in our conference. Great. Next. We need to update state with this new value. And as we just learned, we can do that with the set state method. So I'll call this DOT set state and pass one object as a parameter with the part off the state we want to update. So in this case, text and I'll set Devalue asked the new text value. Now let's save this and flip back to the proud her and I would start typing something here , and we actually get an error saying that Penetrate property said State Off undefined. Let's take a quick break and faculties error in the next video 24. Bindings with event handlers: in the last video when we tried to update our state, we got the following error can operate property said state off undefined. If we flip back to take with us to the coat, we can see that in this case we call this inside our method but it's undefined. Normally this would be bound to our component. But when we use class components that extent reacted component any custom methods we create are not bound to the component by default. That is why we are not able to reference thes from within our medic. Any custom methods need to be bound in order to use these to refer to component. There are more than one way to bind these context in react. A common way is to call bind method in their end, ERM it that since render meant it is not custom, it'd and inside of it this refers to the component instance. So we wanna bind on text change inside their intermittent to this. So how we do it is by typing dot bind and giving. This s a parameter for the bind funks. Now, when we saved this conflict back to the browser, we can see that are a piss rendering on if we type something we can see from the react if tools that are state is updated with the value off the texting. But another way to pass event handlers iss with an arrow function like this. Now let's save this. And if it works, we get our A prender to And if we typing something, we can see that the state up, it's So what exactly happened here? We defined an anonymous arrow function that had an parameter ive referring to event and inside of that function, we called t start on text change and passing the e s a parameter. But why did it work now? And it didn't throw an error about this being undefined. Well, in this case, we don't need to bind anything because arrow functions use something called lexical binding , which means that they're automatically bound to the context they are defined in. So if we define our method as error function, we don't need to bind anything. I'm gonna leave it like this and use the arrow function. Last thing we want to do is make this component a controlled component in HTML form elements, success, input text arrius or select, typically maintain their own state and update it based on user input into react. Mutable state is typically kept in the state property off components and only updated with set state. We can combine the two by making to react state to be a singular shores off fruit. Then the react component that renders form also controls what happens in that form off subsequent user input and an input for Element whose value is controlled by react in this way is called a controlled composed. So in practice, what we need to do to make our task input, component controlled component. We need to define value for our text input, and we will set the value attribute as the text value off the state. So he starts ST dot value next. Now, when we saved the file and take the browser, we can see that everything is working. And what really happens here is since the value attribute a sit on our form element. The displayed value will always be tested. State that text making the react state the source off fruit since own exchange runs on every keystroke to update to react state the displayed value will update. Asked the types in this video, we learned how to update the state inside off our component. We learned how to fix the error and how to create our component a controlled component. Let's take a quick break and continue in the next video. 25. App component's state: in order for us to add and remove tasks to and from the list, we need to actually do some modifications in the up component to right now. We have our tasks coming from the JavaScript variable, which this past as a prop to the up component. As we have learned, react components are rendered based on the date that they get, and if you change something in view, I it also changes in the date. On the only data that can be modified inside react component is its state. So in order to it and remove tasks, we need to move the tasks to state. And since the up component, it's responsible for rendering the test components. It is going to maintain the task State Single Task state will then be passed down to the test component were props. So we will initialize a tasks state inside that component and then create on delete on on at event handlers that remove on at desks from and to the state. So let's do that now. So first we will define a state for the app well at the tasks to the state and since they are coming from the props we will type in. He stood, perhaps desks. So, no, we have our desks in the up components state. At this point, it's good to understand a few differences between states. So there are two main types off state application state and components. That application state is the main state, and it holds the data that it's usually available for the whole application. In our up thesis, the tasks state which lives inside the up components state component state, on the other hand, is state that it's local to a single component, and it's not visible or accessible outside off that component, it is the state that is only required by that specific component in our up. The text info inside the at task input component is a good example off this. Okay, now that we understand the two main types of state and we have our tasks set up in the up components state, let's see in the next videos how we can add and remove desks from the state 26. Adding a task: in this video, we will learn how to add tasks to the list. First, let's at an event handler that is triggered when at task Button is clicked. Andi, since the tasks array is inside of the APP component, we were at this event handler inside the up component. I will name it as on that desk and as a parameter passing the task text for now, I'll test console, log the text so we can test out this event teller that everything is work now that our event handler is in the up component and the at desk button is inside the task input component, we need to somehow tightest on at task event handler. Do the button inside the task in. And we can do this by passing in this event handler as a prop Fortis at task input component. I will pass in a prop and I'll call it on at a desk and passing the Evan Tender that we just created on that desk like this. Now, if we look at the desk input, we will define an event handler inside of it. I called this handle don't click, and Allah created arrow function on inside of it. I will call the own at task event handler that we passed in as a prop and give the current take ST as a parameter. So he still props dot on at desk and as a parameter, I will pass in. He starts state don't text, and after the bottom click, I wanna clear the text input so I can update the state with an empty street. Now let's save this on go approach er And if I type here some text and then click the desk bottom, nothing happens. We're still in it at this handle button, click event handler for our button. So on click he start handle. But I think like so now let's save and go back to the pro. Sure, And now, if I write something here and click the at risk button, I can see that the value off the text input is locked in the console by the up component right here on the texting, but is clear. So what's left for us is to actually inside this at risk event handler in the up component to actually at the desk to the state, so I'll create a new task objective on inside of it ill defined the text value. And now I actually can use, um, yes, six index and just typing text because our text variable is also named text. So this is Samos. This then we need the information if it if the task is done or not. So it's done. And because it's a new task, let's say that it's not done by default. And then if we look at the area we got, we have the i. D. Property for each task and we needed thes fourth e react key attributes. So what we're gonna do here is generate a random number that is unique. And the easiest way right now is to just use the current time stamp. So I d his date Don't know The's generates current time stamp, and that's good enough for our application right now. So, no, we have our new tasks done, and we still need to add it to the state. The last time we updated state with this estate and passed in an object with the updated state. In this case, though we are updating the state based on the previous state, there is one noteworthy thing about said State, And that is that the state function is a synchronised. This means that the status update, a synchronously and changes to the state may not always lead to the component re rendering with new data, which could then cost inconsistencies and box So host. We then handled this kind of situation when we need to update the state based on the previous day. Well, said state except callback or update function that allows us to access the current state value inside the function on update the components state more reliable way. So let's use that callback function here. Well, typing taste that sets state and no past in function that takes the state at parameter. So, no, we return the new state from dysfunction on the status optic, and then we want to return the old desk array. We can use the duck notation here from me, a six that spreads theory, and then as the last object, we will add the new desk like this, so no are set statement. It is called with the function and inside the function we returned the updated state and that operated state is created based on the previous state from a Let's save this on sweets back to the processor and tried to add a task, and we get an error. He sits. State is not a function, and it is actually because we defined our function like this on the This is not defined. So let's convert this to a narrow function and we should be good to go. So it is the same thing that happened earlier with the on text change event under inside at dusk. Input come bone. Let's save it and flip back to the pressure and test it again now. It didn't throw ever, but nothing happened in our you I And if we take a look at the up component, we can see that the task was added to the state. But it's not shown here, and that is actually because we forgot to update the or intermittent off our up component. So inside the up component were still rendering the tasks from the props. So we need to change this to be rendered from the state like this. No, let's say and see if we get it working. So I mean, next on click the desk and we get our task at it to the list. Now we can add tasks, our app. In the next video, let's see how we can remove tasks from the list. 27. Removing a task: in this video, we learn out removed tasks from the list. It's pretty much the same thing as with adding tasks with the difference that in the event handler, instead of adding task, will remove one. So first, let's create event handler inside our up component. I will define it as an arrow function and as a parameter we will get the task i d. And inside of it again, I will test council Look the I d so we can test it out. And next since the removed button is inside off the desk component, we will pass this on to remove task event handler as a prop for the task component. So inside here I'll pass a prop on remove desk and passing the even tender that we just created. Next, I will go to the That's component, and I will pass in an event handler for one click method for the removed button. And as valued for this, I will pass in a row function where I will call the on removed task event handler from the props. So props built on removed task and we want a pass in the I D off the task as a parameter like these, and we are getting an error here that the idea is not sit. So let's bring it from the props close. So now let's save this and see if we get a good look when we remove a task. We are getting undefined, and that's actually because we don't get the I d from the props for the test component. So let's go back to the up component and we can see that here where we render the task, we pass in the text and is done as props. So let's pass in the i d. Also ask that I d and now safeties and take it into pressure and when we click to remove. But we are correctly getting the I d off the desk now. Only thing that is left is the implement the actual remove look logic. So inside the own remove task event tender in the app component, I removed the concert log and now that we are again updating the state based on a previous state, we wanna use the callback function with set state. So he starts, said state and passing the function. So what we're gonna do is create a new array where the task with the Given I D. It's removed. So let's first define a rape and for removing to task or a field permitted, is a good way. So let's type state the tasks that filter on Filter takes a callback function where the first parameter is the currently being processed, and it will return every item that returns through for the given conditioned. The condition we when a test against is that I D. It's not equal to give an I d. So what this basically means is that we will preserve its task that returns true for this condition and filter out the rest. The only thing left is to actually return the new state. So let's do that like this. And then that safeties on. Flip back to the pro, sir. And let's click one of this removed, but and we can see that the desks are being removed. Let's take a quick break and continue in the next video 28. Setting task done: or up is looking pretty good. We can add a tasks on remove tasks. Onley thing we can't do yet. It's the SEC. Our tasks done so the checkbooks gets checked and it asked, gets to the bottom off the least. So let's do that in this video like wit, adding and removing tasks with updating is done Information for tasks. We're gonna define an event handler. This event handler will get I D and information about the East done as parameters. Next, let's lactose values. And at this event, handler for the test component, I'll make this a bit cleaner by removing the text and Eastern and I D props and passing a single task prop for the task component. Andi. I will know also re factor to test component to get these values from the props dealt desk variable. If we saved this and flip back to the proud sir, we can see that this work great. No, let's at another event handler for when the task is it done. So on. Let's passing the Munich created handler and I'm gonna move these on their own lines, so it's easier to read like this next in the test component. We have already a known change handler, 40 take books, but it's just an empty arrow function. So let's change that so that the Arrow function will use event handler from the props. So this event handler gets the event as a parameter on inside of the function. We want to call the props dot on istan update and as the first parameter, we passing the desk idea on as a second the checked value off this cheque books, and we can get that from the event with the DOT target. Don't checked now save flip back to the pressure. And if we try to take one of these boxes, we can see that we get the idea of the task and detect value off the task locked into our council. Note that this value is the exact value after the click zone. Right now it's false, but after the click it's true. Let's go back to the honest, um, update event handler inside that component on a right, the update logic inside of it. So again, we're updating the state based on a previous state, so we want to use the callback function for the set state and inside the corporate function . Let's loop through the tasks on when we find the task. With the given idea, we'll update the system information for it so we can do this by defining a new variable and mapping T desks. Marie and the test here is the current element being processed and for its desk we wanna take If the idea is to give an idea and then update this done information or if it's not be given, i d. We consist Return desk as East. So I write an if statement and return a new object with the same fixed same idea and the updated. He's done information and in all other cases where the ideas didn't Mets we can return the desk as he's, and finally, we'll return the updated state. Great. Let's save it on. Flick back to the browser. And no, if we tested out, we'll get an error about piece that said state. And this is the same error we got earlier looked like we didn't define our function as an arrow function. So let's change it on, say and flip acted. Approach her and try again. Now the checkbooks is being checked and unchecked but the task is still not being placed on the bottom off the least. So to do that, we wanna order the tasks by Eastern information in the Render Minted and then render their sorted masquerade. Let's do that. I'll create a new array, and I'm gonna place the tasks from the state in it. Then we will sort it with the JavaScript are a sort myth it. And if you're not familiar with the assortment it you can take the course resources for more information. But basically we are passing in a comparison function that compares all the items inside the area and sorts them based on it. So I'm gonna test, right the comparison function here. So dysfunction here sorts the array so the tasks with Eastern equals false is placed on the top of the list and tasks with the East. Um, said through are based on the bottom off the list again. If you're not familiar with assortment, it check out the course resources for more information. Now we still need to render the tasks based on the sort of desks array. So well, saints inside the return statement the east that state the desks to be short that tasks on a map through them. Now let's save Flick back to the browser on. If we check the 1st 1 we can see that it jumps to the bottom off the list. If we add a new on again, checked it up one, it jumps to the bottom of the list. There is still one thing that's missing from the task functionally thing. If we typing a desk and press enter on our Keyport, nothing happens. So let's quickly modify our code so that when the enter key is pressed, the task is at it. So let's flip back to the code and find the at desk input component. And what we want to do is at a key down event handler for the text input. So I'll type. I'll actually place the's on online's so it's easier to read. So on Key Down and once the keystone, let's define it s arrow function. And what we're gonna do here is called the Handle button click function. If the key that was pressed was enter so we can get the key from the event, object with the key, go to property and for enter the key code is 13. So if key code is 13 we'll call t start, handle, button click. So basically he could rename this handle button click toe handle at on. Update it here. Andi in the button on a click handler Also. So now it's more describing for both cases. Great, Let's save it and test it out so I'll type in a task and press enter and desk is at great. 29. BONUS: Refactor components to own files: are up, is now fully functional. It has all the features that we set out to complete. But there's still one thing we should do. Right now. We have written all of our components. The single file. This works fine, and we have done so. It's just the sake of concentrating on the most important parts off react on understanding how react Berks. It is a common convention, though, to create a new file for each react component. This way, the components are more reusable, and especially when application gets larger, the coat is easier to understand. So let's do that and move all of our components to their own fights. First on to create a new file, and I call it aftertaste. He sees for the up component, and I will copy, paste or cut the up component from the injector index. Tastes like this, and we need to import react on the top of the file, and we also need to export our APP component. We can do that. Bite that export default app. Then we are missing hitter at dusk input and task components. Let's import those, even though we haven't created them yet. So import Teske from desk import, at task input from at desk input and import hitter from hitter. And here we are using the dot slash the component name because we will place all of the components in the same folder with the APP and indexed Octavius Vice. Let's save this on. Flip back to the indexed. So yes, next, let's take the test component. Create a file for it on pace to Dean and again, that's important. React and export the desk component. Great. Let's save it and then back to the index file on Let's take the task input component and create a new file for it on face to Dean on Import React. Andi also lets export save it. Then we have, ah, header component. Let's copy that and create a file for it pasted in on import React. And let's remember the export. It also like this and now inside of the index file. Because we are entering the up component, we only need to import the up component to the index dot Js file. So let's do that and again because it's in the same folder will use dots less app. Two Important. Let's save it on flip back to the pressure and see if we get any errors. Looks like everything works. Yes, Andi. Now our components are nicely organized. Eats to their own file. 30. Final thoughts: I hope you like discourse. And I would appreciate it if you left the review. Don't forget to share your protect in the project checks in you can, for example, say our link to the get up repo off your application. I would love to see your work, and it also helps me answer any questions you might have. I also have new courses planned, So make sure to follow me here and on other Children media to get notified when they go like thank you again for taking this course.