Learn React, MongoDB, Nodejs and Express by coding a charts generator | Raymundo CH | Skillshare

Playback Speed


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

Learn React, MongoDB, Nodejs and Express by coding a charts generator

teacher avatar Raymundo CH

Watch this class and thousands more

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

Watch this class and thousands more

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

Lessons in This Class

50 Lessons (9h 24m)
    • 1. Intro

      6:58
    • 2. Install Nodejs

      5:46
    • 3. Setting up a web server with Nodejs and Express

      12:46
    • 4. Create an static web server

      7:34
    • 5. Setting up routers

      9:43
    • 6. Make a database with MongoDB

      12:52
    • 7. Make a connection to MongoDB

      13:03
    • 8. Create the database model

      9:08
    • 9. Code an API ( saving information)

      13:01
    • 10. Testing API ( saving information)

      11:52
    • 11. Code an API ( read all information )

      7:06
    • 12. Testing API ( read all information )

      4:09
    • 13. Create an API ( read specific information)

      11:15
    • 14. Testing API ( read specific information )

      5:56
    • 15. Install dependencies for React to work

      10:12
    • 16. Setting up React from scratch

      12:04
    • 17. Make your first web application with React

      14:26
    • 18. Adding styles to React application

      12:55
    • 19. Make your first React component

      8:32
    • 20. Setting up a router with React

      13:20
    • 21. Setting up React-bootstrap

      14:19
    • 22. Laying out webpage

      11:44
    • 23. Make a React component that displays a text field

      12:02
    • 24. Setting up a text field

      14:39
    • 25. Testing the text field

      8:00
    • 26. Text field for a description

      12:20
    • 27. Text field for a label

      9:24
    • 28. Text field for numeric values

      7:26
    • 29. Making a dropdown list with React

      14:44
    • 30. Saving setting into an array

      13:47
    • 31. Saving input into three arrays

      14:45
    • 32. Code a React component that displays the chart settings

      12:26
    • 33. Display chart settings

      13:30
    • 34. Make button to create a chart

      13:42
    • 35. React component that displays a chart

      10:35
    • 36. Testing React component that displays charts

      8:57
    • 37. Button to save chart settings

      13:49
    • 38. Making a request to the API with fetch

      12:05
    • 39. Dialog box with React

      11:54
    • 40. Testing a dialog box

      13:57
    • 41. Navigation Button

      12:08
    • 42. Laying out another webpage

      13:14
    • 43. Reading all information from MongoDB

      15:01
    • 44. Coding a table of charts

      12:11
    • 45. Display a charts listing

      6:48
    • 46. Previw a chart

      14:11
    • 47. Make a dialog box with React

      14:46
    • 48. Last improvements to the web application

      14:49
    • 49. One more navigation button

      7:59
    • 50. Testing the web application

      6:26
  • --
  • 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.

142

Students

--

Projects

About This Class

This tutorial shows you how to code a web application with the MERN stack. First, you make the backend by using Nodejs, Express and MongoDB In the first section you make an API. Afterwards, you code the frontend with React. The web application can display a chart after the user inputs some settings. 

This tutorial covers how to set up a React application from scratch which means you are going to understand how React works under the hood. This tutorial is very interesting!!!

Meet Your Teacher

Teacher Profile Image

Raymundo CH

Teacher

Hello, I'm Raymundo. I like web development because it represents a challenge all the time. Learning programming languages is fun and is a challenge for the mind. 

Since I heard about NodeJs some years ago I felt curious because they said it was possible to create a complete web app using javascript solely. It was very interesting. 

At first it was hard to understand NodeJs because the way it works differs a lot from the traditional approach, even the way to deploy and app changes  and the companies that store your app offer a set of different and weird  products!! so it was an adventure for me.

Nowadays I've understood NodeJs and I'm here to share with you my knowledge in a simple way. I hope you enjoy my videotutorials and send me feedback plea... See full profile

Class Ratings

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

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

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

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

Transcripts

