React practice course. Build React app from scratch. | Maksym Rudnyi | Skillshare

React practice course. Build React app from scratch.

Maksym Rudnyi, Teacher and YouTuber

React practice course. Build React app from scratch.

Maksym Rudnyi, Teacher and YouTuber

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
44 Lessons (4h 30m)
    • 1. 1 React practice intro

    • 2. 2 What do we need to start

    • 3. 3 Installing ReactJS

    • 4. 4 Setting up React development app environment

    • 5. 5 Configuring Git and GitHub

    • 6. 6 React AutoComplete installation

    • 7. 7 Fetching data with REST from Wikipedia

    • 8. 8 useSearch custom hook with Axios

    • 9. 9 Cancelling Axios calls

    • 10. 10 useDebounce custom hook

    • 11. 11 Custom Input component

    • 12. 12 useSearchForm custom hook

    • 13. 13 useCallback hook

    • 14. 14 React render props pattern

    • 15. 15 Configuring SCSS

    • 16. 16 Routing with react router dom

    • 17. 17 Adding app pages

    • 18. 18 Home page

    • 19. 19 Search page

    • 20. 20 Installing Storybook

    • 21. 21 Storybook configuration

    • 22. 22 Fixing possible issues with Storybook

    • 23. 23 Storybook interface overview

    • 24. 24 The first story with Storybook

    • 25. 25 ListItem story

    • 26. 26 Search result page story

    • 27. 27 Installing moxios to configure mocks

    • 28. 28 Storybook documentation with mdx

    • 29. 29 Unit tests intro with Jest

    • 30. 30 Unit tests convention

    • 31. 31 Input component unit test

    • 32. 32 Enzyme installation

    • 33. 33 Coverage reporting

    • 34. 34 Autocomplete unit tests

    • 35. 35 Container component unit test

    • 36. 36 useSearchForm hook unit test

    • 37. 37 useDebounce hook unit test

    • 38. 38 useSearch hook unit test

    • 39. 39 App unit test

    • 40. 40 Unit tests summary

    • 41. 41 React PropTypes

    • 42. 42 React DefaultProps

    • 43. Installing NodeJS on Windows

    • 44. Installing Yarn on Windows

  • --
  • 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

React is the most popular Javascript library of the last five years, and the job market is still hotter than ever. Companies large and small can't hire engineers who understand React fast enough, and salaries for engineers are at an all-time high. It's a great time to learn to React! It's a great time to do a lot of React practice!

What's this course about?

There are a huge number of React courses for beginners where authors describe the first steps. They are great for beginners. But, what to do next? How to create a real React application for customers? 

In this course, we'll do React practice. We'll deliver a high-quality product with unit tests (UT) and Storybook stories for all major components. These practices are "must-have" for developers.

Who's teaching you in this course?

Senior Software Engineer with more than 8 years of production experience in Web Development. Experienced both in frontend and backend technologies.

For the last 2+ years, I've been working with React. Created a lot of different projects and have a huge experience. The practice is the most important in programming and I want to share it with you.

What's inside the course?

  • We'll create a simple React application with 3 different pages: Home page, Search page, and Not found page. React Router is the best choice!

  • It will be a copy of the Google home page with fetching data from Wikipedia using its API. For fetching data we'll use Axios and for mocking this data in Storybook and UTs, we'll use Moxios.

  • React hooks are a must-have. Default hooks useState, useEffect, and others are used.

  • Custom React hooks will be created, explained, and covered with UTs.

  • Storybook is one of the best practices in development. We'll learn how to install and use it. Will create stories for the most important components.

  • Enzyme and Jest are used for unit testing. React hooks testing library is used for hooks.

  • According to the unit tests code convention, we'll get 80% of code coverage.

By the end of this course, you'll have learned how to deliver high-quality React application. How to do it fast and following best practices.

If you have any questions, please don't hesitate to contact me. I have a huge experience in development and would love to share it and help students learn something new. Sign up today and see how fast you can improve your seniority in React software development.

Meet Your Teacher

Teacher Profile Image

Maksym Rudnyi

Teacher and YouTuber


Senior Software Engineer with more than 8 years of production experience in Web Development. Experienced both in frontend and backend technologies.

I would like to share my experience with others. You can find courses in Web Development (Front-end and Back-end) and specifically JavaScript. Use this knowledge to improve yourself as a professional developer.

Keep learning!

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.

Your creative journey starts here.

  • Unlimited access to every class
  • Supportive online creative community
  • Learn offline with Skillshare’s app

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. 1 React practice intro: Hello my friends, wagon to react practice course. My name is maximum Rodney and I'm a senior software developer with more than eight years of production experience. I'm experienced in backend and frontend. The last two years, even a bit more. I have been working with React and know a lot of stuff about it. During these years, I created a lot of different applications and have a huge experience and I want to share this experience resume in this course, there will be only practice, real practice and real development. It's more advanced course. So if you just started going react and didn't created a lot of applications, I would recommend you to start from a lower Nick, additional materials made from real website or some other courses. And then we can continue with this practice course. So we will create during this course, as you see right now, we are localhost 3 thousand and we have something like Google homepage. So we created this page. We have search input and we will use Wikipedia API. For example. If we are looking for Elon Musk, we can go to website or we can go to the next page in our application where we will have the whole information about silver storm. It looks pretty easy application, but in this application we will cover the most unusual things in React, such as routing. React hooks, the latest feature in React, and creating different components and composing to these components. The next very important part in development in a real web development testing. In this course, we spent a lot of time for creating key unit tests, especially for hooks. For example, we have three different most useful hooks. And as you see, we have 93. Almost 94% covers four statements of this Hooke's testing hooks it must have for every React developer. Also, we have more than 84% of code coverage in general, there are a few small competence. For example, a list item is pretty simple components, so we left it for your homework. And the page search we already created, that's four pages home and not found. And search is pretty easy, so you can do it by herself. Also super important part in nowadays real development it using storybook. Story book, it's really must help. So in this course, we will use the latest storybook. It's 6. I guess, the latest one anyway. And I will show you how to develop, create independent components for storybook hot to mock data using markers, for example, because we will use oxygen's library for pattern data. So in this course, we will show you how to use storybook. What is it? How you can change? How you can change sounds, for example, probes to check how your vacation works and a lot of other. So and we will use mock data. Parse are very important for professional web developer who was to create high-quality products with React. Also, all the court and Erin codes you can find on my GitHub. So, maximum Udemy search weekend. In this repository, you'll find all court with the actual coordinate in case he does not understand thousand during the course or you need some additional materials or dust, you need to copy the corner so you can find arson coordinator. So I'm sure this course will be useful for you and you will learn and you will find out how to create high-quality React applications. 2. 2 What do we need to start: What do we need to start? Why I like web development is because of the almost do not need Nasmyth. So we will use React and we will install React using Create, React up. It's the most useful tool. The next one, you can use any computer with annual grading system is it Windows, Linux, or Mac OS? In my case, it Mark class, but you can use, for example, Windows and it will work great. The next one, what we need, we need the yarn. Yarn or NPM with jazz install ER or npm, you can find in bonus section where I showed how to do it. The next one, we need some idea. In my case, I use JetBrains, Ruby mind. You can use that brands Web Store or even better. You can use the free Visual Studio code. This one, it's absolutely free. You don't need to pay for it, and it will be great for the next one, doing covered development, we will use good for committing our code m. The savings is code in it hop repository. So you need the GitHub repository account and be allowed to share the meat post, share your code on this top, this repository. The next one. As I mentioned before, during our development, we will use storybook. So we need storybook. I will show during the course how to install it and how to use it. But anyway, you can read a bit more useful information or the main website also for testing. Or the next more important, most important part, we will use just there is no slip test and framework. So you can read a bit more about this framework on Io website. Also. As I mentioned before, again, we will use the React router for creating different pages. Our simple application will have three different pages. It's whole surge and default NOT_FOUND page for all other routes. And to implement this behavior, we need React router application. This one in the most popular song. A bit more about this one. And the aft one part, it's fetching data from remote server. And to simplify our work, we will use Oxy axis. It's illusive, very popular, and one of the most used right now Library for fetching data from remote server. So mostly it's also we use voxels, but I will show you about boxes in the course. So I showed you you can prepare these tools. And now we can start our React practice course. 3. 3 Installing ReactJS: So to create application, let's start from the very beginning. So right now we don't have nothing. So let's create our application. To do it, we will use correct React application. So at Google it Create React application. It's from Facebook as go to github. So it's a based basement of all React application. So if you want to create your application, you can use these one is the easiest one. So here is a quick overview. And b X greater application. When you call this function, it is operation. It will install the latest React application and we'll start. So as you see is that you need to install uninstall your great, great React application to be ensures that n p x always uses right at the origin. So we will use these one. Okay, we need. So let's use terminalis great. React application. And the name will be, for example, flipped. So it will create new React application. Right now it using key. But if you don't have yarn, it will use npm. So it will install the latest version of react, react tester for tests and for LinkedIn. Latest linked or Harrison quote, we need so just called this operation and then we will have our first project. It will be a basement or with the project. Okay, so as we see, it was installed now, Kinsey's commons. Let's go to our shriek and yarn start. It will launch our application. And this application will be started on localhost 3 thousand. As you see, what we need to be held. So we created our first vacation is amazement, and now let's set up our environment and clean it up. 4. 4 Setting up React development app environment: So we have our application on this port. That's around my idea. I will use RubyMine, but it doesn't matter. You can use any, your favorite ID. Is it a Web Storm or autumn, or or studio court? It does matter. I will use Ruby wind. Okay, so we'll organize this project, just open files. And so we have our files. First of all, I will continue development in this terminal. So let's stop our application here and start. Okay, so what do we need to know this operation? Let's open package Jason. In packages on, first of all, we see some dependencies. It's for testing. It's the react to our DOM and drag scripts. But what we need, we need these operations, what we execute, it will start, what we call it. It will call react scripts start. We can build, test and this one we want to use, but for all other operations we can use. Also we have some ES lint config and browse list. It's for building. Our game. Is one we do not need or obligation. It was neat, clean up. So what do we have? We have public folder. We know change it, but if you want to change, for example, logo or manifest, you can do it. But right now, we will leave it. It doesn't matter. What we need. We need the source and go to source. What we have is go from index. It's the main file. In this file we need to remove everything from service worker. So right now it's not regressive of ops. Removes this one. Also, we don't need these tiles. We need just pop. So then let's delete index CSS. The next one we need the go-to up. What do we tell the uomo styles as greeted? Dropped one, du and it will be o. For example. Or Kayla's delete CSS and do its part tests. We don't need them anymore. This logo, this service worker, get loaded. The top tests. We can leave it for now. So what do we have? We have index file, which loading just application and mounted this application to get element by ID route to the div with ID root, open public folder index HTML. We will see that we have this ID route. And as you see reloading, this pharmacon, is this one. Also Leah sadness, our page. Metal tags. Also we allowed him occur. Apple touch icon, but it's not so important. Also we have manifest. We can do it as well. Right now because of manifest, JSON provides metadata used for your APP installed user about desktops. We will drink with rotten right now. Post title, let's change it to. So shriek him. If we don't have a dose, it will show this message and he has this idea or index. Let's check it's compiling for keywords row. So as we see, we have this application and now it's absolutely empty application and its minimum, what we need to start, our application would create what we need. So let's create this application. 5. 5 Configuring Git and GitHub: The next very important step when we configure, it sounds like and what we need, we need to save this data in case we will change subsonic or we will break something, we need to restore this data somehow, how you can do it the easiest way and the most popular. It's using version control system, Git. And we will use GitHub, how we can do it. In my IDE. I have the easiest one. The easiest tablets import into version control system and the shared project on GitHub. So I will say my project on GitHub. So it will connect to mine it hub. So should we could title and description. Let's share it. So is a easiest way when you have ideas. If you don't have ID, I can recommend you go to my YouTube channel, travels caught, where I have a separate video. Let's go to play. This is a course for beginners where you can find ashley coordinate to create your repository and the publisher project in this repository. And so now let's go to GitHub repositories and surgery can now we have saved. Repository. Agincourt we need is saved and you can use this repository as well to compare your code with quarter I created. So don't forget to start and where we have average saved. So don't forget to, as you see, it was the old version of application, the last emitted diversion. So we need to commit. It will be our init. And now let's commit and push all our channels. Let's push it. So as we see it, all changes are successfully committed and pushed. Let's check the latest version is, and we have our string saved. So, and now let's continue creating our application. 6. 6 React AutoComplete installation: The next step, we need to add the input field and a dropdown with suggestion we are looking for. So it's pretty easy to do with React because we weren't created from scratch because of its very boring and useless. Because often react to have a lot of different already prepared and completed repositories and the packages. In our case, we will use already created package. It caused the React autocomplete as open it on GitHub. The first one, it's very popular one. And here we see how to install it and how to use it. I will use yarn. Let's copy it and put in our terminal so we need install after complete. And then go to online editor and see how it works. What do we need to copy and implement? So as you see the hell, input with some options suggestions, it's almost what we need. So let's copy this return section. Replace what we have. Okay, very important part that we are using a class components with construction, constructor and this date we are saving state in this state properties. And we have a function set state which we, which is inherited from React component. To update the state for our component, we want to use this old approach. We will use Hooke's react hooks. So we already installed this component and now let's import it. Import, React auto-complete. So we have it. Then what do we need? We need to update this court, which uses if we will take a look for the cause of we are using this state, we have this function, so we will use our hook. The first one is US state is the most popular and useful hook in the world. How it works. Let's create a cons. It returns array where the first element, it's some value, some state we will, we will use. Next one is a function value. So it's a function which will update this value. So as it array, we can put any name here. It doesn't matter right now. Is, is it a value or input value or the storm doesn't matter the same for the functional value. We will update the state variable to value. And this state we will update with the function set value. The next what's important, as we have said, the value, it works only for fun, for bearable value, it will update on disease one. It means that we don't need to pass it cue for what we want to update. So let's deleted. We need just value the same here. So value, value. Okay? So we implemented the same approach which we had four from this editor. And now we have very simple autocomplete component. What we need, we need customize it and get data from real back-end. Because right now we are using some mocked data, which isn't so cool. So before we get data from, because don't forget to come commit these changes. So we'll put added autocomplete comment and connect them. So Erickson is saved. 7. 7 Fetching data with REST from Wikipedia: Now it's time to replace these mocked data with data from backend. So we will use, we will use the Wikipedia data. So that's Googled Wikipedia API. Let's go to this one, the first one. And on the first page we see that, for example, for English or Dutch beheld a PI as use it, or k. So what we have to go to open-source renewed, for example, in the entry how example? Let's open it so it will get data from Wikipedia by this surge, storm surge, surge squaring. Ok. We have it. Next one we need to library to do call for backend, for reacts the best one, it's OK sales. So access is a top most popular library to do mechanicals using drugs. Now, as you see on the top, is very popular. So right now it's out of scope of this course, how to use this library. But if it's interesting for you, you can read, of course, this documentation on github. Also, I have a video on my channel how to use this library. So you can go to trial scored and find this one video hotkeys, oxides. So very popular library and video. Ok. So we need install this library. So let's go to permutation installation. So we have yarn on XOs as copied. And let's add the next one. We have some documentation, and here we need to execute this section. The next one would be very important in react when you're doing some coal. Because you need to do this on the web, you're competent is mounted. And the best way to do it was lifecycle hook, competent, did mode. So let's take home owner incrementation. Company did mound. It was executed once when competent was mounted and we can do something here. So right now we're using hooks. And it means that we will use this, use effect Hooke. Use the fact is the same approach, same as a lifecycle hook almost. So when we will mount this component, we will execute some section of our quarter. Let's copy this section, z score. And so finally, always executes actually we do not need to sections. Now we need to put endpoint where we need to do is call. Let's use this one. And response. And so let's put debugger. Thus the chick, you've absolutely forks or game. Let's go duplication. Open, inspect. And yes, indices is using cocktails imported. So RAM OK, so now as you see the boiler error, because all we have, Let's go to network. And it was failed. It was failed because we tried to do a drugs called from another domain to another domain. Right now we are on localhost and we tried to go to Wikipedia. It means that we have different domains, it's same, same origin issue. It's course. You can read about cross origin, resource sharing. It security in browser. So read two solid to solid we can use, we can extend this API with initial parameter its origin. It means that it will execute it. It will be executed for all domains. Let's check. Okay, and we have in Zen section, successively, God responds with data. We have array of items. Each of them is a datum. And now we need parse this data and put inside our suggestion box. Ok, so how we can do it, and let's create this anymore. Does create new array. Then we'll use cycle form. Gop response data in this data via this array with ten elements that go one-by-one. It's under index1. Iran's, let's go increment and push bu some object with the same structure, same fields, id and label. So as a label we will use this data. And as I d, We will use your L. Okay, well that's a new label and did so it will become plus the jigs is datum. Okay. Double check what we parsed response and receives it is array of. There's good we need. So now we need put this response data to these items. The best approach which we can use, we need to save it to state. Let's create a new state variable. Items. Items will use functions that item just due, date, our items and replace this MOOC data is the new state variable. Now that's Jack. But we have a small issue because this endless number of requests, because of we're updating some data in state. And you have user factories, all dependencies and random sound dating it executing again and again to fix this problem, second parameter of US effect is array of independencies. Unless needed empty, because right now we don't have dependencies. It means that only one component was monitored, execute this action on the ones. And as you see, we are executing this action on the lawns. And we have a response that's focused. So we see this data. So we did a call and regard what do we need? So on small update also, right now we have hard-coded search query. Let's replace it with our value. What user would they do it? We will update this drink for or create a string value. The next one, very important part. Take Luke art works. As you see when we are doing call for source, term undefined and render it tried to plan Samsung. We will get on the four undefined and massive tangent to fix to these problems. The first one, let's set default. Default value for this variable. You state except parameter is default value. So for values it will go empty string and four items. Let's put. So we expect array. Let's put empty array does to prevent some errors. Next one, randomly updating to this value, we need execute this action again and make call to become and get new datum. So right now, these use Effect works as a competent did mom but in documentation receives that it can work as well as competent did update? Yes. Yes. It means when Samsung some property in state will be updated and we can execute this section again. To do it, we need to pause dependency value. So R1 value will be updated. You will call this code again. So right now it's empty because we don't have massing. For example, put Elon, Elon Musk. We want to get some data. As you see when we're type Samsung, we're doing call to become m getting data. Also. As you see, we have this data. So now we implemented a simple search for data and it works great. Don't forget to commit data. And then we will do this good EBIT bedroom, commuter. 8. 8 useSearch custom hook with Axios: It looks a bit algorithm what we have component which doing a request. But for example, this request we can do in another competence or pages. So let's see how Google works. So on Google's main page, and we have the same source input when you try to find substances the same Elon Musk, we're doing request on this page. And when you click selecting something, you are doing the same request on the next page. And it's the same. And on this page it has the same input, read new, tried to put some string. So it means that this request we can do on different pages. So the best option, what we can do here, it's just move this section to the separate function. And in React for this specific purpose, we have hooks. So we already used some default built-in hooks, such as US tattoos effect. But in raft we can create our own hooks. What is who should do? So we need to pass just, well, it's a query term which we are looking for and we need to just get items is a result. So this book will be very simple. Okay, let's create a new file, hooks js. And we will create one hook, it will be used. So as a peripheral parameter, we need to query and we need to return Samsung. It will be very simple. So don't forget import. Okay, let's skip it for now. And from applets copy this section while its covariate. So we have used the fact and the main idea of hook, that hook should return some datum. We will return some state. So let's use use date. So we need cons state and this state, it will be US state and it will return this state. So what do we need to save in this state? Let's put some default values as we know, parameter its default virus. So we need articles, array of articles. So we are waiting for a array of this articles. Next one, We need some status. By default it will be, for example, idle and error. If we help, if not, it will be amped him. The next. When we are doing so, rank graduates changed. We need to do these request and update our status. So what we will do, we not have items? We don't have items anymore. We will set state as object. So what do you mean this object will be almost the same, but articles, it will be parsed, response, status, success, and error. No, we have no error in case you have pumps that happened, catch, you, update responsive articles, you'll get empty. Array. Status will be. And we'll be ready to put this to handle it somehow. So now we have this kook and forget exploited. So now we can use, use search. We are passing query term and we are getting data in our application. Renewed need this anymore. We need only, oh, I forgot to import oxygens. Okay. So now we need to use particles, for example, and the US import use search from hooks. And for your search we will pass this rather, it will be our query parameter. It will be term, source term which we are looking for, and it will return articles. So articles for example, status and error. We can get all these data. So now we have articles. It's items that we don't need this section anymore. And you have status under, for example, that's greater fragment. Okay? So Freidman, element robber for our component. So for example, some HTML. But in case you don't want to put some element we can put does empty rubber and there will be last week on the rendering. So let's take a look how it works. So I'll go here. So as we see, status was success because we executed one when competent was mounted and absorb. So it works. Now. It works and we have the same data. We're doing the same requests. But our code looks much more better because we are using only one row. So we need to do for now. And all logic was moved to a separate function which can be extended and can be easily used also by R0 will create a unit test for this section if you are the much more easier to test this function because it's not a part of the separate component. Also lets remove this fragment. And now it works. 9. 9 Cancelling Axios calls: Before we continue, let's optimize this search dusty bit, but don't forget to commit your changes. So when you jump Samsung committed. So we create a new custom hook, let's say it. The next one. What do we want to optimize them? Let's reload our page or what do we see? So much disease competent, we are doing the first call with empty string, so it's absolutely useless. Then gradually typed one letter or two, we are doing the same calls, but we don't know what customer or user wants to shorter. So usually it useless information. So we need to wait while user will put at least three writers and then we can do some calls. So let's start from this optimization is easier, kept us go to our use search. And in fact, let's add the first one. If courier Laozi is three, thus return. So we will ignore a lot of requests. And as you see random your login page, there is maximum. Even when we type. Samsung, only rarely do. These three characters were doing call is great. The next one, what I want to show you the next problem. It might be this performance. For slow internet. For example, if you have slow 3G and retyping, Samsung, as you see, we have a lot of requests which abandon. I will show you again. Because of user typing something fast and they were doing all of this request. But really, when we has a loved one, the previous one is uses minute, skip it. So to save some performance, saves on traffic and we can cancel this event. This regressed under do not wait for datum. So Axis allows us to cancel events, go to oxygens, and define the cancellation. Cancellation. So Rick can use cancelled token from voxels. Ender cancels on event when we need to cancel these events. As I mentioned before, when user put the next character and the previous request wasn't finished, we can cancel this request. Okay, let's do it. So we have this documentation and we have our Hook. We need to save money to say were cancelled talker. So it was great for the sample. But as you see, we need to save this canceled token just used again. So for React, we will use use reference to n. We will save this council token to this reference. Cancel. Use by default in vitro. And save tensile talker. Current user references returns object where we have current field. And we will use this field and we need oxygen. Cancelled talker. So we save the source. And so according to the documentation, we need cancelled token as a parameter, parameter with cancelled program. So cancel token. Current. We pass this council torque and now it will become canceled. The neck one where we save this council talker, cancel it. So in effect, let's check. Cancel Tolkien product. If it's not null, we have something. We can token tolerant garden soil. So if is not empty, we will cancel it. The next one in catch section, if something happened, wrong. Arc seals is cancel. We need to check if it's possible to cancel. So if it was cancelled and we will put it in there for sentence data. So integral encourage if it was cancelled. So what does show that the request was canceled? At some console? Understand or do? Good performance was changed to slow 3G. And again, let's type Samson. So law redirect, harassing because of Arizona who was canceled. Let's fix it. Okay. We need paths, cancel tokens, and these tokens will pass them just reference. Docker does forgot token, the best token network. And as you see, when we're typing sounds in, all previous events are cancelled and get in just the last one. The last one. And it's a great performance boost because all we need to fetch data from all these requests. We derived it, parses them, and tried to show functioning. We assume just the latest information. So let's recap what we have. We have reference, which is saving our talker between all these calls where the glucagon. So what we see that we have counsel catch, catch section. So encourage it means around why we put it here because of my ruby prevented request. It was felt that it was fair. We got into this section. Here. If you type if request was canceled, we just restore emptier and dot save ends in Kosovo, it wasn't a roar and the reader need to save any date to a role and we need to clear data. So we handled the section. Also. We put token, cancel talker and reject the we already had some token, we just cancel this request. Don't do it again. Let's not forget to tell me. 10. 10 useDebounce custom hook: We finished the first optimization is for slow internet, but SMN is that we have a good internet and anyway, user typing very fast. We cancelled all of these previous events. But the question is, do we need to do this events at all? Maybe we can skip them and even don't start fetching data. How you can do it when you use a dominant creditor fast, we can, for example, weight at least a 2.5th minimum or more as you want and the user finished typing, we can do this call and get the latest information so that state them because of real is the previous one we do not need. And also usually users do a type of adder by rather slowly. So we can do one more optimization. And this optimization, it calls the bonds. The bonds. Its approach in social development better be awaiting. While user finish execution, some operation or function will stop executing. And I will show you. In CSS tricks, you can read what is the bouncer. Yes, we had the boss is too similar techniques, but they're a bit different. And the bounce, it's what we need to operate the apple you pick out in one period of time, a few operations repeating. We give them and wait some period of time and then execute. The last one is a great optimization. So let's do it. Hooks, let's create a new Huike. What we need. We didn't really use state. So what do we need? We will get this information as fastness user typing and we will add them out. We will wait this time, delay time and in case User type Samsung festivals, and this time we'll finish two. We will cancel system mode and start again, right for new datum. So let's do it again and we will use is a fact. So by default dependencies, it will do the same value and delay. If something will be changed, we will execute this function. So what do we need? We need to set the malt. It will be a function. And they really just set the value, value. We will say this relevant again. But what's important? Delay time, for example, a 2.5th, and then we'll save this barrier that we need to save. This is cones timer. We need save this demo to variable and very important part of US effect. We can return some function. So this function will be executed when, for example, if we compare these HUC music competent demand, it means that it's the same route we had. The component will unmanned. So when we will finish, this is giving you this hook. We will call this function former term. For example, when you unmount, this will be executed and we need to return. There are termed bonds, the value. So we are waiting sometime and return this variable. Okay, let's use it. Let's go to our location. We have used search, we have value. And let's import our hook. And for value, for your search, we will pass not available directly. We will pass the bond. After a cough second. One, delete. So as you see him, we're typing a lot information, but we are doing recall, only very finished typing. It's super fast. So we reduce the number of calls. We cancel all users calls. It works faster. So we are saving our sources. For example, if you're doing calls to our backend and we have some performance limitations. In case we have a big number of users. We need save all calls and save our sources. One more. So right now we are passing or the boundary of present value. But for example, McCann, in JavaScript, we can set some default value, for example, zen host second. And here we can skip this part because by default we will set the same Hofstadter and its approach. And it works great. So we will commit it and continue our component. And for the next video, let's add some styles for this competent, because right now it looks she did. 11. 11 Custom Input component: Now it is time a bit customize this element. So right now after complete graph, complete component is using its own input, default input, but we can change it. To do it, we can take a look on documentation for this company and for example, render input. Rendering put its approach which allows us to pass function or component, and this component will be used to render. So let's create it. First of all, we need to create a new directory. It will be components. And we will put competent input inside. We fell index. Just for example, what we need to, we need import from React. Input. For example, we will take less holder and we will return input. This place holder would be best. Is just for example. The next one we didn't add some styles. Let's add them. Css style. At some class name. For example, input field. We can add some styles for these elements. Component. Okay, what do we need to make some padding? For example. Right now it doesn't matter. You can add your own styles. You will add the styles from what we have. We have this component. Let's try to pause is competent to our input. We need render inputs. So we will use this Harvard component was changed. Okay, let's do some initial so we want to form size, for example, plenty for embeddings will increase. So better. But right now as you see, it doesn't work. Doesn't center grant and we don't see any data to fix this. First of all, first of all, what we need, I will show you how to pass additional parameters, props for this component. Input probes, for example. And we wanted to pass its object or place holder. For example, we want to pass some place holder, some props. And as you see right now for this input, we have these probes. What's very important? Right now as you see we passing dos placeholder button, except a lot of different other probes. For example, input, event, handlers, functions or some other. So we need to get all these functions which are Richard out the autocomplete component is passing and the gases probes and routed to this our custom input. To do it, we will say all rest parameters or averaging two variable rest and the passage in the end. So now everything could be had what we are passing by default, we don't see it. We say to this variable and pass it as it probes. So let's take a look. So as you see now, Raquel, result input works and we have all results. The next small improvement, what we can do, it's rendering these items. And for example, we want to customize this section. So it building some deep, but as you see the Arno and styles thermo class causes, so it's very difficult to customize it. Let's replace it with our own ghost custom element. This m autocomplete because matter render menu. So it accepts children, children style. So what do we need? So inside we will put children to their items. So because this items array of these items, we will put as a children awesome place braces. So we add this additional link or at the end it will be on. We'll also do save data inside. So for this class, let's add a style. Let's leave it here. And what do we need to fix this issue? Why it's not rendering? We should item render it committed because right now we not need it anymore. And as you see, we have all data. And in the end we have a link. For example, if you click this link, we will go to this URL. Right now we haven't. It will edit and handle all data. We'll show results nato, the same as Google is doing. This one. We can delete and don't forget to commit all your changes. 12. 12 useSearchForm custom hook: In this lecture, we will create one more cotton hook. Usually, hooks are pretty difficult to understand how it works and how to use them. We will start create unit tests for hook. And it will be much more easy to understand how it works. But now let's create one more full. So no replication. As we work through our application, we're using state to say value and have functions that value, which is getting value from input and saving it to a variable. So let's move this section to another hook and then in the future we can customize and extend functionality. But right now, let's just save this value. So we will go to hooks and create one more hook. So you export the US search. So as I mentioned before, all gotten hooked should start from search, from use, and then react. We apply some additional behavior for these functions. So what we need for US soldiers depends on what dependencies. So first of all, as I mentioned before, we need some functions that the social welfare state is all dependencies. And we will have cones. So it will accept barometer is event that we got Target and derived from this target. And we need to return drawn social value on search. So we'll say ringing some bells, we shall function which changes, is changing business value. Now we can easily copy. So let's use this. So on search and replace. For unchanged, we will use this function. This callback function on Select. All right, now we can skip because often getting used to but letter we can edit. And so what we see valid Lewis. Okay, we show here, let's replace it as well. These one, it's okay, we can do eat meat anymore. We just mean. So we search for, again now we are using search value and it returns undefined. So we need to do the same default value, empty string. Okay? For example, this m. So we have result. Also what I wanted to fix here. For example, when we're focusing element that we have these COO results, but it's m can do. Why do you need to show function? Let's fix this problem to the op amp. In render minimum, we will add the initial behavior. If. So, if we have articles, articles and articles, and rehab sounds. So we can render elements. Otherwise, we can render null and awesome. Well, we updated articles. Okay, now we come to use, then this fragment is element, but it's empty element. Okay, now we put a focus on this element and it's empty. So let's try it. So it works, works as we expected. So that's it. 13. 13 useCallback hook: In this video, I will show you one more from the box. It's useful battle. In the previous video, we didn't use it. But for this cost and hope you search form, use callback will be very good. Why? Because often we have function on search change and when we change sums and you can our input field, we are calling this function, but sometimes there might be the same value. And the question is, do we need to update state? If we have passed the same value, we can use use go back. Let's go back is very popular function because of it returns memorized version of the callback. So because some dependencies in this fashion, and if the dependency are changing, only in this case, we will execute this function and we'll get new data. But if this dependency are not changed, not execute this function and does return memorized version of data. And it's a good performance boost. So let's start to do so we need to use go back. Let's import it as well. And for our function, we will use this one. In our case, we don't use n data outside of this function. What we passed. So it won't be the best case, but if we use some additional data will as a dependency and increase our performance. But as a good practice, we tried to use this, use go back as much as possible. So let's check out how it works. So we have the same result, roars and request Isaac isn't so easy, simple way how you can use the use gold back in the future, we will, we will use it more and more. 14. 14 React render props pattern: So then do why refactoring for this component. So interact we have two types of components is functional components and presentation components. So functional components, they are doing some fetching data. For example, using such hooks and passing this data to presentational components. Presentational components, for example, this one. It does the receives data and represents this data and the vendetta changing it, recompiling Caribbean and rendering. So in our case, we have to do competence in one. So from Baton perspective is not a good idea because of it will be a bit more difficult to test it. So that's updated and create two different components. The first one, it will be autocomplete, which we just render data. For this component we need on the articles value and the function we should handle changing this value. And another component, it will use Hooke's Get Data ended just best this data to children. So this approach, it calls render probes. It's very popular. Bottom, so height works. We have component. We have children for this company. It might be absolutely different companies. We don't know about these components, but we can pass any initial parameters to these children. And inside this component, we will have access to these parameters. For example, 500, it will be accepted as wheels, and you can use it in this component. So let's create our component. What we need to, let's go to Components. We'll create a new one. Autocomplete cockpit. I'm jazz. So renamed to autocomplete. Also. We can update it and bitter. So we don't need one arrow function better and we don't need this data. We will get probes. Probes will be article, articles, social value. And on search. This is what we need. And now we can do it ever Sukh, just leave this component. Also. We don't need this hooks on the reactor. Also that's call reformat. So beautiful mightily, but also we need to update component. Input forms a proper place. Competent works. Let's create a new component container. Course. Container. This container, we need these two hooks. This container will get children and it will return children. And let's slow it is a function. So let's pass some parameters to this function. What we need, we need search, value on social change. And articles, export, default and meet exploited. So it's very easy. But it implements probes button in the app. So now when we pass any children to this component, this shouldn't really will have access to these probes. Okay, let's create, let's update our application. So we don't need hooks. We do not need n is empty, we can delete it. What we need. So let's import container and import autocomplete in our application up to a functional error, error function. And it will return autocomplete vector container. Inside this container, we will have function. Okay? So we have function. This function will best serve to value or even as object. So and in container children, to pass object, it will be better. So we create an object. Key. Search will end value is social value. And now we are using this component. We can get this data. And to autocomplete mean, just pass this data articles a little bit. Articles on so change, Sam also change and social value will become social value. So there is a component. Let's check how it works. And with the same result. So company and this company wasn't changed. But in our application, we have simple component, auto-complete, which receives only articles. Probes, we prompts a what it needs. We're under these probes. We have functions, event listener for changing and this component will be very easy to test. I will show you that container this January because we are using n, we pass on to children. So we do not know what will be inside. But we know that any children competent, you have access to these probes where important probes. And we have this up container. So now it works. And we implemented react pattern. One, poplar partner is rendered props. So thank you for watching. 15. 15 Configuring SCSS: And now we will do one more improvement in our court right now, by default, reactors using CSS for styling, but it's not very useful and efficient from development perspective, of course, to fix it, we will use one of very popular preprocessors, it, how we can do it. First of all, we need to rename these files as.css extension. All files resists extension will be used as CSS. Okay, then we need importance is file. But right now from the box, it won't work because of CS 3R doesn't support CSS. As CSS, we need to add the supporting Google remarked as CSS. And we will check how to do it. To add the SCSS is very easy. We need just execute this command. Okay, let's do it. Okay, we installed these extension continuum right now. But check. Ok, we need to change thoughts and wrong again. Ok, problem was fixed and now we are using as CSS to check it as well. We can go to our CSS and add one more feature. Focus, for example, book shadow, outline as well. So now we can use some inheritance when we are using a selector, for example, input field m inside the we can add the focus styles for Z state. We can do it only because we are using CSS and the knowledge check. And as you see when we are focusing our element, you will not have this terrible mortar books, box shadow, and outline. Okay, and now when we are using CSS, we can start styling our component and this drop-down to do it a bit more better. 16. 16 Routing with react router dom: In this video, we will add a very important part of any real complication is a crucial part, usually routing. So we need to add the router. So let's Google it. So it's Iraq router that's open. And we will use web version. Okay, what do we need? We need to install it. Here is documentation, React, Router. I will install it while it's installing quizzes that what we need, we need to import browser router, and usually as default, we rename it to router. The best practices in Iraq. Also, we need to switch this competency. We will create a map of our what we want to see. So by default we can use this approach. Checked bass for, for example, for user and we didn't find any roots leaves by default. One approach also, for example, for folks, we can use star for any other routes if match anyone. And in case you're using a cold bath as it first one, it's a good practice. We need exact. It means that it will compare URL directly resist slash home URL, URL. Okay, let's go to the basic. Okay, we need to copy this section. Let's copy of what we need in our ope while weekend. So it's important we can delete this section to another section and other component. We need router. Inside, we need the components. And now we can map our roots. So that's a rounder Samsung. So as you see, we can Randall directly subcomponent, sample robber MDA pass some children as a component. But we can do it easily. Visit render method is an excellent. Let's add search and a star or even result passive vehicle at some not Pfam page, page, search page and the homepage. Okay. Or we can do it right now. We can go into desk. As you see right now, we hold URL and do show homepage as go to source. For example. As you see the whole batch as well. Why? Because we didn't put exact. So we can put this basil last one or at the specific keyword, props exact search page. Let's try add some secret rehab and not fall page. So we added our routine. Now when we handle these URLs and we can add specific competencies to a specific page and show specifically what do we need. So let's do it. 17. 17 Adding app pages: And no matter how routing in our application, and we can create two separate pages which will handle each root. So let's do it. Other pages, adjusted components, but Folder pages. And does the first one that we need to import. So we have now copied and great search. To search. So we have three components. We got important disease components, import component. So batch was reloaded. We see that it's not Pfam page. Let's go to home. Okay, it's whole batch, it works. And now in home base we can add the nationality we held before. Container and our and our storage form. Go to home. What we need to import container and the import of the complete inside a container. So as you remember, we had a function of the complete and this function except that the container self-value. Also chapter articles go to home again. So we have these probes and these probes to our component. What do we need it? On homepage? So as you see on the homepage, results go-to source for example, we see that we have to have some space. But let me show you again. You tried to find something, you'd go to search page and we have reloading. Why? Because we are using connective link, not react link. When we will use raccoon Could we will just render the page and arsenic will work smoothly the outer without reloading the page. So, and so let's do it in this video. But before, don't forget to committee or changes. 18. 18 Home page: And now when we have pages, we can customize our pages. Left are from homepage. So what do we need to add that lets move this search item somewhere in the middle. We will add the logo, the sample we have for YouTube. And then for this patient. So what we need to do, let's create some container, which will be homepage container. Do we need to create new file? So let's add styles. C-s-s. Okay, we have a container image. And this image. Let's save. Okay, we save this image. So we save this image Lebanon's ad, copy it from Downloads folder and put to our home folder. So you add logo. And now we can add the image source and reboot it. Acquired from best practices. So we heard. So it doesn't work this way because we are using images and this image is located inside our competence folder. But when a reorg builds our application, the one besides components, such folders, and the easiest way we can do this folder from are competent to public folder is not the best case, but anyway. And so we have this. It's what we expected. Okay, let's add some style. So we want to image pixels X1 because he's container. Let's text align center. We need to add some margin. Now we need to rebuild this. Don't forget to import our styles to apply our changes. This page also has changed beat. Let's add the margin more. Pixels, for example, update our input styles. So we need them more Harvard Bunsen person to and McSweeney's 400. Exhausting. It's not all that's inspected. Okay. We have input parent. It's a displayed in line and change it to change it to customize it. So I guess it's somewhere in auto-complete. The assumption that we found. We can change it from our side. What we can do. So this is margin. Then display, flex. Justified. Flex, flex direction. Yes, it's better. Food items in center. So our component in the center. And we have some data, then x, y. With the side of this, we need changing input, sudden box, sizing, border box. And also we kind of only 400 pixels and it's realized development, so sometimes you need to change them. So during development. Also we can update our autocomplete suggestions, pipe line items on the left page. So the sand box sizing border box. Okay. We don't need to put an input field. Border-box. Yes and no is the spatial works great, so we can open any page and we'll get the result. So as the next one we'll be fixing get implemented. See results page. So let's do it. 19. 19 Search page: So we finish to his homepage and now that's configure search patient. So for example, we have some data and we decided to see all results. We need to fetch on spatial data for this query, how we can get this query. So we are using React router end. That's why when we pass it as a component, we can get some additional data from history. Let's go to search page and check probes. So to check all props or we can save them to rest variable. And thus, in demography will seem Arizona. Open, inspect the load again. So in console we see Rico rest receives a history location and match. For example, in a location that we see that we have so we can get from key to value. So let's do this. One application that we did for us to get. Perhaps it will use new URL, Params, gloss, and bestseller string. These costs with bars all data and we will get params and get const, covariate or arms get. So we'd query. So we can easily tested search page query. So we see that when we tried to type, thompson gets his data and Albert competent. Next one, we need to fetch the data, hopefully, and we can use it. So let's import. Here we need articles. Let's go one by one and output this article, how to do it in articles that use map function will go one by one article. And let's, for example, div. And inside there will be read links, so it will be all article id. Target, of course blog. We need to open it in The New Yorker. And inside the article label. Snack on very important partner. When we're using map two to show array of data, we need to add the key is required field. React really uses heat to check if obstacle was changed in articles and renders this list and should be unique field it will be article. So we don't have any results chicken network because this request and we don't have any datum. So let's just change to Elon. Elon Musk really how it works. We can implement, for example, we can check if our goals, if we don't have any articles, let's return h three for example. So it works. So as you see, the first one would be C. We see these articles. We can easily fix this status. Status. We will check if we note how articles status success. Okay, let's try again. And as you see when we are reload bench, we do not see any results. The next one, you don't see this message. The next one we have only ten items. So let's updated or use search. We can pass a second parameter, 15 for example, but we don't have this parameter in use. So let's go to this hook and we will get the new field limit. Limit. And we need just pass this field to our covariance to put this additional parameter limited, meaning just added cure, limit. Limit. Okay? And by default, right now it's undefined. Let's set some default value. For example, ten, as it was before. Normalize drying. And as you see right from the beginning, on homepage, we have done result. Rather we click Search. We have 50 results or ends and what we have in Wikipedia and it, how it works. The next one we need to customize this patient with m. Let's add search field here as well. So let's do it. It's pretty easy to run. We have articles. Let's add it here. We can copy it from homepage to be ease him. So we didn't just copy this section and put it here. Works, works. But in case one sees this result, but we want to get the field here. So we need just the section here. Does not have articles as thetas is accessible. Otherwise, I'll put this one. Because this input field, and we don't have any results, data, it works. Now you need just customize this page should bid and implement the on submit function to input. We click enter in the field. We need to redirect to this page and get the same result. So let's do it. 20. 20 Installing Storybook: And now we finished, almost finished search page. We have data and results. Now let's customize this page and do these items emit more beautiful. But how can we do it? For this case, I will show you one great tool at a developer who's using React or Angular or any other framework or library for JavaScript, should know it must have two. Storybook. So as Google storybook. So what is a storybook? Storybook is open source tool for developing QI components. In this tool we can develop this company's great documentation and provide what we need is Moscow. It great works with React View, Angular, and lots of other tools, as I mentioned before. And the latest version is six, the version 60, it calls 0 configuration because all it works almost out of the box. Emerson, would you need why do we need these two? So in this tool, we can develop every component independently, so we don't need to run the whole application. We can get the one competent and provide all necessary probes to customize and check this component. Also, we have different tools such as the working with the mobile view, public view, and Kendrick themes from dark to white. Sometimes we have very huge applications, which takes a lot of time to run it. And in case you need develops our component. It's not very efficient to rock the whole occasion because of it takes lot of time and effort. In this case, you can use storybook and import only one competent. We need more hours of gauss if they need 1000. And the US just this one. The best tool I can recommend you for developing components. Here you can find documentation tutorials. So that's installed this competent and check how it works. 21. 21 Storybook configuration: To install storybook has got to get started and go to install. Selection is very easy. It's almost the same which we did with installing carryout, thus using np x. So let's copy him. Let's go to our application. And in our application we need just execute this command. This comet automatically will define which framework or library you're using. React Angular, or encircles. And they configure storybooks specifically for your application. So as you see here, we have the diagonal project type step on this tab. It will define the project and will create your storybook. Storybook was installed and check what we have in our folder. There should be some changes. Let's open packages on what we have. In this file. We have two new commons it storybook. This one will launch our storybook on port 606 and Bill storybook. This one will want to use right now. Also we have dot storybook folder in the main folder with configuration. Take a look. Inside. We have file main. In many, we have stories. It's the best. We can find stories. It will be inside the source folder and ARAF file with extension stories, jazz, jazz or DS, DSX. Also we have stories and dx is for recommendation. We will take a look on this as well. Also, we have a dance, a dance. It's already preconfigured. View pars, I will show you later. We have linked, central and preset for creator of OSI, We have a preview, but we want to use this one. And source folder. We have storage. It's a page with derogatory, with a few samples. For example, we have bottom button is regular React component with some comments, with probes. And we have stories for this component. This store is define what the compound is eaten. It is its motto. And we have some arguments, for example, for background color and template. It's how we defined story for storybook. Okay, let's launch storybook. And we will see how it looks. 22. 22 Fixing possible issues with Storybook: So in case we have such error during installation or running a storybook, let's try to fix it, removing models. And after that we will install everything from the scratch and it should fix the problem. It's very popular approach in case you have some errors, means not models, or some packages. You can delete it and installed from scratch. It should fix your problem. Also, as you see, R1, R3 installed storybook. Storybook added dev dependencies. It was bamboo core storybook. Adults also pave a loader and the red portion. Okay, and it usually in case value, install the latest version of great wrapped up and the story book. It should work from the box. But in this case, something happened. Okay, also I checked my version, eight version, but in case it won't help, we will change not version. And let's Leon, and it will install average and average the course installed. And now let's try to build a storybook and then run. So Eric was successfully done. The OnStar storybook. We are resolved this issue and now we can use storybook. Storybook was launched. Let's open this URL and see what we have. Storybook was installed and we have such you. In the next video, we will take a look on all elements we held this page will start creating a story. 23. 23 Storybook interface overview: Welcome to storybook. It's a welcome screen you see when you launched story MOOC. So on this screen you can find the old documentation you need. To start using these storybooks. You see that you can learn it. You sing it ha, project, and a lot of other important things. I would recommend you to visit all these links and learn more about the storybook. Also, we have two tops, it's converse and dogs for this pinch, it the same. But for example, let's go to button. Here on the left side, we see that we tell our stories. The first story is button and we have competent button. You have four different stories. It's for primary, secondary button, large and small. As you see, it has absolutely different view. In Docs section, we can find documentation for this component, this component button, competent in real Look, we can zoom, it sees a quarter of this bottom. Also, we can get the data about probes. Which of them are acquired? This is we have some comments and we see that we have default values. Also, we can change it. For example, for button, we can choose color because of background color. It's the probes and we can change it. As you see we have resolved. Also we can switch primary. We can change text. Size. Arithmetic is changed. The sample header, header, and a page with different states, it its own dogs cycle. Okay, well you go to bottom. So what do we have on this screen? We can zoom in, as I showed before. Also become and changed cause background and tested on the different Newgrounds. Also, we can see these grid for development and for example, very important part. We see these different sizes for bio development. We can rotate it and it's very cool tool when you need develop or detrital component for different silos. Okay, we can do it full screen. And what's important, we can open it in a second iframe window. It will be only your components result storybook, story MOOC proper. And we can copy URL. Is the URL in iframe snacks. What's important is a don't section. Now, we have to don't installed by default. It's very important and those are, the first one is actions. Actions. It show, shows all actions. We have four competence, for example, for this one, by default we have onclick. And when we click, we see that we have all data about this clique is cool. And the second one that controls, now it's out of the box. It's super important one, because here you can customize your component. For example, the sand were ground coal. You can change it. Change primary or not. You can change the label. You can judge sites. So epsilon court we have as a prompt for these competence, we can change it and develop here. Next one, what's very important, hardly getting this datum. So let's open our cook em table. Okay, we have our component. First of all, we can click this three dots end. For example, Hide Sidebar. Now, we see this component. Go to source and for our button, open dogs here. So what do we see? First of all, it builds bathing the component name. So this is at the bottom. And before this covenant will describe comment, it's just doc common format. So you can see the comment, comment description for component. Then we have probes. And these probes primary for Snapple, Coleman, for every probes. Taken here as a description. The next one we have default ropes. The default probes are used the metal P4 default. And based on this, we can build the whole we can build the whole documentation for your story. In stories, as we have seen, we have example buttons. Example buttons. It means that under Section example, we have bottom component. And for this button we have three different, four different views. Here it's templates, repair ethnic arguments. And for this complaint we bind them because this arguments, for example, for primary. So we're using this name, beta of this name we will hell story in our storybook. For primary, we are passing two different probes for secondary repents and other probes and for all other different probes. Based on these probes, we can see that we have different views of this continent. So it's a main approach how storybook works. So well, we know how it works. Let's create our first story for our own component. 24. 24 The first story with Storybook: And now let's create our first story. So we will use components. We have input. For this competence, great companies. We can copy these stories rooted here. We'll rename it as competent filename and stories. Just extension. Click OK. Let's change input renames component. Also we will changed components. So we can skip these probes. Template. For example, for primary stakeholders, what we have as the probes. But let's put for example, place holder can do. Okay. So automatically storybook real relaunched. And we see that we have a new section, components and input. That's great for this input. And you see we have our component with them. All the serial data rapidly in control. So we can change place holder. We can change only this one because in our input, all rest probes are defined in rest verbal and relevant. Don't know about these probes. So in case you need change, we can develop it right here. So it was hot. We can create a simple story. And now as I mentioned before, we have pages, page search. And we want to update this page. For example, we have our container and we have a list of articles. Now we can put these articles to a separate component. We can pass data, develops these page in storybook. And in this case, we don't need the whole application. 25. 25 ListItem story: This video will create item, source, result item. It's one of the best practices when you have a list of some items. In our case, we have a list of articles. The good approach is to put every item in the separate component. In general, it's one item. We just changed the article label. It's prompts, props, what receives this complement? So let's create this component. Your color. Ok. We created new component, list item. This item, we received two probes, is id and label it. Just because we have very simple components for demo purpose. In this component we return. In this case, we don't need anymore that we have link and we have our progress with ID. We will do it smaller and it will be a bit other loops and other, OK. And now we have this element. As you see, we have a list of these items. And now let's create a story for this component and we will customize this element. What do we need? So, okay, so now it's better. So we created our component. And now as you see in search item, we just use this component instead of grading component, more topic in itself, in this component. So what's the benefit of this approach? First of all, when you have a separate item, you can customize as it need. Just passing probes, or do you need and developed this independent component? As you see, you have this independent component. You can pass different probes, has this datum. And then it need, you can change in coordinate and then you will just reuse this component inside a list item inside search results. So it works this component and now we can create story for the whole page. With passing these probes and check how it works. 26. 26 Search result page story: The next auto it'll create with a storybook, it will be whole social result page. So we have this page. Let's create a story and take a look what we need to pass. And you see the health probes and this proximity past location and search. Then we will do the can't call using qsort hook and we will build the whole page. Let's start. We can copy this story's put it here. Has added two. So now we can create a rename dipole it little bit pages. And now we need to create probes. So that would mean the occasion and its object inside without search. And search is the section after question mark. So let's edit. And now let's take a look what we have. So as you see, we have this data, for example, has changed. And as you see we have a new data X1 would we can create, we can create another search result data adjusted task. And for no data, as you see, we don't have any data, but we don't have it because all we didn't call, didn't make a call and Ricardo's day to success. So let's change the data. For example, for thems, nucleic mass, we don't have such data in Wikipedia, so we will see that no articles for these requests. So as you see now we can test to these pages without Logan's is patron results changed data. We just marked all what we need. We have primary view and the view is no datum. And now if we need to change something quizzes page, you can easily customize it using just storybook. But what's important for us to follow can change it as location. You can change this object. And the next one I want to show you, in this case, it's using real data right now for the router and this component or this story, we're using real data. And for example, let's take a look on network. So as you see, we are doing a real cost to backend to get this data. Right now it works fast. But anyway, doing corneal mechanic cause is not the best practices for development component. So to fix this issue or changes approach, we can create a mocked data and all requests for requests for some data, we will mark them and return what we need. So in this case, let's create, let's fix it using mocks. Yells at me showing you Marx's, it's a part of access. We use the access for making calls, but in case you need to create some mock, mock data. We can use mocks. We will use this model for creating unit tests and for storage. Using this allows us to create our MOOC data and returns as Decker for all calls, mechanicals. And two, in this case, we need to do real backend calls is a great approach. So let's install moccasins and configure it. 27. 27 Installing moxios to configure mocks: In this video, we will install and configure it for using storybook. First of all, it doesn't install, it relieves and bandwidth is not production depends on the development, the bandwidth. And so as in-store impulse, we have opened our stories. Search boxes. Marx's install, Marxist top requests. Let's copy this request we need to do. This. Request will be more status is 200. The request will be executed. We started some 200 response text corresponds to x. We will put the data what we needed. Okay, so let's go to page for example, inspect obligation. We will use the square because here we have, for this one we will get another copy URL. This one, this one, this copies the whole URL, URL and make a search for, for example, this response, response, data and text. Because hobbies array, array of arrays. Okay, almost done. But Kinsey rotates. So as you see right now, in the camp. For example, for node data, we see we didn't do any coal and we have a result, but right now it's empty results as datum, and that's what this query. Based on real datum. We can copy this response around real property from hunger section. We have data and so clear Network. And primarily when we switch because its data, but we don't care. Anion backend calls em for no data. We have not become cause. It means that we are taken this data from more corresponds to check it out before we have a response to this update, for example, from text. So as we see, we felt that it was based on this based on this top. But storybook don't reload the page. When we changed the MOOC data, we need to update. Now as you see, we have great approach. As I mentioned before, it's a bad practices when, during development, you do not use real data, but you're using mocked nato. And other case why we need this, because sometimes when we develop the cat and prompt them, part of our application by Kant can be implemented. So developers are working but they didn't implement this functionality. But we need to create proton part. How to do it? We can MOOC data based on contract, which we discussed our become gods. And based on this contract, we can implement more data. As we say here, that we are passing such parameters and data. And based on this data we can create our UI part is how it works. Thank you for watching. 28. 28 Storybook documentation with mdx: One more useful seemed, using storybook is great documentation. As I mentioned before, storybook allows us to create documentation based on stories. So how to do it? Let's go to write in dogs section. And here, as you see, mg VGS allows us to create a permutation based on MD workup. And as you know, we have written, which is a text, but where we can detect the orientation, it looks better and we can do the same for our competence. For example, let's create for list item, story with stories dot dx. We can copy and this as example. For example. What do we need to change? What is the description of a story? Okay? As you see rehab item, let's open this item and for them for search item dogs, we see that we have title, description based on this text and we have condoms with all element. Then we can show, for example, how to use it. For converse beheld the same storm. So it means that based on this MDS, you can create any documentation you need. For example, for the first one we had additional information about probes. And for this one we can edit as well. For example, if we go over, as you see, we can add additional recommendation text. We can add another congress with more components. And arsenic will be what we expect from documentation. So Harrison quote, you need to describe how each component works and other teams or contributors can use it. You can define all coordinate recommendation and it's how we can use storybook. 29. 29 Unit tests intro with Jest: In this video, we will talk about one of the most important part of web development. It's testing doesn't go fewer components. In this section, we'll talk about unit testing, one of the most popular and the useful part of testing. So let's take a look on that pyramid and we will see that unit tests is a basement of all our decimal pyramid and we need great as much as we can the unit tests. So what is the unit tests? Let's go to Wikipedia and take a look. In general, intestine gets approach when we test a small individual units of source code. In our case, it's destined components or hooks. For example, we have hooks, We have some helpers or leap functions. We can create tests for this parcel. Urine tests are very important in this case, as we are using great locked up in these CLI from the box, we have testing tools. For example, it's going to create up, for example, testing grid more about testing. As you see, we can run NPM test or test and all test cases you'll be around. Let's read about destined more. From the box. We're using, just the test runner. So I would recommend you to learn a bit more about how it works and functions we can use. But right now we will have few tests will create. And this practice will help you understand how it works. It works from the books and we don't need configured in this case. So let's start a creative field tests. 30. 30 Unit tests convention: Before we start create unit tests, we need start with unit tests. Convention. It's very important document every developer or team should create before starting the project or start creating unit tests. So I will show you a sample of my unit test convention I used for development components and testing these components. So it's a document where we cover how we need create unit tests. It's important because of usually if you're working in a team, in a team where 5-6 or ten developers, you need to be sure that all developers will create unit test in the same style. And you need to be consistent, consistent with your unit test and because of it will help you in the future support and maintain your components and update your tests. So for this case, we can use these unit tests convention. So let's take a look what we have. First of all, for presentational components, we require 100% coverage with unit tests. Presentational competence. It's as simple DOM components where we take just probes and render these prompts in general. So this conference should be covered with 100% container components. It's much more Congress components which doing some complex stuff. So we knew to require usually 100% coverage because of it's real difficult to implement and cover all lines with all corner cases. In this case 80, it's okay. In our case it's a mosque. And in general, project test coverage shouldn't be more than 80%. I will show you what is that coverage and how we can configure to for showing this code coverage for Aaron development, development teams and companies. Even for managers. Very often for customers, it's very important that you should provide your court with coverage, at least 80%. And now in style guide, we can describe what you want to see in our tests. Person Paul is declaring variables on the top of separate lines. On the Arthur's describe will create all global variables that we're using in this test usually is a suit subject on the testing in our in our gate, its component material test props, for example, some mock data. Then for each IIT we have in our test we need empty line is just the style. Looks and it will create, will do your task more readable and you understand where one was finished and starts the next one. The next realization of variables in before each. And the first action recreated all global variables. And then for each describe, we will have before each. In this section we will put a set of data or to need with proper values. And then you can go to C and we have variable declarations. For example, we have a few options, then we keep it walks readable. It means that we need the move heirs and quote, recap from it to describe or before, and it should be as much as possible readable without, for example, such case when we have our top spires, auto mountain components is passing called greatness, our mock data. So this test looks argon and it's difficult to support his test and understand what it's doing and see if we can update it with the four each and moving all necessary bars in this section. Also is a good practice when in old tests that we need to render our component and easily we can move this part to the separate function where we need only context if we have any props. And in our tests we can use this function. It's a great approach. I recommended to take o code, how it works. The next one and we can grow up test, describe blocks. Also. We can use additional functions and libraries. For example, Laplacian will help us to replace Arab functions. The next one, we can skip empty strings. We have Styles component. We can test this competence with snapshots, or in our case, in our application, we don't use styled components, so we can skip this part. So as you see, this document is a bit big. It's 12 pages. But any way it useful, I would recommend it to create this document specially for you or for your team. If you're working in a team and discuss what should be put in the document. And that document is one of the best practices according to create an unit tests. And now, when we have this style guide, we can start create unit tests. 31. 31 Input component unit test: It's time to create our first test basins in documentation, what do we need? First of all, we can take a look how to create a file with test. It's a great approach when you put in your tests in test.js, Spector jazz or in test folder. But first of all, let's run our unit tests. We can use this command. We can use this common because often packages on scripts and test which shows us result. So right now as you see, we have not yet found. Let's create our first task. To do it, we will use components. Input in the easiest one, anglers, Great. So the name of a file is the same name of component while which we are testing and just we need to save it. And we are following the recommendation of test names. Then we need create tests. We can do it this way, but I recommend to all my approach. So first of all, as import React, sometimes we needed also has important input component. Index file. Let's describe it. Groping cough test. We'll show that these tests will be four input component. Inside. According to our convention, we will create soup subject under test. Incredible. Now it's empty. First. Should map snapshot. We will create the easiest test, it Snapshot test. Why snapshot? In reality, we have a great approach of testing. It's creating snapshot that should it just rendering you're competent into HTML and saving this HTML file. And whenever you change something and run your unit test, again, these snapshots will be different because of previously saved one shimmer of other component. Then we changed this HTML and engage with how some difference, there will be a difference in tests. And it will show the Thompson who was changed. So to prevent this issue with arrow with different difference in components, when you change something, you need to run tests, updates, snapshot that you will be sure that every civic is updated and works. So in this case, we can expect we need, we need the render our component. We can use right now. For example, we have already written. In this folder. You will see the folder snapshot. Competent to me is just a raw input field. For example. As you see, we have different. Now this test was changed, competent wastage, and we see that the snapshot is different. That is why we have error. To fix this error, we need Run. As you see, inspect your code changes or press you to update them. In case we will press you, it means that we will update our snapshot. Let's press it. And now I'm shocked was updated. It means that our test works for this much shorter. So let's remove this part. Okay, recreated the first simple depth for this component. But to be sure that arithmetic works, red, let's update this test, a bead. And we will configure using another renderer North library, but we will use, we will use for shallow rendering engine emits more popular library. And I prefer to use this one. 32. 32 Enzyme installation: For rendering companies INRIA, we can use different libraries. One of the most popular is in Zim. So in our next videos for the unit test, we will use in zeal that's installed. We have a common, we did add Zoom in Zoom adopter for React 16 ended that renderer. Let's copy this command. And let's add this package. The next daughter in it, while it will be installed, we need update the top tests. Just, let's copy this. And to go to components source set-top tests. Right now we have test library we used before. What matter we can't do eat it and change for. The next instrumentation, we will use shell rendering. You can read what does it mean, shallow rendering. But in general, when we shall, it means that you render our component and insight in case we have other competent inside, we want to render this component is a good approach when you need test only your component. Also using consumed, we can use mound mode. It's a fortune which allows us to render the whole component by the structure. It means if you have a competent inside your list of different other components, reach inside additional companies, we will mark the whole document and it will be the same as we see in browser for obligation. And we will use only shallow installed. The next while it installing glass, update our testing. We need the flow and Zim. As I mentioned before, we don't show. Okay, and now let's grow our test. For example, describe input component with, without ropes. Drill bit empty. But great before each. Before each means that this function will be run before all tests in this group. For this case, we just update the render with probes. So in Book, competent result should match the Muslim. So Ron ended they go. Again. As we see the dependencies in z m chocolates. Robert is not what we expect because we need the whole component. To fix this issue. We can extend our package JSON with the initial configuration with low to hear from coverage section, we can update just section. Now we can update the snips sharp ends into JSON. Installed this one as well TO MDR vendor. Ok. We will do this folder ozone shelves. Rather dubious. One again. Okay. That's one or tests. As you see that it's input or the class name. As you see, we don't have any other components, other probes or trash. Now it's clear and clean. Okay, let's update our tests. Create a result props and create section with Bronx does to show how it works. As far as Apple. For example. Now we look back at these probes to render suit does update to describe these probes. We put in some probes, render this component and it should match them shoot as well. Once the upstroke was written as Daegu. And as you see, we have we have this component and we have name and place holder. And it is in our, we have two different cases for the compound blobs and result probes for this company. I guess we don't need to write any more, but how we can find out, do we need to create some initial tests or not doing it or not? We can check code coverage in case we already covered all lines we have in our company, we can stop creating nucleate as. So, let's configure and run code coverage. 33. 33 Coverage reporting: How to run code coverage. We can take a look in the documentation and we have a comment, if you will, around our unit tests, visit college. Let's try. So we're on this test and we see that everything is MDM. Really, it's a bug. But with the testing library, let's stop this one and run this common with another one additional flag. Let's run this one with watch all false. Now you see that we run in coverage on death. And first of all, we disabled this watching state when we're on task all the time it was surrounding again and again, if you change started contests or you could press enter this letter and run your tests. We desirables is, and it's great because really for my experience is a bad approach and I hated. So. And now we see that we have documentation. We see that we receive what files are covered with unit test, percentage, for example, for branch, for statement, for functions or lines. And you see ritualized we need cover. So really exist. This report in terminal is not very convenient, but when we run this common coverage folder, it will generated and the index file as open this file in a browser. It will open this in the end. In this link we can see that we have all files which we have in folders. And for example, as we don't have any new tests, we don't have any coverage, but we created tasks for input competent. Let's open it. And we see that for index. We covered all lines. So this test is pretty great covered. But we don't have four stories. And in general, we do not need deaths for stores because of it's just a story. And we need skip these deaths. So to do it, we can configure just to skip, unit does just keep code coverage for stories. And one additional we need threshold. As I mentioned before, we need at least 80% of threshold. Now, we're on oDesk. Erickson works great. We finished our tests, but in general we have code coverage about 2% bad. To fix it. Let's open package Jason, we already added Jack section and just justice actually we can add in shunt configuration. Let's go here and we will see that we fall coverage threshold. Let's copy this section. We need a glazed 1890. It's great, but it will take autos effort to reach this number. And now let's run it again. And we see that we have an error and exit code one, it means that for just for all these branches, for global statement branches, lines and Fontaine's, We do not met our threshold. It means that we need great more unit tests. So to improve this, it was first step, we added coverage threshold. Next one we need the skip stories. First of all, we can go back. Covered from this one. We will show that the Kodak coverage from all source folders, from source folder and from all files with jazz jazz extension. And the next one, we can also add wash, bath, ignore water. A bottle of which file we need. Skip. Tried to edit. Array as well. It will be the same part. All stories. Stories. Yes. We will skip. All while real power is extension. And now we can do with this one. Let's draw. It means that we need cover all files, the source, but not file to ease the stories. Jazz. So let's take o input ES LEC. We don't have this file. Now, let's open our coverage. It shouldn't be updated, deleted. I will show you how to do it with out-of-date. Let's run again. Open. And we see that for input, we have 100% coverage and four functions, lines and branches with everything covered. Great. So almost work is done. Just what we can add. Also for hotter colors threshold 2k. To test, we can add coverage. Reporters is important part. We need text and HTML. It will allows us to run unit test and update coverage folder. So now as you see we can figure it out. Coverage for our application. We have threshold for all statements, lines, fashion and branches is important. Then we put files. What do we need to collect covers from? Usually its files? Here we can skip stories. Also, we can skip that in case you, we will help them here. And we added new fertilizer and DECT College reporters. We updated our snapshot and finished in this test. Now, we can start creating more complex unit tests for components with logic. And then we will create a unit test for hosts, which are the most complex in our project. 34. 34 Autocomplete unit tests: In this video, we'll create a bit more complex unit test. We have autocomplete, competent and we need to test it as well. So let's create test for this one. Index test.js. According to the court convention that for we can copy. This test is pretty similar. And for example, what do we mean the autocomplete. Copy, this one that we render this component, describe autocomplete component, and these describe we will delete, just leave this one for, match them short for this component. Okay, that's crazy. Intrude and take a look what do beheld. So we will run this test and we will see that we fell. Snapshot autocomplete probes, for example. And as we see for random menu, we have function, but our component should be more complex. Let's take a look at coverage. Wasn't updated with myths. We need to run tests with wisdom, coverage and watch all false. So due to prevent entering this common to become date back injury. So let's create a new common tester, for example. Ci, we will call it. It will be recovered and watch all that CI, usually it for continuous integration. It means when we run unit tests on, as a continuous integration step on some server, we need to maintain is what state we need to run it once and it says, okay, let's try to run young CI. Okay, now it works. Mm-hm. And we see that we have 40% of code coverage. We covered probes, but we didn't cover Rendering menu and render item. So he can cover these items. First of all, let's create, let's create a test for random menu. And for two cases when we have articles and we binary don't have articles. So how we can do it with prompts, for example, inside let's create a new describe. To see our component, we can split our scoring and lambda c, which again we can best probes. What do we need? We need the articles. Articles is array. Let's add sounds. Really doesn't matter what we have in this array. So you can put just an empty array and then we had some search, well, It's a string using kid as well. And we have on search challenge is it's a function. So as we don't have any functions here, we can use just mocked function calls, just a fan. This function will return an empty function. And now we can render these prompts. And so if we will call the snapshot, we won't get as Newton knew because of the already matched snapshot. We need to get, we need to get rent revenue prompts and render this function. To do it, we can get these probes. To get probes, we will call the ropes ropes. So in this case, variable props, you have all props, we have render minuss, one of them. Ok, let's call, for example, probes randomly. And therefore this quantity we can pass values. But right now renewed needed. We need to check result. For our case, we will have these part. It will be incident short. And it means that we can execute this function should match randomly new snapshot. And we can create the same function tests for case when we dot articles. For example. One not best. And let's run also we can run this comment about this gets all tests. But we are working on the business wants, so that's copier. Bells. Put the best in the end. In this case, if we can run this one task, which is to say, okay, what do we have from the beginning? So when we not best articles, we have fragment. It's what we expected because often if we have an article, severe sudden cardiac fragment, you pick out articles. Troubling this section. In general. If we don't have a token. Oh, no, it was updated. Code coverage was improved. Check get, function, render, item, rather item. It's pretty easy. You can do the same. To do it what we need. We don't need probes. We can do. But we need the item and highlighted. So written is that we can read this text to describe. Describe is highlighted. And when i is not highlighted is what I wanted, for example. So we need to take function render item and we can use JS six. Simple. We have this function. Now we can execute this function, but we need to do or arms it's item and highlighted. So cost item, its object, we need item ID, label. So as to be true. And the same test for mode highlighted, for example, false. Okay, let's run again. Check called cower. So this was two times because we created two test was shops. We see that for It's not highlighted. We have regrown transparent and ran it. I like to do is have the ground level is best as a desk. And we have only one bar. Item value. This is what we want to use. Snapshot. We need get item label. So it shouldn't forget about the for each line in the execute or test. Then we need the get function form probes. And expect. When we execute this function, which is an old joke, with the label. The label for example, expect, for example, HIV test as well. So this test was passed as well, but jacket covered. So it works. For this one we didn't create snapshot, but we see that the WHO called covers 100% and we test all As in our component. So let's go to the next component and do a bit more complex stuff. 35. 35 Container component unit test: Now it's time to test. The next component is container. This, it's a bit more complex because beheld children and we pass components with asthma probes to these children. What we need to test, we need to take children any children ended check probes. What though? We need passes, prompts and compare with the props we received from children. So let's do it. Let's create new component. I will call this bag jazz. We can call test just as you know. And we need to import component container. We can skip index, one of the best practices if you importing substring from index file, skip last book. And it's an awful that describe what we need to read the container component. As we know, minute variables. So the children, because often we need test children and also we need to props. So let's create our usual function to render component. Or we can copy, copy from an audio component. So we will pass probes and the children probes children because opiate addict children. Because this mound listed off shell because all shall just rendering the component itself but without children components. And in our case, we need deaf children. So that's mythologies component. Let's create the first snapshot. So usually it should match snapshot, but what we need, we need to create a children till its component. So let's create component. So it's a regular children through them open and the next, we're passing children, let's open our function. Component. Q is a function, so now its component. But we pass on, these children are less good. Let's change. Children and greater function. In Fontan, which receives three probes. And it returns children with these probes. On search engine is unfilled change and articles. Articles. So we have a disk component. Let's render. In before each render. We need both probes, recovered best children, children in this function. And renewed. Just check. Expect too much snapshot. Let's run this test and take a look what we have. So all tests are run. We have one snapshot. So let's open this shop. So we see we fell container without children, and we have probes the best to our children. The next four snapshot, it's okay, but we want these probes. What Rails Web Best, for example, for search, well, we need person Castile. Let's change it a bit and how we can do it. In our component. We input in hooks, which returns all data. What we need, we need mach, these hooks and what do we need more data? To do too many deals? Just morgue. We are passing a bath. What do we want to talk to component in our gate is hooks. And function. Function returns. What we want to return. In our case, it's object will return an object with three probes. You have the bounce, its function. So that's the return function. You search the same function, mult function, and you search for, it's also production. Three functions, but very important that you search, it should return articles. So let's return. Sounds it just fashion, it's a mocked function, but it can return funds me. So. Let's return. For example, we want articles, empty array. For sociality, we have used search form, new search form. Let's return. Is object, search value, value and change its function. Just mocked function. No. No. When our competent we'll use these functions in our task. We will use mocked functions. Also wants more change for it returns articles. So we need Object Articles, empty array. Okay? When this company really use these functions, we mocked them m, for example, value you will get executed search form and we will get xiache value. In our test, we will return that value. So now let's try it. So when we passed costume drops, we need to test it. We run our test value. In children, the combinator K, which has this dominant, How to do meaning suit. So we need to find, let's find children. We know we held and return all props. Probes, green services probes. So let's save two const. We need all props we need only from children read search value. So that's use salvage value. So we took all props in our children. For example, as open our we have children, we found the students. We got all probes and we took sociale only. And now we can check what we have inside such Weller search where you do rather what we passed its test. That's run on the disease test file. Once controlled, it was updated. Every house mole markets thirst for doing snapshot, the old warm and no check. But search well, you run it again. So one test is failed. Let's take a little. So when we're using the structural property search web, we cannot find it because of probes. Problem. And I was wrong. Again. We haven't any props and component because all we need to use the bound should return Samsung in our case, not just empty function should return empty object. Okay, the problem was when we have used the bond mocked function, we need to return that function, which returns function to return a function directly. So let's do it. Now. We see that these variables are used. And let's update our unit test with dash q. So snapshot wasn't updated, deleted and update again. So a snapshot is updated. Tests are best. And if we will take a look what we have. We have this balance. We have search realm that we're live, what we passed. And it means this test works. So we finished the simple tests. The next one, we will create unit tests for Hooke's. Hooke's are the most complex part in our application and it requires a bit more effort to create useful tests. 36. 36 useSearchForm hook unit test: We have three different hooks, is used search form, used the bonds and use search. The simplest and the easiest one is used search form. So we will start from this one. Okay, what we need for testing, protect hooks, we need special library, react hooks, testing library. Why do we need it? Leaves some specific width hooks We can use hooks on in functional components. So when we are using tests is not the functional companies. It's a regular function. And for regular function we need the heart somehow this issue, this limitation. And to do it we will use render hook and act like action when we need do some action, call some function. So let's install this library. And the next one, we have hooks, That's great. Separate folder. It's another approach how you can create this folder. And inside we will create a file, folks spec jazz. So when we are using tests in that folder, we can skip spec or test part. But when we are working, it very useful when you can see that this fire is a test, not real hook. So that's why I am leaving this part. Now. We need them, these imports, this functions. The next unit, import from Cook's, It will be use search form. So let's take a look on this hook is what we have. We're returning search value and the function also change why we call it this function. We are benthic object its event with the target value. And we just sat, search better from state. What we need. We need a few times this function with different event and the check was search well was changed. So pretty simple. George, form. Let's describe this hook. So what we did when the event. So we need to target for events. Okay, we have before each and now does interim should update search value. Again, no, no, we need render resists. Who do renders this hook? We will use we will meet say, Coke data if what was returned. Result parameter who, bus, and news search form. So in result will be saved current home. Okay, and now let's do some action Act. It's the best function. And in result we change button. So let's use result. But what's important is we need to use current. And only then we have access to unsorted change. And we will best event that Dorothy rent the result. Check expect, we expect that result to be data one. So we executed the first change. We said value from data. Even we can start from the initial case. Search. Well, it shouldn't be empty string on the beginning. And then we're going to be executed this function, it should be data one. Then we will execute this function. Again. New action is event doom, secondary ramp. And we expect that data will be changed again for data to test a copy. This test was passed successfully. We can check it on our coverage. Let's open code coverage. We see that for source, for Huxley help coverage or go to you, search for. And we see that this Huike was covered completely both dates. So is the simplest one. The next, we will test, use the bonds. It has some complexity due to using timers. And then the last one, the most complex H2O. 37. 37 useDebounce hook unit test: The next hook is used in the bonds. It's a bit more complex because of we are using a timer set timeout. So in our unit tests, we can't wait, for example, 500 milliseconds or even more while this function will be executed. So we need to use fake fake dimers and speed up execution of this test and this function. So let's create the scribe for a new hook. You build the bonds. We need import hook. So as we are using fact diamonds, we need set. Just to use this timers. Under section you will add just use fake dimers. And now these tests will use fake timers. It's what do we need? Okay, that's great if those test. So let's create the expected value. Expected result. It's a string and we want to return render hole. We'll use our favorite parameter hook bones. We need. It says dreaming. For example, delay, delay, quantum route as well. Let's check what we'd expect the result, current and expected result. So we're using current because of this function returns on value, it's not object. So we can use directly current, result current. Then, for example, we need wait a few seconds or a second. And the check if result is the same. How to do it? So let's be dark hour timer, for example. We will use just at once dime diverse MyTime. For example, 510 milliseconds. And after that we want to test. Is it the same result? Is the boss who don't see the same result. Test, run tests for zs viral. So it was executed. And we can open code coverage. We will see that. This is already covered, but we need also cover default setting. You wanna cover not updating value in case we are using less than 500 milliseconds. So we're going to do it. Let's create, let's have do wells. And now we will call this function fires. When as the usual behavior of these hook, many typing, when you type a letter, we use this hook, and when you type the next letter, we use this hook again. So we didn't simulate this behavior. To do it, we will use a bit. Another approach with render hook. So we will use render hook will pass a function which best value and delaying and initial probes will build for value, the value one and delay by Konrad. The next one. Let's test. We need to change that. We expect result current to be value one. Then we want advanced dimer, but less than 500, for example. This one. And we want to compare well is that it's still the same value than bug. Check if the Meet Ron, our hook again. To do it, we need to use Render Fontan and run it again. There is new value. It means after. So we are on our reach. Our initial val is the same that we waited 490 milliseconds and we render it our hook again. So we simulated typing a new lateral. As this timer wasn't reached, 502 second, we should return the same value. So let's juror. That variety is valid. We expect we will see well, one because of 490 is less than 500, okay? The next one we want to run timer again. So wait more than 500 milliseconds and get a new value to do, we can use another functions. It's just wrong. All climbers. So we do not set how many seconds we need to want to wait. We just call rod old timers and we expect that data. Let's just so everything works. Greg, also, if we check coverage, we will see that we even covered the affection. When when we run renders this hook, again, we didn't pass delay, we just use value means the delay was chosen by default and default is by function as well. So we test the two hooks and now it's time to test the most complex one. Search. 38. 38 useSearch hook unit test: Now we can start testing, use Search who is the most complex one. So what we need, first of all, it's doing back-end, uh, drugs called. So we need to mock this data. To move this vector, we will use boxers. We already used it for storybook and we have some experience how to do it because of unit tests. Never, never should do real calls to backend. Is it a database becomes or RESTful? Never, we never do real because we MOOC all this data, all this calls. So to start, create McKinney task for that, use this hook and create new describe. So let us start from the first test. We will check initialized data. So you need data. You need data. It means when we created this hook, we need articles, empty array datas idle. So we did result in use. Search. For example, m. N isn't what we want to Chairman. Store state. It will be articles for articles to be empty array. Also, we can leave this test according to our core convention for unit test, we need create expect in different areas. And for this one. So in this case we should return initial data emptier MTM articles. And the second one we need should retention data shouldn't be idle status. Okay, let's run. So we have du, failed tests. Let's check. Worthless failed. So we see lens, we not how correct? We didn't pass it. So we can pass it or we can check our code and find out that query is by default undefined and we need pass on default value because we tried to get land. If it's undefined, it doesn't work. So using this test, we already fix a small issue. It's great. The next one. Now we can try again. Dot one is failed. In case we are using. We tried to compare objects or arrays we can use to be because of it. There are the different links for this object or array. So we need to use two equal. Because we can compare objects. They are, they have two different objects, have different links to this orbital. They're different disk arrays. We just check is equal. So it is, it works. Also. We can check code coverage. We covered this section. What we didn't cover. So now we can go the other end, the chair execution, this request has created a new one. We want to check that status shouldn't be banned in when we started doing this cool, but we still didn't get any datum. So to do it. So we have result and rerender our hook also with some string. And now we can try check. First of all, data shouldn't be bending. But let's take a look on our CT. We don't set status band right around. We should set status before writing this call. So let's update our HUC, fix this issue. So we need the state. And so now we know that who is working to restart martyr, who didn't get any data. We can try to decimal mode. We want to get the result we expect because we need the MOOC data for what we have. So we have this data, but our axioms is doing career goal. So we need prevent doing real calls and to fix that, we need install voxels. You voxels. So we will use mocks and what's important to rename them, install it, and uninstall when our tests of finished. So to use it in our describe before each and alter each, we need four before restraint installed. And when we executed all deaths, each depth, we need installed voxels. Or as children. We can remove renders all these works as you expect this day to spend. The next one we need test when this Cold War successful. And do we need? Sad, articles and data should be successful. So let's render our hook again. When you search with 11, we can use, but in result, we wait for the next update. It in new matter executed, we will wait next update of data. It means new set state. We will get data. So let's wait to this request. So we need executed but its coal, so you need a weight. And finance should be acidic function. So we executed this data and now we can check, we can check our status. Status should make success. But for this case we need more this request. So let's create a MOOC based on these query stream you will create. This one is stop request. We want to search criteria is your limit 1000 and return data will be your. Run. Works fine. We can check that this section was executed. Also. One more expected, we can check articles what we have. So we execute this code again, and articles shouldn't be equal array of one object, id. Idealism, we put to end the label Elon Musk. So rechecked the secondary can ride. And the next one we need the check would happen in case in catch a section of our request was failed. It should status when the request was felt. So to do it, we will copy the same behavior and bought. One. Bug status will live. Fire corner for example, it's a rawer data does matter renewal this coal and you expect that status shouldn't be Arrow shirt. But it's wrong. But we forgot about awesome. It's a sinc function. One is task, whereas chairman, and we covered this date again. So we have two lines not covered. It's access is cancel, it should return false and cancelled token. In general, we have coverage, might do 3% percent for statement. It's pretty huge. 100% for function. As I mentioned before, we need cover 100% for all lines because often it may take additional effort. For example, for governance is quiet. It will take effort and we don't want spend so much time so we can leave it as is. But if you want, you can spend family short-time does for your experience and create additional unit tests to cover these two ions. So we finished with the hooks. We can't go to hooks and we see that it has a huge covered coverage. And now we have only a few competence we need to cover its pages. So let's create a unit test for pages. 39. 39 App unit test: We have three pages and we need to test it whole, searched and found. To test it, we will use the easiest way. We will test up component and based on a route, we will snap short of the component with a page. So we roll rotor and we have bells, so we can walk a path. And based on this Mach pace, there will be rendered a specific page. So let's do it. Let's go to our test folder and create a new file, which will be up jazz. Jazz, especially for tests. Next, let's import, import, import application. So that's best for home base, the easiest one. So we need to render our application and put a path how to do it. We will use special component, its memory router. As open-hearted works. Memory router will implement mocking over, over. So we can put the past M debate on this path. There will be rendered our component. So let's create our function to render. We need best initial path. And it will be important memory rotor, it will what we hadn't documentation, you need initial increase, named initial enters as well. And inside do we need to render. And the next one for our Homepage and describe. So when homepage is rendered, we need the match snapshot that in before each. We will render. Also don't forget that food. So we will render Home path to read best array and password on the home bands. In this case, we need the we expect. It should match snapshot. Also, we need a mound. So let's draw what we have. Let's copy this birth. So snapshot is written verse they go, what the hell. So we see that its initial array for home, router history and the root. And we have formed our homepage. And here, as you see, it's called Better tenor. The next one. For not form. It's pretty easy. Bay is rendered. Okay. Now let's take a look what we will fell. That's doing this snapshot. Two snapshot. Ok. Is it what we need or not? So for the first one is for a home bells. We still felt at home. And the second one, it's four, Not Found page. This one. What kinship? And inside we see that whole passion, tenor, and autocomplete. So it means that it rendered the same homepage, but we need another page not found. So to fix it, or to be clear, we need update our corporate n-bit. So to fix this, we need more water from up component. And the more we do index file an application with term. And inside, we can remove it. Now it means that we will use our own router from tests. We can use any if we need to know its application is independent versus dry. Again, delete this shot. Shows were created. And as you see, we have not found page. So it's four Not Found page. We see that root is as we've described and inside it we have not found, not found. And for homepage route home, homepage container, so it work. It works. Now, we even can check code coverage. As you see for our component, we have 100% code coverage. Also, we can cover a root four search. It will be the symbol for home page, so you can do it by yourself. It's pretty easy. And it was easy way. How we can test pages using roots memory router is very popular approach when you need the moocs paths and the chair communication record based on your path. So this is about Destin. 40. 40 Unit tests summary: Let's wrap up what we know about tests. We created tests for all major components. We created tasks for Hooke's autism. Most important, we used mocked data. We mocked competence and mocked JSON responses. So it was pretty easy. Let's finalize or two we have, first of all, we need to remove stories folder because of we don't use it and it was for demo purpose, we can delete it. So let's go to stories and delete this one. We don't need anymore. Also the next one, we have auto files. We need commit these files and don't forget the snapshot. These files should be added to get as well. So let's commit every silk and all. And if you've had some issues with implementing these tests, you always can find all these tests on my GitHub. So I'll go to maximum root nick Karp, so shriek. And here you will find errors in coordinate. You see we have snapshots, we have files, we have tests. The final one, let's run all tests. We check coverage what we have, and there will be a few files to competence. You can create unit tests for these files and by yourself, it's pretty easy. And bets on the experience we already had. You will know and you will have what you need. So we have to snapshot files are fail. Let's check which one. So as you see, when we use when we use memory router, we got this issue. Visit Q, when we regenerate. Short key is another very important part of unit tests. They shouldn't be repeatable every time when we are on test, this should return the same datum. So in this case, we need update memory router and Beth additional key is 0. Now we can delete this notion, run it again a few times and check. This should fix the issue. As I mentioned before, tests, it shouldn't be repeatable in the main purpose of these tests, when you run this test on a dense integration pipeline, it should work great. So as you said, it's updated. Let's try again. So the same with open our code coverage. So as you see, we had a lot of coverage. We need a unit test for list item. It's pretty easy and four pages for search. First, take open-source source file folder we have in the Jasmine covered, but it injects is the main file which renders replication. There's no reason to test this one. We can skip it. So let's go to stop just oh, in packages. So for that configuration, we can just skip source. Jess. So next address, this one. Yes. And we can run again and we won't see this file in code covered. So sometimes you can skip uses files for testing from code coverage works. Yes. As you see, we don't have this file anymore. And the coverage is better. And don't forget, we need commit. All these channels changes. So we finished limitation of added. And now you can commit. Dolby finished adding tests. And now in the next section, let's add some best practices and improve coat of our React application. 41. 41 React PropTypes: In this section, we will talk about the next very important sings ere developers should know when IT development application with reality. So in this video, we will start from prop types. So what is prototypes? Prototypes, it's abroad of type checking, react. So as JavaScript is a dynamically typed language, so we don't know what type of variables or in our case, props we are passing. To solve this approach. To solve this problem, we have a great approach and it caused prototypes. Prototypes is a special library which provides different types. And in our application, when we, when we are passing any probes, we can specify what type is it. For example, in this recommendation we see that for name it prototypes is a string. So let's install this library and codify prompts in our application. So we add role-types library. We will important this library, for example, for at least item competent really specifying items, props for list item, ID, string as their member and without label. And it's awesome string. So it's very important to know what do you expected some times you have arrays. And when we call some method of an array, we need to be sure that it's array and we want to call this method from undefined or string, or even Southern Cal. Also the next important part when we are using these components, for example, list, item or steak. Ok. Do we have this component in our court source, for example? When we are using police item, it's great when you can use hints from your idea. And it shows that we have two types, two probes, ID and label, and the type is string. So it simplifies our work. The next important part, it's required or not filled. So usually if we expected to use these ropes in our competent, we market as is required. And this one, it means that we miss these probes using this component ID. Or even react in Chrome browser or any other browser during development mode, it will show us that these broke is so you need to fix the error. But sometimes, or even we can say some probes, they are not required. So we can skip them or sets some default value. And to put default where we can use default probes. So let's take a look. What is the volt prompts. 42. 42 React DefaultProps: What is default probes and why do we need them? Let's take a look on input. Competent we help and we have different probes. For example, Placeholder. Placeholder, It's absolutely not required probes. We can skip it or we can clarify it on the baton component. But sometimes we want to have some default value angled passage. That's gotta fight. For example, for input or default probes. We want to say that if we have a placeholder, it's should be input, input, search, query. It pretty easy. Default probes. It's just an object where we specified props, we are sealed. And now when we will use this component and we want Beth placeholder probes, it will use default as inputs search, query. It's very great because you can prevent a lot of roles. For example, if you have array as a prompts and not required, but in the US map or reduced matters, you can specify these probes as array and you will be sure that these methods will work rate and other gauge. What I want to mention also, how we can specify a default prompts that two ways. The first one, what I mentioned before with default probes, but another one, it's using native JavaScript approach, basically firing default properties for a function. So it's a function and it's a property for a function. So we can go to find. And it will work. Sam much. What's the difference? Let's take a look on Dan Abramovich tweet where he mentioned that default probes on a function will eventually get deprecated. So it means that uses native exhausted the approach will be better in the perspective. Also, another case that using default probes, default values for parameters. It's a bit faster from performance perspective. So you can choose a brochure what you like. But I prefer this one because sometimes you need to clarify and some object with some inner rocks. A bit better to do it are the Reserve component itself and are confident we'll look a bit more clear. So the full proxy, very important from a clinical perspective. 43. Installing NodeJS on Windows: In this video, I will show you how to install the latest version and the Package Manager and PM. So on Windows, Windows ten. So what do we need? First of all, we need check, do we have no justice told, installed or not? We need to open. So let's open it and check. To check it mean type. Or in case we haven't, we will go to jazz application, we haven't it. So that's installed. We go to browser and Google. So we need to open legitimate 4G download page. And here we have two options. Is long-term support, lotion or and bam six. Or we can choose current, latest version, 14 version. So as I mentioned before, we will install the rate, it will be 14. Okay, the next one we need to choose a version for Windows. Is it 32 or 64 bits? To find out we can open. Settings are a windows system and system. Go to About section. We will see that we have a 64-bit operating system. It means that we will choose this 164. Let's click and save this file. So it completed and go to the MSI file. Downloading is finished. We can go to Downloads folder and find this portion, this one and install. Click Next. So as you see, we have not just the Wizard steps one by one. So we accept the license agreement, which was folder by we want to install. So you've just default. Then we will see that we will have legit and damn package manager and some initial documentation and it will automatically add the two paths. So what we need. So this one becomes keep, just click next and install. So we click yes means verifies his publisher. And now we click finish it. As you said, No jazz was successfully installed. Now we need to check. Again. Let's go to common prompt. So let's try for example. So just press control C, exit entry. We can check version and this is for conversion, but didn't dot h dot and NPM version 6.14.7. So as you see, we installed on jazz was important on this computer. We don't have Java, for example. So Java isn't required to install, not jazz. Thank you for watching. 44. Installing Yarn on Windows: In this video, I will show you how to install one of the most popular web development tool is yarn, yarn package dependency manager. It's almost the same as npm, but a bit better. So from my experience, I prefer to use yarn so hot and do. Let's go to Firefox for example. And we need Google yarn to yarn is Package Manager. So as you see, we have two options, is documentation for Er2 and yarn N1. We will store the second one if you need to. First one you can go to coast CTR and find there. So let's go to Getting Started and insulation. And the easiest one to install it using NPM. So we're already installed and npm install it with copy M. Then we go to India, oman prom and execute this installation of the arm. So let's check. So as you see, we have yarn, it's super easy installation in case you need the first one. Let's go to courses and go to install Yarn. And here we have installation. We can choose operating system in our guesses to Windows, but you see you can choose anyone. And for Windows, we want stable and we need to download and install MSI package. You can easily click Download. And when it's downloaded. Well, what do we have? 1.22 version. And using the CR setup wizard, we can install on your Windows computer. Okay, and let's just follow the steps and the glutenins goal. Yes. And the initial Let's try game ended December motion. So we just missed all the using two different options of how to do it. Thank you for watching.