1. Intro: welcome toe this tutorial own react Mumba Devi Express on. No! Yes, On this tutorial, you're going toe. Understand how to create a web application. You seeing these technologies? And well, in this case, you are going to create a chart generator on, as you can see. Ah, here. I have the application that you are going to create in this tutorial on. Well, I'm going to show you how the application works. Andi will thesis application. He's used to display a chart to the Web browser and, well, I'm going to create a chart. You seen these application, Onda? And well, uh, the first step that I have to take east with specify a title for the chart. In this case, the title is, um, the most the most beast, their countries. The title is the most visited countries on. Um okay, be I have to specify a description for this chart. In this case, the description is, um, millions off people who visited these countries, millions off people who visited these countries and will. And now I have to scroll down. And where the first Now what I have to do is tow Create a label in this case, the first label will be China. And I'm going to say the American, um, I have to set an American value in this case. I'm going to set the value 65 on. Then I'm going to use the color red. I pressed the button that settings and now what I want to do is to create another label I'm going through as the label Spain. I'm going to use the number 60 and in this case I'm going to use the color orange. I press a button that settings now I'm going to tow, create the label Italy, and I'm going to use the number 50. And in this case, I'm going to use the color green. Now it's risible donut settings and well, now what I want to do is to have another label. I'm going to use the label Mexico. I'm going to use the number 45 and in this case I have to use the color blue. Now it because they don't have settings on that you can see here. I have a listing off the countries as well as a listing off the numbers. Andi finally have a listing off the colors and we'll know. What I want to do is to create a chart on. Well, in order to create a chart, I have to press the button, create chat. I present you don't create chat. Unwell. Now you can see a chart. Castle ready has bean. Sure. As you can see, a chart has been created on, uh, on the left side appears the legion on, um, on top off the chart. A Both the chart, um, appears the title the most visited countries on. Then I have the description millions off people who visited these countries and will, um well, now what you can see thesis easily chart that this place. And if I scroll down, you can see that here I have a green Bhutan that says safe chat. I'm going toe. I'm going to press the green Bhutan safe chart. And as you can see, a valuable box this place that says the chart settings were Safed. Now I can close thes dark yellow box or Daniela Window. I press a button close on. Now I have to press the yellow button chart charts listing. I put in the boot on charts listing. Let's see what happens on Well, now you can see these easy with page that this place on. Well, as you can see, he write up a listing off all the charts that have that have bean creative on. If I scroll down, you can see that at the bottom of these least ini appears the chart that I just created on , as you can see here. Is that the description off the chart. Millions off people who visited these countries on Now. Now I'm going to press the red button that says Preview chart. I pressed the button preview chart Hamas. You can see a new Via window or Langella Bo Box opens on this window on this place The chart one more time. I'm as you can see here I have the lady int on my cap. The title the most visited countries as well as the description millions of people who visited this conference on Well, now I can close these this window. I press a button close on Now I have to press the yellow button, go back to charge generators. I placed the yellow wouldn't go back to charge. Generator on. Let's see what happens. Well, now you can see this easy with page that this place on? Well, as you can see Thea application is Thea application looks very nice on. Well, this tutorial is very interesting, Onda. Well, if you want to understand how to create on application, you seem react Mongol d B express and nose. Then this tutorial is for you. See you very soon. Bye. 2. Install Nodejs: welcome toe these lesson off this tutorial on this lesson What I want to do Eating Stanley ? No guess on my computers on. Well, in order to install No. Yes, on my computer. The first step that I have to take is to head over toe the official website off. No. Yes, On. Well, now you can see the official website off. No, Yes is displayed in the web browser on this is the official website off Novia. Yes, on. Well, as you can see, I hear Have hearing have the home page on. Well, these home page contains two different bottoms. In this case, I'm going to use the wood on that is placed on the left side off the screen. As you can see here I have a Bhutan that contains the version number 12 about 16. The one on Well, where I want to do now is to press the green button that contains the version number 12 about 16.1. In order to get the installer off no genius and, well, I'm going to press the green button in order to get the installers on. Let's see what happens. Well, now you can see him right up the installer off knows. Yes on. Well, what I want to do now is toe open the installer. I want to run the installer on. Um Okay, I'm going to I'm going to tow. I'm going to run this installer on. Let's see what happens on. Well, now, as you can see through the installer off note off north, the installer off north. Guess is open and we'll thesis is the installer. So I'm going to I'm going to press the button next. And as you can see here, a car, the license agreement. So I have to choose the option. I accept the terms in the lessons agreement and then president. Next there is a total next one more dime. I have to press a button. Next, Andi. Finally, I'm going to brace the Bhutan. Next on. Well, I'm going. I'm going to press the Bhutan. Instill on. Let's see what happens. Well, now a stricken. As you can see, the installation process is taking place. And as you can see, the installation process is very fast. A so you can see the installation process is very, very first, Andi will let's unions on. Well, now you can see the installation process is complete on Dwell Now I can I can praise the wood on finish. I praise the good on finish on. Well, you know, what I want to do is to open the comments. Brunt. And as you can see here, I have the command prompt and I'm going to run. The comment knows on. Then I have to use the black version. Okay. As you can see, this is the flag that I have to use in order to get the version off. No, Get off! No! Yes. Now keep in fish. Let's see what happens on. Remember that. What I want to do is to verify whether no, I guess is working or not. Okay. I want to verify whether Nokia yes is working or not on. Well, as you can see the version number off. No. Yes, This place as you can see here I have the version number 12 about 16.1. Which means that no guess is working now. What I want to do is to verify the diversion off the North package manager. I want to verify the version number off north, puckish minor years. So I have to use the comment. No package package manager. And then they have to use the flak version I heat Inter on. Well, it's important to say that no package manner here is a program that he's included with no Vegas. No, The puckish manager is a program that he's included with no year Yes, on North Puckish man a year is used to install dependencies off. No gauges, no package manager is used to install dependencies. Onda no package manager is included with no dear. Yes on. Well, as you can see right now, I am using the version 6.13 dot for and well, now, as you can see No. Yes, is working on my computer. 3. Setting up a web server with Nodejs and Express: Welcome to this tutorial on no gauges express mongo db and react on this tutorial. What I want to do is creating a chant generators in order to create these Web application. The first step that I have to take is creating an empty folder. So I'm going to create an empty vote, an empty folder by you seen the common made here. And then I have to specify the name off the folder in this case, the folder. The name of the father is Chart React now a heat Inter, and now you can see I've just created an empty folder. Now what I want to do is to navigate inside this folder, so I'm going to use the comment change directory on, then chart. React now if you think there's and we'll And now, as you can see, I am inside the empty folder. Now what I have to do is creating a backlash. Jason File, A Packers Jason file is basically a final that contains a description off the application. OK, I have to repeat this because his base is very important. A Packers Jason file is basically a file that contains a description off the application Well, in order to create a packers Jason file, I'm going to use the comment and the M in it now. He entered. Okay. Well, now, as you can see, a note puckish man a year is asking me to provide the backlash name in this case, I'm going to use the default option, so I'm going to hit Enter now. I have to provide the version of this package. In this case, I'm going to use the default option as well. So I pressed in touch. I know. I have to provide a description of this application. In this case, the description is charged Generator creative wheat. Uh, no. Guess express Mongol Levy on react. And now you keep interest. I know what I have to do is to specify the entry point. The entry point is basically the D file that contains the web service. So in this case, the file that contains the Web server easy file servers don't get yes. Now. I hit, Enter, hit, enter one more time. And now I have to specify the works. I have to specify keywords that describe my obligation. In this case, the keywords are charred re yet nos on Mangal Mongolia. Be on then. I think enters on. Now I have to specify the outer off these application. In this case, I'm going to use my name. Which is right, Mondo. Now I see interest hit. Enter one more time. And finally I just have toe being yes and hit. Enter on. Well, now, as you can see the buckets, Jason, file has already being creative, and I have to get over to the gold. It I don't. And as you can see, I am using the growth in lighter supplying text. Okay? Because it I told that abusing his supplying text. Now I'm going to choose the firemen. You and I'm going to select the option Open folders. Now, what I have to do is to navigate to the C drive. Andi. Well, now I'm going to choose the have to choose the folder. Charred react. Okay. I have to choose the father chart. React. I hit. Enter. Sorry. I have to choose the for their chant. Um, I have to choose the folder chart. React on now. I have to select this folder. I know what you can see. These folder a beer's on this green and now I'm going to select the fire back as Jason. And well, now you can see this is the blackest Jason. Hi. This is the Packers, Jason file that waas creative on. Well, a now is. You know, I have toe toe opened the common prompt Onda. And now what I have to do in Stewie's installing my first dependency. OK, so I'm going to install a dependency called Express, So I'm going to just comment NPM in style. It's safe on. Then I have to specify the dependency express. Okay, I heat enter on. Well, before I continue, I continue. It's important to say that express these other pendency that ease juiced to create a website wish. Okay. Expresses a dependency that is just to create a web service on Well, that's the reason why express is a very popular dependency. Because express is just for setting up a Web server expresses it is used for setting up a Web server from a scratch. Okay, well, now, as you can see, the relation process is complete. So now I have to install one more dependency. So I'm going to use the comment and b m in style. Safe this. Well, it's important to say that safe death is a flak on this flag. Save that indicates that the dependency will be used on Lee during the development process . Okay, Safe them is a flag that indicates that the dependency will be used only during the development process. Okay, And now, in this case, and I have to study dependency. No one now he entered. And well, before I continue, I have to say that no mone east juiced toe date of the application automatically. Okay, Northman is a dependency that is used toe bay. The application of dramatically. This means that every time I modify the growth Northman, they filled the application of dramatically. Okay, every time I modified the gold knows Moan who, Bates the application of dramatically on. Well, enough moan is juiced to restart the web server as well. Okay. No, the money is used to restart the website. Where as well. Okay, well, now, as you can see, the installation process is complete. So now I'm going to close the comments prompt on. I have toe open the Bacchus Jason file on Dhere. The package Jason filed. You can see that I have the section dependencies on inside the section dependencies, the express dependency appears on below. I have the dissection, their dependencies on inside the section, the dependency. No. Mourn a beers as well. Now I have to create a web server. So I'm going to create a new file and then I'm going to save this file as a server. Okay? Yes. And now it's up to the clearly constant express on. I'm going to set this constant toe require express. Now you can see again important the express dependency. Now I'm going toe going toe the gladly constant hap and I'm going to set this constant toe the function Express. Finally, I'm going to the grocery, Constant. But I'm going to set this constant to require back on well before I continue. It's important to say that that is a dependency that is included with no yes by revolt. Okay, but is a dependency that is included with no j with no yes, by default. These means that you don't have to install the bad dependency. Okay, you don't have to installing about dependency because it but the pregnancy comes with No, with no yes, by default. Okay. And now, if I have to create some roads. So I'm going to add a comment roads on Then in order to create on my first wrote, I'm going to use the metals app Don't get well. It's important to say that I get easy A each get is the http metals that I'm going to use to establish communication be doing with browser on the web service. Now, I have to specify the arrest in this case, the other diseases slash it slash represents become base. And then I have to ask the callback function. This callback function requires two parameters response on request. Sorry. Request on response. Okay on then, where you want to do is to send a response to the browser. So I'm going to use the mental response, don't send. And now what I want to do is to send Heather one doctor, the browser that says hello from Web server. Okay. I want to send our response to the browser that this place together one on then I want to set up the port. In this case, I'm going to use people 3000 on these these metals. He's going to display a message to the console that says listening. Listening at local host 3000. Okay, Listening. Listening at local host 3000 is the moustache that this place to the council. Ok, eso if everything is working the missile listening look at look and cost 3000 displays toe the went to the council. Okay, so now I have toe have to go back today to the browser. Okay. And now you can see I am inside the Web browser, But well, before I continue, I have to go back to the government browned on. I'm going to a start, the web servers. So I'm going to use the company comment and the ex no one on. Then I have to specify the option. The option extension on then the option extension is said to HTML Do you have a script? Html JavaScript on gays. Um, okay, I have to use this comment. No MPX Nordmann on. Then I helped to set the option extension and then I have to specify html java Js on Jason on Nowitzki Pinter Well, now, as you can see, three Web server is running as you can see here, theme massage, listening at local host read house. And this place. Which means that three Web server is working. Now I have to close the comment. Brunt on. I'm going to use the address. Local cost 3000 and then I heat ended. Well, as you can see, the massage Hello from Webster. Where this place, which means that the Web server is working. Okay, so now you know. How does set up a website wish from scratch? You've seen Express. You seem he knows gauges and express as well as no more. 4. Create an static web server: Okay, Welcome back to another lesson of this tutorial on this. On this lesson, what I want to do is creating on a static Web servers well, in order to create an ecstatic Web servers. The first step that I'm going to take this adding a comment that says a static Web service . And then I have to use the gold, um, up the juice. And then I have to use the metals Express, not ecstatic. And then I have to specify the but so the folders that contains the ecstatic files well, in orderto enough it to specify the bath toe the folder that contains the static files I have to use the methods cracked, thought, join and then I have toe have to defer end parameters before Parliament. There is your name on the second parameters. Well, the first parliament there is your name on three Constant. Your name contains the bad. So the root folder Okay. Their name contains the bat toe the route folders on. Then they have to specify the folder that contains the ecstatic files in this case, the folder East Public Onda. Well, now what I have to do is to create on empty folder. So I'm going to right click over the roof older and I'm going to choose the option on your folder. Now I'm going to name this folder as bubbly. And now I have I have toe heat interest. And well, now you can see it just created the folder boutique. And now, inside these folder public, I'm going to create a new file. So I'm going to choose the option you file on. I'm going to say these file as index dot html No, I see it in there and we'll know that you can see now I know what you can see. The public for their contains the vile index dot html. Okay, The public folder contains the file index dot aged html on now, what I want to do is creating a very basic with Bache. So in this case, the title of this page is a up containers apple, danish and then I have to add Ah Hettich to these with Peyton, please. With Bache. In this case, the heather is a container as well on Well, now as you can see, I just created a very basic with Bache. A very is a very simple with Beijing on now. As you can see, the Folger public contains the file index dot html. Okay. And I have toe go back to a cerebral dot Js file on. I'm going to remove these root hander. Okay, I'm going to remove these drugs under because I don't I don't need this. I don't need these Ruth handler anymore. Okay, so I have to remove these Ruth handler, and then I have to say the changes and well, now, if I go back to the council, um, okay, if I go back to the gold so you can see that, uh, you can see that the application is not updated automatically. Um, Okay, well, this is weird. Uh, the application should be updated automatically by Northman. Um Well, uh, in this case, what I want to do East toe, restart the web service. Okay, so I'm going to restart the web server manually. Andi, in order to restart the web servers. Ah, I have to press the case controversy. Okay, I'm going to present kiss controversy. Well, as you can see, the Web server is no longer working. Uh, you have to press a case controversy in order to stop the Web server. Okay, but it's the keys controversy in order to stop the web servers. Now you have to restart the web servers. So I'm going to use the comment and be ex ah, MPX Northman and then the option extension like this. And now I'm going to hit the I'm going to hit enter. And well, you know what you can see. Northman has restarted the web. Selvin automatically was so reserved. And now, as you can see, Northman Yes, uh, has restarted the website wish. Um, now, as you can see, the web server is working on, as you can see here, a massage, this place. And the message is listening at local coast at local host 3000 which means that the website is working. So as you can see the Webster where Waas restarted, we know that one and will. The website is working and now I have toe. I have to go back to a so they with browser on. I'm going to use the others. Local host 3000. Now he entered one more time on As you can see, the web page, this place toe the browser. Okay. This means that the aesthetic Web server is working. Okay, Now you can see the Web based is blaze, which means that the static Web server he's working and well, now you know how Toe cote to set up on the static Web server from scratch on. You know how to restart the Web server. You've seen no more, Remember? Remember that if you want to restart, if you want to a stop the server you have tow, you have to press the keys controversy. Okay, If you want to stop the Web server, you have to press the case controversy. And if you want to restart the web service, you have to use this comment. Ah, and the ex Norman extension and then html JavaScript and Jason. Okay. Okay. Well, I guess this is it for this lesson. On the next lesson, I will continue working on this application. 5. Setting up routers : Okay, Welcome back to another lesson off this tutorial on this lesson. Where I want to go is creating to leave friend rotors. Well, routers are reduced to exploit. Eat the application in two different files on Dwell Thief. First step in order to create these routers. Um, the first step that I'm going to take east having a comment that says routers on. Then they have to use these goals apple juice. And then I have to specify the address off these routers in this case, the address off these router east slash AP I slash safe channeled. And then I have to specify the file that contains the routers in this case, the file. Okay, I have to specify the file that contains the router, so I'm going to use the metal require. Now I have to specify the bad toe. The file that contains the routers. In this case, a path is doctor slash roads. In this case, Rhodes is a folder. And then I have to specify the file. In this case, that file is safe. That you yes. Now, I I select these things growth, and I hope I have to copy this gold and then I have toe based the gold below Like this. Now I have to modify the address. In this case, the address is a slash ap I slash recharge. And then I have to modify the file that contains these routers. In this case, the file that contains this router is read out here. Yes, Well, now you can see I just set up toe different rulers. And, well, as I said, routers are used to exploit the application into different files. Okay, so now I have to get over to the root folder and I'm going toe select the the option, uh, new folder. And I'm going to name these folder asked robes in this. And as you can see here, I have before their roads. Now, inside this folder, I'm going to create two different vials. So I have to right click over these folder, and I'm going to select the option you filed. Now I'm going to save this file as a safe Yes. And then we'll know what you can see before the roads contains the file. Save the curious. No. I have to create one more vile. So I'm going to right click over. They fold their roads, and I'm going to choose the option new file. Now, I'm going to save this file as rethought. Yes, on. Well, now you can see before the roads contains toe different files. The first file is retarded, I guess on the second, uh, the second file is save of the year. Yes. Now I have to get over to the file, Say, though there. Yes, and I'm going to the clearly constant express. And I'm going to say this guns these constant toe require express. Now I'm going to the clearly constant footers on. I'm going to say these constant toe express gold Rudisha and know what I want to do is to create some roads. So I'm going to add a comment that says robes. And now, um, the first road I'm going to create the first road. So I'm going to use router dog Get, um okay. In this case, I am using the http made don't get Remember that this method is used to establish communication between the with browse around the web servers. Now, I have so set the address in this case, the address eases. Lash on. I have to set the callback function in this case, he called back for mission requires two parameters. Request on response. Now what I want to do is to send a response to the browser. So I'm going to use the method response. Don't send on what I want to send to the browser is a header went back. These gather want that contains the next hello from safe. You guess Hello from routers. Hello. From route. They're safe. Don't guess. Okay, that is the text that this place to the browser on. Now what I want to do is to export these router, so I'm going to use module exports. And well, it's important to say that module exports is juiced to export information or functions so that the information of full or functions are my level throughout the application. Okay. Module exports is used to export information functions so that the information or functions are my level througout the obligation. Now in this case, I want to export the router. Okay. And now what I want to do is to select this girl is like the growth I copies growth on. I have to go back to the file rethought. J Yes. On I'm going toe based the gold like this. But in this case, I have to modify the text. In this case, the text is hello from there. Read the Vegas. Okay, this is D D. Text that this place to the browser. Hello from Rooter. Read the gauges on. Well, eso. Well, now, as you can see, I just created two different routers, so Okay, well, now I have to go back today. I have to go back to the to the council on. Um Okay. Now, what I want to do is for starting the web. What I want to do is restarting the the with. Ah, the web cerebral. Okay, I want to restart the web server. So, um, I'm going to press the keys. Ah, I'm going to present this controversy. Remember that you have tow press the keys controversy in order to stop the web server. Okay, if you want to stop the web service, you have to press the keys controversy on. Then you have to restart the web servers. So I'm going to use the comment and be X Ah, no one. And in these gays, uh, in this gaze, Okay. In this case, I'm going to use, um different tomatoes in this case, I have toe Okay. In this case, I'm going toe start the web servers. Ah, by using a different metals. Okay, so I'm going to use the comment MPX note moan and then I have to specify the bat. So the file that contains the Web server in this case, the file is server dot there. Yes. Okay. As you can see again, you've seen a different metals to restart de with Satish on. Then I have to heat inter and let's see what happens. Okay, Now you can see the Web server is restarting on now, as you can see, the website what is working on? Um well, now I have toe, um have to go back to the the browser and I'm going to use the others. Look across 3000 slash a b I slash safe chart. Now I heat in there and as you can see, the massage Hello from Rooter Say that Yes, this place ok, which means that the root there is working and I have to mollify the address in this case. I'm going to use the address look across tree House and slash a b I is slash uh real child now I heat interfere now, as you can see, another massage this place Hello from router read dog. Yes. Okay. As you can see, another massage displaced this place Hello from brutal Read the Js, which means that the routers are working. Okay, well, now you know how to how to create help. Toe use routers toe split the application into different files. 6. Make a database with MongoDB: Okay, welcome to another lesson off this tutorial on this lesson. What I want to do is creating that always from a scratch in order to create a database from scratch. What I want to do, East to use a assert it is to use a service that is known as mongo db atlas. So in this case, I'm going to use mongo db Atlas to create the that the race for my application. And well, as you can see on the screen here, I have the link that says a mobile TV Atlas official site. So what I want to do is to is to hit the link manga levy at last official site. Andi will know what you can see. This is the okay. Uh, well, okay, well, it's important to say that among gotv at last, he's a service that offers a free version. Okay, Manga levy Atlas offers a free version off the service, and in this case, I'm going to I'm going to use the free version off mongo db Etlis to create the batteries on well before I can create before I can use the free version off Mangala Devi, I have to create a new user account. So now what you have to do is creating a new user account on. Then you can use the free version off model will be okay. So now create on new user account on. Then you can use the free version off Mangala Devi Etlis and will Ah. Okay. Now I am inside a mongo DB. Okay, this is the website Mongol TV Atlas on. On the left side. Off this green appears a drop down menu or drop down least on. I'm going to open this drop down list, and I'm going to choose the option. New project. Well, and as you can see, this is the webpage that this place on. Now I have to specify the name off off a new project. In this case, the name of the project least chart, chart react. Okay, chart. React is the name off the project on now? What I want to do is to press the button next. Okay. I'm going to press the button. Next on, let's see what happens. Okay, well, now, as you can see, these easy with Beijing that this place on in these web page I have to set permissions for the users off the database. But in this case, I don't want to set permissions for the users. So I just want to escape these parts off the process. Okay? I want to escape this part of the process, so I'm going to press the Bhutan create project. Okay, I'm going to press the button, create project. Andi, let's see what happens. Okay, well, now you can see the city with paged that this place now, in this case, I'm going toe going to create a new cluster. So I'm going to press the button, build a closer, Okay. Here I have a re boot on the Bhutan built a cluster, some going to press a button, build a cluster. Well, now you can see this easy webpage that this place now on the left side, off the screen appears a section that says they start their boosters. So, uh, at the bottom, off the section, they start their boosters. There is a Bhutan that says create a closer. OK, remember that in this case, and I want to use the free version off mongo db Etlis. So I'm going to use the step. Their boosters and I have And now I have to praise the Bhutan. Create a cluster. OK, you have to President, um, create a cluster. Well, now you can see this easy with beige. That that this place And in these with Paige, I have to set the cloud provider. Okay, I have to specify, or I have to select the cloud provider. So in this case, the cloud provider that I'm going to use is Google Cloud Platform. Okay, I select Google Cloud Platform as my cloud providers on day may have toe select the location off the server that stores the batteries. Okay, I have to select the location off the server that stores deliveries. In this case, the location is yoga. And as you can see, the the option. Your work is selected by the fold by fold. So the reason why I chose you was is because three locations you want offers the free tires and then I have to scroll down on Di stepped toe. Um, okay. As I said I am, You seem the free version. As you can see here I am selecting the three. The three the option free forever. Okay, because I am using the free version of Mongol Devi Atlas on. This is the option that I'm using the free version on. Then I have to scroll down. And now I have to specify I think they the name of the cluster. OK, so in this case, a cluster name is, uh, chart up. Okay, chart up is the name of my Gloucester on. Finally, I'm going to press the button. Create cluster. OK, I'm going to president. Don't create cluster at the bottom off these with Bache on. Let's see what happens. Okay? And you can see this is the with page that this place on. As you can see, the cluster is being created by Mongo db Etlis. But these process takes several minutes, so I'm going to escape this part off the process. Okay, Now what you can see, the cluster has already being created by mobile TV address. So now you have to create a new that race as well as a new collection. Well, so I'm going toe. I'm going to press the Bhutan collections. As you can see here I have the Bhutan collections, so I'm going to press the button collections, and, uh, well, I guess this is a never from Mangal dvf less as you can see So I'm going to try again because it seems like Mongo db Atlas. It seems like the website is not working, so I'm going toe. I'm going to refresh these with fish. Okay, Now, after refreshing to be with beige. This is this is the with page that this place okay, as you as soon as you can see here I have these with page on. We're on Well, in these with Paige, I have the Bhutan at my own that okay, I have the Bhutan atthe my own that there. So I'm going to president. Don't have my own that. And now I have to create a new that race. So the name of the little raises chart that race on the name of the collection is charred up settings. Okay, Chart settings is the name of the collection on. Well, it's important to say that the collection is the place. Where are the information will be saved. Okay. The collection is the place where the information will be saved. Now you have to press the button, um, create and as you can see, mongo, DB at last is creating the database as well as the collection. And well, now, as you can see, I capped the collection chart settings on. I also have the that always chart database on. Now I have to head over to the left side off the I. Well, on the left side, off the screen, we have the section Brewster's. So I'm going to select the basic I Sorry, I have to select the option clusters. Okay. On the left side, off the screen appears the option clusters. So I'm going to select the option clusters on now. I'm going to praise the Bhutan connect. Okay? I have to President Ahn connect on. Uh, okay. After pressing, they would don't connect. This is the window that this place and here I have Ah, who tone that says here I have the Bhutan at a different I be address. Okay. I have the Bhutan at a different I be address, so I'm going to press the button a different I p address on then. Ah, here. I have to set the I P address that I'm going to use to establish a connection. Toe batteries. Okay. I have to set the I P address that I'm going to use to establish a connection to mongo DB. In this case, I'm going to use the idea. Raise Ciro the Ciro, the zero. Those serum. Okay, I am using the I p. Address zero 0.0 dot 0.0. Okay, that is the I P address that I'm using on then. And I have to brace the Bhutan as I be address. And now I have to say the I have to say the user name. In this case, a user name is route. And now I have to say a password in this case, the password that I'm going to use these fellow Underscore 89. Okay. Hello? Underscore 89 is the password that I'm going to use on the user name is route. OK? And now I have to praise able don't create mongo db yusor. Okay. I have to press the button, create Mongol users on this is it now? I just said Nope. A new connection is training. Okay, so I have to press the green boots on. Choose a connection, Meadows. Okay. I have to press the button. Choose a connection metal on, then, as you can see this is the window that this place and this window contains three different options. So I'm going to use the option. I have to choose the option, connect your application. OK, I'm going to choose the option. Connect your application on. Well, now you can see here I have the connection strength. The connection string is is what I what I have to use to establish a connection between the application on the database. Okay. The connection is strange. Is juiced to establish a connection between the application on mongo DB. Okay. And here I have the connection of strange. Okay, so now I can close this window on Well, a now you know how toe create how to set up a database from scratch. You seen manga Levy Etlis? 7. Make a connection to MongoDB: Okay, welcome to another lesson of this tutorial on this. Listen, what I want to do is making a connection to the batteries in order to make a connection to the Rays before the step that I have to take is installing a new dependency. So in this case, I want toe in style with abandon. Simone goes so I have toe have to go back to the to the council. Andi. Well, now what I want to do is to navigate to the folder chart, react. Now you can see I am inside before their chart react. Now, what I want to do is installing and you dependency. So I'm going to use the comment npm install. Save on. Then in this case, I want to install you. Abandon Simone whose mongoose? Now I see it in English. And well, it's important to say that among those east dependency that is juiced to make a connection between between the obligation on the database. In this case, mongoose is ISS used to make a connection between the application and manga. Levy on a mongoose is juiced. So safe information to mongo DB as well as reading information from mongo db Okay. Well, now, as you can see, the installation process is complete. So now I have to close the common ground, and I have to get over to the file back as Jason. Well, as you can see, here I am in the back of Jason file. And here I have the section that dependencies in the section dependencies. The mongoose dependency appears on well, and I have toe have to go back to the file server dog. Yes. And now what I want to do is to have a new comment that says connection toe Mongo TV. Okay, I have to add a comment that says connection to manga levy. And now the first step is to be clearly Constand bongos. And I have to I have to set these constant to require among those I know, what I want to do is to use the meadows. Mangoes don't connect, and, well, the metal mongoose does not connect is used to establish a connection between the the application and manga levy on dwell in these methods. I have to a specify one barometers Such parameter eased. The connection is strange. So I have to go back to Mongo TV I'm going toe press the boot. Don't connect. Okay, As you can see here, I have the good don't connect. So I'm going to present. But don't connect. Let's see what happens. As you can see, these window appears on Well, this window contains three different options. The desiccant option is connected. Your application? Well, in this case, I'm going to use the option. Connect your application. Okay? I'm going to use the option. Connect your application. And as you can see, I have here the connection string. So I have to select the connection string. And I thought toe copies calling this connection strength. And then I have to go back to the to the several Js file and I'm going toe. The connection is strange. Like this. Okay. And now what I want to do is to explicate this collection strange into three different into three different parts or or pieces. I want to split these connections strange into several pieces like this. I know. Um, as you can see here I have the placeholder passwords. Okay. Password is a placeholder. So I'm going to remove this place holder, and I'm going to I'm going toe typing the buzzword. In this case, the password is Hello. On the score. 89. Okay, that is the bus work, Andrea member that in this case, the user name is route. OK, so as you can see here, I have the user name route and I have the passport. Hello? On their score. 89. I have to go back to the browser and I'm going toe going to press the Bhutan collections. Okay, here we have the bottom collections. I press the button collections and then see what happens. Um, okay. Now, as you can see, the city was based that this place on according to these with Paige, I have the that always chart batteries. Okay, the name off the race is charred. That raise. So I have to go back to the coat. It I do. Andi, I'm going to remove the that the ways test. Okay, I have to remove the That is best. And I'm going to ask the batteries. Janet, that the base. OK, now, as you can see here I am having the that always chart that race. And now and then when I got to do is to set up two different methods Okay, I'm going toe as the metal mongo start connection the, uh, phone and then I'm going toe ask the parameters a roof and then I have to ask the callback function and, well, things. Callback function requires one barometers on, but I'm at their east error on. Well, it's important to say that these metal is run if something goes wrong when we are making the connection tomography. Okay, If something goes wrong when we are making the connection to mongo DB, then these medals is run on these metals. This place a message to the console that says on a roof, a space on. Then they have to display a narrow parameters. And I have to sit up one more on method. In this case, I'm going to set up the middle Margo's dot connection dote once, and I have to use the parameter open. And now I have to ask the callback function and well, uh, these meadows Iran, if everything is working Okay, so if the connection toe the mongo DB is successful, then these mental these run. Okay. So if the connection to Mangal Levy is successful, then these meadows is run on these methods this place A massage toe, the console that says the connection toe mongo TV. He's working. Okay. The connection to manga Levy is working on. Well, now what I want to do is to test these application. So I have to go back to the console. Andi, I'm going to run a North mourn one more time, but in this case, I'm going to use a different comment. Okay? In this case, I'm going to use a different meadows to run no one. So I'm going to use, um I'm going to use the meadows. I'm going to use the comment and the X No one on then I have toe specify the option. What? And then I kept to specify, um, I have to specify the but to the to the root folder. Okay, so the root folder is represented by that is lash ok dot It slash represents the root folder. Um, the option, the option watch, and then the root folder. Um, this option here, the option watch means that as soon as I make a soon as I modifying the growth, then the application will be updated. Okay? The option watch, um means that as soon as I modify the Goethe, then the obligation will be abated automatically. Okay? And then I have toe. Um Well, uh, the option watch means that note mourn is watching the older files off my application. Okay, The option watch means that no one is watching all the files inside my application. Andi, as soon as I make, As soon as I mollify the growth, then the application will be if they did automatically. Okay, now I think interest. Okay. And now, as you can see here, I have the massage. The connection is to Mangal Levi's working, which means that the connection to Mongo DVD is working. But well, now I have toe toe to more options. OK, According to this massage, I have toe have the option. Use new your l Barson. So I'm going to copy this option, and then I have to back to the growth, and I'm going to add a second parameter. In this case, the second parameter is an object on. I'm going toe based. The option used new u R l Barson. Then I have to go back to the council on. I'm going to us a different option. Okay, I'm going to add a second option in this case, I'm going to copy deception here. I have the option. Use unified topology. So I have to ask the property used unifying apology. Okay, so I have to copy the property, use unified apology. I could be the property. And then I have to go back to the Goethe and I have toe based the second property like piece. So now, as you can see here, I have a second parameters. The sickle parameter is an object on the object contains two different properties. The first property is juiced. You use new You are Albert, sir. On the other property is used. Unified apology. Now I have to go back to the council on as you can see, the application waas updated automatically by Northman. Andi. As you can see, the Web server Waas restarted automatically as well. And now, at the bottom of these console. Um, I have to refer, and I have the message listening at local host 3000 which means the Webster, but is working on. Then I kept the moustache. The connection to mongo DB is working, which means that our application is connected to Mangal Levy and well a Well, now you know how to make a connection. The Mongol TV, Andi. Well, now you know how to establish communication between your application on mongo db. 8. Create the database model: Okay, welcome to another lesson off this tutorial on this lesson. What I want to do is creating a model off the batteries. A model off the res describes the information that will be saved in a manga levy on. Well, in order to create a model off the race, uh, versus first step that I have to take is creating a maybe folder. So I'm going to create any folder. So I have to choose the option in your folder. And in this case, the name of the folder is mothers. Now, I'm going to say, Now, inside these folder models, I'm going to create 11 file. So I have to choose the option you file. And I'm going to say this file as chart settings. Dog. Yes, chance and things that you? Yes, is the name off this file. And now what I want to do is to the clearly constant mongoose on. Um Well, im going to require mangoes. As you can see, I have to require the dependency mongoose, Andi. Um and now I have to declare the constant chart model, and I'm going to set this constant to new mangoes. Uh, no. Sorry. Sorry. I have to declare the constant chart. A schemer. Okay. And now I'm going to say this constant to new Moos, The Eskimo on. Then what? I have to go now on now. Well, now what I have to do is to east to this grave the properties on values that will be saved that will be saved in to Mongolia. Be okay. I have to describe the properties and values that will be saved into Mongo, dearie. So in this case, I have to say, Well, in this case, I have to set the property title. And I'm going to say I'm going to set this property toe wealth. This property is off the dive. A strength on this property is rid wife. So I have to set the the property requires to drew. And they're going to have another property. I'm going toe. The property description on this property is off. The DYP stream on this property is revived as well. Then I'm going to have another property. In this case. I'm going toe the property labels Onda in this case, the property labels is Honore off on the property labels Contains Honore off different strings off text Okay. The property labels contains Honore, uh, off different strains off next. So I'm going to have the other type a stream, then, um, I'm going toe the property colors on the property colors. Contains Honore off the strings off next. So, um, I'm going to ask. Developed the That type is strange as well. On Finally, I'm going toe have the property numbers. Okay on the property numbers convenes on array off different numbers. So I'm going to add the that type number. Well, now, as you can see again, describe beans, the properties and values that will be saved in demography. Me. Then I'm going to use module about exports on. Well, it's important to say that module dot exports is used to export information so that the information is available throughout the application. Okay, module dot exports is just toe export information so that the information or functions are my level truck out the obligation on Well, in this case. But I want to export ease the mental mongo stock modern on Well, these methods Mom goes up model requires two parameters before spot emitters. Is the collection where I want to save the information. Okay. The first parameter is the collection where I want to save the information. So I have to go back to Mongo TV on According to this, with pace, you can see that the name off the collection he's charged settings. Okay, Charter thinks is the name off the collection. So in this case, I'm going toe. I'm going to use chart sitting and well, if you analyze these parameters, you can see that this parameters he's the singular version off the name off the collection . Okay, these parameters is the senior version off the name off the collection. In other words, the first parameters east the name off the collection without the leather s. So I'm going to other comment because this is very important. Otherwise, Thea application want otherwise, and this is very important. If you don't do it his way, thea application won't work. Okay, so I'm going to add a comment that says the first parameters. Most of the the singular version off the name off the collection, the singular version of the name of the collection. Kuma in these case, the name off the collection. He's, uh, chart sittings. Um ah. On their four uh, the barometer uh, most be, um, charred. Said Dini. Ah, without the leather without the leather again without the letter s okay on. Well, well, As you can see, this comment is very large, but well, this is very important. Okay, If you don't do it this way, the application is not going to work. Okay? And will, um okay, so now I have to ask. The second parameters on in this case is a comparator is charged a schemer. Okay, so I have to ask The constant, uh, chard is scheme on Will, uh, this is it. Now, I've just created a model off the batteries and will a model open other ways. Describes thing for the a model of the other races graves, the property, some values that will be saved in two Mongol TV. 9. Code an API ( saving information): Okay. Welcome to another lesson of Victoria on this lesson where I want to Who? He's sitting up my application so that the obligation has the ability to save information into manga levy. So Well, Well, now I have to get over to the vile safe of Vegas. Well, now you can see here a copy file, Save the genius. Well, now what I want to do is to the clearly Constand chart model on what I want to do now is important the model off the database. So I'm going to use the keyboard require I'm going to use the method require. Sorry. And now what I want to do is to specify the bat to the file that contains the model off the database. So I have to like being double dot is slash on, then models, models is the folders on, then his on. Then I have to specify the name of the file. In this case, the name of the file is chart settings, chart settings Just said things the year. Yes. Okay on. Um Okay. Now, as you can see, I am importing the model off the batteries on Now what I want to do is to modify the http mentos that I'm going to use in this case. I have to use the boast medals. Okay, I have to use the boast metals, so I'm going to take being a route dish. Vote boasts route that route their dog post. Okay, I have to use the most medals on Dwell. It's important to say that these http metals is used when we want to save information. Okay. When? When we want to save information. The boast method is just on. Uh okay. Before I go deep. Okay, well, before I continue, I have to head over to the file server load genius. I will. Now, as you can see, I am inside the file server dog here. Yes, and will. And okay, now what I want to do east to set up my web servers so that it can parse on the information that is coming from the web browser. Okay, I want to set up my web server so that it can parse the information that comes from the browser. So in other, in order to eat, what I have to do is to have a comment that says, parsing the information that comes from the Web browser. Okay, parsing the information that comes from the web browser. Okay on. Well, in order to parse the information that comes from the web browser, I have to ask this growth. I have to use this growth apple use on. Then I have to use the metals Express the jays. Okay. Andi will now the Web server fast the ability toe parse the in form that parse the information that is coming from the Web browser atyou can see. I am using the metal expressed on Jason. Okay, on now I have, like, I have to go back to the file safe for you? Yes. On Before I continue, I have to declare the constant input on this constant input. East said toe, request the body. And, well, it's important to say that the property request the body contains the information that is coming from the West browser. Okay, the property request, though the body contains the information that is coming from the web browser. So I'm going to have a comment that says saving the information, saving the information that comes from the with ah browser. Okay. Saving the information that comes from the Web browser on um Okay, now the next step is creating a document. So I'm going to the clerk a constant that says new documents on. In order to create a new document I have toe, I have to use sickly worth new and then moan moan and then that I have to use chart model like this, okay. And well, it's important to say that a document is basically a javascript object that we will be saved into Mongolia. Be okay. I document JavaScript object that will be saved in a manga levy. Okay, so now I have to have the property title on the property title. He said, Toe input boat title. Now I have to have the property description description on the property description. He said toe input the description. And then I have to have the property labels on the property labels is said toe input labels . And then I have toe. I have to ask the property colors on the property colors. He said toe input. The colors have to make up to a three property numbers on the property numbers. He said to eat, put the numbers on well, and as you can see I just created the JavaScript object. Well, I just set up the JavaScript object. Very want to save in a mongo db on now. I have toe. I have to use the meadows. I have to save the information into manga levy. So I have to use the method of new document that safe. And these Smith requires call. The function on this cold from shown has two parameters. Every word on doc. But in this case, I'm going to use the parameters Eruv. Okay on. Well, I'm going to use I'm going to have this block on. I have toe ask the parameter error on. Well, this if block on verifies the value off the parameters. A roof. Okay, so, um, if a never takes place when we are saving the information, then these If love is Ron. Okay. If an error takes place when we are saving the information, then this if love is run. So I'm going to have a comment that says problems. Ah pro blames when saving the information problems when served, saving the information on what you want to grow in the in the case. Okay. When something goes brown, a massage, this place to the council that says error the space, and then the error parameters, this place. And then I want to send a response to the crypto, the browser or client that contains Yes, that was number five countries. And then I have to use the metal. Jason. Okay, now I have to Ah, what he wants to send to the browser is a javascript object on. Um okay, What it wants to send to the browser as a response is a javascript object on such JavaScript object object Convincing property may sesh on the property. Miss Ash, Uh, contains the next, um, problems problems when saving the information problems we're saving the information on, then, uh, what I want to do East toe, have one another property. I'm going to use the properties success on. I'm going to say this property toe for us, okay? And I have to ask a nails block on. Well, it's important to say that these else block is run if something is, if everything is working, okay. So if everything is working, these else block is just sorry If everything is working, then these else block is run. So I'm going to other Come in a comment that says every things thes warping everything is working on now what I want to do is to copy this code. I have to go beauties coat, and then I have to base the gold like this on. Now I'm going to send a message to the council that says the chart teacher say things. The church said things were Safed OK on, then I have to modify. Yes, that was number in this case, I'm going to use this. That was number 200 on. I have to qualify the values of the properties. In this case, they probably the value of the property massage is the chart sittings. We're Safed, OK? And then I have to set the property success toe true on. Well, before I finish, I have to remove these line of golf. Okay. I have to remove these line of gold that I have here because I don't need thes line off goals anymore, okay? And will, um well, now, as you can see, uh, the obligation because the ability to save information in a manga levy on Well, it's important to say that he sees this. This is a This is a very small A B. I Okay, what we're creating right now is a maybe I Okay, so the seas are very small on a very simple A B. I both. Well, now you know how to create an A B. I So, uh okay. So way have just created on a small idea on. Well, as you can see these a p I is able to save information in tow, Mongol leader. 10. Testing API ( saving information): Okay, welcome to another lesson off this tutorial on this race on what I want to do is testing the A p I that I created on the previous Listen. Well, as you can see here on the screen appears, um, appears to be at the a p I that I created on the previews lesson, and we'll thes 80. I is juiced to save information into manga Levy. In other words, these root handler can be used to save information into mongo db on. Well, what I want to now east this thing Bees functionality. So well, I have toe go back toe. Well, I'm now, as you can see here now, as you can see. Well, at another protest the FBI, I have to use a program that is known as a rest client. Um, arrest client is a program that is juiced to best 80 IES. In this case, I'm going to use the program Advanced raised client in order to test the A B I and well, as you can see here on the screen appears Arlene, that says advanced raced client. Well, I aside, as you can see as well in this case, I'm going to use the program. Advanced rest client to test the FBI. So I'm going toe. I'm going to hit the league. That says advanced rest. Client rest client. Well, now you can see here I have the official website off the program Advanced Raced client. And, well, as I said, this program is the one that I'm going to use for testing the FBI. And, Well, in order to use this program, you have to get the in Styler on. Once you get the installer, you can install this program on. We'll have installation. Process is very easy, Andi. That's the reason why I am. I am not going to cover how to install this program. Okay, because the installation process is very, very C. You just have to press the boot on download on. Then you get the stylish. Once you get things tellers you can install this program on the installation process is very easy. Okay, So OK, so now what I want to do east toe, I have toe. I have to get over today to a console. Andi, I'm going to run the web server, so I'm going to use the comment and the eggs. No, one, and then I have to use the Black Watch. And then I have toe a specify the root folder. In this case, the root folder is specified by these dogs on it, slash They don't and slash represent the root folder and will now its interest. Well, now you can see it Seems like I have a never Miss Ash on. Well, according toe, the message the error is found in the property description. Okay, According to the several massage, the error is found in the property description inside the file. Safety off gauges. So I have to head over to the file. Safe dog? Yes, on. Well, that you can see here. I have the property description on the property description contains a Say my cool. Okay, the property description contains I say, my colon. So I'm going to remove the semi Gulan, and I'm going to place a coma. Okay? I place a comma. Andi, Um, I say the changes and I have to go back today to the council on Well, what I want to do is restarting the web servers. So, um okay, I'm going toe. I'm going to stop the Web server by pressing the keys controversy. And then I have to restart the service one more time. And well, now, as you can see, the Web server is working on Dwell. Now I can close the gun Brunt on. They have to get over to the program. Advanced raced client on. Well, what I would do now East toe is to use the cement of boast. So here I have a drop down list. So I'm going to select the option post. Remember that the post method is just to say information into the batteries on. Then I have to specify the address. In this case, the address is local. Post 3000 is lash A B I slash Say charge on. Well, as you can see here, I have the average that I'm going to use. Look at cost 3000 slash FBI slash safe chart. That is the address that I'm going to use. And I have two other Heather in this case. I'm going to ask Heather content type and I'm going to set the skaters toe Abnegation is lashed. Jason and I have toes celebrity up. I have to select the option body. And now what? I have to do is creating the JavaScript object that I want to say into the tomato TV. So, as you can see, I have to use a Bayer off races like this. And I have toe Adlai property. Daido and I'm going to set the property tighter toe, um, panel sales annual sales. And then I have to ask the property destruction, and I'm going to set this property description toe, um, sales in millions off dollars. Okay, Sales in many millions of dollars on. Now I have to ask another property. I have to add the property labels, and it is gazing property labels. Contains Honore on such a rainy contains three different items. Any foresight thing is Microsoft. Uh, okay, well, in this case, the second sight empties, um is able on. The third item is oracle and then they have to work on other property the property colors on. In this case, the property colors contains Honore Honore off three different identities as well on Well, the foresight them is green. The second item is orange and returned item is a blue and we'll finally I'm going to add Thebe property numbers. Andi. Well, in this case, the property numbers contains Honore on these Air raid contains three different numbers. A The first number is 450. These number corresponds to Microsoft. The second number is 700 on these number corresponds to April. On the third number is Oracle on being the third number is 350 corresponds toe oracle on. Well, now, as you can see, I just created the javascript object that we want to save into the batteries. So now we have to praise the good on sent I president consent and let's see what happens. And well, now if I scroll down if I scroll down, you can see that here I have the status number 200 on the status number took to country. It means that the information waas saved successfully on now at the bottom of this window. I have an object on the subject Casto properties. If the subject has the property message on the property message contains the next. The charge said things were saved, which means that the information waas safe into manga levy successfully. Okay. And so now I have toe, I want to save another object. So in this case, uh, the new title is, uh, my favor. Read my favorite desserts, and then I have to have a descriptions. Um, number of times number of dimes number off times. I have these desserts. Uh, last week. Okay. Number of the number of times I had these desserts last week. Okay, Now, in this case before the certainties juggling the second dessert is I scream. I screamed on deter. This deterred the third. He's, um mm. And in this case, deterred the cert is cake. Now I have toe, I'm going to leave these colors. Okay? I'm going to use the same colors as in the brave use object on now. Three first number will be, uh then the seconds number will be 12th on the third number is 15. Okay, now I have toe have through praise. They don't send, so I praise Able don't seem to one more time. And if you scroll down, you can see that again. I have this. That is number two. Contract on. Then I have at the bottom of this window. I have a new object on this object contains a property. Miss Ash on the property moustache is said to the chart settings were saved, which means that the information was saved in tomato TV successfully on well, a Now, as you can see, um, the application past the ability to save information in Mongolia be. 11. Code an API ( read all information ): Okay, Welcome to another lesson off this tutorial on this lesson. What I want to do. Is it enough my application so that it can read old information from the batteries on? Well, in order to eat, the first step that I have to take is to the gladly Constand chart model on. I'm going to set this constant toe require. And then I have to specify the bat toe the file that contains the model off the batteries. In this case, the path to the file that contains the moving off the other ways is global dot It slash then models in this case more than is the folder is lash on. Then the name of the file is chart settings, Doctor. Yes, I say the changes on Well, now, As you can see, I am important. The model off the batteries. No, what I have to do is tow. Well, as you can see here I have the route tender and where where Where I want when I want to do is to mollify the address off these routes. Candor. In this case, the new address is is lash hole and, well, the reason why I am using this address is because I want to get all the information from mongo DB. Okay. I want to get all the information from mongo DB. And now I have to use the metals chart model. Don't find on these middles requires accord. A function on this callback function has two parameters. The Parliament that ever and environment there're docks. And well, it's important to say that the parameter books contains all the information that we get from the batteries again. This is very important. The parameter docks contains all the information that we get from the batteries on the perimeter. Error contains an error message. If something goes wrong and will know what I have to do is tow Add Anethe block on these. If Block is going to verify the value off the ever parameters Well, I am this. If block will be a run if something goes wrong, Okay. Again, this is very important. This East block will be run if something goes wrong. Okay, if we have problems. Oh, okay. If we have problems when ok, if the application has problems when we g r reading the information, then these if block will be run. Okay, so again if something goes wrong. This if Block is run. So I'm going to other comment that says, uh, problems problems when reading the information, okay, problems when reading the information and where I want to do is to invest to look a message to the council that says, um, a roof, this base and then I have toe bring the barometer's a roof. Okay? And now what I want to do is to send a response to the browser or to the gradient. So I have to use the metal response. The statues in this case is that was number that I'm going to use these 500 and then I have to use the metal Jason on now. Well, what I want to send to the Web browser or to the client is an object on the object. Contains two properties. The first property is necessary. Sh On this property is said toe problems when reading the information problems when reading the information. Then I have to ask the property success on I'm going to set this property falls and well. And now what I want to do is to ask the else book on. Well, it's important to say that thesis tells Block is run if everything is working. Okay. So if everything is working, then this by else block is Ron. I'm going to add a comment that says everything is working and, well, you know, what I have to do is to select this growth, and I'm going to copy the code like this, and then I have to baste the cold like this. And then I have toe display a message to liberate to the council that says the information who s read successfully. Okay, the information was spread successfully. Okay, Hold information. All the information was read successfully. Is the moustache that this place to the council. But in this case, I'm going to use this. That was number 200 on. Well, now I have to send a response to the Web browser or to the client. And Well, um, in this case, the response that I sent to the web browser or to the client on contains the property dogs documents on. Well, I'm going to set these property to the perimeter dogs. Okay. So you can see I am sending a response to the browser that contains the property documents on the property documents is said toe the barometer docks. Remember that the parameter docks contains all the information that we get from the batteries. Okay. Docks contains all the information that we get from Mongolia. Me on. Then I'm going to say the property success to True on. Well, finally, before I finish, I have to remove these line of gold right here because I'm a longer need these line of gold . Okay, so I have to remove these line of growth on. Finally, I'm going to say the changes. Well, now, as you can see, the application has the ability to read all the information from the lottery's 12. Testing API ( read all information ): Okay, welcome to another lesson. Office tutorials on these. Listen, what I want to do is testing, uh, the A b I that I created on the previews lesson on Dwell on the previous lesson I created these root hander. Well, it's important to say that these root hander cast the ability to read all the information from the batteries. Okay, I know. In other words, on the previous listen, I created on a B I that is able to read all the information from the batteries on. Well, what I want to do now is testing these functionality on. Well, in order to do it, I have to open the program. Advanced raised client on. Um Okay, I'm going to I'm going to use in this case, I'm going to use the yet the yet medals, remember that the get medals is juiced when we when we want to get information from the batteries. Okay. So every time we want to get information from the batteries, then we have to use the get medals on. They may have to specify the address. In this case, he oversees local host 3000 slash a b I slash re charge. It's last hole on. Well, now you can see this is the address that I'm using. Local cost 3000 slash a b I slash reach art slash old. That is the address that I'm using. And, um Okay, well, and now what I have to do is to press the wood on synth I have to President, Don't send on. Let's see what happens on. Well, if I scroll down, you can see that here I have on instead of storm on instead of number off 200 which means that everything is working. And then if I continue scrolling down, you can see that here I have the property documents on the property documents contains Honore. Wait. Two items. Okay. The property documents contains Honore with two different items on the first item. Contains thes labels Microsoft, April and Oracle on on the first item. Contains these numbers 457 103 150 on. Finally. The first like them, contains the title property equal to annual sales. Andi, it contains the description property equal to sales in millions of dollars. Well, now, if I continue is scrolling down, you can see that here I have the second item off the array. On the second item. Conveyance steal the labels chocolate ice cream and cake. Andi, as well as these numbers 10 12 and 15 on these second item convince the the property title said Toe my favorite desserts on the description number of times I had these desserts last week on Finally, at the bottom of these I have the property success on the property. Success is set to true. This means that the a b I fast the ability to read all the information that is saved into mobile TV. And, well, I guess this is it for this lesson. On the next lesson, I will continue working on this application. 13. Create an API ( read specific information): Welcome to another lesson off this tutorial on this lesson where I went to a low is sitting up my application so that it can read a specific information from the batteries on. Well, in order to do it, the first state that I have to take is creating a new route hander. So I'm going to use the cold. Routers don't get on. Well, in this case, the others that I'm going to use east slash, and then I have to set up the parameters chart idee. And then they have toe. I have to add the callback function, and it is getting callback function requires two parameters. The parameters requests on the perimeter response. Uh, well, now I have to. Well, if I scroll, it's girl off the screen. You can see that the constant chart model, The constant chart model contains the model off the book the latter ways. Okay, The constant. The constant chart mobile contains the model off the batteries and with, um, in this case, I'm going to use the metal chart model. Don't find one on then. These thes meant off the middle. Find one requires two parameters. Uh, the first parliament there is an object on these object is used to find on this busy fiqh object. Barest Safed into manga Levy. Okay, The first parameter is just to find on a specific JavaScript object that is saved into manga levy. And in this case, I'm going to use the property Ivy, underscore idea. And I'm going to send this property too. Request the harems, The, um, chart Ivy, and we'll basically, these parameters means that I want to get I JavaScript object whose property underscore Ivy equals the barometer. Charred ivy. Okay, again, I'm going to repeat these because it is very important. Uh, the first parameter means that I want to get from the other ways ajumma screamed Object whose property? Ivy equals the barometer. Chart ivy. And we'll probably you guys are one the range Where is the property? Underscore? Ivy or per probably you guys don't understand. Um, what is that? They property underscore ivy on. Well, in order to understand the baram the property underscore ivy. I have to go back to Mongo TV. Well, as you can see here I am in manga TV on Well, if you analyze the if you analyze the well, it's so far. So far, I have two different JavaScript objects saved into mongo DB. Okay. I have two different JavaScript objects saved into mongo db On If you analyze the first object, you can see that the first object contains the property. Underscore ivy. The property underscore. Ivy is creative by manga Levy. Okay, automatically the property and the score. Ideas created by Mangal will be automatically on. This property is just toe. Identify the object. Okay. Andi, if you're organized the second JavaScript object I have here, you can see that these object also contains the property on their score. Ivy on this property underscore. I've iwas created by mongo db l dramatically on. Well, this property is just toe. Identify the JavaScript object, okay? And will. And that's the reason why I'm using here. The property underscored Heidi on. I'm using this property to find on a specific JavaScript object. Ah, inside manga. Levy. Okay, I'm using this property. Toe toe. Get on. A specific JavaScript object for a manga tv. Okay, Now, the second parameter is a callback function on, um well at this called a function has two parameters. The parliament of terror and the parameter doc on. Well, it's important to say that the parameter the perimeter look contains the information that we get from mongo DB on the parameter a roof contains and never miss Ash if something goes brown Okay, again, The parameter dog contains the information that we get for among go TV on the perimeter Ahrar contains. And the Ramesh if something goes wrong, OK? And then what I have to do is tow. Have to add a new block on this. If block is going to verify the value off the error parameters, OK, This if block is going toe, verify the value off the other parameters. This if block will be run if something goes wrong. Okay, I'm going to add a comment that said that says something when wrong. Okay, so if something goes wrong, these if block is run on bond. Now, what I have to do is to select this coat and I'm going to copy these goes on now. I'm I have toe based the growth like this on. Well, if something goes wrong, I want to display a message to the console that says error on then Thierer parameter is this place. And if something goes wrong. I want to send a response to the client on such respond. Such response contains is that is longer. 500 on the response contains an object on the object Contains two properties. The first properties message on the content off the property massage is problems when really problems when reading the chart Sendings OK prob problems when reading the charts settings on Then I have to use. I have to ask the property success and the property success is said to force. Then I'm going to use the else block. Andi s block is run If everything is working okay. So if everything is working or if if everything is working, then the else block is run. I'm going to add a comment that says everything. Every beans thes working. OK, OK. And I have to scroll up on. I'm going to copy this code. I'm going to select these goals and then I have to copy this gold on. Finally, I'm going toe based the gold like this on Well, if everything is working, I want to display a message to the consul that says, uh, the chart settings. Reacher said things where great successfully okay. If everything is working, I want to display a message doing I want to display a message to the council that says feature settings were read, were read successfully, and then they have to send our response to the glad and and the response contains. Yes, that was number off 200 on, uh, then the response contains a JavaScript object, and the JavaScript object contains the property documents on the property documents. Uh, the property documents contains. He said toe the barometer, doc. Okay, remember that at the barometer, Doc contains the information that we get from mongo DB. Okay, so in this case, the property documents he set toe the parameter doc on then the property success. He said the troop and well, now, as you can see, the application has the ability toe read specific information from the database. But before I finish, I have toe open the commons browned and will, as you can see, uh, as you can see, the the application waas they automatically by Northman. Okay. Remember, remember that no one who dates the application automatically. So every time I modify the cause, then no more hope dates back. The application automatically on these means that the Web server is restarted. Okay, Many times, actually. Okay. So, as you can see, the application has been restarted at the application. Has Bean update that many times? Because every time I modify the goals, the application is updated automatically by note. Morning. Okay, that's the reason why the Web server east restarted many times. Okay. And will, um it seems like everything is working. So, um okay, it's it seems like everything is working so well on the next lesson. Ah, yes. Okay. Yes. I said it seems everything everything is working on. Well, on the next listen, I'm going toe best thes functionality. 14. Testing API ( read specific information ): Okay. Welcome toe. Another lesson off this tutorial on these lesson. What I want to do is testing the a b I that I created on the previous listen on the bridges . Listen, I created thes route candor on this route. Handlers, uh, east able to read a specific information from mobility on. Well, in order to read a specific information from Mongolia be I have to provide the i d off the javascript object. But I want to get from the notary's on. Well, in order to test these functionality, I have to open the program. Advanced Raced client on will. Now, as you can see here, Rick of, um here, here, I thought all the objects that I say that are saved into manga levy, as you can see here, Erica, the be first object that is saved into manga levy and well below I have three seconds. Javascript object. Barest saved into mongo TV. In other words. All right, Uh, he right up all the javascript objects, the rice that are saved into manga levy on. Well, what I want to do now is toe. I'm going to copy these. I d. Well, uh, you can see This is one of the JavaScript objects on. Well, this object contains the labels Microsoft Able and Oracle. Okay on. Well, if you analyze this object, you can see that this object fast on I d Ok, So what I want to do is to copy this I d on, then. Where I come to do is very simple. I just have to tow mollify the address. Okay. In this case, I'm going to use the address. Local Khowst 3000 slash a b i slash wreath chart slash. And then I have toe based the ivy off the JavaScript object that I want to get from mongo db. So I have based the I d like peace and well, now you can see here I have the ivy off the javascript object that I want to get from Mangal TV. Well, now I'm going toe are sorry. Before I continue, I have to open the comments brought on. I'm going to run through web service, So I have to use the comment N p x no one and then I have to use the flat. Watch on then I have to specify the root folder now I heat entered and let's see what happens. Well, now you can see the Web server is working on Well, okay, now, as you can see, the Web server is working. So now I have to close the comments prompt, and I have toe, I'm going to press the Bhutan sent. Okay, I have to. President. Don't send and let's see what happens and will, um, as you can see, if I scroll down, you can see that Erica is that was number two countries. This means that everything is working. Now. If I continue scrolling down, you can see that here I have only one jabber screamed object. Okay, um, as you can see here, a cup as unique Jabba, I screamed object on these unique JavaScript object contains the i d that I used in the U R l address. Okay, as you can see, these jobs, this unique javascript object object contains the ivy that I used Ah, inside the u r l address. Okay. This means that the application has the ability to read a specific information from Mongo TV. But in order to in order to read a specific information, I have to provide the ivy off the Java screamed object that I want to get from the batteries. And, well, as you can see I have are only one JavaScript object. This JavaScript object contains the labels Microsoft Able and Oracle as well as the title. I'm a sales and the description sales in millions of dollars and then at the bottom of this object I have. I have the property success on the property. Success is set to true and well now, as you know, as you can see, Thea Application has the ability to read a specific information from Mangal Levy. 15. Install dependencies for React to work: Okay, welcome to another lesson of this tutorial on this lesson. What I want to do is, um is setting up a react application on Will s. So far, I've created I I've created, uh, on maybe I as well as the database off the obligation. But now what I want to do is to create the user, eat their face on. Well, in order to create the user interface, I have to use react. And before you seen react, I have to set up react on. Well, what I want to do now is setting up react from a scratch on Well, the first step that I have to take east to head over to the council on, I have to stop the with service. So I have to press the geese controversy in order to stop the Web servers. Okay, I have to press the keys controversy. The Northern was doubly web selfish and well, now, as you can see, the Web server is not working, and I have to install the dependency with back as well as with Maxie Ally. So I'm going to ruin the comment. NPM east safe this and then with back and with back C l a And now I heat I hit. Enter on. Well, now, as you can see, the installation process is complete. So now we have to install, uh, two more dependencies. I'm going to install React as well as react. Um, so I have to use the comment and b m in style. And then I have to use safe on then react. I have to install the dependency react as well as react down. Now I hit. Enter on. Well, now you can see the installation process is complete. So now I have to close the console. And if I open the file backers Jason, you can see that here I have the section dependencies on the section dependencies convenes in this section the section dependencies, the react dependency as well as the react. Um, the pendency appear okay on, then below I have the section, their dependencies. And here I have dependencies with back as well as with Banksy. Ally on. Well, and I have to head over to the console and I'm going toe in style. I'm going to install five more dependencies, so I have to use a common and B m in style save death. And then in this case, I'm going to install the dependency, uh, bar bell and core on dependency Babil Seelye on then dependency veil. And I only feel and then I'm going to instead of dependency. Bobtail slash Ah Araba Bayliss slash But a sit react on a robot will slash place said end. Okay, As you can see, I am installing five different dependencies Babble core babbles Eli Bab el Bulli field Andi babble Brissett react And finally, barbell press said end Okay on dwell. And now I have toe have to heat. They don't have to press. I have to heat interest. Onda, Let's see what happens. Okay, well, now, as you can see, the installation process is complete. So no if I closed the console and if I get over to the value of Bacchus Jason, you can see that here I have the section that dependencies on. Inside the section appear five different A beard, the barrel dependencies. Here I have Burrell, see Alli bell core Probably feel mother percent end as well as family, repressive react. And then I have toe. I have to go back to the council on. Um Okay, I'm going to install the dependency. Okay, I have to lose. I have to use the comment NPM install safe left on. In this case, I'm going to install the dependency bar bell polish. So I have to hit. Enter on. Well, now you can see the installation process complete. So now if I go back to the file Pakis. Jason, you can see that. Here I have the dependencies section on inside the section. I have the gavel loader dependency. Okay, here I have even lower dependency. And well, I have to go back to the console on. I'm going to install two more dependencies. So I'm going to use the comment in the M instead. Safe this. And in this case, I'm going toe instead of dependency clean with back brooking. Andi, I'm going to instead of another dependency. That's easy to bending C html with back cloaking. Okay, Andi, I will. Now I have toe have to heat have entered and let's see what happens on Well and now, As you can see, the installation process is complete If I close the comment bronze and if I go back to the to the because Jason file. Um Okay. if I go back to the back of Jason file here in the section that dependencies. Ah, beer boat. The dependency, Uh, clean with back blogging as well as a dependency html with back blowing. OK. And, um and we'll hear have here have both dependencies. I'm finally I have toe. I have to go back to the common ground and I'm going to install two more dependencies. Okay, I have to run the comment NPM install safe that and then in this case, I'm going to install dependencies. Uh, I'm going to install the dependencies CSS, Lola her as well as a style lower. Okay, on. Dwell on before I continue. It's important to say that safe death is black and safe on this black thief. Lack safe. This means that the dependencies will be used Onley during the development process. Okay, again, the flak saved. Death means that these dependencies will be used only during the development process. Okay, and we'll a Now I have toe. I have toe Pete in dish on. Let's see what happens. Okay, well, now you can see the installation process is complete. So now I can close the comment browned on, um Well, if I If I opened the fire back as Jason, you can see that here I have the section that dependencies and will, um okay, as you can see here I have the pregnancy style loader on. Ah, both these dependency. I have the dependency CSS loader. And well, before I finish this lesson, I have to say that these dependencies are reduced Onley during the development process. Okay, Again, it's important to say that all these dependencies are just Onley during the development process. And, uh, that's the reason why these dependencies are blazed inside the section Beth Dependencies on . Well, I guess this is it for this lesson on the next Listen, I will. It's start sitting up, react from scratch. 16. Setting up React from scratch: Okay. Welcome toe. Another lesson of this tutorial on this lesson. What I want to do is setting up a react application and will, uh the first step in orderto set up a react application is to create a new file. So in this case, I'm going to choose the option New file. And now we have toe save this file. As with back. Don't. Comfy dog. Yes, Andi. Now I have to create a new folder. So in this case, I'm going to select the option. New folder on the name of this folder is source Andi. Well, as you can see, I am inside the file with back without conflict. Yes, on. Well, what I want to now is to the clearly constant back, and I'm going to require the bad dependency. And well, now I have to use a module dog exports. Remember that module dot exports. It's just remember that module dot exports is just to export information so that the information is available throughout the application on. Well, what I want to export is on object. A javascript object that contains the computer, the configuration off the reactor application. In this case, I'm going to say the property mouth. Well, im going toe after the property mode on the property mode is set to development they love commends on. But now I have to specify the entry property and in this case, the entry property. Um, in this case, the entry property. Um, Okay, well, the entry proper. The entry property contains the bat toe, the file that contains the react application. Okay, on Well, at the first system that I have to take east toe east to set up or to create a name for my react application. In this case, the name off my react application is, um my up my up is the name off my react application on then I have toe specify the pat. So the file that contains my react application. So I have to take being about it slash that slash represents the root folder on. Then I have to specify I have to set the source folders on. Then I have toe specify the name of the file that contains their react application. In this case, the file is index. Yeah, yes, on. Well, now, now, as you can see here I have the source folder. So I'm going to right click over the source for over the source folder on I'm going to select the I'm going to choose the option you file and I'm going to Maine this file as indexed over the ages. Now, as you can see, the source folders contains the file index dot Yes on. Well, the file index dot Js is the file that contains my react application. Okay, so I have to go back today to the West Bank of the conflict adult JDS file and then I have toe as the property a module more jewell. And then, uh, this property contains an object on the subject. Contains the property rules. Andi. Well, this object contains Sorry. These property the property rules contains, um contains on a race. Sorry. This property rules contains in a rain on this array contains one object. Andi, In this case, this object contains the property test on this property test contains a regular expression . So in this case, the regular expression is just toe find files that have the JavaScript extension as well as the judges. Ex extension. Okay, gave this is more important. These regular expression is used to find files that contains that that contained the Java screamed extension. OK, In other words, thes regular expression is used to find files that contain the Js extension as well as the genius six extension. And once you have the ones you once with back finds the JavaScript files, then with bad is going to use the Bab el loaders. Okay, brother, you guys are wondering what is with the loader on? Well, babble low. There is a program that translates the react growth into Java screen growth. Okay, this is very important. But loader is a dependency that translates the react growth. Indu java screamed gold. In other words, Bible loader east. A translator, a translator that translates react goeth into JavaScript gold. Okay, and now I'm going toe have the three property output output and well, now, as you can see, these output property contains an object on this object. Contains the property filing on the property. Find name contains the name off the file that contains the obligation. Okay, so in this case, the name of the file that contains the application he's a name about Well, remember, it's it's important to say that name is a placeholder. Okay, name is a placeholder on this place. Holder will be replaced but will be revealing the name. This place holder He will be replaced. We'd the worth my app. Okay. As you can see here I have the worth. My app on the world My app will be placed Ah, we will be placed here. Okay. Okay. The name placeholder The name placeholder will be replaced. Wheat the worth my app. Okay. The name placeholder will be replaced with the world. My app Okay on then I have to ask the world dot google dot Here Yes. Okay. So probably you guys are wondering what? What? What is the meaning off these off these texts? Well, it's important to say that they react cold will be will be placed inside the file index top guests Okay. The react cold will be placed inside the file index Tokyo Yes, on Then the growth is taken by with back on then with back uses, barrel loader translates the react goeth into JavaScript growth. Andi, finally there is suiting JavaScript growth. He's saved into the file. My APP bought window. Doctor? Yes. Okay. Again. I have to repeat this index topped. Yeah, I guess the file index off the against contains the react goals, then with back takes the react growth and uses by the loader to translate the react goat into JavaScript. Growth on finally the resulting JavaScript Goethe he saved into them into the file. My app. The bundle dog. Yes. Okay, on. Uh, now we have to specify, but, um okay, uh, here, I have to say the the back. So the file that sorry here, I have to said they bad toe the folder that well, a store. The application, OK, on the property back contains the bad. So the folder that stores the obligation. Okay, so in this case, I'm going to use the method of batter the joint to specify the path toe the folder that that stores the the resulting JavaScript gold on. Um, andi, I have to use of your name. And then in this case, I'm going to use the public folders to his door. They're resulting jab. I screamed. Go. Okay, I have to repeat this because Okay, I'm going to repeat all of these, okay? The index dot tickets file contains the react application, then with back takes the react gold and uses with back low there to translate the react goes into JavaScript gold on then And finally the resulting JavaScript. Goethe. He's saved, uh, into the file. My abdo dwindled off Vegas on Finally, the file. My Abdolvahed bundle dog, I guess, is placed inside the folder pulling. Okay, The folder public contains the final javascript gold. OK, In other words, the folder public contains the JavaScript growth that will be sent to the web browser. Okay, The bullet folder contains the JavaScript gold that will be sent to the web browser. Okay, on, then I have to use the property book, but in this case, I'm going to set this property toe. Uh, do is lash okay on? Um Well, I guess this is it for this lesson. On the next lesson, I will continue working on these configuration file. 17. Make your first web application with React: Okay, Welcome to another lesson off this tutorial on these lesson. What I want to go is continue sitting up my react application. Okay, So Well. And now what I want to do is tow east to set up. I want toe asked toe new. I want toe went to use two different dependencies inside these configuration file. Okay, so I'm going to the clearly constant I'm going to the clearly constant clean. Well, it's important to say that here I am using braces. Okay, this is very important. Here I am. You seen racist? I'm inside these races. I'm going toe. I'm going to type in a clean. Okay. Okay. Well, as you can see, here I am. You've seen graces on inside these great braces. I am going to I am going to take being clean with back blowing. And then I have to set this constant toe require, uh, green with back clean with bag looking okay. And then I'm going to live another constant. I'm going to the clearly constand h t a male with back html with back plugging on, I'm going to set this constant to require html with back brooding. Okay, and we'll askew can see. I am using two different dependencies clean with back protein as well as HTML With back looking. It's important to say that clean with back booking is a dependency that removes all the files from the public folders every time with back is wrong. OK, I have to repeat these because this is very important. The dependency clean with back looking the dependency clean with back plugging removes all the files from the public folders every time. Um, with back is wrong. OK, The green, with the slogan removes all the files from the public folders every time with back is run. Okay, Onda. Now what I have to do is to add the property, uh, blue jeans, I'm going toe. I'm going toe on empty array. And then I kept to set up the the West back the Dane with back blowing. So I'm going to use the G word new on. Then I had to create one instance off the clean with approving and then I used I have a coma and then I have to set up the html with back looking, so I have to create one instance off. The HTML was back doing? Um, these HTML with uploading requires 33 properties. The 1st 1 is title, and I'm going to set the title toe. Um, chart creators charge generator charge Generator is a Daido on. Then I have toe set a template in this case. Well, the property game played, uh, is used toe the property template is used toe. Specify the HTML template that I'm going to use to render the react application. Okay, again, on the property template contains the HTML template that I'm going to use to bring the two renders the react application. OK, And in this case, evidently I have to specify the but the template. So the but he stopped slash on then source. And then, uh, the name of the file Easton Blade does a year? Yes. OK. And finally, I have to specify, defy the file name property on the file name. Property contains the name off the HTML file where the react application will be rendered. Okay, again, the file name property contains contains the name off the HTML file that will be used to render the react application. Okay, In this case, the HTML file will be in the name of the file will be in extort html on will. Um Okay. Now, before I continue, I have to go back to the council on now. I have to a stop the Web server. So I have to press the keys controversy to stop the web servers I pressed the keys controversy on. Then I have to install one more dependency. So I'm going to run the common and be him instead. Safe on in this case, I'm going to install the dependency. A Yes. Okay, now I keep interest on. Let's see what happens. Okay, well, now you can see through the installation process is complete on well before I continue. It's important to say that that age, I guess, is a dependency. A judge is is a dependency that is used toe and beat JavaScript growth in tow. Html Goethe. Okay. A judge's is a dependency that is just toe embiid. JavaScript goes into html. Goethe. Okay, so now I have to go back today. I have to go. I have to get over. Sorry to the source folder on I'm going to right click over the source folder and I'm going to select the option. Um, new file and I'm going to say this file as, uh then played the eight year Yes, Okay, template dot A Yes. On then. Here. I'm going to create a very basic HTML markup. I remember that. These, um these file is a template. Okay. On Deasy's and HTML template that will be used to render the react obligation. Okay, on now I have toe a thief. I believe that on these deep stuff contains the ivy route. OK, Onda, Then I have toe Asai said Asia. Guess he's isa dependency. That is just toe beat. JavaScript growth in tow, html code. So in this case, but I want to do is tow indeed. JavaScript growth in tow, the html growth. So I have to use these same tax right here at the syntax is a guest syntax. Okay, again, this Intacs right here is against syntax. So I'm going to be in HD milk with back ruegen. The options those tighter okay on. Well, I'm well, probably you guys are wondering why I am using these coat. Well, they go to HTML with back blowing the options, the options, the title, uh, this property and the property. Html was uploading the options. The title contains the title that I have here. Okay, As you can see here I have the property title on. Now what I want to do is to display this property inside the HTML file in other to do it, I have to use a these age, I guess. Goethe. Okay on again. Here. I have a property title and I want to display the value off this property inside these template eso. That's the reason why I'm using these a year. Yes, Gold. Right here. Okay, on. Well, and before I continue, I have to say that if I go back to the index that gauges file, you can see that here I have a selector. Uh, that specifies the HTML element that will be the container off my application. OK, these a Z, you can see here thesis a selector that is used to specify the HTML element that will be the container off the application in this case, the container off my obligation most most half the road. I d Okay. The container off my application. Most have the route I d. That's the reason why I am using here. And if with the idea route. OK, in other words, these thief is the container off my application. So I'm going to other comment that says, Ah, the containers. Oh, my green act application. Okay, Thies, this right here is the container off my react application because the idea route Andi Um right here I have the container off my obligation on the continuum off my obligation. Most half the idea wrote. Okay on. Well, now I have to um Okay, Is this a seat? Yes. Okay, I guess this is it. So now I have to go back to the so the gun. So and I'm going to run the comments on N p x with back. Okay, I have to run the common the comment MPX with back and then see what happens. Well, now, as you can see, the growth off my obligation WAAS compiled successfully on, um Well, now, if I get over to the bullet folder, you can see that inside the public folder. I have the file index dot html. If I open the file index, stop html that is placed that is placed inside the moving folder. You can see that here I have a on a script attack a player off his Greek tax on. This is creeped tax contain our reverence. So they have a script file my app dot google dot Js Okay, as you can see here I have this payer off JavaScript tax that contained a reference to the JavaScript file. My capital bundle dog. Yes. In other words, these templates or these html file contains my react application. So now I have to go back to the gun. So and I'm going toe run the Web server. So I'm going to use the comment and be ex Goldman. Watch hit. Enter on. Let's see what happens. Okay. Well, now, as you can see, the Web server is working. Or in other words, the Web server is running eso now I have toe. I have to close the comments. Prompt. As you can see, the Web server is working closely. Common. I closed the common brunt. I know. I have to use the address. A local host. 3000. Okay, I am using the others local host 3000 on hit Inter. Honest, you can see here I have the react obligation on Well, now, as you can hear, I have the react application. As you can see, a massage this place hello from react up, which means that react is working on. Well, it's important to say that again. You seem he the address local Khowst 3000. OK, I am using the address local host 3000 to display these with Paige toe the browser and this means that react is working that react is already working. 18. Adding styles to React application: Okay, Welcome to another lesson of this tutorial on this lesson. What I want to know is toe style. My application. As you can see so far, the application, this place, these thesis a message to the browser. But as you can see, the text is a scholar Black. OK, so now what I want to do is tow. Apply some CSS styles toe my obligation on Well, in order clue it. I have to get over to the have to get over to the coals, and I have to Okay. I have to create a new file inside the source folder. So right now I here I have the source folders. So I'm going to write fleet over the source folder, and I'm going to choose the option you file. Now I'm going to name this file as my style's. Okay. My style's my style's dot c SS. Okay. My style's I don't see us is No, But you can see I just created a very A new file on this file is on a style and styles sheet. Okay, this is our CSS file. Well, I'm going to create two very basic styles. Visa style, East for together what? Back on the color off the other one tax, He's said toe loop. And then I might have to have some styles for perhaps in this case, the color off paragraph will be set toe the color will be set toe toe. Uh, green. Okay. And as you can see, uh, I've just created these two very basic styles. Now, I have to get over to the toe with back configuration file on. You can see here. I have the property module on inside the property module. I have the property rules. Andi will, I want to do is to other coma, Andi. Then I have to create a baby off braces. But I'm going to have the property test, and I have to create on regular regular expression. Okay, on these wriggled regular expression is used to find CSS files. Okay. Again, these regular expression is used to find CSS files. Andi, once the CSS file is fine, then I'm well, A after this uses file is find, then with back is going to use to different loaders. Uh, the first lower east CIA says loader on physical odor is a style over this style dash loader. Well, well before I finish I made a mistake here. I have to shift the position off the loaders. Okay, Before I finish, I have toe I made I made a never here. So I have to shift the position off the loaders. The first lower is a style Ohler on the second loader is CSS Lola Okay, so well Thies, this line this configuration these configuration that I am selecting right now means that when with back finds a CSS file then with back is going today the styles Andi then with back is going to use the dependencies style older as well. A CIA says loader on um Westpac is going to translate the CSS styles into JavaScript code into JavaScript. Goethe. Okay, again, this is very important. With With back is going toe there is going to take the CSS styles on is going to translate the CSS styles into JavaScript growth on uh, the translation is is done literally. Translation off the CSS styles is is achieved by using the style loader as well as a CSS lower. Okay. Again I was back. Translates the CSS styles in tow. Jonah screams goes on. The translation is achieved by using media style loader as well as the CSS. Lower. Okay on. Um okay. I know what I have to do is tow it over to the file index. Okay? Yes, I I'm going to import via style. Shit. Okay. I have to import the style ship. So I have to specify the bad toe, the file that contains the styles. So the but the file is dot slash Remember that that is last represents the cool ranch folders, and then they come through. I have to, especially in the name of the file. The name of the file is my style's books. Yes, This Okay. And as you can see, my application is important. Busiest says styles. Okay, Now I have to go back to the council on. Well, as you can see, no mourn is restarting the application. Similar games, Aziz. You know, uh, no mourn restarts the web service every time I modify the gold. That's the reason why. And Northman is restarting the web server. Okay? Mantra starts the web server many times. Ah, specifically Northman for starts dealing with the web servers every time I modify the cold . Ok, so now what? I want to do is to stop the Web servers, so I have to press the geese. Controversy, I bet, is the kiss controversy. In order to stop the Web service, I present this controversy and now I have to run with back. So I have to use the government and the X with back. OK, and now I hit Enter and let's see what happens. Well, now what you can see through the compilation on With Back has already compiled the goes off my application. OK, three compilation waas successful and well, as you can see. No, with back castle ready, Go by oath The oath off my application on Well, now what I have to do is to run the Web server. So I'm going to use the comment MPX Northman and then the option Watch on the roof folders on will. Now he picked if on Let's see what happens. Okay, well, now, as you can see the website but he's running on. Everything appears to be working okay on. Well, I have to close the comments prompt. And now I have to go back today with browser on what I want to do East to refresh the page Okay, I'm going to refresh these with beige. Remember that I'm using the address. Local host 3000. OK, I have to refresh the with base. And as you can see, the gold is color blue. As you can see, the goes east color blue, which means that my obligation is able to use CSS styles. Okay, Now, what I want to do is tow. I have to go back to my application on in this case. But I want to do is to create the parent element. OK, this is the parent element off my off my coast on this parents element contains the HTML Marco that will display into the browser. Okay, This is the parent element on this parent element. Contains all the html Marco that will display to the web browser. Andi. Well, inside these I have toe together one time that says, uh, my first react up on. Then I want to other runnerup below on. The runnerup says thes is only random fixed about, um, about whatever. Okay, this is run the fixed. About what? OK, aunt. Um okay. And now I have to remove together. Want that they break You scared? I want that. I know. I save the changes. Andi on now I have to go back today. The council and well, as you can see, a Northman is restarting the Web server again. A So you can see what no mantra starts the Web server again because no woman who dates the application every time I modify the cold. Okay, now I have toe, I have to stop the web server, right? Pressing the kiss controversy. Okay, I have toe. Have I have to stop the Webster where I'm pressing the keys controversy on Now. What I want to do is to run the Web server one more time. I have to run the website. Where One more time. Uh, no. Sorry. Sorry. I have to stop the web server. Sorry, I have to stop the web service by pressing the keys controversy. So react recipes, controversy. And now I have to run a west back. Okay. I have to run with back one more time. As you can see, I am running with back. So that's the reason why I am using he comment n b x with back. Okay, I'm using the government and be X with back on Well, and now you can see the gold off my application. Waas compiled successfully by with back. Okay, with back with back fast already compiled the growth off my application. Now what I want to do is to run the Web service one more time and let's see what happens on Well, and now you can see the Web service is working and I have to close the comments prompt. I have to open the Remember the Web browser on. I'm going to refresh the With Bache on. As you can see here, I have, uh, a new with Bache. My first react up on below. I have the text. This is only random text about whatever. Okay, so this means that the obligation is able to handle ceases its styles and will, uh, no, You know how toe have styles toe react application 19. Make your first React component: Okay. Welcome. Another lesson off this tutorial on this lesson. What? I want to go. He's creating my very first react component. Okay. I want to create my first react component on. Well, in order to eat, I have to hit over toe. They fold their source, and I have toe choose the option. Your folder. Now, I'm going to save this folder as components. And then I hear Interred are now inside this folder and going to create a new file inside the room inside. They told their components. I'm going to create a new file, so I have to choose the option you file. And now I have to save this file as up the year. Yes. Andi, will this be file up? Got here? Yes. Contains, uh, my react component. So the first step? Well, now I have to create my my react component on Well, I have toe import. I have to import react firmer yet, and we'll A know what I have to do is tow used export before export. The fold is just toe export the component so that this component is available. Drug out the application. Okay on. I have to use a glass. Um, bless up extends, react the component, react the component. And now what I have to do. Um okay, uh and well, now a so you can see I just created a glass on this glass is also known as a component. Um, Okay, well, now it's up to the finding constructor. The constructor is just toe set up. The parameters for this component so helped I had to take being constructor Brooks and then super props. Well, as I said, this constructor is used toe set up the parameters off this component on. Then I have to use the render metals. I find that I have to use your intern statements. Okay, on inside these return statement or these return inside these return, I have to I have to place all the growth that I want to display to the browser. Okay. Inside the return statement or inside the return I have to place the goals that I want to is to explain to the browser in this case, I want to display to the route, sir. Well, the first step is creating the parent element. Remember that this leaf is the parent element on this leaf. Contains all the html markup that I want to respond to display to the browser. Okay. Okay. This is the brief parent. This is the parent element that contains all the markup or or or all the HTML markup that I want to display to the browser. In this case, I want to explain to the browser a here one that that says hello from react component. Okay. Hello. From react component. And, um then they have to I want to add another paragraph that says, I know they're bottle wrapped. Another battle rap off random text. Pay another paragraph off random. Next on. Well, now I have to head over to the file index of jail. Yes. And, um, on Well, where I want to do is to import the component someone that bean import. We have component from the file, I thought slash represent Well, now I have to specify the fact they now we have to specify the bat to the file that contains the component. So the path is what it slash notice Last represents the liquid rent folders. Then a components is the name of the folder that contains the components. Then a slash ons finally the name of the file. Then in the name of the file East up, I can use up. Look here. Yes, but in this case, I'm going to use the name off the file only. Okay, I can use Apple. Oh, yes, if I want. If I want to use the father they filed then if I want to use Apple A J Yes, that's a day. Okay, well, if I want to use the the name off the file app the day Yes, that's okay. Okay. If I use abductee, I guess that's okay. But in this case, I want to remove the extension off the file. Okay. In this case, I want to remove the extension off the file. So I want to remove the year. Yes, on as you can see, I am. You seen the name off the file up on Lee? Ok, I am using up on Lee on Well, now am importing the component Aunt on now I have toe. I want to render the components so the browser. So I'm going to use up. As you can see here I am using up on. This means that I want to render the app component to the West browser. Okay. And I have toe hit over to there. They have to get over to the so the route to the console. Serie and I have to stop the Web server by pressing the keys controversy. I present case controversy to stop the web service, and then they have to run with back. So I have to use the comment and the X with back. I see it. Interest. Well, now you can see the growth off. My obligation was compiled successfully by with back on. Now, what I want to do is to run the with Bradley Web server. Okay, so I have to use the comment and the external mourn, and then I have to use the option watch on to specify the root folder. Now he enters on. Let's see what happens. Well, now, as you can see, it seems like no woman is restarting the web service on Well, everything appears to be working. Okay, some. So now I have to close the the comment. Brunt, I have toe get over to the through the the Web browser, and I'm going to refresh the obligation and well, now you can see a captain massage. Hello. From react components. Okay. Hello. From react component on. Then I have the text. Another paragraph off random. Next. This means that the react component is working on will A. Now you know how to create a react component and help to render I react. Component. So the web browser 20. Setting up a router with React: Okay, Welcome to another lesson off this tutorial on this lesson. Where I want to go is, um, eyes creating Rotich. Okay on. Well, in order to create a router, I have to install a new dependency in this case, I need toe in style, the dependency react rotor dome. So I have to get over to the gun. So on the first step that I want to take east to a stop the Web server. Okay. I want to a stop the Webster. Where? So I have to press the geese control. See, I bracing kiss controversy to stop the web service on. Then we have to install and you dependencies wake up to use the comment and b m in style Safe on in this case, I need the dependency react ruder dumb. Now I heat entered. Okay, well, now, as you can see, the installation process is complete. So now I have to close the comment browned on. Um well, if I get over to the file backups Jason, you can see that here I have the section dependencies on inside the sexual dependencies. The dependency react. Rotterdam appears okay on. Well, now I have took it over to the file after? Yes. On where you want to do is tow import. I have to import different components from react router down. I want to import the the browser search router. The browsers brought their component. I want to import the switch component, and I want to import the route component from react. Uh, Brooke There, dumb on. Well, now what I have to do is setting up the B routers, so on. Well, in order to set up a router, I have to use the component. But I was a router like this on inside this browser. Rather component. I have to create a switch component on inside the switch component. I have to create their roads. In this case, I'm going to create two different roads. Um, e have the road. Uh, I have to use the component road like this on. I have to use another instance off the components road. Okay on. Um um Okay, well, I guess I guess I have to create, um, three different roads. Okay. I want to create three different roads on Dwell on. Now I have to set up each off these roads and will the first road contains the bad exact. They say the first road is just to display the become page. Okay, The first, the first road is used to display the home. Bish Onda Will, um, in this case, Um okay. In this case, I want to display a message. Uh, Hilo from home. Bish. Okay. First, uh, the first row wrote is juiced to his blade. The home fish. The second road contains the bad slash Charred listing on these roads displays a message to the console story. These road, this place. Ah, Heather one back. So the guns toe the browser. Sorry. Okay, The first road is used toe display the home fish. Okay. And this income growth is used. Toe is just toe toe display. Ah, Heather, One back on the hitherto the browser on then the killer. What? Jack says. Uh, hello. Hello From a chart listing. Okay. On Finally, the the Dearth Road is used to display an error message to the browser that says everyone 404 bache not found. Okay. And so far as you can see, I've creative Ah, I've created these thes rule there. Okay? And with no what I want to do. Okay. Um okay. Yes. Now I have to remove the previous growth before I finish. I have to remove the brave use growth. Okay, I have to remove this code because I no longer need these goals. Okay, I have to remove the previews, Koth. Okay. Now, as you can see, this is the final Goethe that I have here a browser router component that contains a switch . And the switch contains three different roads. Okay. And each off those roads, this place on a different message toe the browser. Okay? And now what I want to do is testing this goodies. These this completes discos, so I have to go back toe the, um I have to go back to the council and I have to run the command. Ah, I have to run the commands. Nb x with back. Okay, I hit. Enter and let's see what happens. Okay, well, now you can see the growth off my application. Waas compiled successfully. Okay. The growth of my application waas compiled successfully by with back. I know what I have to do is to run the Webster where? One more time. So I have to use the comment and the extent of modern option. Watch on then I have to specify the root folder by using the slash and well, as you can see the website but is working now. I have. So I want to test my application. So in this case, I'm going to use the address. I look and cost 3000. OK, I want to be. I want toe refresh the west base. Okay. I want to refresh the with base. And as you can see, a new Miss Ash this place Hello from home page. Okay. This means that the the router is working and now I have to I want to produce a different address. I want to use the address. Local cost 3000 slash Chart listing. Okay, chart listing me is they have to use the others local Khowst 3000 is last chart listing. Now I heat interest on Well, it says that the road chart listing cannot be found, so I have to go back to my to my growth. Okay, well, you know, you can see three router is not working. Okay. If I go back to the browser, you can see that these error moustache this place on this means that the router will is not is not, uh is not working on. Well, in order to fix it, I have toe Have I have to get over to the file server daughter? Yes. Okay. As you can see, here I am in the inside the file server dog ages on. Well, here I'm going to I'm going toe use a different I'm going to use I'm going toe after a new routers and sorry, a new right hander or wrote So I'm going to add a comment that says road Onda thes road will be visual handler is okay. I'm going to use these goals at the gift on. Then I have to use the address as the risk. And then I have to specify the gold back from shame that Castro parameters request on response. And then they have to send a response to the fight to the browser that says respond. Well, I have to send a response to the browser, so I'm going to use the metal response the same file, Okay. And now if I have to specify the file that I want to send to the browser eso I'm going to use the meadows, but the join Onda again, I have to specify the but so the file that I want to send to the browser. Okay, I want I have to specify the bat the bat. I have to specify the back to the file that I want to send to the browser. So in this case, I have to use the methods. But the join on the first parameter is your name on the second parameter. Is the the name off the file that I want to send that that I want to send to the browser. Okay. I want to send to the browsers the file that is placed in the public folder, and I want to ST toe the browser. The file index dot gauged email. Okay. These goals means that every time the juicer be seeds, any u r l address, then the file index dot html will be sent to the browser. Okay, I'm going to add a comment that says every time the user veces any you are ill address, then the file, then the file. Ah, then the vile index dot html. Well, uh, obviously to the west. Okay. Every time the user receipts any u R l address. Then the vile index dot html will display to the web browser. Okay, so now I have toe hit over to the to the console. And as you can see, the web server Waas, restorative Onda. And now, if I refresh the obligation, let's see what happens. As you can see now, the router is working. Okay. Well, now, as you can see, the router is working on this easy with page that this place theme message is hello from chart listing on. Now, What I want to do is to use a different address. So I'm going to use the address. Local Khowst 3000 slash. I know. There. I know there's address. Okay, I'm going to use the entries on local host 3000 slash another's address on now. Heat interest. And as you can see, a mirror or 404 page not found this place. Okay, this is a never Miss Ash. A patient found on these means that the router is working. Okay, If I use a different you are l address, then these ever message this place. Okay? And a road. 404 Andi will thes means that the router is working and will, um Okay, well, and now you know how to set up for a reactor application? 21. Setting up React-bootstrap: Okay, Welcome to another lesson off this tutorial on this tutorial. What? I went on this. Listen what I want to go east toe, apply some layout, toe my react application in order to apply some layout. So this obligation, when I have to do is to install toe be friend dependencies. So I have to get over to the I have to. I have to get over to the console. And what I want to do now is to stop the web servers. So I'm going to press the keys controversy. Brezik is controversy. And then what I want to do is to install two dependencies. So I'm going to run the comment, NPM install safe and then the dependency east react Bootstrap as well as bootstrap boots. Boots trapped. Okay, as you can see here I am a guy I am installing to dependencies. The first dependency East React Books Truck on the other. Dependency is bootstrap. Okay, now I hit. Enter. Okay. Well, now, as you can see, the installation process is complete, so no, I have to close the comments prompt, and I have to get over to the file Packers Jason and inside this file I have the section dependencies on inside the section dependencies appear, uh, boat dependencies Here. I have, uh, bootstrapped as well as react. Bootstrap. Okay, both the boat dependencies appear inside the section dependencies. Okay, so now I have to head over to the file Index topped? Yes, Andi. Well, what I want to do is to import the bootstrap styles. So I'm going to open the file notable Jews, and I'm going to look for the folder. Bootstrap. I have to look for for the for their bootstrap on here is evolved their here east before their bootstrap on inside the folder. Bootstrap. I have vessel. They suit folder least on inside released folder. I have before their CSS. And he wrote that he right path many style sheets. Okay, well, a style sheet that I want to use east the style sheet. A bootstrap that mean dot CS says OK, so I'm going to remove the style sheet on going toe import Theus style sheep boots struck. Well, I have to specify the bat. So the style sheet that I want to import Okay, I have to specify the but toe the style sheet that I want to use soak up. That being a bootstrap is lash on. These is slash CS is and then a bootstrap. I thought I mean the CSS now I say the changes, and now you can on grows these folders. Okay? And now what I have to do is tow over toe the file. Sorry. Before I continue before I continue, where I want to do is to remove This is style. Shit. As you can see here, I have visas, style. Shit. I want to remove these styles because I don't need to use these styles anymore. So I'm going to remove the file my styles don't see, assess and removed the file and will. And now I have here the next stop Vegas file on. Well, I have to get over to the file up the year. Yes. Okay. On, um Well, the first step that I have to take a so you can see here. Um Okay. Mm. The first step that I have to take is to create a new file. So I have to get over to the folder components, and I'm going to choose the option new file, and I have to save these things. File and I'm going to save this file as a chart create. Okay, Chart Creator is the name of the file Chart Creator here? Yes. And now, here, inside this vile I want to create a new component. So I'm going to take the import react import, agree act from react on. Then I want to import some components from react. Bootstrap, some good. I'm going toe. Use the Goethe import card. I want to import the guard component from react. Bootstrap. It's last God. Okay. I want to import the gut component on. Then I'm going to use export the fold and then glass on. Finally, I have to specify the name off this component. It's important to say that the first letters off the name off the component must be uber Gates. Okay, the first letter off the name of the Component most B Cooper case. So in this case, in a typical opponent, he's charge creator chart creator Doug. So, Richard, creator, east The name off these component. Remember that on the first letter. Must be cooper gays, and then I have I have to use extents on, uh, then react a component on then on the constructive No. I remember that. This constructor is used toe to set up the parameters. Andi. Then I have to ask the render metals. I remember that these render metal convinced he returned a statement and he returned a statement. Contains what we want to explain to the browser. Okay. And not what I want to do is tow a car component. Sorry. Before I continue, I want to import another component for a reactive bootstrap. So I'm going to say import you got from from a react. Bootstrap slash Do both. Okay. I know what I want to do is to create one instance off you bottom like this. And then I want inside these instance off jumbotron. I want to create one instance off the guard component on this car. Components requires requires two parameters or or do, um, do toe props toe parameters. OK, these things got component requires two parameters. The first, the first parameter is background on three background component. The work the background option is used to set the background color. So in this case, I'm going to use the option for and then I have to specify the color off the text, so I have to use the parameter text, and I'm going to set the color of the text to white. Okay, the color off the next is white, and they may have to specify a card. God, skiddish. And then ah ah, Car body. I have to specify a guard body like this. I have to specify the God body component. Andi. Then I have to specify the option. Us on the northern. Okay, the's what? I want to Louise to create a heather. Okay, so I have to specify the the HTML duck that I'm going to use to create these together. In this case, I'm going to use it that Okay, that one. Okay. And then I have to specify the, uh, the together off this component in this case, Heather, is, uh, Chad Creator, Chart generator. Sorry. Charting aerator. He's the text off The killer's on inside globally, off these cars, I want to display the text. Um, hello? From from hello from charred. Create door component. Hello. From Chad. Creator component of game. Okay, Okay. A probably you guys, probably you guys don't understand, but don't worry. This is very easy. Okay, Very Berries. Now, before I continue I want to toe modify the name off the file. So I'm going to select the option rent rename on. Then the name of the file will be okay. The first letter off the name of the file will be over case. Okay, well, I'm going to name this file as charged. Generators charging Array. Charging a Raider is the name off the of the file. Guess charge. Generator, Doctor? Yes, on the makeup. So I want to modify the name of the component. The name of the component off these components will be chart generator as well. Okay. And I have to head over to the absolute genius file on, uh, okay. I want toe import the chart generator component from the file. And, well, I have to specify the file. Then I have to specify them back to the file that contains the component that I want to import in this case, the But it's not a slash, and then chad generator charge generator is the name off the file that contains the component. Okay, I can use charting aerator, though. Yes, but in this case, I want to remove the extension off the file. So I'm going to use only the name of the file. On the name of the file is charged generator. Okay, This means that he wants to import the charge generator component from the file charge. Injury. Okay on. Then I want to create. I want to display to the browser. One instance off that component. So I have Lulu create an instance off the components charge, generator like this. Okay, I want toe create one instance off. The chap generator component. Okay. And now, um Okay, now the next step that I have to date east to go back to the console and I'm going to run, I'm going to run with back. So I have to use the common anti x with back on. Let's see what happens. I hit interest on Let's see what happens. Okay? And now, as you can see, the the growth off the obligation waas compiled successfully by with back I know what I want to lose to run the Web server. So I'm going to use the command MPX Nordmann in order to room to run the Web servers on. Well, and now, as you can see, no money is restarting. Is restarting the web server. Everything appears to be working. So now I have toe hit over toe a Web browser. I'm going to use the address. Local host 3000. Okay, I'm going to use the address. Local host Rick Carlson. I refreshed. I refresh the application and let's see what happens on. Well, now you can see this easy with beige that this place on, as you can see, thes with Bache has a very basically yelled Andi CASS scholars and it also cast a gray background. Okay, on dwell here appears a text Hello from chart Creator component, which means that react bootstrap is working and will be set for this. Listen, now you know how toe at, um, How to apply some basic layout. How to lay out our react application. On the next lesson, I will continue working on this application. 22. Laying out webpage: Okay, Welcome to another lesson off this tutorial on this lesson. What I want to do is continue working on the leg out off my application on Well, a So you can see I am in the file. A chart generate or dog? Yes. Okay, this is the file chapter in a rate or doctor? Yes, on. Well, what I want to do now is toe is to create is to create, uh, to create four instances off the guard component. Okay. I want to create for different instances off off the guards component. I will, Um, the first step that I have to take east toe. Well, I'm going to select this cold on now. I'm going to copy this cold. And finally, I have based the gold like this on. Now, where I have to do is tow is adding some space like these and then, um Okay. Now what I have to do is to modify the values off the I want to modify the value off the background off. I want toe modify the value off the background option or the background, attribute eso the new one. You ease. Um, he's light on, uh, know what What I want to do is to remove the text, the experiment, the text parameters, and I'm going to add some styles. So I have to ask the idea style, attribute. And now I have to ask two players off braces like this on. I'm going to set the color property. Andi, I'm going to set the color property toe So black. Okay? And now here I have the ass parameters. In this case of the s parameter, he said toe Ah, however trita okay, the ass parameters is set to go ahead and bring that heather treat that. Sorry on, um and will Now, what I want to do East to is to ask So miss Styles. So I'm going to ask the attribute a style and then I have to set. I have to ask two players off Courtney races on Now. I'm going to ask the property, takes a lying on. I'm going to set this property to centers. Okay, on. Um Okay. Earned what else? Where does Okay now? Here I have the style. Attribute. As you can see, I am selecting the style Attribute on. I'm going to have one more property. I'm going to ask the property. Uh, margin top, and I'm going to set this property toe one point. Ah, 1.5 m's. Okay. Like these. Okay, like these now, as you can see here, I have, uh You can see the guard component contains the style attributes on the style. Attribute contains two different properties. The first is color on the second is merging top. Okay on. Well, I guess it is it now I have toe, I have to select this cold. And I'm going to copy these gold on going toe. Based it based I have toe based the growth below like this. But in this case, I want to modify the the header text. So in this case, that text will be, um Well, I have to apply some text to the header off the previews car s o. Okay. As you can see, here I am in there. In the in the you can see, I am selecting the first instance off the guard component. Okay. I am selecting the first instance off the guard component on. I want to place a hair in this case. Heather, ease title on bond description. Data description is a hitter And then I hear I have the second instance off the guard component on. What I want to do is to apply a different Harish in this case, the hair. There will be a Merrick values on labels, medic values and labels on. Well, now I want to select these goals. I could be the growth, and I'm going toe based Another instance of the gods component below. Like this Andi. Well, I have to modify the Heather. In this case of hair, he's, um settings listing. Andi, I'm going to select this coat. I have two copies Growth one more time. I'm going to base. I go, I'm going. I'm going to tow based the gold below like this. Okay. And again, I have to modify the text in this case, the next east chat. Ok, now he's saying the changes on well, you know, what I have to do is to open on instance off the off the government brunt. Andi will have to navigate to the folder chat react. Andi will the first step that I want to do the first step that I have to take east to will I have to run with back eso I have to use the government and the X with back in order to go bile the growth off my application. OK, so I have to use the comment and the X with back I heat inter. Let's see what happens. Okay. Welcome Our Sorry. Okay, Now, as you can see on the coast off, my application was compiled successfully. Okay, The Goethe off. My application was compiled successfully. So now what I want to do is to run the web servers. So I'm going to use the government on the X No. One and then I have toe specify the option. The option. Watch on. I have to specify the root folder. Okay. And now I'm going toe. Chris, I have to heat in fish in order to run the web service. Andi. Well, let's see what happens. As you can see, no mone interest rt the web servers Everything appears to be working on. Well, everything appears to be working the website. What is working now? I can close the comment. Brown's on. I have to go back today with browser, and I'm going to use the address. Look at host. Um, 3000 local host 3000 is the address hit interest and let's see what happens. Well, I know what you can see. This he's the leg out. That this is the worst Bache that this place on? Well, a like I have to go back to the goals on. Um okay, I have to go back to the goat on. Well, what I want to do is to remove thes thesis style. As you can see here, I have the component car, the hellish. Okay, Andre, What I want to do is to remove the style Attribute. I don't like the I don't need these attributes Case I have to remove the style attributes one more time. Ah, okay. Have to remove the title attribute on again. I have to remove the style. Attribute on. Finally, I have to remove this time this Yes time. Attribute One more time on. Okay. Now what I want to do is to have, uh, well, as you can see, this is the guard component that contains the text charge. Generator. Okay, this is the card component that contains the text char generator. So what I want to do is tow. Have via style. Attribute on. I'm going to sit this style, as you can see them, you seen toe to players off Gordon graces on. I'm going to ask the property, text align. I'm going to set the property to centers. Okay? I say the changes and I have to go back toe the council on what I want now is to stop the web servers. So I have to press the keys controversy in order to stop the web service. Okay, I present kiss controversy, and now I have to run with back. OK, so I'm going to use the comment and be X with back in order to compile the goes off my application. Okay, Now you can see the gold off. My application was compiled successfully. So now what I have to do is to run the with server one more time. So I'm going to use the comment on MPX no more. Okay. In order to run the Web, the Web server where I hit Enter. Let's see what happens. Well, as you can see, no more East restarting the web service on okay, as you can see the website but is working on now like I can close this comment prompt, and I have to refresh the was based and let's see what happens Well. And as you can see, this is the leg out that waas creative Andi will my leg out contains four different sections on each of these sections will contain a different information. Some sections will contain text fields on another section in the section in the section chart, I'm going toe to toe displayed a chart. Well, well, so far, this is the layout that I've created on Well, on the next lesson, I will continue working on this application. 23. Make a React component that displays a text field: Okay. Welcome toe. Another lesson off this tutorial on this lesson, where I want to do is creating a new component on. Well, what I have to do is took it over to a components folder on I'm going to right click over the components folder. Now, I have to choose the option you file on. I'm going to save this file. As, uh, I'm going to save this file as gustan who? Stone text field gustan text field the genius. Now I eat, Enter on, dwell in order to conceive any off the file is custom text field doctor. Yes. Well, the first step is to import react from react and then I want toe import. The form component from Riyadh would strap it's last form. Okay, I have to import that the farm component from react. Bootstrap. Now I have to use export the fault export default and then the keyboard glass on. I have to have to specify the name of the component. Remember that the first letters off the name of the Component most B Cooper case. Okay, The first letter off the name of the Component most B Cooper case in this game, the name of the component is custom text field. And then, um I have to use a keyword extents on, then react thought Cambodia component. Okay, Now I have to define the constructor. Remember that the constructor is used to set up the parameters for these components constructor and then props and then super props. Okay, remember that this constructor is used to set up the parameters for this component. Now, I want to use the render metals. I find that may come to that to create the return statement. Okay on. Well, what I went through now east to create the component to create the Component Farm group. Okay. Have to create one instance off the component formed the group. Andi. Um well, inside his component, I have to place 31 instance off the component form the label again form, but label on, I have toe add the component form. Does control on um ah. I have to add the component form the text for gay farm, but sorry. Far form dog text and will a Okay, now what? I want to do these Tow us the after the parameter control ivy on in this case, the parameter control. I'd be equals. Okay. In this case, the attribute control Ivy equals the parameters. These the bro oops dot gustan idea. Okay, gustan I see on, uh, inside these this'll able, um I'm going toe place a favors for that. Like this on inside these cater for tax. I'm going toe asked the parameter visa props the label. Okay on then I have toe add some settings to the form control component. Okay. In this case, the form control component contains the attributes type on the intricate type is set toe text. I have to ask the attribute, size and the attribute size. He said too large. Um, I have to ask the attribute name and the attribute name. He said toe the parameter these dot drops don't name. Um I have to ask the attribute placeholder and every beautiful place holder. He said to the jury barometer, these thought brooks the placeholders on, uh, they have toe the value on the perimeter, but the attribute value he said to the barometer, the stock drops the ball. I'm finally I have to ask the event, uh, on change. Ok, Have to ask the even on change on the even thought on change, He said, toe the parameter business props that input handler. Okay, in boot camp. Okay. As you can see at this component requires many parameters. OK? This component requires many parameters in order to work. Andi, Well, these components is going to be used to create a custom text field. Okay, I'm going to use these components to create a custom text field on. In order to create a custom text field, I have to provide seminal parameters. Okay. Again, at this component, this place, a custom text field, and in order to display a custom text field, this component gets many parameters. OK? This component gets several parameters in order to display a custom text field to the browser. Okay, on, uh, finally, I have to ask the parameters thes thought props the text on. Well, now, as you can see, thes component requires several barometers. Uh, so that it can display a text field. Do the brown, sir. Okay, well, and now I have toe have to go back to the file index off. Yeah. Yeah, and sorry. I have to go back to the file at the nursery. I have to go back to the file chargin aerator dog? Yes. On where I want to do is tow import the and we'll, uh What I want to do is to import the component. I want to import the component stung custom text field from the file where I have to specify the path to the file that contains the component. In this case, the file is ah gustan text field. And well, as you can see, I am important. The component custom text field. Okay, now I have toe scroll down. Andi, I want to create one instance off the component, so I kept toe specify have to create the one instance of the component custom text field on . Well, Aziz, you know these component requires seven and barometers in order to work. So the first parliament there is custom baby, In this case, I'm going to set the parameter custom Ivy pushed on. I'd be ok. And in this case, this parameter is said toe chart tidal. Okay, chart title is the custom, Heidi parameters Is the value off the coast a mighty parameters? These component requires the label perimeter as well s so I have to ask the label parameters and in this case, the value of this parameter is titled. I don't on, uh, this perimeter This component requires the parameter name. Ah, And in this case, but another name. Name. He said toe chart, chart title. OK, that's the name. That's the value opening parameters on. Well, these thes component this component requires the placeholder perimeter as well. So I have to specify the place holder parameter on the perimeter is set toe they bean uh, brief title. Okay, that is the the placeholder. The place called their value. I have to specify the van parameters. Okay, so I have to set the parameter and in this case, develop parameter. He said So they were to the state variable. The stop is ST dot job chart like Okay, charge cycle on. Well, as you can see, the file parameter is set to the variable to the state variable these dot estate, the chart title on. Then I have to specify the, uh, the the input handler parameters. So I thought bean input input handler in this case input handler. He said toe the metals this dot He boot tender. Okay, Andi, then I have toe specify any text parameters. Eso in this case it takes parameter. He said toe um charred title. Okay, chart title isn't experimenter. As you can see, a young setting up the different parameters off the component Custom text field. OK, Andi. Well, I guess this is it for this lesson. On the next lesson, I will continue working on these applications. 24. Setting up a text field: Okay, Welcome to another lesson off this tutorial on this lesson on what I want to do is continue working on the custom text field component. Okay? I want to display a text field. So the web browser. Um, but well, before I finish setting up this component I have toe, I have to create Ah, on a new estate variable as well as a new a new metal. Okay, Before I finish setting up this component, I have to create a new estate variable as well as a new metal. Okay, so now we have to hit over to the okay. I have to get over to the constructor on inside this constructor. I'm going to set the variable the start estate. Andi thes Inside these inside this object I have to define the the estate variable that I want to create on will. As you can see, here we have the estate variable. The stop is ST the chart title. Okay, chart title is the estate variable that that I am using. So I have to help toe. I have to get over to the constructor and I have I have to create the variable chart Tidal . Okay, chart title. I'm going to set this variable toe on MPs stream. Okay. Aan den, then I have to. Well, according to the settings off the custom text field component, I have to create a Meddoff. Okay. The name of the middle is in boot handler. Okay. I have to define the medals in both Handler. So I have to get over to the constructor and I have to set up the middle like piece. These dog input tender equals these dogs. Input input handlers don't bind these. Okay on. Then I have to declare the meadows, so I have toe have being ah input under. Okay, I have to define. I have to declare the metals on. These mental is going to get a parameters. This metal is going to get the even parameters on day, even parameters convenes information about the next field. Okay, The even contains information about the text field. Ok, Andi. Well, now what I want to do is tow Have Anethe block and I'm going to say eve the property even both Surjit the charge it don't name equals Charles Daigle. Then run these ive block. OK? In other words, if the text field where the user inputs text. OK, give the text field where the user inputs information contains the attribute name equals do chart title then this If block will be run I have to repeat this because this is very important If the text field where If the text field where the user inputs information contains the name attributes equal to chart title then this if block will be wrong And if I go back to the the custom text field component, you can see that the custom text field component on days the name attribute equal to chart title Okay, The cost of text field component contains the name attribute equals toe chart title, which means that, uh in this case these if if block will be run on these ive block is going toe is going toe date the state variable Okay, here I have the state variable So I'm going toe dated the state variable by using the metal set state I want to bake the state variable eso I have to specify the estate variable chant Idol on. I'm going to send thesis state variable toe event d'Argent dulled value. Okay, I'm going to other comment that says, elevating the the state variable. Okay, uh, awaiting the state variable when the yusor InBev's text. Okay. Baiting the estate variable when the user inputs text on. Well, a pro. Probably. You guys don't understand what I'm doing, what I'm doing right now, but well, this is very, very easy. Okay, Okay. Uh, every time the user inputs information the metals, these the input hander is Ron. Okay. Every time the user inputs information the metals, these boat input tender is wrong. Okay, Andi, As you can see, the Met Those input handler is right here. Okay? This method input handler is wrong. Every time they do, sir, Inputs information into the next field on then these metals is going toe. Date the estate variable chart title. Okay, These metals updates the state variable chart Tidal on the estate variable contains the contains the next that the user inputs. Okay, The estate variable contains the text that the user Gimbels inputs. Okay, State variable chart title contains the text that the user inputs on. Then Visa State variable chart title is a status. Okay. And finally after after and then after these state variable is updated. Uh, then the new value. The new value he's he's passed toe the custom text field component. Okay, the new value is past toe the custom text field component. So I'm going to repeat this because this is very important. Every time the user inputs text the mental input, Tendler is wrong. Then things is the method input, color input tender. This metal is Ron. When the user inputs text, then these metals updates the state variable chart idol and then the State valuable chart title contains the text that they use that the user inputs. Okay, finally, the new the new value off the variable chart title east passed to the component Custom text field on the component custom text field This place the the new value toe the browser Okay on the component custom text field this place they knew while you today to the browser. Okay. On Dwell A. That's an explanation on how how these works. Okay on. Well, what I want to do is testing these applications. So I have to head over to the console and I have to stop the web servers by pressing the keys controversy. Now I have to run with back. I heat I have to use the command MPX with back. Well, now you can see it seems like I have a never here in my application. Well, according to the error message with back can result can't resolve the file custom text field. Okay, so I have toe head over to the file custom text field on. I have to rename this. I have to rename this file. Okay, I have to rename this file, so I have to choose the option rename on going toe being the name of the file custom text field a gay. Now he ain't in dish and, well, that I have to go back to the council on. But I'm going to run with back one more time and let's see what happens. Well, you know, as you can see, the gold off the application was compiled successfully. So now I have to run the wealth three. Web server one more time on. Let's see what happens. Abusing the comment and PX Nordmann. And as you can see, the web server these were starting on. Well, everything appears to be working. So now I have to close these common prompt. I have to get over to the browser, and I'm going to refresh the obligation. And let's see what happens on. Well, now, as you can see, nothing he displaced to the browser. This is an error off course. So I have to right click over the browser on. I'm going to select the option. Inspect on, uh, have to open the developed the developer tools. So And I have toe open the console, the JavaScript console. And, as you can see here, a cup, The javascript console on a So you can see, as you can see here, Rick after the message cannot read property placeholder off on the fine. So I have to go back to my Goethe. Andi. Well, if you aske you know well, as you can see. Ah, here. I have never in these property. I s o. I have sorry. Here. I have a never in these parameters, so I'm going to remove these parameters, and I'm going to take being these dogs. Props the place holder. Okay, now I say the changes on, uh well, I guess this is it. So now I have to go back today. Console on. I'm going to stop the worst. The web server by pressing the keys controversy. And now I have to run with back one more time. Okay, well, now you can see it seems like with Back has already has already compiled my application. So, like, I have to run the Web server one more time and let's see what happens. Well, I know what you can see. The web server is working. Okay, so now I can close the comment browned. I have toe head over to the so the browser, and I'm going to refresh the application. Okay. Now, as you can see, disease What? This is the webpage. That this place to the browser. Now, what I want to do is to open the JavaScript console. I have to open the JavaScript console on and okay, here I have the JavaScript console. Okay, here we have the JavaScript console. And well, as you can see, it seems like a never moustache. This place on the solution to the Serra is very easy. I just have to get over to the growth and I'm and I have to get over to the vile custom text field doctor. Yes. I have to select the control ivy and parameters or option on. I'm going to go to these option and I have toe based the option inside the component form the group like this. Okay, I have to place the up the barometer, control Ivy in the right place on. Well, am I guess this is it for this lesson. On the next lesson, I will continue working on these high on the next lesson, I will continue working on this application. 25. Testing the text field: Okay, welcome to another lesson of this tutorial on this lesson. Where I went toe, though, is continue working on the gustan text field component on. Well, um, on the previews lesson, I I shift the position off the control ivy barometers. Okay, on the practice. Listen, I shift the position off the control ivy parameters and, well, now what I want to do Well, if I get over to the browser that you can see that so far, this is the webpage that this place these with page contains contains, um, a text field on. Well, if you see the JavaScript console, you can see that I never miss Ash this place. Andi. Well, now what I want to do is tow over to the council on. I'm going to stop the Web server by pressing the keys controversy, and they make have to run with back one more time. Okay, well, now you can see the growth off the application. Waas already waas already uh, come bailed. Um okay. The gulf of the application was compiled successfully on um okay, I know I have to run the web service, so I have to use the comment. Uh MPX Northman in order to run the website Where? One more time. Well, now you can see the website. Where is working on? Well, now I can close the comment. Brunt on Nike. After Andi. I have to refresh the application one more time on. Let's see what happens. Okay. I know. See this easy with page that this place on? Well, now, on the right side, off the screen appear script console on that. You can see every piece toe because theirry or massage disappeared. Okay, the error message disappeared on. Well, now what I want to do is to enter a title for the chart. In this case, the title will be amel sales on one sales. But as you can see, um, yes. I, uh, in there, the next on Nothing. Nothing appears in the JavaScript console. Okay? And this is wrong. Um, so I have to get over to the to the growth. Andi, I have to get over toe for the file charges rate or not. Yes. Okay, on. Um well, what I want to do know what I want to do now is to get over to the input handler. Metals. Onda. Um, I have toe place. I have to place one more line off both inside the give block. OK, so I'm going to be in console. That Look, a lot of I'm going to add a callback function. Sorry. I want to add a callback function. So there these for the mental. These dots said estate. Okay, I want to ask Theis callback function toe the mento the middle said estate on this Corvette commission. Theis place a message to the council that says, But the current charred title, the current champ type is on, then space on. Then I want to display the the value off the estate variable. So I have to be in these dots. Estate dog chart. I don't. Okay, now you save the changes. I have to go back to the council. I have to stop the servers by pressing the keys controversy. I know I have toe, I have to run with back one more time, so I have to use the comment MPX with back. Okay. Now, as you can see, the gold off the application was compiled successfully. Eso No. What I want to do is to run the web server one more time. You see the comment. MPX Elfman Now hit. Enter on, Lindsay. What happens? Well, now you can see Northman is restarting the web servers, and we're now the Web server is working. So now I can close the comment. Brunt and I have took it over to the browser on going to refresh the obligation one more time. Okay, I have to refresh the application one more time and well, And now, as you can see, this is the one page that this place on. Well, what I want to do is to enter any title. Okay? I have to enter a title. A chart title. So in this case that I feel will be sales on oil sales on one on one. Say, use in millions off dollars. And well, now, as you can see on the right side, off the screen appears the, um the text Asai input text. The text appears inside the JavaScript council. Okay. Aside, input text. The next appears inside the JavaScript council on, um, as you can see, he right up the next that waas in boot into the text field on these means that the, uh that the applications working This means that the text feels created with react are working. OK, now what I want to do is to remove the text. Okay. I want to remove the be fixed on, as you can see, the JavaScript console that is placed on the right side of the screen. Uh, this blaze the next that I that I am put inside the decks field. OK, you know the words Asai aside, input fixed the text of years inside the JavaScript console, which means the application is working okay. And will and well. And now, as you can see well, I guess this is it for this lesson. Now you know how toe to set up a text field. You seem to react. 26. Text field for a description: Okay, Welcome to another lesson off this tutorial on this. Listen, what I want to do is creating another text field, so I have to get over to the viol. Custom takes. Sorry, I have to get over to the file charge. Generator that? Yes. And well, as you can see s, So far, I have I have one instance off the custom text field component on. Well, before I continue, what I want to do is creating a table. So I want to eat board some component, some components from react books trip. So I'm going to say I'm going to say import containers, import containers from react. Bootstrap, it slash containers I'm going toe import the goal component from react. Bootstrap slash from a react. Bootstrap slash cold. Finally, I'm going toe import the road component from react. Bootstrap is lash rope. Well, now, as you can see, I've just imported three different mints from Riyadh. Bootstrap on. Well, now what I want to do is creating a table on. In order to do it, I have to get over to the guard that contains the text title on description. Okay. And now here I have the vote the guard, that body component on inside these component, I'm going to create a table. So I have to use I have to use one instance off the container component on inside this container component. I'm going toe have a row component. Andi inside Israel components. I want to create toe instances, vehicle components, two instances off the coal component like this. And then, um I will, uh, the goes very okay. The container component as well as the row component and that component are reduced to create a table. OK? And in this case, this table contains one road and well, now what I want to do is to select the custom text field. Come, for instance, I have to select the custom text field component on. I'm going to cook the growth. And then I have toe based the Goethe inside the first call component like this. And well, now what I want to do is tow create. Um, Okay. As you can see, I am selecting three second instance off off the gold component on inside the school component. I want to create another is instance off the custom text field component. Okay. Uh, of course I have to ask the settings for these components. So I have toe. Okay, the first. The first setting is Costa mighty, and I'm going to say these cook this well, the first parameter is custom Heidi on. I'm going to set these toe, uh, chart description. Okay, chart description. And then I have to ask the the parameter label, and I'm going to set these toe description. Then I have to have the bottom of their name. And I'm going to say these two chart description when I have to have the parameter placeholder and I'm going to say these parameters toe, um, toe type mean they be a description, Okay, being a description, this grape shin and then I'm going to ask the input be I'm going to ask the vile the well parameter. And in this case, even parameter equals the state. Variable this estate boat chart description. Okay. And then I have to have the he put under parameter and in this case, the input under parameters. He said to Demento these the, uh, include handlers and finally, I'm going to have the text parameters, and in this case, it experimenter. He said toe chart description charred description. Okay. And well, now, as you can see, I just created another instance off the custom text field component on I just I've just set up these components, but you seem all these parameters OK on. Well, you can see here I have developed parameters on the one parameters. He said toe the estate variable these dot is take the charge description. So I have toe, I have to hit over toe the constructor, and I'm going toe act another state variable. In this case, there's take variable is chat description on I'm going to set piece variable toe an empty strange Andi. Well, now, if I go back to their If I go back to the to the custom text field instance, you can see that you have the name Baron. The name parameters on the name parameters equals chart description. Okay, The name. But the name parameters equals charts this chart description. So now I have to head over to the, uh, to the input can learn. Make those on. What I want to do is very easy. Okay. I want toe copy these block copies if block and then I have toe based the the copy off the block below like this. But in this case, I'm going to modify these if block. Um well, in this case, I'm going to modify this if block, uh, I'm going to say if the if the attributes name off the next field equals charge description , then these If blood will be run. Okay. If the, uh, the attribute name off the text field equals chart description, then these if block will be run, and then I have to update the the estate variable chart description as well. And finally, I'm going toe. Look, I'm going toe display a message to the council that says the current chart description the Goran chart description is on. Then I have to display the value off the estate variable. These not a state jack description. Okay, now, as you can see, basically the growth for these text field is basically the same as the other text field. Um, so basically, the gold is the same. Okay. And well, now what I want to do is to verify whether all of this is working or not. So I have to get over today. So the council and I'm going to stop the web server by pressing the keys controversy. But is it is control. See on now what? I want to go peace to run with back one more time. So I'm going to run the comment and be X with back I hit. Enter on. Let's see what happens. And well, I know you can see I never miss ash displays. Okay? Have here, or Miss Ashe says a roar can resolve react. Bootstrap slash. I've bw So I think that's an error I made. That's a mistake. I made eso. Uh okay. I have to fix the error. So I have to get over to the goals and I'm going toe. I'm going to remove these line off both import row from react. Bootstrap from Riyadh. Bootstrap. And I'm going to repeat these things. Line. Okay. Import row people grow from react. Bootstrap is lashed row. Okay, now I say the changes again. I have to go back to the council. I'm going to run with back one more time. I heat inter sh on. Let's see what happens. Well, and as you can see, the gold off the obligation has already being compiled. So now what I want to do is to run the web service. So I'm going to use the command. MPX note. Morning hit Interred on. Well, let's see what happens now. You can see no money is starting with the web server on. Everything appears to be working. Okay on. Well, And I have to close the command prompt. I have toe hit over today to the browser, and I'm going to refresh the application and let's see what happens. Well, now you can see this easy with Page that this place here I have a two different text feels I have the title text field as well as the description text field on. Well, what I want to do is tow input, input, some text inside the title next field. In this case, the title will be sales. Ah, on one on one. Say use. And then the description will be, uh, sales in millions, both dollars. Okay. Sales in millions of dollars on. Well, you can see that as I input the text the next displaced inside the the Java screamed council. Okay, on this means that the application is working. Okay. As I input the text, the text appears inside. The Jabba screamed consul. And this means the application is working. Okay on. Well, I guess this is it on on. Well, on the next lesson, I will continue working on these obligation. 27. Text field for a label: Okay, Welcome to another lesson off this tutorial on this lesson. What I want to do is continue working on the charge. Generate door file. Um Well, um well, now what I want to do is creating a new table. So I have to head over to the so the guard component that contains the text, numeric values and labels. OK, here we have the guard component that contains the text numeric values and labels on inside these car component. I want to create a table. So I have to use an instance off the container component. And then inside this container component, I have to have a rope. Aro components on, then inside his row component. I have to I have to add a core component like this. Well, I'm going to have another call component. Okay. I know. As you can see, I have three cold components on. Well, basically, these codes are right here. They go on dinner component the row component as well as the cold components are used to create to create a table. Okay, Now, what I want to do is took it over to the first component on um OK, what? I want to do is tow. Select these instance off the gustan text field component. I have two copies. These goes on. I'm going toe based. The growth inside the first, the first call component on then I have to modify the settings. In this case, the in this case, the, uh the coastal. Maybe parameters. He said toe current current, uh, current label. Okay. And then the label is saris. Okay. The label is, uh, label as well on the name off. These text field will be a current label. We'll rent label as well, and then Ah, okay. The name. Okay. The name parameters, the name parameters East said toe current label. Okay. The name attribute. He said the current labor on Then I have to specify the placeholder the placeholder e will be, uh um will be a label as well. Okay on. Um, no. I have to specify the perimeters on this case. Even perimeter. He said toe state variable. These so these dot state dot uh, who rent labeled on DNA. Now we have the input handler parameters, and in this case, they put other parameter. He said toe toe the value the's dog eat dog handlers and finally takes perimeter. He said toe, uh, label. Okay. Like this on. Well, now, as you can see, thes custom text field A component requires our the estate variable. These thought stayed the current label. So I have toe head over to the constructor. I'm going to create another, uh, another estate variable. The estate variable will be, uh, cool ranch labeled on, um thes variable. He said to an empty strength like this and then I have toe go back to the have toe, go back to the coast of text field component on as you can see here I abusing the import tender barometers on input under parameter. He said to the meadows these dot include Canada. Okay, so, uh, I'm going toe Okay. Sorry. Before I continue here, I have the custom text field component on. As you can see, this component has the attribute name equal to go red label. Okay. Be attribute. Name off. These text field is equal to correct label. Okay. And now I have to get over to the to the right hander metals on. What I want to do is very easy. I just have toe copy these goals. I have to select this growth companies if block and then I have toe placed the gift block like this. Onda, will I have to modify your growth a little bit. So in this case, I'm going to say if the attribute name off the next field equals current label, then this If block will be run. Okay, again, ive the give the attribute name off the off the cool off the text field equals current label. Then this. If block is run on, this block is going toe bait the state variable current label on. Then a Miss Ash will display to the console that says the Corinth, uh, the goran label he's on. Then I have to least have toe display the value off the state variable these dot state dot Those cool red label. Okay, As you can see, the coat is basically the same as the previews. Text fields. I just modify certain that serve dying. Uh, 79 parts off the gold. Okay, but basically, the goal is the same. And now what I want to do is tow. Um okay. I want to get over today to the console, and I'm going to stop the Web servers by pressing the keys controversy. At present, he's controversy. I know what I want to do is to run with back by using the government and BX with back. Okay, Now you can see the growth off. The application was compiled successfully, and now I have to run the Web server. So I have to use the command and be X Nordmann. Okay, in order to run the web servers. Well, now, as you can see, the Web serve in the Web server is restarted by Northman, and everything appears to be working. So now I have toe hit over today with browser, and I'm going toe refresh the application, and let's see what happens. Well, now, as you can see this easy with page that this place on Well, you know what you can see I have here the label text field on. Well, where you want to do is to open the JavaScript console on dso, have toe open the developer tools, and I have to, as I say, they have to open the JavaScript Council. And well, as you can see here, I have the JavaScript console. So now what I want to do is to input some text inside the label text field. In this case, the text will be, um Ah, United Kingdom United 15 Kingdom. And, well, as you can see, the next the the text that I input appears in the javascript console. Okay, As you can see aside, input text inside the text field. Uh, then the text appears inside the JavaScript console on this means that the text field is he's working. OK, I'm going to ask the label chocolate and will again, as you can see, the next that I that I input appears in the JavaScript council. Okay. Asai input text. The text appears in the JavaScript console. Okay, I guess this is it. This is it for this lesson on the legs less on. I will continue working on this application. 28. Text field for numeric values: Okay, Welcome to another lesson off this tutorial on this lesson. What I want to do is creating a new takes. A new text field on, well, other to eat. I have toe create another instance off the component custom text field. So I'm going to select this cold, and I have two copies cold on. Then I have to baste the gold. Okay, I'm going toe based. The gold inside the second called component. Okay, I'm going to play steed like these. I know that you can see here. I have another instance off the Gustav text field component, but well, now I have to modify the settings on Well, in this case, the custom ivy barometers. He said toe current numbers current number on the label parameters. He said toe numeric value, you make value and then the name pyramid. The name parameters, he said, to current number as well. And then the placeholder will be a number on well, the evil parameters, he said. Toe Lidiya state variable. These thought estate thought cool ranch numbers, cool rent numbers and then the import tender parameters. He sexto the meadows these dot import tender and finally a the text perimeter equals numeric value on. Well, now, as you can see, the parameters he said So the state variable these thoughts estate don't current current number, so I have toe head over to the constructors. Andi. Uh, well, as you can see here I have the constructor on. I'm going to create a new estate variable. In this case, the name off the new estate variable is current number. I'm going to set this variable toe an empty string. Andi. Well, now what I have to do east to head over to the input handler. Metals on. Well, well, Before I continue, I have to get over to the coast of text field. Instance on as you can see, a heroic of the custom text field instance on. Well, according to these settings, the name parameters equal school rent number. The name the name attribute off these text field is a current number. Okay. The name attributes equals current number on. Well, now I have toe hit over to the toe. The middle import tender input hander on. Well, what I want to do is to select these If block on, I'm going to completely block. And I thought toe based the blow like this. But now I have to mollify the Goethe a little bit. So in this case, I'm going to say if they if they attribute name off the next field, equal school and number, then this If block will be run. Okay. If they even if the name attribute off the next field, equal school and number If they if the name attribute off the off the text field, equal school and number, then this. If block will be run on this, if block is going toe, they the estate variable to rent number as well on um, and then a massage displaced to the console. That says the current number is the current number is and then I have to display the value off the state variable. The stock estate thought current numbers. Okay. And well, I guess the deceit No, I have toe have to get over to the console. And I'm going to run with back set up to use the comment MPX with. Back then I hit. Enter on. Let's see what happens. Well, you know that you can see the gold off. The application was compiled successfully on now What? I have to do is to run the Web server. So I have to use the comment and be ex no one on. Then the option watch. And then I have to specify the route folders on. Well, a now heat. Um, I heat in there and let's see what happens. Well, as you can see, enough money is restarting the web servers. Andi. Well, it seems like the Web server is working. So now I can close the comments prompt, and I have to get over to the browser on. Well, now, as you can see, a young in the browser and I'm going to use the address. Local Khowst 3000. Okay, look, a hosted 1000. I heat interest. Let's see what happens. Well, now that you can see, this is the web page that this place now, what I want to do is to open the developer tools on. I have toe head over to the JavaScript Council on Well, here I have the JavaScript console. Andi. Um, okay, I have here the okay. Here we have the JavaScript console on. Now. What I want to do is tow input, some number, so I'm going toe input The number three countries. I'm 55. And as you can see, uh, the number this place in the javascript council. Okay, as you can see. Okay, as you can see, uh, okay, as you can see the number of this place in the JavaScript council Now, I want to remove the number. And again, I'm going to input the number 546 on, as you can see, the number this place in the JavaScript console, which means the application ease working. Okay. And well, I guess this is it for this lesson. On the next lesson, I will continue working on these applications. 29. Making a dropdown list with React: Okay, Welcome to another lesson off this tutorial on this lesson. What I want to do is creating a new component on. Well, the first step that I have to take is to get over to the components further on. I'm going to right click over the components further, and I'm going to choose the option new file. Now I have to name these files. I'm going to Maine this file us cool off, bigger color picker. Yes. Is the name of this file. I know. What I can do is to import, react from react. And then I have toe import three form component from react. Bootstrap, his last form. And well, now I have to take in export before, and then they have to use the keyboard glass on. Then they have to specify the name of the component. Remember that the first letters off the name of the component mostly over case in this case , you know the name off the component is color bigger. And then I have to use the keyboard extents and finally react the components on. Then I come to define the constructors. Remember that the constructor is used toe to set up the parameters like these. I have to use super props, and then I have toe I have toe declare the render metals on. Then I have to ask the return statement. Okay. Well, I am now. I have to create, on instance, off the farm dog group component. Okay. I have to create one instance off the farm. The group component on, Well, these components requires the barometer control, and in this case, the perimeter control ivy. Um, uh, he said toe color better. And then I have to create one instance off the farm label component, have to create one instance off the form label component. And then I have to create one instance of the form, uh, from foreign control components form control components like this for, um, that control, I'm finally got to create an instance off the form the text component. Okay, Like this form dot text. Well, now what I want to do east toe. Um, okay, I'm going to did I'm going to use a heather forth like this, and in this case, um, the text off the off this heather will be color bigger. Andi Well, and I have toe set up the component form control. Well, uh, in this case, I'm going to ask the parliament. There, pass on. I'm going to set this parameter as select on. Then I have to have the name parameters, and I'm going to set these name parameter toe, um, got a big fish on. And, uh, okay, how The name is called a big hair. And then I have to say it the value or the value attribute. And in this case, the value attribute. He said though these these dot props these look props don't on Don't call off. Okay on, then theme. The only change. Even he said to the meadows, he said to the barometers on the stock props, those hand evil can okay, improved candor. As you can see, the on change even he said toe their parameters Thistle prop start in pretenders on the value parameters, he said toe value attribute. He said to the parameter, the stock props, not colors on, um on will. Ah, well, I'm going to ask. I'm going to ask the parameters These top props don't buy. Okay, as you can see the vile attribute he said to the parameters these dot props the vile Okay on. Well, I guess this is it. Now I have to create Ah, a player off option. I have to create an option tax like this Andi Theis case the value the value attribute is set to the color orange on, uh, the text is orange as well. And then they have to select the growth thes deception. I have to select this option element on. I have to copy this element on now. I have toe based the element, uh, seven times. Okay. Like these on. I'm going to add some colors. Theis case, the second color will be green. I'm not going to the text green. The color will be, uh, read and I'm going to have the text read. The fourth color is blue uh, blue. Okay. Read before called the fourth color. Saree is blue on the defeat Color is purple and I'm going toe the exportable as well. Andi yellow So really yellow. I'm going to ask the text Jello as well. I'm finally I'm going toe Ask the color pink. Okay. I have to have a gun or being like this and will now, as you can see, I've just created a select Well, this is this thesis. Gold right here is just to display a drop down list. OK, this girl right here, this growth right here is just to display a a drop down least. Okay? And then I have to have the next I have toe get over to the form that takes components on. I'm going to ask the text. Um, select called off. And well, I guess this is it now. Thes component can be used to display. Ah, I dropped down least off colors. Okay. Okay. Well, thes component can be used to display a drop down a drop down least off colors. Okay on. Well, now I have to get over to the chart generator file on the first step to record to take east toe, import the components I'm going to take being import color picker from. And then I have to specify the file. I have to specify the back toe the file that contains the component in this case the But he stopped a slash on then cooler Peters. Okay, this is the file. This is the file that convince the component. Now I have to a scroll down on. Well, now I have to get over. Well, as you can see here I am talking the gulf component in the component that contains the text numeric values and labels on. Well, I'm going to place on instance off the color picker. Right? Right here. OK, someone to take keen on color pickers, and then I have to set up the school of bigger okay on in order to do it. Well, I have to provide the one parameter as well as the input handler parameters. So I'm going to type being a belt. In this case, I'm going to set the parameters toe the estate variable these thought ST dot cool rent coolers. Okay. And then I have toe as the input handler barometers. And I'm going to say this parameter toe these though I'm going to set these parameters toe the methods, These thought input candor. Okay, I know. I say the changes on Well, you know what? You can see these. Well, as you can see these thes components, you says theistic variable these dot estate that current color. So I have to respect. I have to ask. I have to declare the estate variable current color. So I have to type in a current color. And in this case, I'm going to set this estate variable toe rest. Okay? And then I have toe. I have to get over to the input handler meadows on. Uh, okay. What I have to do is Berries. What I have to use very easy. I just have to select the block. I'm going to copy this if Block and I have to baste the the if block below. Uh, okay. But before I continue, I have to go back to the color bigger. And as you can see, the call of Peter because the attribute main said to color picker. Okay, The color picker component has the attribute name set to color picker. So I have to modify the growth on the new the new goes. I have to modify this if block a little bit. So I'm going to say eat the even If the name attributes equals color pictures. If the name attribute equals color pickers, then these if block will be run. Okay, If the name attributes equals called bigger than this, if block will be a run on these these if block he's going toe, update the value off the variable cool rent color. Okay, this if block is going toe, obey the value off the variable current color on. Then I have to display a message to the council that says the poor and color is and then I want to display the value off the state variable these dot estate, the core and color for rent. And, well, you know what you can see. Um, thes cold is very similar. Toe the previews to the previews. If block on. Well, I guess this is it. Now I have toe head over to the console on. I have to stop the Web server by pressing the keys controversy. I brace AKI's country. See? And now I have to run with back on. Let's see what happens. Well, now you can see the coat off. The obligation was compiled on. Well, you know, what I want to do is to run the Web server. So I'm going to use the comment. MPX, Nordmann hit. Enter. Let's see what happens. Well, as you can see, North Morning is restarting the web servers and, well, it seems like the website, but is working. Okay, The Web server is working so Now I can close the comments prompt, and I have to get over to the browser, and I'm going to use the address. Local coast. Look. Local host 3000. Now hit. Enter on. Let's see what happens on. Well, and now you can see this is the Web Asia that this place. And as you can see, these with Page contains a drop down least on the least, contains several colors. But now what I want to do is to open the developer tools on. I have to get over to the JavaScript council. Okay. I have to get over to the JavaScript council. And, well, now what I want to do is to select. Okay, I want to select a color. So in this case, I'm going to choose the color, uh, green. And as you can see, the color green, this place on the JavaScript console. And now I have to select the color purple. I'm as you can see, the color purple, this place in the javascript council, and then I have to I want to select the color orange on as you can see, the color orange, this place inside the javascript console on Finally I'm going to select the color red. Well, as you can see, the call a red, this place in the JavaScript console on. Well, this means that the drop down least is working. 30. Saving setting into an array: Okay. Welcome to another lesson off Mr Doria on this lesson. What I want to do is I want to create a bottom so well, what I have to do is took it over to the vile charge generator. As you can see, I am inside the file charging aerator on. Well, as I said, I want to read. I want to create a Bhutan on. Well, where I have to do now is to import. They will talk component from react. Bootstrap is lash bhutan, and then they have to a scroll down. I have to scroll down and I have toe. I have to hit over toe the garth that contains the text, numeric values and labels. On this card, there is a container component on this container component contains a row component on the road component Convince three different called components. Okay, on now what I want to to east to add another call component on dwell inside the school component. I want to create an instance off the component Bhutan. Okay. I want to create an instance off the bottom component. And then what I have to do is tow asked. Okay, in between. In between these attacks in between these beach. Sorry. In between these tax, I'm to us the next at settings. Okay, at some things is the text that I want to display inside of a Bhutan. And then I have toe set up this woman, the's Bhutanese off the DYP, these Bhutanese off the type of bhutan on, um, the size off the Bhutan is a large. Okay, lush. Andi, I have to set the parameters. I have to say the the parameter variant on the perimeter variant. He said toe success. It's important to say that the parliament the parameters variant, he's just toe modify the background color. Okay, the perimeter variant is used to mollify the background color on, um what else? Um, Okay, now what I want to do is to ask the obvious style attribute Andi, I want I have toe asked to players off courtly races on. I'm going to ask the property. Margin top. Okay, on now I want to set this property toe ems on Finally. What I want to do is tow. Um um what I want to do East Wife, but I want to do is having the on Glick event on bleak even Andi. I'm going to say these event toe the metals these vote have said things. Okay, What I want to do is tow set the complete metals. Sorry. I want toe set the on bleak event. I want to set the on click. Even so, the metals these thought at cities, okay. And then I have toe I have to head over to the constructor on. I have toe set up the meadows at settings, so I have to use this cold. These thought at settings equals these stock had settings dot wind beast. Okay, As you can see, I am setting up the hot settings. Meddoff on. Finally, I have to declare the ad settings Madoff like this on these at settings metals. You says the barometer even. Okay. And then, um okay. Now, Uh, okay. You know what? I have to go east to create a new, uh, a state variable in this case, the state variable ease. Um, sin things said things listing Is the estate variable on? I'm going to set these estate variable toe on empty array. Okay. As you can see, this estate variable the estate variable settings listing. He said toe on empty array. Okay, The variable settings listing contains an NPR A and well, now, Now I have to get over to the middle at settings on And, um, what I want to do east to the glare. The constant, the variable. Um, copy settings. Okay. Settings, copy and copy settings. Okay. Gopi said things on. I'm going to say these these variable to the state to the state. Variable. These thoughts is state. Don't, uh, said things listing. Okay, A So you can see basically what I'm doing, what I'm doing right here is to make a copy off the variable settings listing. As you can see, I am making a copy off the variable settings. Least on Well, now I have to do is tow, um, is toe Add some items today. Copy settings variable. OK, so I'm going to other comment that says, having items through the array, I think I attempts to their rape and well, as you can see, the copy settings variable contains Honore. Okay. As you got. You know, the state variable said things listing contains an array on. Then we are making a copy off such variable on the copy is saved inside the variable copy settings. In other words, the variable copy settings contains an array. Okay, on now, what I want to do is tow tow at some items to their race. So I have to take being copy, say things that push. Andi. Um, okay, what I want to do is to add some settings. So this arrays, I'm going to use the I have to use the bush metals on. What I want to do is to add an object on the object object on these. Object contains three properties. One is label on going to set these. I'm going to set these property to the variable. These thought state both. Ah, cool rent label. Okay. And then, like, I have to ask the the property number, and I'm going to set these property to the variable. These thought steak. The current number. Okay. Finally, I have to ask the property color, and I'm going to set this property toe the variable. These that state the current colors. Okay. I know. As you can see, I am having some items toe the array copy settings on. Then what I have to do is to update the state, so I have to use this method. I have to use them. I have to add a comment that says for baiting the state variable. Okay, waiting just a variable. And in order to do it, I have to use cement of these dogs. Said state. Okay, on what I want to do is to update the state variable said things listing. As you can see here I have the variable said things listing. Okay, so I want Taubate. Variable said things listing, and I'm going to set piece variable toe. So the array copy said things. Okay, as you can see them activating the state variable said things listing on I am said I am setting I am setting this estate variable toe the array copy settings. Okay, I am I am setting Visa State Variable. Do they are a copy settings. Okay. And then, um what is? Okay. Well, then what I want to do is tow at a callback function on this callback function. This place I miss Ashley Council that, uh, that that, uh okay, these what I want to do now is to display a message to the concert that says said things and then I want to display another message to the console that this place, these variables, the's that state, those settings listing. Okay, As you can see, I am. I have to display a massage to the council on the moustache. Uh, contains the estate variable said things listening on. Well, I hope these works. So I have to go back to the council on I have to Stop the Web server by pressing the is controversy. I have to press like the kiss controversy in order to stop the the Web server on. Now I have to run with back on. Let's see what happens. Okay, well, now, as you can see, the growth off the application was compiled successfully on well and now what I want to do is to run the Web server where? So I have to use the comment. MPX Norman, I hit, enter and let's see what happens. And, well, you know, as you can see, the Web server it is working on, then well, I know what I want to do. What I have to do is to close the common prompt and I have to get over today to the browser and I have to refresh the obligation on Let's see what happens. Okay, well, now what? You can see this easy with Page, that this place on what I want to do is to add some settings. So in this case, I have I have to specify a label on I'm going to type in the label chocolate on. Then I have to specify the number, and I'm going to use the number 350 then I have to select a color. In this case, I'm going to I'm going to use the color orange. Then I press the button at settings on. As you can see in the inside the JavaScript console on ur raid. This place and this array contains the settings, As you can see here, I have the hero cop, the 17 chocolate. I have the number 350 on. I have the color A ranch. Okay on. Well, if I input other settings, I'm going to import. I'm going to import other settings in this case, Canada. I'm going to use the numbers 230 something. I'm going to use the color blue I praise. They don't at settings, and, um, if I scroll down. You can see that inside the inside the JavaScript console appears are Honore Misery contains toe to objects on the first object contains three three properties. Label Canada number 230 on color. Blue on the second object contains three properties as well. Label chocolate number 350 color orange on. This means that our application is able to save the settings into an array on Well, this is it for this lesson. On the next lesson, I will continue working on this application. 31. Saving input into three arrays: Okay. Want to another lesson off this tutorial on this lesson? When I went to Louise, continue working on the at Settings Medal and will, um, before. Well, what I want to do now is to head over to the constructors on, um well, where they want to do now east to create a three different state variables. The first estate variable is colors, and I'm going to set these variable toe on MT. Array. Then I have toe Athey state variable label label's and in this case, the variable labels. He said to an interior toe on empty array as well. And finally, I'm goingto be variable numbers. And in this case, the variable numbers He said toe on empty array and will now, as you can see, I just creative three different estate variable that I just created. Three different state variables on will know. What I have to do is to get over to the at settings meadows on. Um okay, when I went through now is to create a new a new variable on these valuable, um, will be copy. Uh, could be, um, copy colors. Okay. Copy colors is the name of this variable on in this case, I'm going to set this variable toe the state variable. These thoughts is ST dot colors on. Well, as you can see, the variable copy colors is a copy or contains a copy off the estate variable these dot s stated on colors. In other words, the variable is a variable Copy colors contains an array. Okay. And then what I want to do east toe. Um, I went toe at some I went toe and some I want tohave new items to the array, so they're a copy Colors. Okay. I want to ask new items to this array, so I'm going to use the myth of Bush. Andi will What? I want what I want toe at east. Um Is the value off the estate variable these dot is take the current color. Okay. As you can see, I am adding a new item toe the array copy colors. Andi, The new item is the color that the user is. Uh, he's choosing. Well, um, the Okay. Sorry. They What I'm doing, what I'm doing right now is adding a new i them toe there a copy colors in this case, Um what I want to ask east the color that the user selective, uh, by you by by using the drop down least. Okay, I am having the color that you see that the user selected by using. He dropped down least. Okay, I know what I want to do is to is to, um is to update the estate. So I'm going to use the metal restart said estate Onda when I went toe where I want Taubate is the variable colors on. In this case, I'm going to set the estate variable colors, do the array copy colors. Okay. As you can see, I am updating the estate variable, and I am dating the state variable colors, and I am setting the state variable colors. So the array copy colors. Okay, I'm going to have some comments. Okay? I have to ask some comments to these growth on, uh, the comment will be, uh I've seen items on. I have to add another Another government that says dating. Who did 18 is they variable. And then what I want to do is to us a callback function on things Call that function will display. Uh, we will display a message to the council on the message will be colors Kohler's. And then I want to update another message today. I'm sorry. I want to display another massage to the council on. In this case, I want to display the value off. I want to display the estate variable these not ST dot colors. Okay. And now is I save the changes. And will, um, no, What I want to do is to repeat this process two more times. So, um, I'm going to copy this cold. I have to compete isco's and then I have based the gold below like these. Okay, but in this case, I'm going to modify the variable. In this case, the name of the variable will be on copy labels and I'm going to set this variable toe the state variable. These thought estate. Those labels. OK, now, as you can see, the variable copy labels contains are GOP off the estate variable. These not is take the labels. In other words, the variable GOP labels contains an array on. Then I have to add some items to this. A rape. So I'm going to say copy labels. I thought bush okay. In order to add some items today. So they arrange. They have to use this go toe at some items to the array on. In this case, where I want to do is tow um, the estate variable V start estate. The current label on finally, what I want to do is updating the estate by using the middle of the stop said estate on. What I want to do is to update the state variable labels OK on. I'm going to set the state variable labels, Good array. God be labels. OK, I finally have to display a message to the council that says, uh, that says Labelle's on. Then I have to display the estate variable. These don't s take those, uh, labels. OK, Andi, Will, um, Now I'm going to repeat this process one more time, so I have to select this growth. They want to select this growth. I copy. This goes I know I have toe based the both below like this, but in this case, I'm going to name the variable as copy numbers. Andi, I want this variable. Uh, I want these variable copy numbers. I want to send these variable toe the estate variable. The start is take the numbers now. You can see at the variable. Copy numbers. Copy. Numbers contains a copy off the variable. These daughters stayed up numbers. OK, In other words, have you variable coffee numbers contains an array. Okay, As you can see, the variable copy numbers contains an array. Okay, Andi. Uh, okay. Now what I want to do is to whether you like them to these police. I want toe have a new item to the array, so I'm going to use the growth copy numbers. And then I have to use the myth of Bush and finally, what I want to ask right now. East, the estate variable. This is not a state. The courage current. Cool. Ran, Um, cool rent numbers. Okay. When I went toe, okay. As you can see here I am adding a new i them toe the array. Okay. And in order to us and you like them, I have to use the metal bush. I mean, this gaze, um I am adding the estate variable these that estate the current number. Okay, Andi, Then I have toe they the variable numbers. Okay. And I'm going to set the variable numbers do, uh the array. Copy numbers. Okay, I'm going to set the variable numbers. So there, Ray Gobi numbers. Okay. And then I have to display a massage that says numbers, huh? And finally, I want to display the estate variable. These thought this day thought numbers, okay. And will Ah, OK, basically, what I'm doing right now is toe have new items. So these three races, okay, as you can see here, I have three different a race. I have theory colors. I have the right labels, and I have the right numbers. What I what I'm doing right now is adding new items toe these array. OK, that's basically what I'm doing. I'm having new items to these three different arrays. That's basically what I'm doing. Andi. Um, on. Okay, Okay. As you can see, here in the copy numbers that push metal here, I have to copy numbers that push metal. Okay, remember that this method is used to ask new items, but But what I want to add here is a number. Okay? I want to ask a number here, so I have to use the make off parse floor it in order to add a number. Okay, because when he went toe right here is a number on in orderto a number. I have to use the metal parts Florida the middle parts Flora is juiced toe transform on a strange off text into a number. Okay, the metal parts floor plans transforms and a strange off text into a number. Okay, that's the reason why I am using this medal. This meant off. Okay, on Dwell. You know, what I want to do is to test this application on DSI, whether this is working or not. So I have to open the comment. Brunt and well, now I have to navigate to the folder and chart react, and then I have to run with back like these MPX with back on. Then I hit. Enter on. Well, let's see what happens. Well, now you can see the growth off. The application was compiled successfully. So now what I have to do is to run the the Web server. So I'm going to get the comment. MPX mourn, watch and then I have toe specify the rude folders now hit, Interred on. Let's see what happens. Okay, well, now you can see the Webster, but is working So now I have to close the comment browned on. They have to get over to the browser and I'm going to use the address. Local coast, local host 3000 I hit. Enter on. Let's see what happens. Well, now you can see this easy with page that display that this place. So I'm going to input a label, the label chocolate and then and I have to specify the number. I have to input the number 33 250. And then I'm going to use the color A barbell. Now I pressed it. The wood don't at settings on. As you can see in the JavaScript console appears Andre that contains Ah, the user input. Okay, This array contains on an object on the subject contains the label property, the number property and the color book property On below. I have an array. The array contains a the color purple I have here. Another array on the array contains the value they will use. This array contains the word chocolate on. Finally, I have another array on disarray. Contains the number 250 on. Well, now you can see the application has the ability to save the information in tow. Three different a race 32. Code a React component that displays the chart settings: Okay. Welcome to another lesson off the tutorial on these. Listen, what I went toe, though, is creating on you component. So now what I have to do is took it over to the Components folder on. I'm going to choose the option you file. Now. I have to say these options as well. I have to save this file. Us. Um, sittings said things listing said things listing the gauges. That is the name of the file on. Now, what I want to do from react, Andi. Then what I want to do is to import the container component from react. Bootstrap. It's last containers. And then I went I want to import the Rocca Bonin from react, bootstrapped his last room, and then I want to import the cargo Bonin from react. Bootstrap is slash cold and well, you know, what I want to do is to use the keywords export export, default, and then I have to use the key world class on. Then I have to specify the name of this component. Remember that the first letters off the name of the component most B Cooper case. Okay. The first letters off the name of the component Most B Cooper case in this game, the name of the component East said things said things listing and they have to use the keyword extends on. Uh, I didn't have to use a reactor that component on Well, now what I can do is to finally define the constructors. Remember that the constructor is just to set up the parameters. I have to be in super props, and then I have to define the render Madoff. Okay. And finally, I kept use the return statement and will, um okay, now what I want to do East toe. Um okay. I want to I want to place some both inside the render metals. So in this case, But I want to do east to save I went to declare a new constant on the constant ease, um settings settings on. Well, now I'm going to set these constant toe the perimeter. These those props, the settings okay on. Well, it's important to say that the barometer said things contains Honore off settings. OK, In other words, the constant settings contains Honore. Okay, The constant settings contains Honore. So I'm going to add a comment that says, uh, saving array oh, settings. Okay. And then, um, what I want to do is tow. Okay? I wants to declare another gone. I want to declare a new variable these valuable ease. Html markup. I've been this variable is an empty array. Okay, on then. I know what I want to do is tow is to eat a rate over the array settings. Okay, I want toe iterating over the array settings, so I'm going to use them it off map, and then I have toe have callback function on. Um, Well, now, now, these things called the function requires two parameters. The first parameter is the first parameter is said. Things object on the second parameter is index. Okay? And now, uh, no. What I want to do East toe atthe on new I them toe the array html markup. As you can see here, I have a theory. A html markup. Okay, it be variable. The variable html markup contains on in theory, on what I want to go now east to add some items to this array. So I'm going to use the night off html markup The push on dwell what I want to do east to add a new item into disarray. Andi, Um, such I then East I robe component. Okay. And then this row component most conveying a key parameters on. Ah, this key parameters, this key parameter will be ah, Index dash. And then I have toe I have to have the index parameters. OK, basically, the key parameters is just toe event. If I each off the rose. Okay. The key parameters is used. Toe identify each off the road. Ellen, A Sorry. The key parameters is used to identify each off the road components. Okay, on then, inside these these row component, I want to ask three different components and, well, uh, the first go component. Um, okay. The first call component will contain the property settings. Object, I thought. And then I have to, uh okay. Have to go back to the fire charge generators on. Um, Okay, well, as you can see here, I have um okay, remember that I right now I am in the charge. Generate or dot Js file. Okay. In this in this file here, I have the state variable settings listing these variable e contains an array on these airway. Um, this array contains different objects. Okay, As you can see here, I have the state property, estate variable settings listing. These variable contains an array on diesel. Re contains several objects again on each off those objects contained three properties the property label, the property number and the property color on. Well, in this case, I want to display the property level on. Then I want to display the property settings. Object thought Ah. And the number on Then I want to display the property settings. Object thought, uh, call off on. Well, uh, the the array html markup contains ah, set off different row components. Okay. The way HTML markup contains a set off different row components. Okay, Aunt, um, now what I want to do is took it over to the return. A statement. And I have to, uh What I want to do is to create a container components on inside this container component . I watched the place. I wrote a bonus, and again inside these Kulka decides he's row component. I want to place three different call components. Okay. On the first call component will contain. Um, I didn't do that. Story Will will contain a haven for that. Okay, on this together for tough contains the text labels and then the second call component will contain Ah, Heather. For for that on this together for 40 contains the text numbers. And finally, the last call component contains a porta on these together 40 contains the next colors and finally Well, now, as you can see, the array HTML markup contains a set off different road components. Now, what I want to do East to this play is to display the contents off this array. Okay, I want to display the contents off these array. In other words, I want to display the array after these rogue component. Okay, on. In order to display the array, I have to use races and then they have to specify theory html markup. Okay, on what I what I'm doing right now is to display the contents off the array html Marco. Okay, I I am displaying the contents of the array html markup. Okay. And as you can see here, I just created that they will, um, at this table contains three contains a row. Okay, well, I'm all the growth. As you can see, these gold right here east used to create a table. OK, this coat right here is used to display a table to the browser. Okay, on, um Well, I guess this is it for this lesson. Now, as you can see, I've just created a component that is able to display a table toe. The Web browser on such table contains the settings that the yusor in books Okay, the table contains visit things that the user Ingles on. Well, on the next lesson, I will continue working on these application. 33. Display chart settings: Okay, Welcome to another lesson off this tutorial on these lesson. What I want to do is continue working on the application on Well, what I went through now East to get over to the file charging rate or DOJ? Yes, on. Um okay, the first step that I can think that I have to take is to import the component said things listing from the file. And then they have to specify that bad toe the file that contains the component. In this case, the file is the but to the vile East, off the slash and then settings said things listing. Okay, something's listing Is the name off the file that contains the component. Okay. Okay. And now I have toe scroll down on. Uh, OK, what I want to know now is took it over to the so the I have to get over to the guard component here. I have a car component that convenes the decks. Settings listing. Okay, As you can see here, I have a card component that contains the decks settings listing on what I want to now is toe create on instance off the component said he's listing on Well, if I go back today for the component. If I go back to the component, you can see that these components requires a barometers. Okay, In order to work this component this component requires a parameter on such perimeter is settings. Okay. This component requires the settings parameters in order to work. So I have so set the settings, parameters, the settings, but said the said Phoenix parameters, and in this case, I'm going to set the settings parameters equal to the variable thes the estate adult. Andi, if I hit over to the constructors, you can see that here I have the state variable settings listing. Okay. The estate variable said things listing Convince Honore off settings. Okay. The estate variable said things listing contains an array off settings on. Well, in this case, what I want to do is to use such variable. So I hope that I cut that they've seen these dog is ST dot settings listing now, as you can see visa things. But I'm a dish. He said to the state variable v stop a steak. The settings listing on, um and well, I guess this receipt. Um okay, but before I continue before I continue. I have to get over to the settings listing component. Aunt, I'm going toe. Uh, I'm going. I have to get over. I have toe. I have to ask some Koth inside the render made off. Okay. I have to ask some growth inside the Orender Middle. Ah, on the coach is is very, very, very on. Um, okay, the goal is very simple. I'm going to place an if block on the east block is going toe. Verify the barometer. The stock props dot settings. Remember that The parameter the stock props, the settings Is Honore okay? The parliament. That piece of property settings is an array. Um, so in this case, well, remember that the perimeter, these not these stock props dot settings is an array. So in this case, I'm going to use the property lane. Okay. The property lane. Better minds. The property lane contains the number off items off the array. Okay, the property length. Sorry. The property length contains the number of items off the array. So if the number of items off the array equals zero, then these thes if block is run. Okay? I'm going to add a comment that says the array. The the ray is empty. Okay, If you're a is empty, then this if block is wrong. OK? On what I want to do is to return is to return. Ah, I have to. I have to display a message to the goingto the browser. Okay. And the message to the browser will be a heavier one. That that contains the next. Uh well, I wanted okay. If they already is empty, I want to send a heather toe. The browser on the heather contains the next. No, no items available. Okay, No items. Aunt's I want to send their thes text, so I have to You have to ask via style, attribute. And in this case, I want to use three property text align on. I'm going to say said this property to send them. Okay, well, you can see if the array is empty, then these heather is displayed to the browser. Andi scare. Other contains the next. No items of high level. Okay, Okay. So now I can I can, um okay, as you can see, I guess this is it. This is so the growth that I need and what I want to do now is to verify STIs toe. Verify whether all this goes, works or not. So I have to get over to the console and I'm going to run. Uh, I'm going to run with back, so I have to use the government and the X with back hit. Enter on. Let's see what happens. Well, and as you can see the coat off, the application was compiled successfully. So now what? I want to lose to run the Web, the Web server soak up to use the comment and be X no mourn and then three option watch and then I have toe specify the route further. Now heat in there on. Let's see what happens now you can see Northman is running he d Web servers And well, now, as you can see, the Web server is working. Okay, so now I can close the common prompt. Can I have to get over to the browser? And well, in this case, I'm going to use the address. Local Coast 3000. I heat in there. Let's see what happens. Well, now, as you can see this easy with page that this place on, if I scroll down, you can see that here I have the settings listing section on, as you can see the massage. No items on my level piece play this place. Okay? No, what I want to do is to add some settings. So in this case, I'm goingto be setting. I'm going to ask the label chocolate. I'm going to use the number 350 on their hike up to use the color purple. And finally, I'm going to press the button and settings. And as you can see, the settings appear in the settings listing section. Okay, Now, if I If I have another they labeled understands ice cream and then I'm going to use the number 500 and then I'm going to use the color green. I possible don't have settings and that you can see the the settings listing glass abating wasa belated. Okay, the settings listing. What's the latest? I'm Finally I'm going to us, Uh, another label. I'm going to use the label milkshake, me shake, and then I'm going to use the number 250. And finally, I'm going to use the color orange possible donut settings. And as you can see, the settings appear inside their settings listing section OK on. Well, before I continue before I feel is Suri. I want toe. I want to get over their ego settings listing component. I want to increase the size off the decks. Uh, so I'm going toe the style, the style attribute or the style parameters on going toe. What we want to do is to increase the size off the next. So I'm going to set the property phone size. I'm going to set this property toe 1.3 m's. Okay, 1.3 ends. Okay, 1.4 ends. Okay, Now I say the changes, I go back today. So the council and I have toe weather. As you can see, Northman is restarting be web service. But what I want to do now East was stopped the Web server. Okay, so I have to press a case control. See, I bet it's a kiss controversy to stop the web service. And then I have to run with back on. Let's see what happens on. Well, I know what you can see through the gold off. The obligation was compiled successfully. So now what I want to do is to run the Web server. So I'm going to use the comment on BX Northman. Keep interest and let's see what happens. And, well, I know what you can see. Three Webster. Where is working? Okay, the Web server. It's working. I can close the common problem. I can open the web browser on now. I have to refresh the application. Okay. I want to refresh the application and well, and now you can see this easy with beige that this place on Well, what I want to do now is to have another label in this case label will be chocolate again. I'm going to use the number 250. And finally I have to choose the color blue. I police the Bhutan at settings, and as you can see, the settings appears below on. Then I have toe ask another another label. Ice cream. I'm going to use the number 340 and I'm going to use the color orange. I press the boat or not settings on again. The settings appear below in the settings listing section. And finally I'm going to add another. Another label the label meat, milk shake. I'm going to use the number 505 100 finally, and I'm going toe use the color green I present with not settings. But as you can see, the settings appears in the settings listing section. Okay on. Well, thes means that the application has the ability to save the settings that the user in boots . 34. Make button to create a chart: Okay, Welcome to another lesson off this tutorial on this lesson. Where I want to do is continue working on the charge generator or a component on. Well, now, as you can see here, Erica, the charging arranger component on Well, where I went to now. East toe, head over to the constructor. Andi. Well, here I have the constructor on. Well, now what I want to do is tow, declare have to declare. And you variable. In this case, I'm going to declare the state variable display this place chart and I'm going to set this variable to forests. Okay, As you can see here I have the estate variable display chirp, and I am sitting on these variable is said to force. And then where I have to do is to scroll down. I have to scroll down and we'll know what you can see here. I have got a component that contains the text chat and well, you know what I want to do is to create a scenario, Badir. Okay? I have to define a urinary operators and will ah, he wreck up the the ordinary. Okay, here I have the denarii operator and will now as you can see here, I have eternally operator. Andi. Um, Okay. This is eternally operator. Sorry. Well, well. Sorry I have to play school racist before I I place the okay. The first step is to place calling because the racist Sorry on then, As you can see here, I have a player off Courtney races. And now inside this payer off course races I have toe have to place the ordinary operator like this. Okay, here I have bean gunnery operator and will become the condition off history operation is if the estate variable these dot state both this play chart equals force. Okay, E v estate variable these dot estate that this play chart equals force. Then I want toe display a coast to the browser. On what I want to explain to the route, sir. Ease and well, what I want to display to the browser. Ease bhutan. Okay, I have toe define aboot components and I have to set up these Good on go these boots on component. Well, the text for this brutal component is create church create chart is the next for these wooden component and I have to set up these Bhutan on the type of this. Bhutan is a Bhutan, I have to say the barometer variant on. I'm going to send these parameters toe warning 10 years ary and well, it's important to say that the variant parameters he's used to set up the background color okay, the variance parameter is just to modify the background color on well and night have to specify the I have to specify the size parameters and I'm going to set the size parameter too large on then I have toe specify the on bleak event. Okay, I'm going to set the public event to the middle of these thought this play chart. Okay. As you can see through the only event he said limited these dogs this play church and we'll know what I want to do. East toe off course. As you know, as you can see, I don't have the mental thes thought this play chart. I know happy met of these play charts, so I have to create such medals. So I have to get over to the constructor on. I'm going to set up the metals by using ago these thought this play these plea chart equals p stop this bleacher don't mind on, then these okay? And now what? I want to go east toe east. So the clearly metal, this creature this play chart like this on Well, uh, this metal is very, very Sperry. Very Ismael. Very simple. Okay. Uh, okay. I said you can see a metal display chart is wrong. Every time the user leaks, they don't. That that I am creating. Okay, Okay. So every time. Okay. So when the user clicks this button, okay, when a user. But when a user clicks this button or when a user heats these woman, then the metals, this play chart is Rahm. Okay? When the user hits this, wouldn't the tomato? This clay chart is run and the metal uh, the mento this play chart is going is going toe Date the state variable. Theis play chart. Okay, the mental this place chart is going toe baig the estate variable this place chart as well . Okay, So in other doing, I have to use the mental. These does these dot Said estate on. Well, as I said, I want to modify the estate variable piece play chart, so I'm going to say these variable toe um I'm going to set thes variable. True. Okay. And then I went to other called a function, and this called the function, displays a message to the council. So I have to use the council on what I want to explain to the console. Ease is a moustache. You want to create a child? Okay. You want to create a chart? Is the message that this place So they got to the JavaScript console and, well, you know, as you can see, these middle modifies the value off the estate variable display chat. Andi. Well, now I have to go back to the previous goals, and as you can see Well, here, I cap, uh, here I have the This is the growth that is displayed when the value off the variable displaying chart equals force. Okay, I'm going to add a comment that says, Ah, okay. No, I'm not I'm not I'm not going to add a comment, OK? I'm sorry. Where you want to do is to add on a leaf. I want to add a leave at. Okay, I have to leave on. Ah. What I want to do is to act some styles to his death back. So I have to ask Theater tribute style on. I have to us toe two players off braces. Okay, on what I want to do is to use the property text align on. I'm going to send this property to send their okay like this. I have to say these property to center and then what I want to do now east to select the coat off the return. And I have to cut the goes off the return. And now I want toe based the gold off the Bhutan in between. These the tax. Okay. I want to place the Bhutan in between these the attacks like this. Okay on. Well, now, as you can see here I have the Bhutan here. I got the the Wilton Okay, on the Bhutan is placed in between the gift tax on now we're going to do is tow east toe, act the goals that will be wrong if the value off the display chart variable east True. Okay, so I'm going to add a comment that says, uh, if the variable these dot state dot thesis play Chad, if the variable these took is take the piss Bleacher. This plane chart equals troop, then these growth will be run. Okay, If they variable these dot estate, the display chart equals through Then these blood will be run on. What I want to display to the browser is, uh, Heather one that in this case, I want to please play. I think that saree that contains the next you want a toe. See the chart? Okay. You want to see No Serena moustache that this place to the browser is the chart. This place here. Okay, on where? Now you can see these piece of growth is run. If the variable these thought is stated on this play chart equals true. Okay, this piece of gold is run if the variable these dot estate that this play chant and goes through. Ok, so now what I want to do is to test this goat. So I have to get over to the console and I have to run with pack. Sir, I'm going to use the comment and the X with back on. Let's see what happens. Well, now you can see the cold off. The application was compiled successfully, So now I have to run the web server so I'm going to use the comment and the eggs no more. Then I have to specify the option. Watch on, then. I have to specify the root directory. No, I keep in there on. Let's see what happens. Well, well, now, as you can see, the website what is working? So now I can close the comments prompt. And I have to get over to the browser on. I'm going to use the address. Local hope, local coast. Look at host 3000 I he entered and let's see what happens. Well, you know what you can see. It seems like I never moustache this place in the JavaScript console. So now if I go back to the console, you can see that here. I have an error. It seems like the error he's found in the semi. Gulen, As you can see here, I have a semi Gulan. Andi will. It seems like three semi colon is the problem. OK, so I have to go back to the growth on. I'm going to remove the semi colon. Okay. As you can see here, I have a semi colon, so I'm going to remove the semi colon. I save the changes. I go back to the council. I stopped the Web server by pressing the case controversy. And then I start with back and let's see what happens. Well, you know what? You can see the gold off. The application was compiled successfully. Now I can run the Web browser, search the with the Web server it one more time I hit. Enter on. Let's see what happens now You can see the Web server is restarting on. Everything appears to be working. Okay, so now I can close, going prompt. I have to get over to the browser and I'm going to refresh the application and let's see what happens. Well, and as you can see, it is easy with Page that this place on now if I scroll down, you can see that he recapped. They don't create chart. So I'm going to press able don't create chart on. Let's see what happens now. You can see at the message the chart. This place here shows. As you can see, this is the message that appears the chart. This place here. Andi, this means that the Putin is working Okay on. Well, I guess this is it for this lesson. On the next lesson, I will I will go to any working on this application 35. React component that displays a chart: Welcome to another lesson off this tutorial on this lesson. What I want to do is creating a new component. So I have to get over to the Components folder on. I'm going to choose the option on your file. Now, I have two main this vile as, uh, chart this plea, don't you? Yes. Okay, on now. Okay. Before I continue, I have to install two different dependencies on. Well, what I have to do eats to install two different dependencies. So I have to head over to the console on I have to stop the web server, right? Pressing the keys controversy present his controversy. And now I have to use the command NPM instead safe on the first dependency that I need. East chart thought yes. Okay. Chart dot Gs easy differs dependency. Chart the chart dot I guess on the second dependency that I need is react Bash. Uh, charged? Yes. Dash to Okay. Those are the dependencies that I want to install right now. So the 1st 1 is charged, though. Yes, and the 2nd 1 is react. Giardia. Yes. Two. Okay. And I hit. Enter on. Let's see what happens. Well, now, as you can see the installation process is complete. So now I can closing. Common prompt. On If I get over to the backers. Jason filed. You can see that. Here we have the section dependencies here. Happy section. Dependencies on. Well, here I have the chart thought Jay s dependency as well as they react. Charger? Yes, to dependency. Okay on. Well, now I have to get over to the chart explained Doctor. Yes, File on. I'm going to import react from react, and then I'm going to say import chart from, uh, charted all year. Yes. And then I'm going to say import, uh, import, though Newt, though no from, uh, react charge. You're years too. Okay on. Well, now what I have to do is that I mean, exported fault. He export default on. Then they work class on. I have to specify the name off this component. Remember that the first letter off the name of the component most B Hooper gays. Okay, so in this case, the name of the component is charged peacefully. Chart, please. Please. So recharge Eastleigh. And then I have to use the g word extents on. Uh, finally I have toe I have to use react the components and then they have to use Racists. I finally have to create a constructor, the constructor off these press. Remember that? Because stricter is just to set up the parameters off this component. So I have a clean super props as well. And then I have toe define the render meadows. Andi, I find that they have to ask the return a statement, okay. And well, we're going to do as a first step east toe. I have to the glare. Several gum stance. Okay. I have to declare several Constance the first constant East title on I'm going to set this title toe the this constant toe the perimeter these dot is thesis thought crops the title. Now I have to define the constant description and I'm going to say this constant toe, the parameter, the stock props, the description, these are props, that description and then they have to define another constant. And, well, you know, what I have to do is to declare another gun stand. I have to the clearly constand on numbers on I'm going to set this constant toe the parameter these the props stock numbers on then they have to declare the constant labels. And I'm going to say these constant toe the parameter toe, the parameter he stopped props, don't labels, and then they have to declare another constand the Constand colors on. I'm going to set these constants toe the perimeter. The stock robes the colors. Okay, on, Um, no. What I have to do is to declare another Constand, and I'm going to the clearly constant settings on this case. This constant contains Andi, and an object on the subject contains the property through the late the property labels on . I'm going to set these property. So the, um I'm going to set these property. So the, uh, toe to toe the labels constant and then what I want to do east to us, the property, that s it's. And in this case, the property datasets contains an array and disarray contains an object on the subject. Convince the property background, color, background color. And I'm going to say this property to the gun stand colors on. Then I have to ask the property that that I'm going to say this property to the gun stand on numbers. Okay, Andi. Well, I know what I have to do is to create the thief. Uh, I have to agree. Create a thief element. Okay. I have to create a player off lift off leaf tax. Well, I know what you can see here. I have a player off thief, a player off the tax. So now I want to do is to add some style. So I have to use the Estyle attribute on. I have to ask the wheat property, and I'm going to set this property to 70% on then I want toe as the left margin property, and I'm going to say these, okay, I have to ask the left margin property on. I'm going to set this property to 15%. Okay, on now, what I want to do is to create an instance off the component, the dope. Newt. Andi. Well, as you can see here, I have an instance off the component, though Newt on then wherever we have to do East toe asked the option that that I'm going to say these options so they constand settings Okay on. Then I have to ask the option. The option. I have to have the parameter options. Okay. The bottom of the options on this parameter. Options contains at the year off to a player off braces. As you can see, the perimeter options contains a Bayer off braces on. Then, um, I'm going to ask the property responsive, and I'm going to set this property to true. Uh, true. I'm going to ask the property on my name, a suspect racial, and then I'm going to say this property to true Onda. Finally, I'm going toe as the property. Um, how he preferred the ah, I go, Yes, a proper data and I'm going toe said this property toe, toe on object on these object contains the property display this play and I'm going to say this property true. Then I'm going to add the property phone size and I'm going to set this property toe 23 then I'm going toe. Have the property text on. I'm going to say this property to an array. Okay. And misery contains two items A. So you can see here I have the constant title as well as the constant description. Okay, so now the first item off the array is the gun Stan title on the second item off the array is a constant description. Okay on. Then. I have to ask the, uh I have to ask the the property allegiance on a these property. Convince an object on these objects. Contains the properties. Play on. I'm going to set this property true on. Then I have to have the the property position, and I'm going to set this property left. Okay. And well, I guess this is it. And now I just created these component on this component this component East Able toe, display a chart, a chart toe, the browser. Okay. This component is able to display a chart. A chart to the West browser. 36. Testing React component that displays charts: Welcome to another lesson off this tutorial on these lesson. Where I want to do is he's continue working on this application on Dwell on the previous lesson. I created the chart, this plane component, okay. And will Now what I want to do is to get over to the file chart in Reiter. Dog? Yes, on. Um okay. What? Like what I have to do is screw import. I'm going to import the component chart this plane on. I have bean import charge display from Ah. Now I have to specify the bat toe the file that contains the component in this case, the back. He stopped a slash and then I have to specify the name of the file. The conduct contains the component in this case that the file is chart. Is Charles this play? Okay, jerk, This play is the name of the file that contains the component. Okay. And now I have toe have to scroll down. Andi, will I have toe? Okay. As you can see here, I have um here I have these Heather three. That this hero cop killers, As you can see this together contains the text chat. This place here okay on what I want to do is to remove piece together. Okay? I want to remove these headers, and I want to place on instance off the component. I want toe. Okay, Degree, I want to. Okay. Sorry about that. Um, I want to create an instance off the component chart. This baby. Okay on. Well, advocacy, the component chartists play requires several parameters. OK, These components chartists plea requires several parameters. So now I have to set up on those parameters. OK, Andi, I'm going Toe bean a title on. Well, I know you can see. Here we have the title barometer on the title parameters is said toe the variable the stock is steak. Dote on. Then I have to use in this case, I'm going to use the estate variable chart title. Remember that. Here we have the state variables chart title charge description. Andi also have colores labels and numbers. Okay, Andi. Um okay. In this case, I want to use the variable These don't estate talk chart tidal and then I have toe. If I go back to tow the components, you can see that I have to use the I have to set up the property description. So I'm going to die being description on I'm going to set this parameter. Sorry, I'm going to set this parameter toe the variable, these thoughts. Is they the chart description? Okay, Andi, Then I have toe. Well, if I go back to the component, you can see that I have to set up the perimeter numbers. So I'm going toe, uh, what I'm going to take being numbers. And in this case, the parameter numbers. He said to the stop, Is they the numbers? Okay, on If I go back to a component, you can see that I have to specify I have to set up the parameters. Labels and colors. Okay, labels and colors. So I'm going to ask the parameters labels, and I'm going to set this parameter to the variable distort is staying those labels. And then I have to add the barometer colors, and I'm going to say these parameter toe the variable these thought stayed told colors. Okay, I know you can see I just set up the chart display component and will, um Okay, now what I want to do is to verify these. Ok? What? I want to do now is to test when they're this gold is working or not. Okay, so I have to have to go back today. The going solo and I'm going to run. Uh, I'm going to run with back, so I have to use the comment. MPX went back. I hit. Enter on, Let's see what happens. And well, you know what? You can see the gold off. The implication was compiled successfully. So now what I want to do is to run the Web server. So I'm going to use the command MPX no one in order to run the Web servers on. Let's see what happens now. As you can see, enough money is restarting the Web servers on Dwell. Everything appears to be working. Okay, so now I can close the common prompt. I have to get over to the application and I'm going toe. I'm going to refresh the application. Andi, let's see what happens. And well, you know, as you can see this easy with page that this place on Well, no, What I want to do is to set up a chart on you. Chart on Well, a. The first step is to provide a title for the chart. In this case, the title is my favorite. My favorite desserts on. I have to provide a description for the chart. In this case, the description is a number of times Number of times. I ate these desserts last week. Okay? A number of times. I ate these the Surks last week. And then they have to have the first desert in this case, the first Desert east. A great. And I'm going to that. I'm going to set the number between 25 I'm going to choose the color blue. Now I pray I pray Zabel don't add settings on Dwell a Now what I want to do is to add another desert. In this case, I'm going to use the dessert ice cream on. Well, I'm going toe. Specify the number at 10. And then in this case, I'm going to use the color orange. I know I praise the Bhutan had settings and finally I'm going to ask the the label Milk shake, milk meek. I mean, shake on. Now I'm going to use the number at birth, and I'm going to use the color green. Okay? And now it president, don't at settings. And, as you can see in the settings listing section appears listing off the off the desserts as well as a number of times that I ate these desserts last week. And then here I have the colors. Okay, on now where I come to do is to praise the Bhutan creates chart. OK, so I'm going to press the but don't create chart and let's see what happens. As you can see here I have a chart, and here I thought, the description Hey, we have the title off the chart. In this case, a title is my favorite desserts on, but I Happy description the description East number of a number of times. I ate these desserts last week on. Then I have the legend on the left side off the screen on here I have the Corine bickering represents milkshake because our blue represents chocolate and the color orange represents ice cream on. Well, now, as you can see, Thea obligation has the ability to create adjourned, uh, from scratch 37. Button to save chart settings: Okay, Welcome to another lesson off this tutorial on this lesson. What I want to do is continue working on the charge generator the genius file and will know what you can see here. I have the guard component that contains the chart text. This is the guard component where the's chart is displayed. Okay, this is the car component where the chart is displayed on Um Okay, well, now what I want to do east to add another calf component. Um, so but in this case, what I want to do is tow use. Ah, at the Emory operator. OK, I want to use a veterinary after I want to use a urinary operators. So, um well, I'm going to place a racist, as you can see. And then inside the braces, I'm going toe as a veterinary attorney. Mary Operator. OK, on as you can Askew can see here I have the turn. Eri operator. Ok on. Um Okay, Now the condition off these Furnari operate the condition off these Furnari operator is if the variable d start state that, uh, this play chart equals true, then okay, If they If they give the variable if they variable these thought estate about this play chart equals true. Then what I want to do is to display 1/2 component. Okay, Andi. Well, what I have to do now east toe is to add a component on, then inside this car component, I'm going to add another. I'm going to have another component. I'm going to ask the component card. The body. Okay. Card the body, Aunt. Um, Okay, well, as you can see here, if I have the guard component Andi got component contains the guard. The body component. Andi. Um Okay. Uh, okay. Um Okay. Now what I want, what I have to do is to set up this cart component. So I'm going to I'm going to ask the background property on I'm going to set his property to light on. Then what I want to do is to add some very basic styles to this car component. So I have to have the style actually shoot and I have to use to payers of courtly races in this case, the color off the text, in this case, the color property. He said toe black on what else? Um, okay, I'm going to ask the property margin top. Okay. I have to have the property margin top on. I'm going to say this property to 1.51 point five m's. Okay, Andi. Well, now what we have to do is to add a Bhutan. So in this case, I'm going to have a broken components on the text off this Putin is safe chat. Okay, that is the text off these wooden safe chart on. Then where I have to do is tow the very end. Ah, the very end parameters. And I'm going to set these parameters to success. And then I have to ask the size parameter on, I'm going to set these parameters to large. I'm finally I'm going toe go. I'm going to ask the parameter type or the attributes type on. I'm going to set this parameter toe. I'm going to set this attribute the wood on on. Finally, I'm going to ask the on click event on. I'm going to say I'm going to say these click even toe the middle's these thought save chat on Well, a So you can see this is the gold that this place if the variable these thought estate the peace play chart equals true. Okay, this is the coach. This is the cold that this place ive the variable, the start estate, the thought this play chart equals true. And then, um then I have toe I have to specify I have toe. Okay, I have to specify. Okay, now what? I have to specify what happens if the value off the bar if they value off the variable is equal to falls. OK, so I'm going to have a comment that says what happens every variable. Okay, I'm going to other comment that says, if the variable these thought is they though these don't estate the, um if the variable these thought estate, though. Ah, these plain chart equals falls then this is what happens. Okay, s so Well, as you can see, I've just created these comment on this comment. Basically, this comment, basically me says that if the value off the variable V start estate about this play chart equals falls, then this is a code that is run OK on. But if the variable if the variable these don't estate about this play chart equals falls, then what I want to do is to return annulled. Okay? if the variable the stop a state, the display chart equals falls. Then what I want to do is to return newly. OK, In other words, I want to return nothing. Okay, ive the variable. These not estate. The display chart equals false. Then I want to return a new one. So the browser Okay, on, um and will, um well, I guess this is sick. So now what I have to do is tow. I have to get over to the console and I have to run with back. No, Sorry. Sorry. Before I continue. So before I finish Sorry. If you analyze the gold off these Bhutan, you can see that these bees Bhutan requires the metals, these not safe chat. Okay, so I have to set up the metals, the stop save chat. So I have to get over to the constructor and I have to set off the metal. Okay. Some winters. I'm going to say these thought safe chart equals these dogs. Safe chart Those bind on, then these. Okay? As you can see, I am setting up the methods save chart on now. What I have to do is to the clergy metal's safe church. Okay, on, um, you know what? What I want to do is tow display a message to the console that says you want to save the chart settings. Okay. You want to say the chart settings? So as you can see, the metal safe chart is run if the user heats the wooden. Okay, the metal safe chart is wrong. If the user heats the Putin on, then these metals thes place and my such to the council that says you want to say the chat settings, okay. Not have to go back to the console. And I'm going to run with back by using the comment. MPX went back. Now hit. Enter on. Let's see what happens. Okay, and now you can see the cold off. The implication was compiled successfully. So now I have to run with the web server. So I'm going to use the comment MPX and the ex a note. Morning on. Then I have to specify the option. Watch. And then I have to specify the root folder. Okay, I now hit. Enter on. Let's see what happens. Well, now you can see North Bone. Northman east Restart. Teeny. The web servers on Uh, okay, this process takes a while, but basically no more is restarting the Web server. Okay? And everything appears to be working now. The website. What is working and will you know, what I want to do is took it over to the browser on. I'm going to use the address. Local host, local host, 3000. I heat inter. Let's see what happens. Okay. And now, as you can see, this easy with page that this place on Well, no, what I want to do is to set up a very basic chart. So in this case, the title will be favorite. My favorite desserts. Okay. My faith worried my favor Read desserts on. Then I have to add a description in the skaters. Reaction is a number off times. I aid these. Uh huh. The third's, uh, last week. Okay, on then I have toe after he deserved chocolate. I'm going to use the number 15 and then I have to use the color orange principal doughnut settings. Finally, I have to ask the desert ice cream, and now I'm going to use the number 12 and I'm going to use the color green now impossible to not say things. And well, now I'm going to press a button save chart. And well, now you can see here. I have the I have here. I have the, uh, the daily chart, but well below I have on a green bottom. Okay, as you can see here I have the green Bhutan that says save chart on now. What I want to do is to open the developer tools. I want toe open the developer tools. Andi, I want toe. I want to use the JavaScript council, so I have to select the JavaScript console, as you can see. And now I'm going to press a button save chart. Okay? I have to prison. Well done. Uh, I I have to Prison Wouldn't say Chart. Sorry. Okay. Okay. As I said, I want to present new tone safe chart on big visible. Don't say chart on as you can see here I have theme s ash. You want to say the chart settings okay. In the JavaScript console, I have the message You want to say the chart, the chart settings, which means that the applications working So I'm going to press a button one more time and as you can see here, I have the message. You want to save the charts? Settings again. Okay, on here. I have the number two Onda. That means that the that the middle safe chart was wrong twice. Okay. On. They may have toe president on safe chart on. Well, I know you can see the Miss Ash. You want to say the chart settings is run several times? Sorry. Sorry. I know that you can see the message you want to say. The chart said things This place several times, Which means that the application is working Okay on Well, a business it for this for this lesson. On the next lesson, I will continue working on they would don't save chat. 38. Making a request to the API with fetch: Okay, Welcome to another lesson off this tutorial on this lesson. What I want to do is continue working on the display chart. Sorry, I on this lesson where I went toe though, is continue working on the safe chart. Medal on will assess. You can see the say. Well, as you know, theme. It'll save chart runs when the user heats the green Bhutan saved chat. Okay, So when the user heats the green Bhutan safe chart, then these middles safe chart the middle safe chart is wrong. OK on then what I want to do is to make is toe is to make. What I want to do now is to save the chart settings in tomato TV OK on in order to save the charts settings into manga TV. Um, what I have to do is tow is to use the A B I Okay. I want to use the FBI in orderto save their settings into manga Levy on. Well, in this case, I'm going to use the addresses slash ap I slash safe charge. Andi will now three second parameters. You can see here I am using the made the fetch, okay. And using the metals, which on these metals, um, contains the The first parameters for this method is the address slash 80 i slash safe chart on. They may have to specify these second parameter on the second parameter is an object on the subject contains the property medals. And I'm going to say this property toe post on Then I have toe have the property headers and I'm going toe I'm going toe I'm going toe the hair content type content type are not going to set discover to obligation it slash Jason. Okay. And then what I want to do is to add another property. I'm going toe the property body and I'm going to say these property through the metals. Ah, Jason, it is strange if I Okay, so read. Jason is trained. And if I on then a these metals contains the information that I want to save into Mongolia . Be ok. These metals, the metals. Jason thought a string. If I contains the information that I want to save Indu mongo db on Dwell Um, in this case, I want to save into mongo db the property title on bond. Well, if I If I head over to the constructor. You can see that he records the estate variable chart title. Okay, here we have the state variable chart title. Um, so in this case, I'm going toe. I'm going to set the property title to this day. Variable. These thought is they the chart title on? Then I'm going to ask the property description, and I'm going to say this property toe they state variable these dot state dot chart description on. Then I have toe play. I have to have toe asked the property color the property levels on. I'm going to say this property to the variable. These thoughts is they thought labels and then I have to have the property colors And I'm going to say this property toe these thought state the colors on going toe at the property numbers. Okay. And I'm going to say this property toe these thought stay the numbers and, well, you know, as you can see, he right here I am just seen on the state variables, labels, colors and numbers on. Well, if I get over to the to the constructor, you can see that here I have the the variables colors and I have the variable labels. And I also have the A state variable numbers. Okay. Here, all these different state variables. Okay, Andi. Um Well, um okay. And now, as you can see, right at the, uh, you have the the bitch medals on, then I have toe Add the medals, then. Ana, I have toe have a cold. Fusion on the's callback function requires a parameters the parameter is response on. Well, it's important to say that response the parameters responds, represents the information that is coming from the web servers. Okay, the perimeter response represents the information that is coming from the web server. Okay. On, in this case, I'm going to say return response. Thought Jason. Okay, on as you can see, here I am using the metal Jason on the metals, the metals. Jason transforms the information that is Kkamini from the Web server. Indu I Jason object. Okay. The metal Jason transforms the information that is coming from the web server in tow. Ah, I into a Jason into adjacent object. Okay on then. I'm going to use another method then and these metals requires a call back as well on in this case, the call the function contains the parameters and the barometer east response as Jason. Okay on. Well, uh, response as gaze on the perimeter, the parameters responds as Jason represents the information that is coming from the Web server. Okay, so I'm going to repeat all of these, Okay? The perimeters response represents the information that is coming from the web service on then, uh, I am. You seem to be met off Jason on the metal. Jason transforms the information that comes from the web servers in tow. Adjacent object I'm then the case on object East Representative by the parameters response as Jason. Ok, in other words, the parameters response as Jason, he's the response that comes from the web service. Ah, but of your response, he's is saved aside. Jason. Object. Well, okay. The perimeter response. As Jason is, the response that comes from the Web server on such response is a Jabba's is a Jason object . Okay, okay. I'm going to repeat because this is very important. Sorry. The response parameters east their response that comes from the web server. Okay, then the then Then I have you seen the jays on Bob DJs on metals on the gate on metal transforms the response that comes from the web server into adjacent object on then such yays on object East Representative by the parameters response as Jason. Okay, on, um, and then what I want to do, Okay. If I head over to the the so the roads further, you can see that here I have the safety of gauges file on. Well, as you can see, this is the risk. This is the the sees the response that is sent to the client. Okay. And this response contains the property success. Okay, As you can see here, I have the response that he's sent back to the Web browser on these response contains the property success. Okay, so in this case, I'm going to use I'm going toe. I'm going to verify the value off the property success. So I'm going to say if responses Jason dot success equals true, then these If block is run OK on, I'm going toe. Add another else block. So, in other words, the first if block the block is wrong. If everything is working. Okay, So I'm going to add a comment that says the settings where we're safe successfully Suk say it's fully okay on the else block is Ron. It's if something goes wrong. So I'm going to add a comment that say's problems when saving the settings problems when saving the settings. Okay, now I say the genius and well, now what I want to do is to display a message to the council that says the information, the settings we're saved on. I want to play another message to the console that says I want to display another message to the console that says problems where saving the settings A problems when saving the settings on. Finally, I'm going to remove these these these line of Goethe. Okay, I have to remove this line of gold because I don't need this line of gold anymore. Okay, I say the changes on Well, now, As you can see, Thea obligation has the ability to save information to save the charter settings into Mongolia on Well, on the next lesson, I will continue working on these on these metals. Okay. On the next lesson, I will continue working on the metal save chart. 39. Dialog box with React: Okay, Welcome to another lesson off this tutorial on this lesson. I want to continue working on the medals safe chart on. Well, as you can see here I have the middle, the metal's safe chart. Andi. Well, if I come before you scroll down, you can see that here I have the block on. Well, we think it's important to say that these if block is run, if they in forgive, the chart settings are saved are saved into mongo db successfully. Okay, this if block is run, if the chart settings are saved into mongo db successfully and they have these Els block and these, um if this else block is run, ive uh, if something, if something goes wrong when they information is saved into Mongolia, be okay on, um Well, you know where I got. What I want to do is to is setting up a dialogue box. Okay, I want I want to set up a dialog box or Diallo window on in order to In order to lead, I have to get over to the react bootstrap website. Well, now you can see here I have the react bootstrap website and now what? I want to do is to praise. They don't components and will, as you can see, um, here I have, um Okay, this is the web based app. This place on now, what I want to do is to make a search. I want to search for mothers. Okay. I want I want toe search for mothers. Andi. Well, now you can see here I have the models on. Well, models are basically, um, models are basically Diallo windows. Or like a look boxes. Well, I have to scroll down on. Well, as you can see here, I have an example off more than OK, this is an example of a model. Andi. Um, well, now you can see here I have on example, I'm going toe hit the blue button that says lounge. They more more than I know what you can see if he sees, um, this is an example off a model as well. On that, you can see a model is basically is basically is basically at that window or they'll of books on. Well, if I continue scrolling down, you can see that Here I have. They go. OK, this is the growth that I need to use, so I'm going to select. It is cold, and I'm going toe. Um, I'm going toe copies gold, and then I have to go back to the to the application. I know what I have to do is to a scroll down on, then. I have to, as you can see. Correct. Have the jumbotron closing. Closing back. Okay, this is the Jumbotron closings attack on. Well, I want toe based the mother growth in between the guard component on the jeweler drunk opponent. Okay, I want to paste. The model goes in between the guard component on the jumbotron component on I'm going toe based. The goes right here like this. And then I want to add some space like piece. Okay. And well, now, as you can see here, a tactic they both off, they more than Andi. Well, no. What I want to do is to remove start dying certain parameters. In this case, I'm going to remove the own hive event. I'm going to remove the clothes Bhutan parameters on. Then I'm going to remove the well, as you can see here I have the filters on peaceful authors. Contains the whole different Bhutan's OK, so I'm going to remove the second Bhutan. And now, as you can see, I only have one Bhutan on these are the settings off the boat down. Okay on. Um Okay. Now I have to customize thes growth and Well, um, okay, have to, as I said, I have to customize this cold on. Well, as you can see here, I thought the barometer show. So I'm going to set this parameter today. Variable the's dot state dot show. Okay. And then I have here that the mother died. Dog s. I have to customize these goals as well. On, uh, I'm going to I'm going to tow us. Uh ah. Variable. So I'm going to say I'm going to use these dot a state the window title on, um and we'll know what you can see. He writes up the here. I have the know the model everybody on. Well, uh, what I want to do is to remove the content I have to remove these text on. I'm going to place in this case I want to place on. I want to place a feather five back like this. And now I want to I want to use a player off courtly braces on, um, I'm going to ask the variable de start a ST dot window content on, um, now what I want to do East toe. As you can see, if you have a bottom component on, I have toe customize these boots on. So I'm going toe set the option variant, I have to say the perimeter variant to the value. Dangerous on. Then I want to ask the barometer size. Okay. And I'm going to say these parameters to lash, okay? And then I have to ask, As you can see here, I have the on beat event. So I'm going to set these events toe. I'm going to set these events toe the I'm going to set these even toe the middle. These thought, uh, these though these thought close window. Okay, as you can see the unclean even he said toe the metals these dot close window on. Well, now you can see I've just I've just a customized They goes for, uh, a So you can see I just customize the gold for these Diallo window or like a look books on . Well, you know what you can see a view. If I analyze this gold, you can see that these goals are requires the a state variable. These thoughts stated that show as well as the variable window title on. Finally, this cold requires the variable. These not a state that window content. So I have to be I have to create those variables. So I have to get over to the constructors. Andi, I'm goingto have the valuables. Okay, I'm going to ask the variable full show. Sorry on. I'm going to set this variable show toe force, and then I'm going tohave the variable window title, and I'm going to set these variables to an empty strange. Finally, I'm going to ask the variable window content on I'm going to say is variable to a name TheStreet as well on. Now, if I continue if I scroll down, you can see that this cold requires the mid the meadows. These thought close window. Okay. This cold requires demento the metals. These don't close window. So I have to set up the metals. And as you can see here, here I am in the constructors on I'm going to say thes thought close window equals these dot close window, close window that bind and then this. And now you can see I am setting up the meadows and then they have to declare the metal. So I'm going to say close window. And as you can see, I just created the methods we have just created the methods Close window. OK, Onda. Okay. As you can see, uh, as you can see, the methods close window is wrong when the user wants to close the dialog box. Okay. Again, the method closed window is run when the user wants to close the dialog box. Okay, So, uh, what I'm going to do now, East toe, I'm going to add a comment that says the user wants to close the very look box. Okay, I know I have to modify the estate variable show, so I'm going toe. I'm going to run the I'm going to use this code. These boat said state on. Well, what I want to do now is very easy. I just want toe date being a state variable. Show a So you can see. Um, here I have the state variable show. Okay. Andi estate variable show. He said toe falls by default So I want toe shift the value off these variable. Okay, so I'm going to say a V stop said estate, and then I'm going to set the variables. I'm going to set the variable show to Troop. Okay? And then I'm going toe have a callback function. I called the film soon That says that this place a message to the council that stays, uh, the window last closed. Okay. And, well, as you can see, I just set up the yellow books on. Um Well, I guess this is it for this lesson on the next listen, I will continue working on the value logbooks. 40. Testing a dialog box: Okay, Welcome to another lesson off this tutorial on this lesson. What I want to do is, um, is continue working on the dialog box or the angle of window on. Dwell on the previous lesson on the previews. Listen, I thought creative these medals I have created the method close window on. Well, where we want to do now is to Molly is to modify the gold off these methods. So what I'm going to do is to remove these this growth. Okay, I have to remove these goals like these, and I'm going to repeat these goals, OK? I have toe have to repeat. I have toe. I have to improve. This goes Okay. Well, remember that these goals. Sorry. Remember that Thesis metals. He's run when they do, sir. Hits the mood on close. Okay. These methods is run. When the user heats, they would don't close on. What I went through now is toe bait. Uh, what I went through now, East toe update on estate variable. So I'm going to use the metals. These thought I said estate and will, um, on the produce. Listen, I hath created the estate variable show okay. On the previous. Listen, I have created the estate variable show and I said the estate variable show to force. Okay, on Dwell what I went through now East toe day, the estate variable. So I'm going to say I'm going to obey the estate Variable show on. I'm going to set the estate variable to falls. Okay, as well. Okay. I have to said the estate variable show no force on, then I have toe. I have to create a callback function on this callback function This place a Miss Ash to the console that says the window the Diallo box Waas closed. Okay. The veil of books was closed. Okay. That east the message that this place to the JavaScript Council on Well, um, now what I have to do is to head over to the mentors. As you can see here, I have the middle save chart. Okay, this is in the middle safe chart on Well, as you can see here, I have anethe block on what I want to do. East toe, Mollify several. I want toe update several estate variables. Okay, I want so I want to update several state variables, so I'm going to use the method these thought said state on dwell I want I want toe obeyed the estate variable wiggled idle on I'm going to set the title toe Um, Teoh, uh, success. That is the title off the dialogue books on I have toe update the estate variable window Convent. Okay on. Well, if I had over toe toe the roads Folders. You can see that here I have the safe the Delia's filed. Okay. On a So you can see thesis is the response that is send today with browser or to the brilliant. Okay, this is the response that that is sent. So the web browsers or to the client? Okay, on. As you can see, these response contains toe properties, the property success as well as the property message. Okay, so in this case, I'm going to use the property message. Okay, so I'm going to type in a response as Jason. Both message, Andi. Then I have toe. I want toe evade the state viable show on. I'm going to say this estate variable toe true. Okay. And then I'm going toe. I'm going toe select these goals. Sorry. I'm going to select these goals. I'm going to copy. This goes and then I kept to remove these line of growth right here. And finally, I have toe based the brave use cold like piece. Okay, but in this case, um, the title will be a roof on. Um, And as you can see, the the variable window content He said to them to the property response as Jason Don't mess Ash. Okay. On the variable show, he said to Drew. Okay on. Well, it seems like everything is, uh it seems like everything he's correct on, uh What else? What else? Okay, sorry. Sorry. Before I continue before I continue, I have to import. Okay. Okay. Okay. Well, and now, if you if you as you can see, here I am, you sing the item using the model component. Okay? As you can see, here I am. You seem to be model component from react. Bootstrap. Okay. This is the mother component from react. Bootstrap. So I'm going toe import the component. Uh, okay. Before I finish, I have to import the component. Some going to say, import the component model from react. Good strap is lashed, mother. Okay. And as you can see, I am importing the model component from react. Bootstrap. Okay. Okay, I guess this is it. So now I can open the comments prompt on, uh, and I have to navigate to the folder chart. React. Uh, chart. React on DNA. Now I have to run with back. So I'm going to use the comment MPX with back. Okay, I heat entered on. Did see what happens on. Well, now you can see the coach off. The application was compiled. So now what I want to do is to run the web server. So I'm going to use the command and be external moan. I have to use the option watch. And then I have to specify the room folders I hit. Enter on, Let's see what happens on. Well, you know, you can see the web server. It is working and we'll know I can close the comment prompt on. I have to get over to the browser on. I'm going to use the other is local host 3000. I heat interest on. Let's see what happens on. Well, now that you can see this easy with page that this place Okay, this is the webpage that this place on Well, now what I want to do is tow set up on your chart. So I'm going. I'm going toe asked the title for the chart. In this case, the title will be. And while sales I'm going toe, I'm going to input. They have to input the description. In this case, the description is sales millions off dollars sales in millions off bowlers. Andi. Um, no, I have to have a label. In this case, the label will be Microsoft. And I'm going to use the number 350. And I'm going to use the color blue I president donut settings. And now I'm going to add another label. I'm going to use the aim the label. April. I'm going tohave aapl on. I'm going to set the number 750. I'm going to use the color orange. Okay, now President on and Settings on. Well, and now I have to press able don't create chart. And as you can see, the chart is creative. Okay, here I have the title, the title, the title off the chart as well as a description on here. I have the green bottom. Okay, I'm going to press the getting Bhutan that says safe chart. I'm going to press the Bhutan safe chart. And as you can see, uh, you can see the the burial of box, this place it says a success. Uh, but, uh, if you as you can see, uh, the text is not displayed. Um, so I have to go back to the gold. Okay, I'm going to press the button close, and I have to I have to verify that growth, because something is is not working. Um, okay. Something is not working. So I have toe, I have to modify the goals on and ah on. Well, it seems like I have a never so I have to go back to the file. Safe dog? Yes. Okay, on as you can see here, I have the property mess, ash, But this property contains the name their name off the property conveyance. Three times s. Okay, Mrs Peterson. Ever. Okay, as you can see here I have the property message on the property message contains three times s or contain street three letters ess While I don't know how to say these, but okay, after I have to remove this property on, I'm going to being message. Okay? And then I have to remove the other property. And I'm going to take being May sash as well. Now I say the changes and then I have toe head over to the to the console. And as you can see, the obligation is being updated by enough mourn automatically. Okay, everything is working on. Well, now I can feel over to the I can't get over to lay browser and I'm going to praise a boot on safe chat. Now, as you can see, the the, uh, very lockbox this place on this dialog box contains success. Imed Then I thought that I have the next The chance said things were Safed Ok? The chart said things were saved. This is the massage that this place Andi thes means that the dialogue books is working Onda Well, now I can close the irregular Oh, the books. And now now I'm going to praise the boot on safe chart one more time. How did you can see again? Ah, here I have another like a log Books on the style of box contains the text Three charts said things were safe. Ok, which means that all the information was saved into mongo db. Okay, on now everything is working. And now I can close the comments prompt. I'm sorry. I can close the dialog box or rail of window on. Well, now the application has the ability toe display a valuable of books or the yellow window. 41. Navigation Button : Okay, Welcome to another lesson off this tutorial on this lesson, where I want to do is creating an aviation many arriving and aviation Bhutan on Well, in order to create the navigation Bhutan. The first step that I cup today is to mollify the cold that I have here in the Gold Riders on. Well, as you can see here, I am selecting thes goals on this gold. Contains contains a player off places on then inside the Bayer off braces on the res after Neri operators on. Well, what I want to do now is to remove I think the Bayer off braces as well as the ordinary operator. OK, I want to remove the races as well as the urinary operator. So a so you can see I am removing the urinary operator on. Finally, I am removing the braces. And then, as you can see here, I have the ordinary operator as well. So I'm going to remove these growth on a so you can see here I have a parentheses, so I have to remove these parentheses on. Um Okay. Here here I have another parent disease. So I'm going to remove this parent disease finally that I raise here. Eso I'm going to remove these. Okay on. I'm going to remove this comment as well. But you can see here I have a here. I have a comment. So I want to remove this comment. Okay. Like this. And, um well, now you can see the seas. The gold. This is the This is the resulting growth on. Um Well, thes gold contains a car component on the card component. Contains theme the component Bhutan. Okay, on this is the safe chart. Uber Okay on now what I want to do is Teoh okay? I want to get over to the react Bootstrap website. Okay. And I'm going to praise the good thorn components. Okay on Well, A on the left side off the screen. The recent option that says Bhutan's. So I'm going to heat the option Bhutan's and let's see what happens. And well, you know what you can see here? I have asked a set off available Bhutan's that I can create wheat react bloodstream Okay on . Well, if I continue strolling down, you can see that here I have Ah, Bhutan Here I have these. Wouldn't that says link on This is the gold off the wooden. Okay, this is the goes off the whole time, so I'm going toe copy. This goes and then I'm going toe based the gold like this, Andi. Well, of course I have to customize these. We don't component. So in order to customize these boots on component, what you have to do is to ask the variant the variant parameters on. I'm going to set these parameters toe the warning that I have to have these size parameters on. I'm going to set this parameter to lash on. Um, I'm Well, I guess I guess this is it on. Um, okay. Before I finish, I have toe. I want to import another component from from react. Bootstrap. So I'm going to say import, uh, good tone group with the group from react. Bootstrap slash Booked a room. Okay. As you can see am important the little group component from react cold strip on, then they have to scroll down on. Um okay. Where I want to do is very is very easy. Use Wants to create one instance off the Bhutan roof off moment. So I'm going to say little group have toe create the opening. The open I have to create at the instance off the bottom of component like this on. Then I'm going to I'm going to select the growth off the Wooten's. Okay, the, uh Okay, I'm going to select the coat off. The off the buttons on. Then I'm going to cut this. Call this growth on. Um, Then I'm going toe based. The mutants inside the wood don't group component. Okay, Like the light piece. Okay, but now you can see here I have the the Buddha Group component that contains two different Bolden's. Okay. And well, now what I want to do is setting some space. I have to I have to have some space like this And will, um what else? Okay, okay. I have to modify the goat off the Bhutan. In this case, they called off the Wootton will be char charts. Charts listing is the cold. Is the text off these wooden on? I have to modify the h r e f attribute. I'm going to set this attribute toe slash, uh, chart listing. Okay. As you can see the attribute H r f he said toe the address is lash chart listing. Okay on. Well, and as you can see it years created these new navigation wooden and will, um Okay, Before I finish, I'm going to ask at the ordinary operator. So I have to place a player off braces. And now, inside these pale off races, I want to other delivery operator like this. Okay, Have here veterinary operators on three condition. Okay, now I have to scroll. I have to get over to the constructors. Well, as you can see here I have the Here I have the constructor, okay? And the constructor contains the estate variable. This play chat on this estate variable. This play chart is safe to force. Okay, so I'm going toe. Um, I'm going to go back to the goals. I'm going to say if the estate variable these stocks state the thesis play chart equals true. Then I have toe send a go to the web browser. Okay. Again. If the estate valuable piece of the state the display chart equals true, then I want to I want to display Ah, I want to display the Bhutan safe chart toe the browser. Okay. If the estate variable These thought that stated that this place chart equals true. Then I want to display the Bhutan safe chart to the Web browser on. What I want to do now is to select the Goethe off the wooden, and I'm going toe Got this growth. I'm finally I'm going toe based the growth in between these parentheses. Okay, I want to baste the gold in between these players off parentheses, over in between this parent disease. So I have based the gold like this, and I want to add some space. Okay? And again, I have to repeat this because this is very important. If the value off the off the variable, these not estate the this place chart equals true. Then I want to display the safe chart. Putin toe the browser. Otherwise I want to display No. Okay. Otherwise I want toe. I want otherwise the response is no. So I'm going to take being known. Okay. As you can see here, I have known Andi okay, because then you both here. I have a pair of braces inside these races. I have a urinary operator on this turn. Every operator, this place, they don't save chart. If the estate variable display chart equals true. Otherwise, the value noon is sent to the web browser. Okay on. Well, now what I want to do is tow best these I want to test this growth. So I have to open the common Brahms and Ah, okay, once to open the common front. And I have to navigate to the folder chat, react. And now what I want to do is to run with back someone to use and bx with back hit entered on. Let's see what happens. And well, I know what you can see. The gold off the application was compiled. So now I want to I want to run the Web thing with servers. I'm going to use the comment MPX north more. Uh, watch, hit, Enter. Let's see what happens now. You can see a Northman is restarting the web servers. Andi, everything appears to be working. So now I can close the comments. Brunt and I have to get over to the browser and I'm going to use the address. Local host. Look at host 3000. I heat in dish and let's see what happens. Okay, now you can see this easy with page that this place on If I scroll down, you can see that here. I have a lot on a yellow Bhutan that says charts listing. Okay, so now what I want to do is to press the Bhutan charts listing on Let's see what happens now. You can see this is the patient that this place hello from chart listing on the's means that the navigation Bhutan is working on Well, um, the next listen, I will continue working on these applications. 42. Laying out another webpage: Okay, Welcome to another lesson off this tutorial on this lesson. What I want to do is creating a new component. So I have to get over to the Components folder on. I'm going to choose the option on you file. No, I have to say this file as, um I'm going to save this file has child least thing, don't you? Yes. Now I keep in fish and, well, you know what you can see. I've just created a new file on Well, and now what I want to do is to import react from react, and then I'm going to import, um, the component. Kartik, leave. I'm going to import. Got component from Riyadh. Bootstrap react, bootstrap slash guard. And then I'm going toe import the, um the U boat drunk component from a really good strap slash U boat. Andi were not. What I want to do is to use the keywords, export the fold, and then they help to use the G word class. And then I have to specify the name off the component. Remember that the first letter off the name of the component must be uppercase on. Well, okay. The first leather off the name of the component must be over. Case on. In this case, the name of the component is chart listing. And then I have to use the keyword extents on. Finally, I have to use the I have to use the keywords react the component component embraces. And well, now you have tow the clear the constructors. And then I have to I have to wonder Barometer Brooks on then super groups on. Well, now I have to declare the render middle. I find the lake upto after the return. A statement, okay. And well, what I want to do now, as a first step is toe is to use the key component you more time. They have to create one instance off the human component off the component. Jim, but Ansari and then they have to create one instance off the off the guard component on. Um Okay, I'm going to ask the component car dot dish. Okay. God, both Harish and then I'm going to add another instance off the component guard. Don't bully God alone Body and well, um, now I have to add some settings to the guard component. I'm going to ask the background said the background setting, and I'm going to set the background, but I met there. Sorry, toe. I'm going to send the background parameters too dark on. Then I'm going to set the, uh, the text parameters toe, uh, white Well, and I have to get over to the chap generator component on, um, as you can see here I am inside the charge generator component, And we'll, um I'm going toe. I'm going to select these thes parameters. I select these parameters. I copy these parameters, and then I have to go back to the guard component on I'm going to remove these parameters. And finally, I'm going Taubate based the parameters like this and, well, you know what you can see. I have just just a deep some settings to the guard component on. Well, you know what I want to do is tow have some text, tow the car headed component on in the stakes as sorry. I want to add the pass parameters. And I'm going to say these parameters, toe Heather want that? Mm. Okay. I'm going to say this parameter toe ahead. What? That and then I'm going toe. Add some styles. Steptoe. Theis type parameters toe payers of braces. And in this case, I'm going to ask the property, text align. And I'm going to say this property to send their okay two centres and then I have toe. I have, like, I have to type being the next off this Heather's in this case, it takes East charts, charts this listing, I say the changes on what else? Okay, I have to get over to the car bully component. Andi, I'm going to have a text. I'm going to ask the text here, listing off charts. This place OK is displayed here. Listing off charts is displayed. Now I say the genius on well and I have to I have to go back to the council. And as you can see, the Web server is mean were started by no mone automatically on Well, what I want to do now is toe stop the Web server. So I'm going to present keys, controversy in other this topic of cerebral. And now I want to run with back someone to use the command. And BX went back. I hit Enter Let's see what happens on Well and now you can see the coat off the obligation was compiled. But well, before I finish, I have to close the common prompt. And I have toe have to get over to the component AB the way. Yes. Okay. I have to get over the file app of the year. Yes, on. Well, here I have to import the component. So I'm going to say import, uh, import chart listing from on. Then I have to specify the path to the file that contains stick opponent on. In this case, a file is stop slash. Ah, chart listing. And well, now, as you can see, Liam important, he beach at least things component on. Well, now I have toe hit over toe the router. And as you can see here, I have the route. Uh, here, right up the road is lash, charmed, listing. So I'm going to remove the skaters on. Instead, I'm going to create an instance off the chart least e component. Okay. No, I say the changes and well, now I can I have to go back to the gun, so I'm going to run with bag one more time. I have to use the comment and p X with back hit enter on. Let's see what happens. And well, now you can see through the gold off the obligation was compiled. So now I have to run the web. I have to run the web servers. So I'm going to use the comment and PX Notman heat interred on uh, let's see what happens now. You can see no more is restarting the Web servers on. Well, everything appears to be working again. I closed the common prompt. I have to get over to the browser, and I'm going to refresh the have to refresh these with Paige and let's see what happens. And well, but you can see it is easy with Beijing that this place here I have a car component of Lucca component. Andi, I have a great background. Okay, I have a great background on. Well, now I have to go back to the gold. Andi, I have took it over to the file chart listing doctor. Yes. On Dwell. Now what? I don't What I want to do is to import some components, something to say import the container, the container component from Riyadh. Bootstrap, it slash container and then I want to import the row component from Riyadh bootstrapped his last row on that. I want I want to import vehicle component from react. Bootstrap it slash cold. Okay, it's important to say that this these components are used to create a table. OK, these components are used to create a table on. Well, now what I want to do is creating a very basic table. So I'm going toe have an instance off the container component like this. And inside this container component, I want the place Roco opponent Al component Row An instance of the component row on inside these rogue component. I want to place three different instances off the gold off a component called Okay. I want to place three different instances. Oh, the component gold on. Okay, inside first company, The anxiety first component called. Um, I'm going to ask Headed that? That that that contains the text ivy. I'm inside the second called physical component. Cool. I want to ask him to that. That says description. Finally, inside the hearer baby inside the last component called. I want toe have, uh, I get him to attack that contains the text actions. Okay on, um Okay, I'm going to use Okay, I'm going to use a head of hair and pretax. Sorry, because Philip pretax are smaller on. Uh, okay, as you can see again, you seen Heather Three packs. Okay, on. Well, now I have to go back to the council. As you can see, no more is restarting the server automatically. But what I want to do now is to stop the Web server. So I have to press the case controversy. I embrace the kids control, see, to stop the Web server. And now I have to run. No, I have to run with back one more time. I use and bx know the MPX with Buck. He didn't and let's see what happens. And, well, indeed, it goeth off. The application was compiled. So now I can run the web servers. I'm going to use the command and be X Northman. He didn't dish and let's see what happens. As you can see, no moon is restarting. Give up server one more time on. Everything appears to be working. Okay, so now I can go back to their with browser on. I'm going to refresh the application and let's see what happens. And well, you know What? You can see this easy with Page That this place Andi. Well, I guess this is it for this lesson. On the next lesson, I will continue working on these application. 43. Reading all information from MongoDB: welcome to another lesson off this tutorial on this lesson. What I want to do is to get all the information that is saved in mobility, and we'll in over two week. Um, in order to eat. What I want to do is tow east to declare and you make up. So I'm going to the clearly metals component the Mount on. Well, it's important to say that the medals component, the amount is created by react. These middles is created by react on. Well, it's important to say that these metals runs automatically. So I'm going to add a comment that I'm going to add a comment that says these metals runs grammatical Well, what I want to do now is toe is to use the fetch metal on. Well, as I said, I want to get all the information from Mangal et So in this case, I'm going to use the average slash AP i slash his slash FBI is lashed. Wreath chap is lashed all and then I have to specify the second parameters off this mental on the second perimeter is an object on basement these objects conveyance of property metals on. I'm going to send this property toe get. And then what I want to do is tow us another metal. The meadows, then and then these metals requires a callback function on this callback function requires a perimeter. This callback function requires the parameters response the perimeters responds, represents all the information that we get from Mongolia, be the parameters response represents all the information that we get from monkey. And then I'm going to use return and then response the geyser on. Well, it's important to say it's important to say that the case on mental trans farms, the information that we get from mongo TV in tow a Jason object. Okay, the maid off Jason transforms the information that we get for a Mongol TV into a Jason object on. Well, then I'm going to use another. Uh, I'm I'm going to use the metals. Then again on these metals, then good vein to call. The function on this callback function contains the parameters response us, Jason and will, uh, now, well, I'm going to repeat these because this is very important. Uh, response represents the information that we did for a Mongol. The me on then the metal case on transforms the information that we get from Mangal TV into a Jason object on. Then the Jason object becomes the perimeters response as Jason Okay, Jason, the the Asian made up on transforms the information in tow. Jason object. And then the Jason object becomes the parameters response as Jason and will, um no, What I want to do is tow. Um, okay, if I could over to the file read, Doctor. Yes, you can see. OK, this is that This is the file rape, don't you? Yes, on. Well, in this file, you can see that here I have these root candor on this route. Candor is juiced. Issue used to get all the information for a manga levy. And will these things right hander saints are response to the gradient or to the browser and such a response. He's on object on that object convenes two properties, the property documents as well as the property success and, well, the property documents contains the information that we get from mobility. In this case, I'm going to use the property documents, so I'm going to take being a response as Jason dot documents and then I'm going to use the map Meadows like this and well, I'm going to use the map metals. Tow it a rate over the information that we get from mongo DB. Okay, I'm going to use the map metals to eat a rate over the information that we get from Mangal Levy. I'm in this case. This callback function requires calm parameters. Object on the other one is index okay and will, um Well, now what I want to do is tow. Um okay. I want to create an estate variable somewhat being the store is state. And in this case, the variable is charged Charts listing the charts listing Easiest. A variable on this variable contains an empty array. Okay. And, um, what is what else? Um okay. And now what I want to do is tow. Well, as you can see here, I have the your state variable charts listing Okay on. Well, what? I went to the now east to save information inside the estate. Valuable. Um OK, but before I continue, I want to create another variable. I want to create the variable copia ray on this variable. He said toe these dog state the charts listing. Okay. As you can see, the variable could be a rain. He said toe these thought estate the chart listing on Remember that the variable chart listing contains an array In your words, copy array contains Honore And in theory, okay, the variable cooperate contains and and in theory. And um Well, what I want to now is very easy. I just want toe. I just want to add items. So they are a copy array. So I'm going to use the tomatoes bush on. Um, what I want to do is adding the, uh the object parameters. OK, I want toe. As you can see here I am abdeen items. So the array copia re okay, I, as you can see here I am having items to the array Copia ray on, um on what? No, What I want to do is to today this day variable some good bean today the state variable on in orderto day the state variable I'm going to use the metal These dogs said state on In this case, I have two other callback function. This called a function requires two parameters. One is steak and the other is props and will, uh well, it's important to say that. Well, okay, I'm going to date the state variable. And in order to eat, I have to use these metals, these dots at the state and, well, thieves made off. Contains on according function because the function convince the parameter estate on the state contains all the estate valuables. Okay, a state contains the parameters. Estate contains all the estate variables. Okay, I'm not. What I want to do is to be returned, and in this case, I want to modify the the state variable charts listing. So I have to be charts listing on, um Okay, I'm going to be in a state vote. Charts listing, and then I'm going toe used the metal combat Okay on, um okay, it's important to say that the metal conquer is used tojoin two different a race. Okay, The metal combat is used to join toe different a race. So, in this case, a state. The chart listing convenes an array, and I want do used the metal, concoct tojoin two different races. Uh, this case I want toe. I want toe asked. The array could be a rape. Okay. On again again, the Mitt of Concord is used to join two different race, OK? I mean, these gays. Ah, um, having the array copy array. So they array charts listing. Okay. Okay. Well, I know where you want to do is tow. He's too radical solution on these callback function. This place a message to the council that says this place is a message to the council that that Okay, this this callback function, this place, the variable, the start state, though, charts listing to the council. Okay. As you can see, this callback function displays the variable charts listing to the JavaScript console and will, um okay, let's see what happens. Okay, so now I have to go back toe the console, and I'm going toe stop the web cerebral by pressing the keys controversy. And then I'm going to run with back and let's see what happens. And, well, I know that you can see the gold off. The obligation was compiled, and well, now what I want to do is to run the Web servers on. Let's see what happens now. You can see enough money is restarting the web service, and everything appears to be working. So now I can close the comments prompt. I can I want to refresh the the application. I want to refresh the obligation on. Let's see what happens. And well, you know what? You can see Nothing. He is. But not in his this place. To the browser on it. Seems like I have a never message. So if I go back to the council, you can see that the error, Miss Ash, is the okay. The ever Miss Ash. Okay, as you can see, the problem. The problem is thes semi colon that I have here. I have here a semi Coolum. So I have to go back to the the goals and I'm going to remove these same I cooler. Okay. As you can see here, I have a semi colon. So I'm going to remove the semi colon. I say the changes go back to the council. Andi, stop the application. Stop the server by pressing the keys controversy. Let's run with back one more time. Well, now you can see the goes off. The obligation was compiled on Well, now I have to run the website where one more time on. Let's see what happens. And well, I know what you can see. The web server he's working on. Well, now I can I can go back today to the browser, and I'm going to refresh the the base and let's see what happens now You can see inside the JavaScript console of beers and array on this array contains all the information than that is saved into Mongolia. Be okay. As you can see, inside the javascript console appears, or all the information that is saved into mongo db. Okay. Which means that our application fast the ability to read all the information, All the information from mongo DB. Okay. Now the application has the ability to get all the information from the batteries. 44. Coding a table of charts: Okay, Welcome to another lesson off this tutorial on this lesson. What I want to do is creating a new component on. Well, we went to What I want to do is took it over to the Components folder on I'm going to choose Thea option you file now I'm going to say these things file as, uh, charts table, don't you? Yes, on. Well, now, as you can see, this is the vile charts table that JDS now I want to import, react from react on. Then I want to import the container component from react. Bootstrap. It's last container. And then I want to import the row component from react. Bootstrap is last row. And finally I want toe import. I want to import recall component the component call from react. Cool. Strap it slash cold. I know what I want to do is to use export they for it, then the keyword class on. Then I have to specify the name of the component. Remember that the first later off the name of the component must be over. Gays in this case, the name of the Component East chart chart stable. Then Dickie work extends and then uh, react the components and the constructor construct. Remember that the constructor is used to set up the parameters. And, uh okay. Here, here, I have super props. I'm using super props as well on then I have toe declare the mitt of renders and then return. Okay. I know what I want to do is creating a table, so I'm going to use one instance off the component containers on. Then I have toe. I have to use one instance off the component road, and then I have to use three instances off the component called. Okay, three instances off the component goal. Okay. Well, now, as you can see, it just creative, every basic table. And, well, you know, what I want to do is to set up a constant and the name of the constant will be settings. Um, sorry. They think the name of the gun stand is this thing on. Then I'm going to set these constant toe the barometer. These thought props, that chart listing. Okay. As you can see, the constant listing he said toe the parameters. These not props don't charts listing. Okay. And now what I want to do east toe I want toe. It'll rate over the listing. Okay, well, it's important to say that the least thing comes. It's important to say that the variable listing conveyance and array Okay, the variable least thing contains an array on. Now, what I want to do is to iterating over the array. So I'm going to use the map meadows. And then I have to specify the callback function. This callback function contains two parameters. The 1st 1 is object on The 2nd 1 is index on. Um okay. Okay. Now I have to declare the constant html markup, and I'm going to set this constant toe on. I'm sorry. I have to the clearly variable html markup. Okay. I have to declare the variable html markup on the variable html markup. He said, Tony theory on Well, now what I want to do East toe east toe asked some items toe the array html markup. Some going to use the middle bush on what I want to save into the array html markup. He's I wrote a component rope. OK, what? I want what I went to safe into the array. HTML markup is a component rope. So I'm going to select this golf. I'm going. I'm going toe got this goes on. I'm going toe based the gold like this. Okay, on. Um no. What I want to do is to add some space on then I have toe thanki parameters on. I'm going. I think it's important to say it's important to say that the key parameter is used toe Identify the items that are saved into the array. Okay, the key parameter. He's used to identify the items that are saved into the array. In this case, the key parameters, uh, contains the world index dash on, then the barometer index. Okay, Unwell. Now inside the first component gold. I have to I want to display property object dot That ivy that underscore I on. Then inside the second component goal. I have to place the property object Thought description on inside the third component. Cold. Um, I want I want the place. Mm. I want to place a bhutan and well, inside the component called. I want to place a Bhutan on. Do I have to get over to the top of the file on? I have to import the little component. They wouldn't component from react. Bootstrap slash Putin on. Uh, no. I want to create an instance off the wooden components like this on the text off this Bhutan is a preview review chart. Okay, bring your chart. Is the text for these would turn on. Now, I have to add some settings to this Bhutan. The top patrick the type attribute he said toe weren t dangerous. The sides attribute. He said toe large on the, uh, the guy. The Okay. Sorry. Sorry. The the variant variant parameters, Tariq. Variant parameters. He said to danger on the DYP attributes. He said golden Okay on. Um Okay, now I have to have the wrong click event, and, um, these even Ah, okay. I have to ask. They I have to ask the on. Bleak even on. Uh okay. The unclean. Okay, well, I'm going to remove the, um okay. I'm going to remove the big even. Okay, Aunt. Um, okay. Now, as you can see, uh, the array html markup contains a set off components row. Okay, The array html markup contains a set off components row. Okay, Andi, nobody want to do is tow display the the array toe the browser, so I'm going toe. Abir is a pair off braces on inside these races that I'm going to place the variable html Marco. Okay, on. Ah, the race is here. The races are used to display to the browser the contents off the variable html markup. Okay. Ah, here. The races are used to display to the browser the contents off the array HTML Marco and will what it was and Okay, I guess. I guess this is it. So now I have toe, um What is? Okay? Okay. What is what is what is, um okay, I'm going to I'm going to create I'm going to import the guard component as well. So I'm going to say import car from react. Bootstrap is lashkar. And then where I want to do is tow eyes, creating an instance of the guard component like this on then, inside this card, a component. I want to create an instance off the guard old body component. Okay, this is an instance off the garden pulling component. And now what I want to do is to add some settings, his case. I'm going to say the background toe dark, and I'm going to set the, um I'm going to set the text. But, I mean, there's no white and now I'm going to select. The container goes, I go. I have to go to these goals and I'm going to paste the goes inside the component Carvel body like this on. I want to add some space. Okay. Save the changes on. Well, now, as you can see, I just created a component that east able toe display our listing off charts to the Web browser. 45. Display a charts listing: Okay, welcome to another lesson of this tutorial on this lesson. When I want to do is is testing the charts stable component on Dwell in orderto best. These component, what I have to do is took it over to the file charts listing the doctor. Yes, and I'm going toe. I'm going toe import the, um, the parents. They will component from the file the slash char stable. Okay, As you can see them importing the component chance stable and will a number they want to do is to create an instance off the components. So I have toe, As you can see here, I have the container, the component container on below these components. I'm going to place an instance off the component charts stable on Dwell if I could. Over. If I go back to the chart stable component, you can see that this component requires the barometer's charts listing. Okay, this component requires the parameter chance listing her. So I'm going to add the parameters charts listing on in this case thes parameters. He said toe this in this case, these parameters he said, toe these thought state vote don't, though charts listing okay. As you can see through the charts listing parameters, he said. Toe the variable, the start, the state. The charts listing Andi Well, e I guess the city. So now I have toe. I have to go back to the council on. I'm going to stop the server by pressing the keys controversy. And then they have to run with back and let's see what happens on Well, and you can see the the code off the application was compiled. Well, you know what I want to do is to run the Web service on Let's see what happens on. Well, now, As you can see, Northman is restarting the Web service, and now the Web server is working. So now I can close. The common problems have to go back to the browser, and I'm going to refresh the application and let's see what happens. And well, now you can see this is the Web page that this place on what you can see, he recover listing off all the charts that were creative on, um, and next list on duh and well, here we have a set off Red Bhutan's that that are used to preview the chart. Okay, and as you can see, a zero comma listing off all day. The charts that were created so far and well, now I have to do is tow is to improve the I went toe to increase the size off the next. So I have to get over to the goes and I have to go back. I have to go back to the gold. I have to open defiled charts stable. And as you can see, thesis is the file charts table. This is the component chance stable on. Well, I know what I want to do. As I said, East increased the size of the text. So I'm going to ask the style, attribute the style attribute on going toe had some styles, and in this case, I'm going to use the the property formed size. And I'm going to send this property to one point ST M's on the night and white. I want to ask the property merging duct, and I'm going to set this property toe one going toe EMS. Okay, um and will Okay, I'm going toe. Ok, Okay. Yes, I guess this is it, Andi. Well, now I have to go back to the gun. So and I'm going to stop the Easter whereby present Dickie's controversy. But it's a kiss controversy, and now I have to run with back one more time. Andi, let's see what happens. And, well, I know what you can see. The growth off The implication was compiled on Well, now I can run the Web servers. I use the government and the ex No one hit. Enter on, Let's see what happens and, well, you know what you can see. The Web server is working. So now I can close the common ground on Well, now I have to go back to the browser, and I'm going to refresh the obligation on Let's see what happens. And, well, I know that you can see thesis the with page that this place on Well, now the application has the ability to display at listing off chance on. I will and know the application has the ability to display all the charts that have been created so far on as you can see, a set off red Bhutan's display and these red Bhutan's are reduced to preview the chart. Okay, and well, this is it for this lesson on the next Listen, I will continue working on this application 46. Previw a chart: Okay, Welcome to another lesson off this tutorial on this lesson. What I want to do is what I want to do. These is he setting up these boots on these component Bhutan. Here I have the component Bhutan on. What I want to do is setting up these these wooden so that I Mentos is wrong when the user heats these don't. Okay, I want to set up these boots on so that a meadows is run when the user heats these Wooten And in order to the week I have toe as the on bleak Even Andi, I have two are as a player off braces. And then I have to specify a callback function on this callback function is going to run. I made those in this case, the referenced. Oh, the metals. He's the barometers. These dot props, dawg, handle bleak. Okay, the parameters these dot props don't handle Bleak east. Our reverence toe the Madoff That will be run when the user heats these Bolden. Okay. I mean, on the perimeter, these the props that kind of bleak. He's reverence toe the middle's that will be run when the user hits hits these bold. Um okay on because of the fact that these parameters is a reverence to a metals weekend asked Barron disease. Okay, Andi, I'm going to use these parentheses to specify the barometer's off these metals. Okay, in this case, the perimeter is object. Both underscore idee. Okay. In other words, uh, handled leak east amid, Off or a function? In other words, 100 leaky Cementos or a function on these medals or function requires the barometer's object. The underscore idee okay, handedly can click is omitted or function on requires the parameters object on their score . Ivy on Dwell on. Now what I have to do is tow Go back to the have toe. Go back to the chart listing dot Js file on. Well, I know what you can see. A am on the chart listing the Vegas file or chart listing component on. Well, if I scroll that if I scroll down, you can see that here we have a new instance off the component chart table. OK, here. I have an instance of the components chance stable on according today to these components, I have to specify the parameters handle. Click. Ok. I have to specify the parameter handled leak. Yeah, uh, so I'm going to take mean I have to specify the parameter on the beak handle Greek, and in this case, I'm going to set the barometer handled leak toe the middle. These dogs handed bleak as well. Okay, now you can see here I am using the meadows, the stock and click. So I have to set up the medals handed bleak. So I have to get over to the constructor, and I'm going to bean thes talk handle. Click equals these thought handed Bleak Got bind these. Okay. Now, as you can see, I am setting up the middle 100 leak on Ben. I have. So they clearly don't 100 big. So I got a 1900 league, but in disease races, and then I have to specify the barometer chart. I see. Okay, on will Remember that the barometer, the middle 100 big is run every time the user hits the mood. Um, okay. These metals or function is run when the user hits the wooden on. What I want to do is tow Read the settings off on a specific chart from Mongolia V. So I'm going to other comments that says Read, Visit ing's off on this bay. See Fiqh chart from Mongolia. Be okay. Reached the settings off on a specific chart from mobility on. In order to do it, I'm going to use the metal fetch. I'm sorry. I have to use the function. The stories just have to use the metal fetch. And in this case, I'm going to use the addresses. Slash t I is lashed. Read chart it slash on. Then I have to attach the barometer chart ivy on then I have to have a say contra parameters. In this case, the second parameter is an object on the object. These object contains the property method and I'm going to say this property toe Get now I have to ask the Met off then on to specify a callback function on this call. That function requires the parameter response response. Remember that the parameter response contains the information that we get from Mongolia. And then it kept being returned response that Jason on a game a crypto theme it off then Another callback function on this callback function contains the barometer response as Jason remember that the parameters responds as Jason contains the information that we get from manga levy and will, um Okay, Now what I want to do is saving the information in tow. Several variables. Okay. I want to say the information into several variables, so I have to create such variables on. I have to get over to the constructor and I'm going to create a new estate variable. I'm going to create the variable Kuerten's cool ran tidal on. I'm going to set this variable to an industry. Then I have to specify the variable Kuerten's description, and I'm going to set this variable turn into strange, and then they have to have the variable current cool range colors on. I'm going to say this variable toe on empty array. And again, the variable I have to ask create the variable current labels on. I'm going to say this variable toe on empty array as well. And finally going toe the variable Korans numbers and I'm going to set this variable toe a name the toe on empty array. I'm going to set this variable toe on in theory on. Well, you know, as you can see, I just creative five different variables. Okay? I just created five different state variables on, well, thes variables. I'm going to use these variables to save the information that I get from mongo DB. Okay, so on. Well, now going to add a comment that says saving information, saving the information on. Well, in order to save information, I'm going to use the mental these that said, state on then I have toe specify. Well, I have toe get over to the constructor. I'm going to select the estate variables. I copied these variables and then I based the variables like this. Okay on. Well, I have to add some space and well, as you can see, uh, I'm going toe. I'm going to save the information that I get from Mangal Levy into these different variables. Okay on. Well, before I do it, I have to get over to the file. Uh, read the yes on the free on him. This is the fire retardant here? Yes. And that you can see here I have these root candor. This route hander is juiced. Teoh, get a specific information from Mangal TV on as you can see here I have a response The Here , here, here I have the response that is sent to the browser on these response conveys the property documents. Okay. In other words, the property, the humans conveyance, the information that we get from mongo DB. Okay. The property documents contains the information that we get from Mongolia. Me? Well, now, if I go back today, so the Goethe, I'm going to say the variable current titled. He said to response as Jason God documents those tidal okay. And then the correct description. He said toe responses. Jason got documents, does. Mm. Those Ah, the description. I'm going to I'm going to lose something else. Sorry. I'm going to declare to the variable. Um, going to the clearly variable. We're going to the clearly variable, uh, info on. I'm going to say these variable toe response as Jason dog documents. Okay. Remember that the property documents contains all the information that we get from Mongolia . Be okay. The property documents contains all the information that we get from Mangal TV. Andi. Then such information is saved in tow. The variable involved. Okay, so I'm going to say correct title. He said toe in four dot title cool rant. Corrine description. He said toe in for the description. This creep shin cool rant at dollars, he said, Toe in for the colors. Current labels, he said, toe in for the labels on current numbers, He said, Toe evolved on numbers numbers again. Now you can see, uh, I've just saved the information into into five the for inter valuables on. Then what I want to do is adding another thing middles, and I'm going to have another callback function. But in this case, what I want to do is to display the information today collectively javascript console. So I'm going to take being a council. Look, then this dot state dot cool and title. Okay, What I want to do is to display the information so they with today. I want to display the information today to the JavaScript console. Okay, so I'm going to copy these goals, and I'm going to paste these goals. Five dimes. Okay. Okay. Now, what I want to do is to display the information. So the JavaScript council. So I'm going to display the property. I'm going to display the variable based on the state of the for rent description. I want to explain the variable beast office stated about current labels. I want to display The variable is not a state. The for rent Poehler's Finally I want to display toe the console, the variable these look estate, the current numbers. Okay. Now, as you can see, I want to display the information to the JAMA screamed council. Okay on. Well, I guess this is it for these tutorial now, as you can see the Sorry, I guess this is it for this lesson. Sorry. Sorry. I guess this is it for this lesson. Now the application has the ability to read a specific information from Mangal TV. 47. Make a dialog box with React: Okay. Welcome. Another lesson off the tutorial on these. Listen, what they want to do is working on the chart on the component chart listing on. Well, what I want to do now is setting up, um, where you want to. Now is setting up, uh, have a look, books or Diana? Window on? Well, in order to set up a dialog box or dialog window, I have to go back to the file charging a rate or the year? Yes, on. Well, as you can see here I am in the charging a rate or the Js file on. Well, if I scroll down, you can see that here I have the component moral. Okay, this is the component model on. Well, what I want to do is tow is to copy these goals. I want to go police growth, and then I have to go back to the to the Charlie Steam The gauges file. Um um and then I have to scroll down on Well, as you can see here, 1/2 the human component as well as the guard component on what I want to do. East Toe based the component mobile In between the guard component on the Jew and the and the component Jumbotron. Ok, OK, I want I want toe based the model in between the guards component on the component. Jumatul. Okay, I want to place I want to baste the gold in between. These took these two components, okay? And now he based the growth on. As you can see now I have the component model. This is the component moral and, well, you know, what they want to do is setting up this component, um and will three first step that we want to take these. I want to place the title for this model. In this case, a title is chart. Okay, chart is the title of this model off these styles window. And then I have to specify, um, it Okay, now what I want to do East toe. I went toe. I had You can see here 1/2. I never fight back. S I'm going to remove the skaters. And instead of these cover, I want to place a canvas on element campus. Okay. As you can see, this is a campus. Well, this is an HTML element campus. Well, as you can see, this is the campus elements. Sorry on. Then, excepto the ivy parameters on. I'm going to set the parameters Ivy toe my chat. Okay, my chart is the ivy off these elements. Okay, I'm going to add a comment that says, Ah, I'm going to add a comment. Okay. I'm going to add a comment that says, uh, but they're not Okay, as you can see here, am I? You can see here. I just placed a campus element. OK, this campus will be used to display the chart. Okay, The chart will be displayed inside these element campus. Okay, on then. Here I have the deep don't component on what else? Okay, if I analyzed the component model, you can see that this component model requires the estate variable. These doctors stated that. Show the show. Okay, so I have toe create such variable. I have to ask the valuable show. And in this case, I'm going to say this variable to force Andi. Um, okay. Now, as you can see here, I have the complete the component model re wires. The method these thought close window. Ok, The model requires the methods the stock close window. So I have toe go back to the hotel, the constructors, and I'm going to set up the metals. So I have to be in the start. Close window equals V Stoke. Close window window. Don't bind this. Now you can see I just settle. Be closed the metal close window and I have to declare the method close window. I have to have parentheses. Embraces on. Well, thes metals is going toe today. The state variable show. Okay, These methods most they the thieves metals most evade the estate variable show. Okay, as you can see here I have the state variable show on. I have toe update such variable. So I'm going to use the method. These knots said state on. I'm going to say the estate variable to Florence. Okay? And I have two other call. The function that says I want to other callback function that this place a moustache to the console on the moustache will be through the Diallo we know Waas closed. Okay. These Miss Ash will be displaced. Toe the JavaScript console the vigil. A window was closed. Okay. On what? It was. Ah. Um okay, I guess this is it. Now what? I have to do is to go back today. Mental That you can see here. I have the metals on the big. Okay, this is the Madoff scandal Glick on. Um, as you can see, um, as you can see here, I have the Okay. What I want to now he's having another, then made off. I'm going to ask a callback function on. Well, what I want to now is toe open. I have toe. I have to display the the yellow window. Okay. I want toe open the window. So I'm going to add a comment that says open the dialog window. Okay. On. In order to open the the yellow window, I have to use the Met off the stock, said state. And then I have to obey the variable show, and I'm going to say the variable show toe through. Okay. In orderto open the the veil of window, I have to modify. I have toe update the value off the variable show on. I'm going to set the variable show. True. Okay. In orderto open the window on. Then I have two other callback function that this place and my sash to the council. Andi massage will be the Diallo you guys are No window Waas opened. Okay on, then. Okay. Before I finish, I have to get over to the to the component model. And as you can see here, I have the component model on. What I want to do is having a new parameters. In this case, I'm goingto have the perimeter size on. I'm going to set these parameters to lash. Okay? I have to say the parameter size equals to lash. Okay. And then Okay. I have faced all of these. So the next step is toe over today console. I have to navigate to the folder Charter react, and then I have to run with back. Okay. I have to run with black on. Let's see what happens on. Well, I know what you can see. The gold off the application was compiled. Now, what I want to do is to run the web server someone to you to comment and be eggs north. Mourn. I have to set the option watch, and then they have to specify the route folders. Andi, I heat interred. Let's see what happens on. Well, now, as you can see the work, sir. But he's working like I can close the common problems. I have to go back to the browser and I'm going to use the others. Local host 3000. Um, okay, I Sorry. I'm going to use the address. Local host 3000. It slash chart listing. Well, in this case, I have toe, I have to use the address. Local host 3000 slash chart listing church. Least thing. I'm gonna hit interest. Let's see what happens. As you can see again, you seen the address? Local cost, 3000 slash chart listing. And well, I know what you can see on ever massage this place, Andi ever message is model is not defined. So I have to go back to the gold on I'm going toe import the model component. OK, so I'm going to say in court model from react. Bootstrap slash more Okay, now I say the changes on then I have to go back to the console. I have to stop the server by pressing the keys controversy. And then it has to run with back one more time. Well, no, As you can see through the gold was compiled on will know what I come to do is to run the web service and now a heat interred on. Let's see what happens now You can see no more. You're restarting. Restarting the service on. Well, now I can close the common problems. I have to go back to the browser on. I'm going to refresh the application on Well, I know that you can see another ever massage This place on this time the ever moustache is Bhutan is not defined. So I have to go back to the growth A So you can see here I am in the chart listing Doctor Yes file And I'm going toe import. I'm going to import the bottom components from Riyadh. Bootstrap. It slashed Bhutan on. Dwell, as you can see am important. They don't component from react. Bootstrap on. Um OK, as you can see here, I have an instance off the bottom component on. Well, now I have to go back to the council. I have to stop the server by pressing the keys controversy. And now I have to run with back one more time on. Well, you know, you can see the goes off. The obligation was compiled again and then I have toe run the Web service. Let's see what happens now. As you can see, Northman is restarting the web service. And well, now I can close the common prompt. I have to go back to the browser. I have to refresh the application one more time on. Well, and now you can see this easy with Page that this place on. Well, now what I want to do is to press the Bhutan preview chart. I'm going to press a button preview church. And as you can see, uh, you know, I window appears as you can see, this dialog window or Tagalog books contains the title contains the title chart on then I have here the close button on If you analyze the JavaScript console, you can see that inside the JavaScript console, I have the settings off the chat. Okay, As you can see here in danger in the JavaScript console, I have the settings off the chart. Here we have the labels Microsoft, aapl, Oracle on hearing have the Golders green orange boo as well as the numbers 457 103 150 on. This means that the obligation has the ability to get a specific information from mongo db on. Well, this'll means that the obligation is working. Now I'm going toe. I'm going to close the JavaScript console. I'm then I have toe. But is the Bhutan close? Well, as you can see, the application is working. 48. Last improvements to the web application: Okay, Welcome to another lesson off this tutorial on this lesson. What I want to do is making the obligation this play a chart to the Web browsers. In order to make the obligation display, I chant a charge toe the browser. The first step that I have to take is to import the chart. Have to import the chart class from from the dependency chart, though. Yes. Now, as you can see em important he be charged class from the dependency chart. Yeah, yes. And then what? I have to go east toe, head over to the metals. A candle. Bleak, as you can see. Here. Here it up. The metal handle bleak on. Um And what I want to do is to get over. So these a Z you can see this is the last, then medals. This is the last metals then on. Well, as you can see on here, we have the metals. Then on inside these metals, the I have another metals have the meadows. These thought said estate. And as you can see here, I have a callback function on this callback function. This place a message to the console that says the yellow window was opened on Well, and now, inside thes callback food. Inside this callback function, I want to place, um I want to place my goals. So I'm going toe. I'm going to add a comment that says, um I'm going to add a comment that says setting up said the no ah, chat and will, um, in order to set up a chart on the first step that I have to take ease is to create a new variable. So I have to get over to the constructors. And as you can see here, I have the constructor and I'm going to the clear and you variable, I'm going to create the variable, these thought chap, and I'm going to set this variable to noon. Okay, You know what? You can see the variable. These dog chat equals snow on. Now what I want to do is he setting up a check? So I'm going to take Dean a let sorry. I'm going to take being, uh I have to specify the variable the's look, Jack on going to set this variable toe new china. And now you know, you can see I am creating an instance off the glass checked. Okay. As you can see, I am creating an instance off the glass chat on these class requires parameters. And in this case, this parameters is on object. And we'll, um, the first property ease time. I'm going to send this property toe the note. Then I have to have another property, the property, that and in this case, the property that that is on object. Andi, I have to add another property, have to have the property options. And in this case, the property options is an object as well. And well, I know what I want to do is tow the property labels on in this case, three property labels. He said toe these thought steak, the cool rent labels. OK, Andi, I remember that. I remember that on the bravest lesson on the previous Listen, I created thes state variables. Okay, When the brake is listen, I created the sustained variables on, um, in these. Listen, I'm going to use these estate variables, okay? I'm going to use the values off these estate variables. Okay, so now I have toe go back to the coast, and I'm going to say I'm going to add another property. I'm going to ask the property that sits that the six on this property contains on the Honore on disarray contains another object. And now the subject contains the property bag. Ground color. Okay. And I'm going to say this property two thes thought state, though. Cool, rent cool, red colors. Okay. And then I'm going to have the property that then and I'm going to say this property to the stop a state, the Korans. Cool rand numbers on, um, what else? Now I have to get over to the I have to get over to the options to the property options. As you can see here, I have the property options on I'm going toe at the property responsive, and I'm going to say this problem. It is proper tickle troop. Then I'm going to have the property mine pain aspect, racial on. Then I'm going to say this property to true as well. I'm going to add the property title and in this property. In this case, property title contains an object on this subject called Crazy Properties. Play on. I'm going to say this property to troop and then I'm going toe at the property from size, and I'm going to set the property toe 20. And finally, I'm going toe. Have the property text on. I'm going to set these property toe Hannah names to attempt here to honor. Sorry, This property, the property text called things and a rate on the first item of this array is the variable . The start. Stay the current. I don't Andi, thesis England. Item off this array is these thoughts is take the poor int description. Now you can see these array the array. Uh, the property that property text contains Honore on the array contains two different items. Okay? And will a Now what I want to do? He's, um Now what I want to do is adding another property. I'm going to ask the property. Lenient. I'm going to say these. I'm going to set these property 100 toe on object. Okay, This property contains an object on these objects. Contains the property display, and I'm going to say this property true. And then I'm going to add the property position. I'm going to say this property toe left. Okay. I know. As you can see, I just set up. As you can see, I just I just said up, uh, a new checked. Okay, on. Um Okay. Now I have to get over to the I have to get over to the mobile component. Okay. As you can see, this is the model component on Remember that this is the component model. Remember that This component this component is used do displaying. Ah, have I a window or regular box? And inside this component model, I have the element campus. Okay, inside these more inside the component model, I have the element campus. And now what I want to do is to add another tribute breath, and I'm going to save these attributes toe campus. Okay. And, well, theater of youth breath. He's used to create a reverence to the campus. Okay, have element. Campus is the place where the chart will be displayed. Okay, element campus is the place where the chart will be displayed on dwell on the internet. Breath is used to create a reverence to the element campus. Okay, now we have to go back to the I have to go back to the to the class toe the instance off the off the class chart on these instance off the place chart requires two parameters. So I have to add a comma and then the first parameters is thes thought. Refs don't vote campus. Okay, The first perimeters in this gaze is a reverence toe the element campus. Okay, the first parameters east. A reference to the element Canvas on. Okay. Now, um, before I continue, I'm going to ask Anethe Block on this. If Brooke is going, is going to verify the value off the variable. He starts check. Okay. On this if block is run if a chart WAAS created previously okay, this if block is wrong If a chart waas created previously, ok, someone commented. That say's a chance Wes created great use. Really? Okay. Visit block Is this if block is wrong If a chart was created Previously on if a chart that was created previously what I want to do east to destroy the chat. Ok, so I'm going to use demento thes thought, chat, thought destroy. Okay, if a church that was created But obviously then I want to destroy the chart. And in order to do it, I have to use the Mentos. These star charts not destroy, okay? And ah, what ails. Worry goes Okay. Remember that the chart is the Remember that these goals, I think this goes. There goes that East used to create a chart he's placed inside the handed click metals. Okay, remember that the clothes that this place a chart, he's okay. That because that creates a chart is placed inside the metal kind of bleak. Okay, on. Well, and I have toe have to go back to the okay, you have to go back to the council, and I'm going to stop the Web server by pressing the kiss controversy. Okay, Now I have to stop the Web server by pressing the keys controversy on. Now, Where I want to do is to run with back one more time on. Let's see what happens. Okay. Now, as you can see, the cold off the application was compiled on. Well, now what I want to do is to run the Web server one more time on. Let's see what happens. As you can see, Northman is restarting the web servers on Everything is working. Okay. How I can close the common prompt. I have to go back to the browser on I'm going toe. Refresh the application. I have to refresh the application. Okay. Now, as you can see, he sees the with page that this place on Well, you know, what I want to do is to praise they don't preview chart. I'm going to present. I'm going to press a button preview church and let's see what happens now. As you can see, a regular window opens on diesel. Yellow window contains the chart. Okay, These are doing this dialog window contains the chart. Now, Now I can close this window, and now I'm going to open a new window. I have toe Want to praise another Putin. I want to press these these boots on, so I'm going to press the preview chart. Putin, I'm going to press the Bhutan preview chart one more time. And as you can see, another chart. This place. Okay, Another chat. This place. I closed his window, and, uh, okay, I'm going toe brace the Bhutan preacher one more time. Well, as you can see, a different chart, this place. Okay? And this means that the application is working now. The application has the ability toe display a chart to the web browsers. Okay, I'm going to press the boot. Don't break your chart one more time on. Well, as you can see, the application is working. 49. One more navigation button: Okay. Welcome to another lesson of the tutorial on this lesson. What I want to do is creating a navigation Bhutan. Well, in order to create a navigation Bhutan, I have toe head over to the, uh, okay. In order to create a navigation Bhutan, Um, I have to get over, As you can see here, I kept the component Garth on this component here. I have the component card on this component contains the next these components the component cart convince the text charts listing. Okay, This car, this component card contains contains the next charts listing on will, um, inside these inside these components, I'm going to create another component. Okay, I'm going to create une instance off the component, the gun, and then I'm going to create an instance off the component car body. Okay. I have to create an instance off the component fully on. Well, e I have to watch the the property, the parameter background, and I'm going to set these parameters toe like, and then I have toe the e. I have to ask the next time a dish and I'm going to set these these parameters toe do black . Okay. Andi know What I want to do is to create, have a component of Bhutan. I have to create an instance off the component. Bottom on. Then I have to have the text charge Generator chargin Radosh Charging a raider. Okay, the next east. Go back. Go back to charge generators. Okay, on I have toe set up these wooden. In this case, I'm going to us the parameters type. And I'm going to set this parameter toe. They have got off the barometer size. I'm going to set these parameters to lash. And finally I have to ask the baram it there h r e death. Okay, I have to ask the attribute h r e f, and I'm going to say these attributes two is lash Okay on. Finally, I'm going to ask the barometer variants. I'm going to set these parameters toe words and well, I guess this is it now. I just created a navigation Bhutan, and well, now I have to go back today to the council, and I'm going to a stop the website British by pressing the keys controversy I praise. It is controlled by breast keys controversy and I have to run with back one more time and let's see what happens. Okay, well, now what? You can see the gold off the obligation was compiled. So now you can run the web service one more game and let's see what happens. Those you can see no mone is restart teens, the website rush on. Everything appears to be working. Okay, so I have to go back to the browser and I'm going to refresh the application and let's see what happens. And, well, you know what? You can see this easy with page that this place on now, as you can see at the bottom of the space after at the more, um, off thes page appears on navigation button that says Go back to charge generators. But what I want to do is to add some styles to these tow the section off the off the page because I wanted to improve the layout. So I have to go back to the gold and I'm going toe. Uh, I'm going toe. Ask the Okay. As you can see here, I have the card. The component Qarth on what I want to do is adding the attribute I want to ask the attribute this style and I'm going to use to payers of courtly races. In this case, I'm going to use the property color and I'm going to set this property toe black on. Um, and now I'm going to use the property. Um, Margin took margin up, and I'm going to say this property toe 1.3 m's game. And well, you know what you can see. I am having some styles to the component card toe. The component card. Andi. Well, now I can go back today. Don't so one more time you stop the Web server by pressing the kiss controversy. I have to run with back one more thing and let's see what happens. Well, I know you can see through the believing the application was compiled on Finally Have to Run the Web server one more time. Let's see what happens. As you can see, no money's restarting the Web servers on the Web server. It is working. Now I can close the common prompt. I have to go back to the browser and I'm going toe refresh the application and well, I know what you can see this easy with Page that this place on Well, if I scroll down these with page, you can see that here we have the navigation, but don't go back to charge generators, so I'm going. I'm going toe press the yellow Bhutan. I want to press the yellow button on. Let's see what happens. Okay. Uh, now, as you can see, this east the webpage that this place, uh, this is the chap generator. And if I can see at the bottom of this page, I have the navigation Bhutan charts listing. So I'm going to present Bhutan charts listing and then see what happens now, as you can see these with Paige, this place one more time on this means that the navigation booed owns are working. 50. Testing the web application: Welcome to another lesson off this tutorial on this lesson. What I want to do. He's testing of the application on Well, in order to test the obligation. The first step is to specify a title for the beach art. Well, and what I want to do now is creating a chart from scratch Andi in order to create a chart from scratch. The first step is to specify a title on the skated. The title is the most remote, the most visited countries the most visited countries world White War worlds wife on. Then I have to specify a description. In this case, I'm going to use the description millions off people, millions of people on, uh then I have toe. I have to specify a label. In this case, the label. The first label is China, and I'm going to say the number 65. And then I'm going to use the color, the color green. And now we have toe press. They would don't add settings. I know I have to. As another label, I'm going to use the label s pain and I'm going to use the number, um 63 and then I'm going to use the color or ranch by president or not sittings. And then I'm going to you. I'm going to ask the label Italy, and I'm going to use the number 55. And then I'm going to use the color, the color blue President, Burnet settings and on. And then I'm going to use the label. Canada. I'm going to use the number 20 on. Then I'm going to use the color Purple president donut sittings. And finally, I'm going toe asked the label Mexico, and I'm going to use the the number 45 on I'm going to use the color. Um, I'm going to use the color. Ah, okay. I'm going to use the color, the goal of breath, and then I buy possible don't add settings. And as you can see here it up the country's the the numbers and the colors. And finally I'm going to press. They would don't create chat. I know what you can see. I just created these thes chart Onda here a cup title. In this case, the title is the most visited countries worldwide on then the description east millions of people on Well, as you can see, the chart is working. And now I have toe, I have to press the green Good on safe chart. Okay. I have to press the green button safe chart. And now, as you can see, these dialogue box appears on these dialogue books, this place and pick this place the next features that things were saved. Okay. Which means that the information was saved in tomography. I know it. I can praise the boot of clothes, and finally, I'm going. I'm going toe, press them the boot on charts listing. Okay, I have to press the button charts listing, and let's see what happens on. Well, I know what you can see this easy with page that this place and will, um before you scroll down, you can see that at the bottom off This listing here we have here we have the chart that I just created. Okay, As you can see at the bottom off these with beige appears the chart that I just created on , as you can see here, a cup. The description on as you see, the description is very brief. The description is millions of people, but well, and now what I want to do is to press the Bhutan preview. Checked. I bet is able. Don't preview chart on. Well, now what? You can see the chart East displays. And here I have the title the most visited countries world wife Andi I have the description as well. Millions of people and well, hey, wake up. Remember that he wake up on the left side off the screen. I have villian on, for instance on Well, as you can see, a color red represents Mexico Pickle arena represents China. The caller Jello represents a Spain He called her The Color Blue represents Italy and the color Purple represents Canada. And we'll a Now I have so I can close thes these window. I want to close this window. So I'm going to press the red boot on clothes on. Well, now, as you can see, the application is working on. Finally, I'm going to pray. I'm going to press the yellow button, go back to charge generators. I braced the yellow button on Well, and now you can see these easy with change that this place on Well, this means that the application is working