Learn React by creating a Chart generator | Raymundo CH | Skillshare

Playback Speed


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

Learn React by creating a Chart 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

25 Lessons (4h 22m)
    • 1. Welcome to the React tutorial

      4:37
    • 2. Installing Nodejs

      5:14
    • 3. Your first web app with Nodejs and Express

      9:23
    • 4. Setting up an static web server

      4:31
    • 5. Setting up the web server so that the React router works

      8:16
    • 6. Setting up Webpack and React

      13:28
    • 7. Bundling React code

      8:44
    • 8. Handling styles with Webpack

      12:41
    • 9. Testing the first React web app

      5:34
    • 10. Using Watch Mode

      12:49
    • 11. Setting up a router

      13:47
    • 12. Layout with React and CSS Styles

      12:54
    • 13. Improving layout with React components

      9:45
    • 14. Creating a custom React component

      14:27
    • 15. Testing a text field created with React

      11:09
    • 16. Another text field created with React

      9:12
    • 17. Textfield created with React for labels

      7:05
    • 18. Text field for numeric values

      5:20
    • 19. Dropdown menu with React

      13:55
    • 20. Setting up a Button with React

      14:26
    • 21. Make a React component to display settings

      13:14
    • 22. Make a React component to display settings

      13:16
    • 23. Create the Chart Component

      12:18
    • 24. Continue creating the Chart creator

      14:11
    • 25. Testing Chart component

      11:52
  • --
  • 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.

39

Students

--

Projects

About This Class

This tutorial teaches you how to use React. If you want to learn React in a few hours then this tutorial is for you. This tutorial is easy to understand and brief. It covers how to set up React using Webpack from scratch as well as how to create React components, use parameters (props) and state variables. You will understand how to apply CSS styles to a React web application and much more. And finally you will create a React component that displays charts on the screen automatically.

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. Welcome to the React tutorial: welcome guys to these tutorial on react on this tutorial, I'm going to show you how to create the obligation that you see on the screen in these On this tutorial, I'm going to show you how to create a chart creator with react. Well, in orderto create a chart, the first step is to input the chart title. In this case, the chart title is my favorite. Sorry. The most popular. The most popular countries, the most popular countries. Now I have toe in put a charge description. So in this gay teacher description is the most recent this go in Greece, the most visited countries worlds wife. Okay, World wife. Now I have to specify I have to have the labels for the chart in this case, the first label, East Spain, and I'm going to set the numeric value off 45. Now I'm going. I'm going to use the color breath. I hit the Bhutan at settings. I'm going to ask for different. I'm going to add four more countries. Okay, I'm goingto have China China, and I'm going to use the numeric value off 50. Now I'm going to use the color the color blue and I'm going. I'm going to hit the Bhutan at settings. Now I'm going to ask 11 more country in this case, I'm going toe have Brazil, and I'm going to use the numeric value off 35. And in this case, I'm going to use the color orange. Now heat the Bhutan at settings I'm going to have to more countries in this case I'm going to have Mexico on. I'm going to say the numeric value off 60. I'm going to use the color on and there be, and I'm going to hit the Bhutan at settings. I'm going to add one more country. In this case, I'm going toe. I'm going to ask another, and I'm going to use the numeric value off 40. And then I'm going to use the color. Um, the color. Ah, nickel ore green. Okay. And I'm going to hit the Bhutan at settings and well, as you can see, uh, here I have the section settings listing. The section contains the listing off countries, the numeric values as well as the colors. Finally at the bottom of the screen, the reset button creates chart, so I'm going to hit the Bhutan create chart now, as you can see, a very nice chart Waas creative automatically This chart contains labels the green color east for Canada The red calories for Spain The blue color is for China. The the orange color is for Rosile on the purple is for Mexico on. You can see that these charts displaced the chart title in this case, the most popular countries on the chart description in this case, the most visited countries worldwide. As you can see, this application looks very nice on this application. Waas created with react well atyou can see this tutorial is very interesting. So if you want to learn, react from scratch, then this tutorial is for you. We'll see you very soon. Bye. 2. Installing Nodejs: Welcome to this tutorial on these. Listen, I'm going to show you how you can install. No guess on your windows Computers. Okay, The process is very easy on very fast, as you can see on the screen. Ah, here. I have the official website off. No, Here? Yes. Or cases? The official website off knows. Yes, on that. You can see here. I have to report. Don's OK. Um um, as you can see one. Bhutan contains the latest version off. No. Yes. Okay. In this case, the latest version off. No, dear. Guests, ease Diversion. $12.14.1. Okay, that is the latest version off. No gauges. Well, on this case, in this case, I'm going to use the latest version off mouth. Yeah, I guess so. I'm going to heat the Bhutan that says I'm going to hit the Putin. That is latest on, um, on that you can see on the bottom left corner. Uh, you can see that they installer is is being downloaded on. Well, as you can see, the installer is a very small file. Okay, so what you can see on the bottom left corner off the screen are being stellar. He's being downloaded. Okay? And this process is is very, very fast. Okay, well, now, as you can see, the I have already the installer on my computer. Okay, Now, um Well, what we have to do is to run the installer, so I'm going to run the installer on. Let's see what happens. Well, now you can see the installer appears on the screen. Okay, As you can see here I have the installer and I'm going to hit the button. Next I'm going toe. I am going to select the option that says I accept the terms his next. Next next, one more time. Next on now, what I have to do is to heat the Bhutan that says in style. OK, so I'm going to hit the Bhutan install Onda. Let's see what happens. Well, now, as you can see Ah, the installation is the reversed on very a straight A straight forward. Okay, they sell it. The installation is very easy. Well, now, as you can see, the installation process is complete. Okay, Now the installation process is complete. So on now. I'm going to hit the Bhutan finish OK on. Well, now what? I have to do is to open the comments prompt on now what I want to do east to verify whether no, I guess is running on my computer or not. Okay, So in order to verify whether no, dear yes is running on my computer or not, I'm going to use the comment, knows on. Then I'm going to use the flag version now hit. Enter. And as you can see, the version off No, I guess this place now, I want to verify whether the note back Cashman a year program is is running on my computer . Okay, so I'm going to rip use the comment, knows Pakistan a year, and then the flag version. Now he enter. And, well, you know what? You can see the version off north back Cashman a year. This place on the screen, OK? And well, before I finish, I have to say that no, Pakis, man a year is a program that is juiced to install. No Js dependencies. Okay, I'm going to repeat this because it's very important. Knows Pakistan a year is a program that is just for installing no gauges. Dependencies. Well, I guess this is it for these. Listen on. Um, on the next listen, I will start working on the delegation 3. Your first web app with Nodejs and Express: Okay, you guys welcome back to another lesson off these tutorial. Well, on these listen, I will start creating the project, okay? From scratch. So, um, the first step that I have to do is to head over to the council and I'm going to create a new empty folder. Okay, So in order to create a new empty folder, I'm going to use the comment. Make directory. Okay. Now, I have to specify the name off him. The folder. In this case, the name will be Charlie creators. Okay, Chart Creator is the name of the folder Chart Creator now hit. Enter on. Now, where I have to do is to 98 inside these empty folder. So I'm going to use the Common Change Directory chart Creator. Now, as you can see, I am inside the empty folder on now. The first step that I have to take is creating Ah, backlash, Jason file. Remember that a puckish Jason file is a file that contains a description off the application. OK, basically, the the bunkers, Jason Vile is a file that contains a description off the application. Well, in order to create such file, I'm going toe use the common NPM eight. OK, now he entered. OK, guys. Now, as you can see, North puckish man a year is asking me to provide the backlash name. So in this case, I'm going to use the default option. So I'm going to hit enters now. I have to provide the version off this application A hit. Enter, I have to provide a description. In this case, the description will be chart creator. Wheat react. Okay with react now I hit. Enter Now I have to specify the entry point. Okay. In this case, the entry point is the file that contains the server. The entry point testified that contains the Web server in the Indus Gave the name of the file is a server doctor. Yes. Okay, now he's Inter's. Now I have to provide keywords And in this case, the keywords are chart as well as react. Okay, Now hit. Enter realtor. Well, I have to I have to specify my name in this case, I'm going to use my name right on, though. No heat in fish And finally about to take me Jess on DATs it now, as you can see, I think the buckets Jason file Waas Creative now. And the next step that I have to take is to open the called it later. Okay, I'm going to open my goat it later. In this case I'm using in this case, I'm juicing. Ah, in this case, I'm using supplying text. Okay, so what I want to do now, East, I'm going to hell over today. So the folder that I just created Ah, Andi, as you. As you know, uh, the folder is placed in the seed. Right? Okay. So I have to head over to the C drive and I'm going to select the folder Chart Creator. Okay, Chart Creator. I opened the folder. I know what you can see. These new window. Ah, Okay. Now you can see these new window. This place okay on this window contains, uh, the Packers Jason five that I've just created. Okay. Now, as you can see, thes file is specifies that the main file or defined that contains the Web server is the file server dot Js. OK, so as you can see here in the settings, we have the property main on the property main has a value server. Dodger. Yes. In other words, I have to create the file server. It'll Julius. So I'm going toe. I'm going to select the option you file. And now I'm going to save this file as server dodges. Okay, now the next step that I have to take east to install, uh, to install my first dependency or the first dependency for my project. So I'm going toe npm in stuff save. Now, in this case, I'm going to install the dependency express. Okay, Now I heat enter on. Well, it's important to say that express is a dependency that is juiced for creating web servers . Okay, expresses a dependency that is used for creating web servers. Web servers. Very, very fast. Okay, Okay. Now, as you can see through the express dependence Iwas installed inside my project. Now I have to close this console on. Now I'm going to head over to the service of JD's file. I'm going to declare the Constant Express, Andi, I'm going to require the dependency express. Okay, Express like these. No. Now I'm going to declare the constant up, and I'm going to set the pension express like this. Now I'm going to declare the Constand backs and I'm going to require the but dependency like this. Okay, Now, what I want to do is, um is creating on the first route hander. Okay, so in this case, I'm going to create the route handler up the get Remember that get is the http metals that will be used to establish a connection between the web server on the web browser. Okay. And, um, I have to specify the road in this case, the road will be a slash. In other words, it slash represents the home page off. My application is lash is is the main base or the home page or their route, Um, or the root off my obligation is lash represents, um, the home page off my application. Ok, Okay. Now, uh, I have to specify these, um, this function on, I have to specify two parameters. Request andi response. Okay. Now, what I want to do is to send a response to the Web server that says, uh, the response will be Hello. Hello. From Web server. Okay, that is the message that that I want to display on the on the web browser. Okay. Hello. From Web server on, uh, now I'm going to set up the pork, so I have to use apple. Listen on, then I have to specify the port 3000. I'm finally, um I have to specify thes mental. Okay. On the metals will bring a message to the console that says listening at local coast 3000. OK, now what I want to do is testing his Web server to verify whether these Web server is working or not. So now I head over to the council on I'm going to run the government. No server dog. Yes. Now he entered. And let's see what happens. As you can see there listening at local cost 3000 message this place, which means my Web server is working now. I have to go back today with browser and I'm about to take being local coast 3000 now heat center on. Let's see what happens. As you can see the moustache, this place on the on the screen that says hello from Web server, which means my webs. Everybody's working. Okay, so well, I guess this is it for these. Listen on the next listen, I will continue working on these application 4. Setting up an static web server: Okay, guys, welcome back to another lesson off these beautiful tutorial on these. Listen, I would continue working on these application. Well, the next step break up to take is creating on a static Web servers in order to create an ecstatic web server. Um, well, the first step that I have to take east, I'm going to have a comment that says aesthetic Web server. Okay, now I'm going to use the coast. I'm going to use thes line of growth after the use on. Then express thought is study. And then I have to specify the bad toe, the folder that contains the ecstatic files. Okay, In order to specify the path to the father that contains the aesthetic files, I'm going to use the methods path the joint. Okay. And now you have to provide I have to specify two parameters at the first parameter is dear name. Okay. Your name contains the pat toe. The root directory. That's very important. Dear Name contains the bath to the root directory on. Then I have to specify the name off the folder that contains the s static files in this case, the name off the folder that contains the aesthetic files. He's the is the folder. Okay. The father that contains the ecstatic files. He's the folder. Uh, least okay, these is the folder that contains the ecstatic files. Off course. As you can see, I don't have the least folder already, so I have to create the least Father. So I have to select the option you folder. And now I'm now I'm going to name this folder as this. Okay, on. Um Okay, now what I have to do ease. I'm going to have one ecstatic file inside the least further. So I'm going to select the this father on. I'm going to I'm going to choose the option New file. Okay, Now I'm going to save this file as a testing, tasting, doc html. And now you can see I have an HTML file. Okay, Now I'm going to create a a random with page. So in this case at the title for for these with Paige will be a testing. Is that the web service? Okay. And now I'm going to ask one heather to this with daesh on. The heather says, um, readings. Greetings from the aesthetic web service. Okay. Readings from the static Web server. Now I heat now a save the changes, and now you have toe head over to the well. And now you can see the least folder contains the file testing that HTML. Okay, The least folder contains the file testing about HTML. Okay, so now I have to go back to the council on now. I have to stop the application by pressing the geese gone through. You see? So I have to present keys controversy on. Not now. I'm going to run this application one more time. Okay? You know what? You can see? Um, the application. The Web server is rooting. Okay, so now I have toe head over to the to the web browser on I'm going to take being local host 3000 slash this thing dot h t m l. Okay, now I hit enter. And as you can see, the webpage, this place on the browser, or Gaby with Paige, this place on the browser and says greetings from the static Web server, which means the ecstatic Web server he's working. Okay, so I guess this is it for this lesson. On the next lesson, I will continue working on these application 5. Setting up the web server so that the React router works: Okay, guys, welcome back to another lesson off these dictatorial. Well, on this lesson, I will continue working on these application. Well, what I want to do now is creating a new HTML file inside the least folder. Okay, so I have to get over to the least folder on. I'm going to select the option. I'm going to choose the option you file now. I'm going to save this file as container dot html. Okay? No, he'd save. I know. What I want to do is having the aged female Marco for these with Paige. Ok, Okay. Now, as you can see, I am going to create the markup for these file for the file up container dot html. So, in this case, I'm going to place the title. The title is up container. And now I'm going toe have one heather to these file on def. The content off the heather Ease up a container for react application. Ok, Andi. Well, now what I want to do is took it over to the server dot Js file Andi on now. What I want to do is to modify the route hander, okay? They call that I am selecting right now, the piece of code that I am selecting right now is the root hander. Okay, so now I'm going to remove the slash on. I'm going to place one asked the risk. OK, now I'm going toe. I'm going to remove the scent. Metals on. I'm going to place the same file metals. Okay, now what I want to do now, he's to east to send on, um, html file toe the web browser. Okay, I want to send on html file toe the web browser. So in order to do it, I have to specify the bad. So the html file that I want to display to the browser Okay. So in order to specify the path toe the HTML file, I'm going to use the part of the joint meant off. And now I have to provide the first parameter. In this case, the first parameter is dear name. Remember that their name are the villian contains the bat to the root directory. Okay. Now, I have to specify on the folder that contains they define that I want to display to the browser. I have to a specify the folder that contains the file that I want to display to the browser in this case is the for is a folder beast. Okay, now I have to specify the name off the father. That Sorry. I have to specify the name off the file that I want to display to the web browser. Okay, in this case is the file up container dot html. Okay, that is the name off. That is the name off the file that I want to display to the web browser. Okay. Okay. So proud of you guys are wondering what is the meaning off the asterisk? Okay. Well, thes ass teres. OK, now I'm going toe. I'm going to describe what happens when we used on us the risk. Okay, So any time the user be seeds any u r l address, then the up container file. Well, this play to the web browser again. Any time the user be seeds, any u r l address the app container file will be this place to the web browser. That's the reason why we are using an asterisk. Okay, the asterisk ah makes that every time the user visits you are address the APP container file is display toe the Web browser. OK, so I'm going to other comment that describes thes that describes these weather. Um, any time. Every time, every time, every time the user be seats any u r l address, um, then the they never file will be displayed through the web. Browsers toe the with browser. Okay. Okay. So this is a description off the route hander that I have below. Okay. Every time the user visits any u r l address, then the up container file will be displayed to the web browser. That's the reason why I am using and asked the risk right here. Okay, so now, uh, what I want to do is to get over to the console and I'm going to stop the application. Okay? I'm going to stop this application by impressing the case control. See? Okay, I present he's control. See? Another could stop the application on. Now, I have to run this application one more time. Okay? Now that you can see the message this place to the console that says, Listen, in a local cost 3000 now I'm going toe. I'm going to be so I'm going to use the address. Local cost. 3000. Now heat in there. And as you can see, the new webpage. This place, uh, on there on the web browser. Okay. Up container for REAC application. Now I'm going to use a different address. I'm going to use the address. Local cost. 3000 slash. Hello, world. Hello, world I hit. Enter. How did you can see? Ah, the webpage. Uh, this place on the web browser up container for react application. So, uh, I'm going to use one more. I I'm going to use a different address in this case. Local Khowst 3000 slash Germany. Your money. I hit. Enter on. Now, as you can see, the same with paged this place. So as you can see these with Bache, these Web page is used all the time. OK, these with paged up container. He's just all the time. Okay, so it doesn't matter the others that I use the same with Paige this place. Okay, so, um well, I guess this is it. Ah, I give this seat for this. Listen on the next Listen, I will start creating. I will start setting up react from scratch 6. Setting up Webpack and React: Okay, guys will come back to another lesson off these dictatorial on the's. Listen, I will continue working on this application. Well, and now the next step that I want to take he's sitting up, react from scratch. Okay? So in order to set up react from scratch, I'm going to head over to the council on now. What I want to do is to stop this application. Okay? I want to stop the application by pressing the case controversy. Okay. I pressed the keys controversy on. Now, what I want to do is to install seven dependencies. Okay, I'm going to use the comment NPM in style. Save this on. Um, Mel, um I have to specify the the dependencies that I want to install. OK, so I'm going to style with back with back with back cli uh, react. Andi, react them. Okay, those are the 1st 4 dependencies that I'm going to install right now. So and now heat entered. Okay, guys will know what you can see. The dependencies were installed into the project, So now what I have to do is to in style more dependencies. OK, so I'm going to use the command npm install. Save this and then I'm going to you. I'm going to install the dependencies. Babil, I have a core. Ah, Bob is you lie. Ah, bobble, pull, feel. But when you feel uh okay, sorry, but really poorly, I feel no, but I really feel sorry. Um Babil slash But I said ah President react Andi Babil is slash present and OK, so I'm going to install thes five dependencies Barrel core babble cli bab el bulli feel babwin Brissett react Onda Verrill Brissett end. Okay, now heat. Enter on. Let's see what happens. Okay, guys. Well, now what? You can see the dependencies were installed into the project or the in other words, the dependencies are are already placed inside the project eso And now what I want to do east toe style. One more dependency. So I'm going to use the government and B m in style. Safe this And now I'm going to install one more dependency Babil A loader. Okay, that is the dependency that I'm going to install right now. So now now I heat, enter on. Let's see what happens. Ok, guys. Now, as you can see dependencies where is were installed successfully So now I have toe head over to the to the gulf Lighter on. I'm going toe. I'm going to open the file Packers. Jason. Okay, so now in this file? Because, Jason, I have the death dependencies section. Okay, on as you can see, here are the dependencies that were installed before. Okay, this these are the dependencies that were that were installed, uh, as you can see, but we'll see alive. I will go available, feel react, um, with back. So it's important to say that all these dependencies are used only during the development off the application. Okay, I'm going to repeat. This is very important. Thes dependencies are just only during the development off the obligation. Okay, that's very important. Okay, so now what I want to do is create things and you file, so I'm going to name this file as with back the comfy dot Yes. Okay. On veces the configuration file for West back. Okay, this is the configuration file, so I'm going to declare the constant back, and I'm going to require Ah, you dependency back. Okay, on. Now I'm going to use a module exports module dot Exports on now. I have to create one object. Okay? This object that I have here, the senti object contains the settings for with back as well as react. Okay, well, these object right here, these NTR object contains the settings for with back as well as react. Okay, so the first property that I'm going to use is the property mode, and I'm going to set this property toe development. Okay. Like this. Now I'm going to add one more property. The property country. Okay. The's property is juiced toe A specify the file that contains the react application. Again, this is very important. This property entry is juiced to specify the file that contains the react application. Okay, so in this case, I'm going to name my react application as chart uh, up. Okay, that is the name off my react application. Now, I have to specify the path toe the file that contains my react application. So I'm going to use dot it slash source on. Then I have to specify the name off the file that contains my react application. In these cases, the five index dot Js Okay. No, uh, I have to specify the property out booked. Okay, the property are output. Sorry, Andi. Thes property is just toe a specify the file or they or the file on the location where they they have a script hook the JavaScript growth will be saved. Okay. So when with back, uh, finds the index topped gauges file with back takes the react growth on translates the growth into JavaScript cold I get again. This is very important. With pack takes the react growth saved into the index topped gauges File on translates the growth into JavaScript. Gold. Okay, so with back takes the react growth on translates, the react goes into JavaScript growth. Okay. And the resulting me file is, um, the resulting file. Okay, I'm the resulting file. The resulting. They're suiting. JavaScript file will be placed in in the location that is a specified in the bad property. Okay, so the property contains the location where they're suiting. JavaScript will be saved. Okay, So I'm going to In order to specify the location off the resulting off the resulting javascript file, I'm going to use the path of the Johnny Metals. Okay. And then I have to specify two parameters. One is their name on the other one is the folder that will contain the resulting Java script file. Okay, now, I just have to specify I have to specify the name off the file. In this case, the name of the file, uh, with the, uh may. Well, the name of the fire will be a bundle dog. Yes. Okay. It's important to say that name is a placeholder. Okay. Name here. Name is a placeholder. So, uh, the world charged up will be placed. Ah, okay. The name placeholder will be replaced with the chart up worth. Okay. Again, the main placeholder will be replaced week. The chart up worth. Okay. On A to classify the property five name contains the name off the resulting file off the resulting javascript file on. Then I have to specify, um, the public bath. Okay, in this case, I'm going to set this property to a slash. So again, with pack is going toe is going to take sorry. With pack is going to translate. The react goes into yabba Is creeped cold. Okay on then the resulting java script file will be saved into the least folder. Okay, I'm going to repeat this. Westpac is going to translate they react goeth into JavaScript gold on. Then the resulting JavaScript file will be saved inside the least folder. Okay, on, uh, I'm going to use one more line off cold. I'm going to just one more property more June on, then. Um okay, I'm going to use the property rules, and then here I'm going toe. Ask one more object. Okay. Here, I'm going. Toe. I'm going to use a regular expression. Okay? On these regular expression is used to find Java script files. Okay, this is very important. These regular expression that I have here is used to find javascript files. Okay, Vero Israel. An expression he's juiced by with back to find javascript files. OK, now I'm going to We have a juice on I have to use on a rake Bob. A loader. Okay, so probably you guys are wondering what is the meaning off these lines off gold. Okay. So, um, as I said, as I said, with back uses thes regular expression toe, find a gabba screamed file. Okay on, then once Westpac finds a javascript file, then with back uses diva loader to translate the cold from from react goes to javascript both. Okay, so this is very important. With pack uses the Bible loader to translate react goeth into JavaScript goals. Okay on then, um in other words, babble low. There is a translator. Ok, Okay. Bye. Loader. Isa translator. That translates React goes into javascript goes on, then the resulting javascript file is saved inside the beast folders. Okay. Okay, so well, I guess this is it for this lesson. On the next lesson, I will continue working on these configuration file. 7. Bundling React code: Okay, guys, welcome back to another lesson off. Thes dilatory along these lesson, I will continue working on these application on this configuration file. Okay, So according to the configuration file, um, they react growth most be saved, or most most, the react cold must be placed inside the index Stop Vegas file. Okay, so the index dot Js file contains my react application. So what I want to do now, he's creating a new folder and in this case, the name of the folder east source. Okay, Now I'm going to create the index dot Js file. Okay, So I have to select the option you file, and I'm going to save this file as index dot genius. Andi, will These this file contains my react growth. So I'm going to take Tina. Well, I have to create a react application. OK, so the first step is to import, react from react, and then they have to import react dome thing. React dumb as well. Okay, Now I'm going to use the react thumb. The render medals on these mental requires two parameters. OK, The first parameter. He's the html Mark Ope that wants to display to the browser Okay. Again. The first parameter is the html markup that I want to display to the web browser. Okay, so in this gaze, what I want to display to the web browser, he's a feather One death that says hello from react. Cano from react goes okay, Now I have to specify the second parameter. The second parameter is a reverence toe the container off the application. Okay, The second parameter east. Reverence to the container off the application. Okay, So in order to specify the container off the application, I'm going to use documents. Don't get element by Heidi on. Then I have to specify the ivy off the container. In this case, the idea off the container is route. OK, so? Well, as you can see, this is my react gold. Probably. You guys don't understand this gold boat, But don't worry. Later on, you will understand these discos. Okay. Um, so far. Well, thesis is my react application. So far as you can see, my react application is very simple. Andi, Now I have toe, uh, I have to create one more file. Okay. Before I continue, I have to create a one more file. So I'm going to select the option. You file on going to save this file as the bad. They'll R c. Okay, it's a big attention to the name of the file. Okay. The name of the file East, the Bab el r c. Ok, don't forget the duct. Okay. There is a vote at the beginning. Off the name. Okay, The reason adult at the beginning. Off the name. Okay, So the name of the file is thought though. The bubble RC. Okay, Don't forget the lot at the beginning. OK, The travel RC. Now I say this file and now I'm going to create an empty object on these. Um, these object contains the President's property on this property contains toe I items. Okay, The first item is Bill, uh, process it react on the second item peas, president. And OK, now you can see um okay, he right after items, but will present react as well as barbell. Press it in OK, on the property press. It's OK, Andi. Well, I guess this receipt and yes, I guess I use thesis it. Uh So now I have to go back to the to the council and now I have to run with back. Okay, So in order to run with back, I have to use the comment. Nb x with back. Okay, I have to run with back. So I have to use the comment in BX with back. I hit. Enter on. Let's see what happens. Okay, guys. Well, now you can see with back. Has already hasn't really creative the growth off my application in north with pack fassel ready translated the react goes toe JavaScript growth. Okay, so, uh, in other words, with back translated, they react growth into JavaScript growth. Okay, so now I have toe head over to the east folder. And if I pay attention to the beast folder, you can see that inside the beast folder. I have the file chat up the bundle. Don't get yes. Okay, chart up the bundle. Those Js is the file that contains my They have a squeak growth. Okay, so now I'm going toe. So as you can see, this is the JavaScript growth that waas creative by with back. Okay, this is the yellow script. Goes that waas creative by with back. Okay, so now I have toe head over to the console and I'm going to run. Ah, the wife. Andi with I'm going to run the web service. I used the comment notes. Server dot Js hit, enter. And as you can see, the web Cerveris Rooney. No. Uh, okay, I'm going to I have to get over to the to the web browser and I'm going to take Bean a local for 3000 slash Chant up the bundle. Don't. Yes, OK, I'm using the address. A local cost. 3000 is lash the chart up the bundle. Don't get Yes. Okay, that is the address that I'm using now. Hit. Enter. Let's see what happens now As you can see the coast off my application. This place. So this is the coat that Waas creative by thesis the coast that was created by buying with back. As you can see, it looks weird, but this is the JavaScript gold that was creative by with back. Okay, well, now you can see this is the JavaScript gold that waas creative. We with back. Sorry. This is the script code that was creative by with back. As you can see, these JavaScript growth looks very with but that's the JavaScript gold that with back creates. Okay, So? Well, I gave this. Is it for this lesson On the next lesson, I will continue working on these coffee. Racial, vile. 8. Handling styles with Webpack: Okay, guys will come back to another lesson off thes video tutorial on this lesson. I will continue working on the configuration file off with back as well as react. Well, I have to install some. I have been style other dependencies before I continue. So I have to open the console and I'm going to stop the application by pressing the keys controversy. Okay, so it presidencies controversy and now I have to in style. Huh? Two more. Uh, I have to install for different dependencies. Okay, I'm going to use the comment NPM in style save live. And now I'm going to in study dependency a style loader. CSS loader. Um, I'm going to install, um html with back brewing. I'm Then I'm going to install a green dash with back blowing. OK, so as you can see, I require neath uh I need for dependencies. Okay. Uh, este loader CSS loader html with back plugging clean with back blew in as well on. Well, I also need to install one more dependency. I need to install the dependency. A Yes, OK, don't forget that dependence. You get that dependency ease. Very important. Asia. Yes. Okay. They had to repeat this, uh, you have to study the pregnancy. A Yes, Yes. OK, that's the name of the dependency. It's a very brief name, but that's the name of the of the dependency A J. Yes. So I'm going to start five dependencies style odor. CIA says loader html with fact looming green with back blew in on. Finally, I'm going to install a Yes. Okay, Asia. Yes. Okay, Now I heat Enter on. Let's see what happens. Okay, well, now, as you can see, the dependencies were installed inside the project successfully. So now I have toe, I have to close thes console. And now I'm going toe as well. I'm going to head over. Sorry. I'm going to get over to the toe. The package Jason file on. If I scroll down, you can see that in the death dependencies section appears of the dependencies. Okay, I hear I have being with back blue Gene. I have HTML with back plugging. I thought a year years I have ah CSS loader. A style loader. So all the dependencies air here. Okay. Okay. So now I have to head over to the west back configuration file on. I'm going to add one more object like this. Okay, I'm going to add the property test and now I'm going to ask thes regular expression. Okay. Thes regular expression is used by with back to find CSS files. Okay, again, this is very important. These regular expression that I am selecting right now, he's just by with back to find CS is is CSS files. OK, now I'm going to use the style loader, Theus, Dalio loader as well as this CSS loader. Okay, so every time, every time with back finds CSS file with back, he's going to use the style loader on this uses loader to translate the CSS is tiles into javascript. Okay, again, this is very important. Westpac is going to translate the CSS styles into JavaScript by using Theis Diallo there as well as the CSS loader. Okay, I know this thes sounds weird. Weird, but that's what happens. Okay, so with pack translates, the CSS is tiles into you have a script growth. Okay. By using the style loader as well as the CSS loader. Okay. Okay. Now I have toe have to configure the, uh the the H via mail with back. Uh booking. Okay, so that would be in require HTM a hasty a male with back blowing. OK, and now I'm going toe. I'm going to the clear. One more constant that says, I'm sorry. I'm going to declare one more constant, Uh, the constant clean with back blue in. Okay. And I'm going to type in require being with back blue in. Okay. Okay. So, um, now what I have Tiu, what I have to do is adding one more one more property, the property bluejeans on this property contains, and an array. Okay, So as C just Yes, this property contains an array. Sorry. Now, in peace inside these. All right, I'm going to create an instance off clean with back. Blew in like this. Okay on. Then I'm going to create one instance off HD email with back blue. Okay? No. Um, Okay. Now I have toe. I have to add some settings toe the html with back brewing. Okay, So I prob probably you guys are wondering what What is? What is the reason why I used the the html with back plugging. Okay, So basically the HTML with back plug in, he's the plugging that creates the HTML file. Okay. HTML with Pop Lewin is just to create the html file. Okay. Where they have a script, growth will be attached. Okay, So Okay, I'm going toward the property title. This is the title off the web page in this case at the title of the Well Off the Webpage. Or, in other words, the title off the HTML file will be, um, charge creator. Now, I have to specify the template. Okay. And in this case, I have toe specify the pat toe. The template. Okay, In this case that they played the name of the template will be a template thought A J Yes. Okay, Aunt, I have to specify the filing, and in this case, the resulting HTML file will be, um, AP container have container, both html. Okay. So, um, so probably you guys are wondering what's happening here. Okay. Well, html with back plugging, he's going to create on aged email file. Okay, this blue in, he's going to create an H on html file on the name off. Such file is up container. Okay, So up container is the name off the HTML file that will be creative by html with back playing a gay saw this blue in. He's going to create an HTML filed on the name of the file is up containers. Okay, on. In order to create the file, the's blowing is going to use the template the ages file. Okay, so the template, the agency s file will be used by this blooming to create the up container file. Okay. Again, The template the ages file will be used by this plugging to create the up container file. Okay, Now I have took it over to the source folder on I'm going to create the I'm going to create the file template, then played out a year. Yes. Okay. Now this file, um uh, these this file is going to complain some a markup. OK, eso I'm going to ask some 80 s growth. And when I went to the now east to display the title here, Okay, I want to I want to display the title here, so I have to take being HD male with back plugging dot options. Don't fight off. Okay? This is the place where I want to display the title. Okay, So in other words, the title chart, they screeched. The title chart creator will be displayed inside the's title tax. Okay, so they the the text chart creator will be displaced in between these title tax. Okay. And now, if you want to place the the index the index file, you can see that the second parameter is a referenced toe the container off the application . Okay, so in this case, the container of the application most most half our route Ivy. OK, according to this file, the container of the application, most contain our route. I'm me. Okay? I have to create on html element that has a route Ivy. Okay, so I have to get over to the template, and I'm going to create a lift. That and these leaf tack contains the I V ruled. Okay, So in your words, uh, these will be the container off the application. I'm going to have a comment that says, uh, container off the react obligation. Okay. So, as you can see, these live back here contains the react application. Okay, All the react application will be displayed inside these, uh, inside these diff tax. Okay. The react application will be displayed inside these leave tax Okay. On Uh, well, I guess this is it for this lissome on the next list, and I will continue working on these applications. 9. Testing the first React web app: Okay, guys will come back to another lesson or thes video tutorial. Well, on this lesson, I will continue working on the West back configuration file on Well and no, no, But before I continue, I have to take one more step. Okay? Before I continue, I have to take one. I have to take one more step. I have to head over to the source folder on As you can see, the source folder contains two files the index dot Js file as well as a template dot ages file Now. Now, inside the source folder. I'm going to create 11 ist I one CSS file. Okay. The name of this file is my styles, though. My style Stop CSS. Okay. And now, now here. I'm going to create a very basic have every day seek. Uh, I'm going to create some oxtails. Okay? Some very basic styles. I'm going to set the color off the heather. Want that the corner off the other one? That will be a rest on. Uh, okay. On the color off the parent after No Sorry, Zoe. Ok, okay. I'm going toe. I'm going to leave these style sheets like these, OK, I'm going to leave these file like this. Okay? As you can see, I have one style on that. The style is the cholera style. Said toe breath for Heather one tax. Okay, Now I have to head over to the to the index of Js file on. I'm going toe import the styles. I'm going to import the CSS styles. Okay, so I kept bean daughter slash and then the name off the off the file that contains these tiles. In this case, the fire is my style's I don't see essays. Okay? No. Now, as you can see, I am I am importing via styles into my react application. Okay? I am important these styles into my react application. Okay, so now I have toe, um I have to get over to the council, and I'm going to run with back. Okay? I have to run with back, so I have to use the common anti x with back. Okay, now I hit. Enter and let's see what happens. Okay, guys. Well, now you can see the growth off my application waas created by with back. Okay, So *** has already Fassel ready. Compiles the growth off my application. Okay, so the growth of my application was creative by, uh, by with back. So now refer to the coast a writer on If you analyze the least further, you can see that the least folder contains toe files. One is the up container dot html file on the other file East, chart up the bundle dog. Yes. Okay. So you can see the least folder contains two files only. Okay. On gun html file as well as they have a script growth or they have a script file. Okay. Okay. So I know I have toe go back to the council and I'm going toe. Uh, I'm going to run the web service so they see no server. Yes, I hit enter. And as you can see, the massage listening. A local hosting 1000 this place on the console, So no, I thought toe No, I have to, um I have to use the address. Local cost. 3000. Okay. I'm going to use the address. Local cost. 3000. Let's see what happens now. You can see, uh, my first react application was created. Okay. Hello. From react growth. So, as you can see, my react application is working. Um, on when on will Thesis is the first react application that we are going to create. Okay, The saberi is more react application, but well, now you know how toe set up. React from scratch, OK, by using with back. Okay, so on the next listen, I will continue working on these applications. 10. Using Watch Mode: Okay, guys, welcome back to another lesson off these tutorial on this lesson. I will continue working on these application. Well, s. So far as you can see, the application is working. Uh, so now the next step that I want to take he's, um will I want to head over. I have to get over to the source. I have to head over to the source folder on I'm going to create any folder. Okay. The name of this folder is components. Now, what I want to do is creating one component, one react component inside the components, Father. OK, so I'm going toe, select the option you file, and I'm going to save this file as a up dot Yes. Okay. That is the name of these components I know. Uh, what I want to do is is creating my first component. Okay, I'm going to create my first component, so I'm going to the bean import, react from react, and then, in order to create my first component, I have toe, I have to take being ah, export default on then class. And then I have to provide the name of the component in this case. Well, it's important to say that the first leather off the name of the component mostly over gays . Okay, it's important to say that the first letters off the name of the component most B. Hooper gays. Okay, so in this case, the the name of a component is up, and then I'm going to use extends and then react the dog component. Okay? No, uh, what I want to do is creating he setting up a constructor. I'm. Then, uh, this constructor is going to set up the parameters for these component. So I have typing constructor props, then super props. And, uh, well, what I want to do now is is I have to create the render metals on. I have to specify the return. A statement. Okay. On these return a statement contains the the the vic owes that will be display toe the web browser. Okay, so these component so release return. This return return statement contains the HTML markup that will be displaced to the web browser. Okay, so in this case, where I want to display on the web browser is thes favor one. Well, our sorry. The first step is creating the parent element OK, this is the parent element. Okay? This is the parent element on now I have to create the child's the Children off the off the parent element. OK, so in this case, I want to create a everyone as well as a paragraph. Okay. On the hill. I want that will contain that contains the text. Hello from from AP component. Okay, hello. From cap component on the powerup will contain the text. The's is the first component Creative wheat react. Okay, now you can see this is the growth that will be displayed to the web browser. Okay, at the attack as well as a hitter. One tack on a paragraph back. Okay, aunt. Now I have to head over to the indexed all Julius file and I'm going toe import these components like this import up Fremd on. Now I have to specify the but toe the file that contains the component in this case, the the bad is that this slash components it slashed up. Okay, That is the name of the file that contains the component. I Sorry. This is the path to the file that contains the component. I could if I another alternative is to specify the JavaScript extension. Okay, I can expect specify the JavaScript extension, but the alternative that I used most of the times is removing the extension. JavaScript. Okay, so again I can use became a script extension, but in this case, I want to remove the split extension. Okay, Andi, As you can see, I am important the up component on now. I want to display the component. Okay. I want to display the components to the web browser. So I'm going toe. Specify the name of a component like this. Okay, as you can see here, inside the render metals as the first parameter again creating one instance off the up components. Okay. Again. Inside the render metals as the first us the first parameter. I am creating an instance off the app men off the up component. Okay, so, uh, this is more piece of growth. He's creating an instance off the app component. Okay. On the up component. This place this markups to the web browser. Hello? From have component on then departed. Okay, Okay. So now I have toe go back to the I have to go back to the to the with. Ah, the console on. Now I'm going to stop this application, okay? I have to stop this application by pressing the keys controversy. I know what I want to do is I have toe opened. I know there Another another command prompt. And I'm going to now be eight toe the left toe. The root folder. OK, so I'm going to use the Common Change Directory chart ap Now I'm going toe. Um, I'm going to run the Web server and also reserve. Now, I have to go back today to the previous comment. Brahms on. I'm going to run t comment and be X with back. Okay, but in this case, I'm going to use the watch flat. Okay? This is very important. Okay? You have to be very careful here because you have to pay attention to these. Okay, Isn't it is very important. You have to use the watch flat. Okay, this is the watch flat on the watch flat. Ah, who dates on the application automatically. Okay. So every time I make an improvement toe the growth so the react growth, then the application will be updated automatically. Okay? So probably you guys are wondering why I am using the watch. Flak. Well, the reason why I am using the watch, Flack. He's because with back Ah, well, if they will debate the application automatically every time I modify the react cold. Okay, so every time I modify the react, both the application will be updated automatically. Okay, That's the reason why I am using the watch flat here. Okay? Now he okay. Now, as you can see with back has already created the Goethe off my application. So now I'm going to close thes thes comments prompt, and I'm going to head over to the to the other comments prompt. And I'm going to run no server Doctor. Yes. Okay. I have to run the web servers. Okay. I have to run the web server. So and now I'm going to use the command. No server. The Yes, I hit. Enter. Okay, guys. And, well, sorry I made I made a mistake here. I have toe. I have to change. I have to navigate to the folder that contains my obligation. So in order to navigate to the folder that contains my obligation, I have to use the comment Change directory chart creator. OK. Sorry about that. Okay, Now you can see I am inside the folder that contains my application. OK, now, as you can see, I am inside the folder that that contains my application. So I'm going to use the comment. No server doctor. Yes. Okay. Now I heat in there. And now, as you can see, the web server that is running. Okay, Now the web server is running. So now, um, I have toe get over to the today with browser, and now I'm going to run. I have to use the address. Local cost. 3000. Okay, I'm going to be seated. The address. Local host 3000. And now you can see this is the coat that this place. Okay. Hello. From up component. The first. This is the first component created with react. Okay. And now I'm going to modify my goals, so I'm going to use Hello. I'm going to say hello from AP component. Okay, I say the changes, and now I'm going to ask one more line. Off goes okay, and I'm going toe a so you can see a young creating another paragraph on this paragraph will contain the text. Another another piece off text. Okay, now I say the changes. Now, if I opened the console, you can see that with back is automatically updating the application. Okay. As you can see, with pack is automatically populating the obligation on. Now I have to refresh the browser. Let's see what happens now. As you can see, a new line off growth on new paragraph this place that says another piece off text. Okay, so as you can see, the application, the application waas updated automatically. Okay. Eso Uh okay, A So you can see now the application his updated automatically in other work, in other words, with back elevates the obligation automatically as soon as I modify the react growth. Well, I guess this is it for this lesson. On the next lesson, I will continue working on this application. 11. Setting up a router: Okay, You guys welcome back to another lesson off these video tutorial. Well, on this lesson, I will I will set up a react router. I'm going to set up a router from scratch. Setting up a router with react is very simple. OK, so I'm going to head over to the console on. I'm going to stop the Web servers by pressing the keys contra. See? Okay, I present keys controversy in order to stop the application. Now I'm now I'm going to install the the dependency that I need in this case, eso I'm going to use Indian installed, uh, save Andi. Now I'm going to use, uh I'm going to install the dependency react router Dumb. Okay, that is the dependency that I need in this case. So now I hit. Enter on. Let's see what happens. Okay, now what? You can see the react router, Tom Dependency waas installed into the project successfully. So now if I get over to the toe, the dependencies, if I get over to the to the packers Jason filed, you can see that in the dependency section appears react router dumb. Okay, so which means that they still they which means that the dependence Iwas installed successfully. Okay, now well, if I if you pay attention to the death dependencies. Okay. As you can see, this is the listing right here. These listing right here. That that I am selecting right now. Are they deaf Dependencies? OK, In other words, these are the dependencies that that are used during the development off the off the application. OK, so no, um, if I analyzed these, least you can see that here appears there react dependency as well as they react the dependency. Okay, so this is not correct, okay? I have to place the react dependency as well as the react dump dependency in the in the section that says dependencies. Okay, so right now the the react, the react dependency as well as the react on dependency are both placed in the death Dependencies dependencies section in the dependencies section. Okay, Because this is not this is not correct. This is an error that that I made. This is a mistake that I made. Sorry. So now you have I have to get over to the to the console. Andi on now I'm going toe. Remove, react and react. Um Okay, So, um in order to remove, react, react on I'm going toe being npm form instead. React. Andi, react dumb. Okay, so basically, what I want to do now is removing react as well as react dumb from the from the from the development dependencies section. OK, on, then. I want to install both dependencies again. Okay. Okay, guys. Okay. Well, now what? You can see the dependencies were removed from the from the application. Now, if I opened the package Jason file, you can see that the react and react down dependencies were removed from the project. Okay, Both dependencies were removed from this project. But now what? I want to go east to install these dependencies again. Okay, so I want to install about dependencies again. So I'm going to use the comment NPM in style. Safe. Okay, this is the flag that I have to use safe on. Then I have bean react on react dumb. OK, so as you can see, a young installing the dependencies again. Okay, on, um now I'm going to hit enter in order to install both dependencies again. Okay, well, if I go back to the packers, Jason file, you can see that the dependencies section. Okay, this is moral section right here that I am selecting right now. This dependency section contains two dependencies right now. OK, It contains the express dependency as well as the react router. Dumb dependency. Okay, so right now these the section dependencies contains only to dependencies the express dependency as well as the react rotor. Dumb dependency. Okay. Uh, so let's see what happens after the installation process completes. Okay, guys. Well, now, as you can see, Theo, installation process was completed. Eso on now? A So you can see I'm going to refresh the packers Jason file. Okay, so, uh, as you can see here, I have the package gaze on file. Okay. Andi, if you analyze this practice, Jason file, you can see that. Here we have the dependencies section. Ok, Andi, as you previously previously brave, usually I have won the pain. I have to dependencies express and react on react router down. But right now I have four dependencies. Okay? I have reacted, um, as well as react. Okay. So as you can see now, react them. React as you can see now the react dependency as well as reacted, um, are placed inside the dependencies section. OK, so as you can see, I removed React the the reactor, the react dependency as well as they react on dependency. I removed both dependencies on. Then I have I have toe to install both dependencies one more time. Okay? I have to install both dependencies again. Okay, on now the dependencies appear in the right place. Okay, Now the dependencies appear in the right place. Uh, okay. So, uh, okay. As you can see, I have here react as well as we act. Um, Okay. Now what I have to do is to head over to the abductor. Guess file. And I'm going toe import several metals or several components from, um from react Rotterdam. OK, so I'm going to take bean import. Ah, import. Okay, I'm going to import a browser. Rudisha and switch as well as road from react. A router? Dumb. Okay, so a so you can see am important browser router switch and wrote from react router down. Okay, now. Ah, What I went to the now is creative. Um is creating a router, so I'm going to type mean I have to remove this growth right here. And I'm going to take in crowds, serve routers like these. And now I'm going toe create a switch dependency Asari a switch Instance and instance off switch an instance off the switch component. And now I'm going to specify one road. Okay, And then this road will contain the bat barometers. And in this case, the parameter will be a chart or Sorry. As you can see, these components requires one parameters. The bad parameters. In this case, the park perimeter equals, um, chart creators, chart creator. Okay. And now I want to create Mm. Okay. Every time the user, uh, B C. It's the address. Local Khowst 3000 slash chart creator. Then thes Miss Ash will display to the browser. And then my such will be fellow from chart creators. Okay, so every time the user be seeds, the u. R L address every time the user visits the address Local Khowst 3000 slash chart creator, these moustache will display to the browser Hello from chart Creator. Okay. And then I'm going to create another wrote OK, like this on, uh, these road will be used when they when they use their be seats uh, another wrist. That is incorrect. Okay, So every time the user visits on address that easy. Correct. Then these moustache will display to the web browser Israel. 404 fish not found. Okay, so as you can see them creating a very basic router on Um Okay, now what I want to do is to get over to the console and, as you can see with back has already, uh, because already compiled the growth off my application. Now I have to get over today with browser, and I'm going to run the Sorry I have to get over today. Other common prompt. And I'm going to run this ever. Like pee snow servant. Roger. Yes. Okay. No, he didn't There. Now, as you can see, the web server is running on. Um, now I'm going to use the address. Local host 3000 is lashed. Chart creators. Okay, so I'm going to use the address. Local host, 3000 slash chart creator. Okay. A local cost. 2000 slash chart Creators I hit. Enter on. Let's see what happens. As you can see, this is the message that this place hello from Chart Creator OK, which means that my router, these router right here is working. Okay, Now I want to use a different address. I want to try a different address. In this case, I'm going to use the address. Local host 3000 slash different average. Okay, Local host 3000 is lash different. Address now. Hit. Enter. And as you can see, a never massage. This place ever care of 404 base not found. Which means that my my router is working. Okay, so now my router is working on. This is the error message that indicates that the base was not found. Okay, Was not found. Okay, so that means that this is more router is working. Okay, so now I'm going to go back today to the web browser, and I'm going to use the address. Local cost 3000 slash chart. Creative. Okay, Now he think there's and as you can see, the router is working. Okay. Hello. From Chad, Creator. Okay, so Well, and now, Now you know how toe config your or how to set up. I told there on from scratch 12. Layout with React and CSS Styles: Okay, Welcome back to another lesson off these tutorial thes lesson. I will continue working on these obligation. Well, three next step that I want to take. Now East is installing some dependencies. OK, so I'm going to run the comment in PM in style safe. And now I have to install two dependencies. One is good struck, bootstrap, and the other one is react. Bootstrap. Okay, now I heat in there. Okay, Well, and now, as you can see, a never Miss Ash this place. So I'm going to repeat these steps. I'm going to repeat this a step. Sorry, I from the comment NPM install safe, uh, boot strap, bootstrap and then react Bash booked strap, react. Bootstrap. Now heat. Enter on. Uh, let's see what happens. Okay, well, now you can see both dependencies were installed successfully. Okay, so now I'm going toe close. These commands prompt on. I'm going to head over to the packers. Jason, file Andi. Now, as you can see here, I have the dependency bootstrap as well as the dependency react. Bootstrap. Ok, now I'm going to head over to the index dot Js file on. I'm going to remove the thes import a statement. Okay, I'm going to remove the this line off growth. And now I'm going to import the bootstrap. A style sheet. Okay. I'm going to import the bootstrap a style sheet. So I have to open the normal use a folder on. I have to look for the bootstrap folder that I have right here. And then the bootstrap folder contains a beast. So fall the Sufi folder or or soup directory on then these thesis soup directory contains a CSS directory and then inside this year says they were three. We have several style sheets. Okay, so in this case, I'm going to use the style sheet. Bootstrap, Bootstrap. That mean? The CIA says OK, so I'm going toe typing import. Bootstrap slash least is slash C assis is slash. Uh, book strap do bootstrapped book stripped. That mean? That means that CS is OK. So as you can see, I am important A on a style sheet. Okay. I am important. The style sheet from, uh, from bootstrap. Andi. Now I'm going toe. I'm going to open the my style sheets. My style's dot CSS file on. I'm going to remove this file. Okay, so I'm going to the elite Theus style sheet that I created in previous lessons. I'm going to the little these style ship because I don't use it anymore. Andi. Uh, OK, now you can see em importing the bootstrap boost the bootstraps styles. Okay. And now I'm going to get over to the abductee alias file. Andi? Uh, OK, now I'm going to create one more component. Okay, s. So I have to get over to the components folder, and I'm going to select the option you file now. I'm going to save these file us. Chart said things Layout, Doctor. Yes. Okay. This is the name of the new component or the name of the file. Andi. Now I'm going to create one component in this file. Okay? So I have to use the growth import react from react, and now I'm going toe import one component from react boots. Bootstrap. In this case, I'm going to import the humor from component you both thrown component from react. Bootstrap a slash jumbotron and I'm going to in court three guard component from react. Good strap. Is Lashkar Okay on now I'm going toe. Use the statement. Export the fold on, then class, and then I have toe Specify the name off this component. Remember that the first leather off the name of the component must be uppercase. Okay, so in this case on the component will be charged. Sittings play out. Okay, That is the name of the component, then extends, then react. Those components can react that component. Okay. No. Um Okay. Now I want to do is to set up the constructors construct on day. Remember that this constructor is used to set up the parameters. The parameters for these for these class, okay? Or the parameters for these components. Okay, now I have toe clear the render metals. Andi. Now what I want to do is tow, I think, to create the return to us. The return. A statement. Andi. Now I'm going to create one instance off the jumbotron. Components like piece. Okay. I am creating one instance off the jumbotron component on inside these, uh, these Juba thrown. I'm going to create one instance off the guards component. Okay, so I have to say I have toe use scarf as, and then I have to create the heather by used by creating a component car thought Heather. Okay, Cars together. Okay, So now, as you can see, I am creating a component. One issue Burton and the other one East car. OK, now I'm going to create an instance. Off the off, the off the guard, the body component guard the body. And now I have to set up these car component. OK, eso I'm going to ask the parameter background, and in this case, I'm going to set the value toe info. And now I'm going to tow. Um, I'm going toe. Specify. Um, the color of the text. Okay, in this case and call of the text is white. And then I have to specify, uh, the HTML element that will be used to display the heather in this case, I'm going to use Heather three tax to display the header. Okay, on the text off the heather is, um, chart cities. Okay, chart said things on our sorry chart, Chad creators. Okay, that is the heather off these cars. Now. I want to apply some styles to these Heather. So, in order to apply some styles, I have to specify on object like this. And now I'm going to use the property. Text align. Okay. In this case, I want to center the behavior. Okay. I want to center together, so I'm going to have to use the center value. Okay. Like this. Andi on. Now, I'm going to ask the content for these For these a card in this case to convey the convent for this cars will be, uh, chat settings. Okay. Okay. Now what I have to do is I have to get over to the up on component, and I'm going toe import. I'm going to import the chart settings layout. Okay, so now I have to specify their fat. So the file that contains the component. Okay, So in this case, um, okay, have to specify the sorry. Sorry. I have especially. I want to import the chart. Said things. Layout component. Okay, that's what I want to do. I want to import the chart settings. Like a component from from the file. Uh, notice, slash charts said things. Layout. Yes, I remember that. You can use three extension, don't you? Yes, if you like, But what I like to do, what I prefer to do is removing the JavaScript extension. Okay, But you can use the JavaScript extension if you like. OK, but I don't Juice. I don't like using the JavaScript extension. OK, so as you can see, I am importing. The components are setting layout on now. What I have to do is creating on instance off the charts, settings lay out like this. Okay, As you can see, I am creating one instance off the chart sittings component. Sorry on. Um okay, everything appears to be working. I have to get over to the console. And as you can see with back East already us on hustle. Really? Combat has already compiled the gulf off my obligation. So now I have to run the web service. I have to use the comment on DNO server dog. Yes, I hit enter. And as you can see, the website really is running. Now, if I see these comment prompted, you can see that everything appears to be working with pack is working. So now I have toe it over to the to the web browser, and I have I want to refresh the be with Peixe. Okay? And let's see what happens now. As you can see here I have the here I have the okay. Here. I have the chart. The delay out off my with peixe. Okay, as you can see here I have the V. Heller. Jeff Creator. Um, there is a background color on the background. Color is great. Or life degrade the background Color is great, Andi. Well, that you can see everything appears to be working. So I guess this is it for this lesson. On the next lesson, I will continue working on these applications. 13. Improving layout with React components: Okay. Welcome back to another lesson off these big dictatorial. Well, on this lesson, I will work on the on the charts Settings layout component. Okay, well, so far I have I've created a very basically out if I get over to the browser on if I used the address. Local host 3000 slash. Ah, Chart creator. As you can see, um, here I have a very, very basic key. Rakoff are very basic layout. Okay, So what I want to do now is improving these layout, so I have to head over to the gold on what he went through now is creating eyes creating for different God components. OK, so I'm going toe. I'm going to copy these growth. Aunt, I'm going toe based This growth like this. Ah. Okay. As you can see a, um uh I grab using this growth. Okay. I'm going to at some space. Well, as you can see am creating one more instance off the car component. Okay. But in this case, I'm going to modify the background color. I'm going to use the the background light. I'm going to say I'm going to set the background option to light on I'm going to set the text. I'm going to change, then the color off the text. Okay, So in order to modify the color of the text, I'm going to add some styles. I'm going to set the color property to black. Okay, Now I have toe modify the behavior they got Heather, as you can see, uh, here I have the the option, as so in this case, the option as will be set toe hair. Therefore, Andi, I'm going toe modify the heather. Okay, in this case, a heather with me title Andi description. Okay. Now, before I continue, I want toe at some styles. Please, God. So I'm going to have a margin, doc. I'm going to use the market top property, and I'm going to set this property toe one ems. Okay, one AM. Okay? No, I say the changes. Now you get over to the console and, as you can see with back has already has already combine filed the application. Okay, so now I have to get over to the browser. I have to refresh the obligation and let's see what happens. Well, as you can see, a new car component this place that has the Heathers title and description. Okay. Okay, so now I'm, um Well, im going toe. I think I'm going to remove the market, doc. Property. I'm not I'm not going to use I am not going to use this. This property. Okay, so now what I want to do is selected this this car component I'm going to copy the coast on . I'm going to base the goals, Uh, three more times. Okay. Like this? One more thing. Okay. Now you can see I have three more instances off the car components. Okay. Uh, the second instance will contain the heather. This account instance complains the header, um, labels on numeric nomadic values the Earth on God. Component contains the BA heather settings listing on three last god component going attains the Here. There, John. Okay, Now I say the changes I get over to the council and as you can see, everything appears to be working Okay with pack is combining my goals off my obligation. That means with back is translating the growth from react. Go through JavaScript growth. Now you go back to the to the browser and I refresh these These with Bache on. Let's see what happens now. You can see I have, uh I saw, for instance, is off the chart component on and on, and I have to go back to the ah, I have to go back to the to the Goethe on. Um uh, okay, Sorry. Okay, well, as you can see, um, okay, I'm going to modify the the text Align property. Sorry, I'm going to ask the margin Top property. Sorry. Sorry about that. I'm going to ask the market the property, and I'm going to set this property toe one AM. Okay, Now I'm going to copy this property, and I'm going to remove. Uh, I'm going to repeat the same steps like this on. I'm going to repeat these steps one more time or two more times. Sorry. Now you can see I am being the market off property. Tow the car components. Okay. I am adding the market top property. So the guard components now, if I head over to the console, you can see that with pack is compiling the application on. Well, everything appears to be working. Okay, so now I have to head over to the browser. I'm going to refresh these uh, this application on Let's see what happens now, As you can see. Ah, well, now you can see. Okay, I'm going to refresh the application one more time. It's important to say that, uh, it takes a while for with back toe bait the application. I mean, I mean, uh, it takes sometimes for with back toe evade the application. Okay. Well, now what I want to do is to modify your style. Sorry. Now, what I want to do is, um uh, okay, I have to select the margin of property on. I'm going to copy this property, and I'm going to baste it in the guards inside the guard component. Ok, sorry about that. I was making a mistake. Sorry. Uh, okay. Now, as you can see, the car component contains to a styles. One is the color is style and the other one is the margin. Top style. Ok, now I'm going to repeat this process. I'm going to remove the styles from the previous component from the calf heather component . I'm going toe. Um I'm going to ask the margin top property. Okay. To the cath component. I have to repeat this process. I remove the styles from the Garff Heather component on. Then I'm going to paste the margin top property. Okay, I'm going to paste the margin top property inside the Garth component. Okay? And then I have to repeat this process. I removed the styles from the guard Harris on. Now I'm going to paste the margin top property inside the guard component. Okay? I have to paste the margin top property inside the car component. Okay, Now I have to head over to the console. Everything appears to be working. So now I go, I go to the browser and I refresh thes application on. Let's see what couples. Okay. Now, as you can see, there is some a space in between each card component S o. I think the leg out looks better, so well, I get this safe. Always listen on the next Listen, I will continue improving the layout off these of these components. 14. Creating a custom React component: Okay. We'll come back to another lesson off these tutorial on this. Listen, I will continue working on this application. Well, now, as you can see, so far, I've created these layout. Well, what I want to do now is creating a new react component. OK, so I'm going to head over to the components folder on going. I'm going to choose the option New file. Now, I'm going to save this file. Us. Um, custom fixed field. Okay. Custom text field doctor. Yes. Now, what I want to do now, what I want to do is creating a new react component that this place a text field toe the web browser. Okay, This component must be able to display a text field toe the Worth toe the web browser. Okay, so now the first step is important. React from react. Andi. Now what? I want to go. He's, uh okay. What I want to do is important. Um, the form component from react. Bootstrap is lash form. Okay. And now what I want to do is I have to the 19 export the fort and then class, and then I have to specify the name off the component. Okay? remember that the first letters off the name of the component most be over gays. Okay, The first letter off the name of the component must be uber gays. OK, so I'm going to be in custom text field, Okay? Extents and then react that component compote component. Okay, on. Ah, Now what I want to do is setting up the parameters for these components. So I have to type in a constructor, uh, crops on, then super props. Super props. OK, so as you can see, I am setting up the parameters for these component. Okay. Now I hope to use the method renders on, then return. Okay, on. Now we're not to do. He's setting up the text field. Okay, So in order to set up a text field, I'm going to use the form The group ah, component form dot group. So reformed the group component. Okay. And now I have to provide three parameter control ivy. Okay, but in this case, the parameter the parameters control ivy. The perimeter control ivy contains a reference toe. The parameters these dot probes dot custom ivy. Okay. Ah. Okay. Probably You guys don't understand what I'm doing right now. But thesis is the way How you have toe go fear these components. Okay, Thes air the settings that you have to to provide in order to make these component toe work . OK, so if you want to display a custom text field, if you want to create a text field you seen react. Bootstrap. You have to use a reform group component on this form. Group component requires the control ivy parameters. OK, so, uh okay. So I probably you guys don't understand what I'm doing here. Don't worry. If you don't understand what I'm doing, what I what I am doing what I am doing right now. Don't worry. Later on, you will understand it. Okay, I say as I created application, you will understand how all of these works okay, aside, created the application. You will understand how all of these works. Okay. Don't worry. Don't worry. If you don't understand, Okay. Okay. Now I'm going to use all the components label. Ah, and I'm going to use a component farm that control. Finally, I'm going to use one instance of the component formed the text, Okay, formed the fixed. Okay. Now, uh, the purpose of the component label as the name suggest, the component formed label is used to display a label. A label for these text field. OK, but in this case, be label can be customized by the by the user. I mean, we can customize these this'll able. So in order to customize these label, um, the text off these label. Okay. Okay. These label contains a reference to the perimeter. Restock broke. Stopped. Label. Okay. Okay. So now I have toe. I have to add some settings to the form counter component. Okay. These components reform control component is the one that this place the text field toe the web browser. Okay, The form counter component. He's a component that this place the text field toe the web browser. Okay, but I have to provide some settings to these components. Okay, before setting his type. And in this that this case, the type is next. Basically, uh, the second setting or the second parameter is named in this case, the name equals the parameter restore props, Thought name, uh, be tough. But I'm in their east police holder. In this case, the parameter placeholder equals the okay. Would be the setting placeholder he caused the parameter. These not props the placeholder on I have to provide eyes. The, uh have to provide have to provide the the value, the value setting or the value parameter. In this case, the value parameter he waas these the props dot value Okay, on, uh okay. Remember that the parameter value, the parameter value contains the next that this place inside the text field. Okay, the parameter value contains the next That is this place inside the text field. Okay, that's more important on then I have to use the parameter on change. Okay, on change these bottom these parameter contains our reverence. So the metals, these the props dot Ah bean boot founder. Okay, so probably you guys don't understand what I'm doing. Don't worry. If you don't understand, As soon as I started using this component, you will understand how it works. Okay? So probably you guys are are wondering how all of these works if you don't understand. Don't worry. Uh, I saw you start you seen this component, You will understand how these component works. Okay. Okay. Okay. So I'm going to ask the parameter these thought crops dot text. Okay, now, A So you can see these components requires seminal parameters. OK, this component requires the prop the parameter custom. Highly the barometer custom ivy, the parameter label, the parameter name placeholder, Val input, candor and text. So, as you can see, these components requires many parameters, um, to its play de text fields to the web browser. Okay. Okay. So now I have to head over to the charts. Settings, layout. I'm going to import, uh, the custom fixed field components from the file. Ah, custom text field. Okay. As you can see, I am importing the custom text field component inside this file. Okay, on now, what I want to do is creating one instance off such, uh, off such component. So I'm going to die. I'm going to create an instance off such component like peace. And now I have to provide the settings for the component. Okay, So if I go back to these to these components, you can see that I have to provide the custom ivy setting or the custom Heidi parameters. OK, so I have to take being pushed, um, ivy. So in this case, the custom Heidi would be Ah, chart tight. Okay, that is the custom by a custom. Ivy parameters. Now I have to provide the label parameters. OK, in this case, the label parameter. He said toe Ah, charts tight. Okay, that is the the label of this text field. Now I have to provide the name parameters. So I got to type in a name. A name? He said toe job title. Okay, Now I have to provide the place holder of the placeholder parameters. So in this case, I have to be placeholder on then. Theblaze holder in this case for this text field is a sighting. Our brief. I don't Okay. Typing a brief title. Okay, that is the placeholder. Now I have to provide the while parameters on, um, I have to use I have to provide the bile parameters. Like piece. Okay. Ah, okay. In this case, the devil parameter contains a reference to a variable. Agree if this case develop parameter contains a reference to us toe a state variable. That is the piece that estate the current tidal. Okay, that is the name of the estate. Variable on. Now I have to provide be text the input founder parameters as well, so I think being improved candor on in this case, they input candor parameters contains a reference to the metals these dot input candor. Okay, Andi, I have to provide the perimeter text. Okay, so that they bean fixed on in this case, the value of this parameter is, uh ah. And there Ah, brief Charles title. Okay, that is the value off the off the takes. But I'm a dish. Okay, so now if I can over toe toe the go so you can see that the gold is being compiled by with back. So now I have to head over today with browser on bond. I'm going to refresh these application. Let's see what happens. Okay, guys, after refreshing the obligation he sees as you can see, a never moustache this place. Okay, We'll know what you can see on several error message. I never message this place on the right side off these off the screen, so well, as you can see, I have some errors. Well, on the next listen, I will I will improve my growth. I will fix the errors. But well, a t least now you know how to create how to create a text field. You seen a react? Bootstrap. Okay, well, there is Listen, I will fix these These errors 15. Testing a text field created with React: Okay, guys will come back toe another lesson off these tutorial. Well, on the previous listen, you can see I never massaged this place. Okay? On the previews. Listen, I never miss Ash Waas displayed on. As you can see, this is Beerer moustache that I get. Okay, so now I have toe. I have to get over to the Goethe on now. As you can see here in the custom text field component here, I have two parameters. The evil parameter, as well as the input handler Parameters at you can see the ball parameter contains a reverence to the variable. These thought estate. The current title, both thes variable does not exist. Okay, this variable current very Korean title does not exist, so I have to create it. And I have toe bean on these thought estate. He was, um Corrine Tidal. Okay, on the the first value off this variable east on empty string. Now, if I If I analyze this cold, you can see that the second parameter input handler gone. Things are reverence to the metals input handler as well. Okay, so I have a reference to the metals. These thoughts input tender, but I have to create that method first, so I'm good bean. Uh, these thoughts in pretender equals these thought you put under that binds these. Okay, so this is the way How you how you have to set up and you went off. Okay, This line of growth, he's setting up the metals input hander. OK, now I know I have to declare the metals input tender like this. Okay, on these parties meant off input, candor gets the perimeter even. Okay. Okay, so now we have toe I have to do is analyze this coat. Okay. So every time they use sir, this is very important. Okay, What I'm going to say right now is very important. Okay? Every time the user inputs text inside the text field, the input hander metals, he's room. Okay. So every time the user inputs text inside the text field, the input Shandler Meadows is run. Okay, So in other words, every time the user inputs text inside the text field, these meadows is run. They made those input hander OK, so I'm going to add a comment that says thes metals runs every time the yusor in boots text . Okay, Every time the user inputs Text these methods is run OK on. These metals is going toe is going toe. Update the estate variable cool and title. Okay, so every time the user inputs text, these metal is run on these metals Updates the variable cool rent text. Okay, Andi, the value of the variable current coop. Sorry. The value off the variable current idol. Okay. Sorry. Every time the user inputs text, these metal is one on these metals Updates the variable current title. Okay. Korans title. Okay. These thes, uh, these metals updates the variable Korans title on the new worry about the new value for this variable east. Even thought target dot value, uh, the property, even though started, the value contains the next that the user inputs. Okay, the property, even those target dot value contains the text that the user inputs. Okay on, then a moustache. He's displayed to the console that says gone. So look, the current, the current title. He's I know, uh, the the day after the variable after the variable was updated, this message displaced to the council that says the current title is on. Then the variable the stop is ST dot forints title. Okay. Okay. So, uh, Okay. Now, if I analyze the regrowth, you can see that these text field contains the parameter name. Okay, in this case, the perimeter way, the parameter name equals chart title. Okay. Um, okay. The perimeter name equals chart Tidal. That's very important. Okay, on, um, the perimeter name is used toe. Identify these text field. Okay, These were important. The perimeter name is juiced toe. Identify these fixed field. OK, Andi, I'm going to say okay if, uh ive, uh even thought charge it. The name equals chart title. In other words, if the name parameter equals chart tidal, then these If a statement is run again, if the name parameters equals staff title, then these. If block Islam on this, if block contains these piece of both. Okay, So, uh, okay, I'm going toe copies This comment. I'm going to baste it like this. Okay, so now, as you can see, every if the if the text field contains the parameter name on the perimeter, name equals chart title, then these things piece of growth is wrong, ok? And this piece of Goethe who updates the variable current title Okay on, then, uh the variable Corinth title. The variable thes the estate. The current title is updated. Okay on, then. The new value is used by this components. Okay. As you can see, he recover referenced. Oh, the variable these dot estate, the scoring title. So I'm going to repeat all of these. Okay? So when the user inputs text the middle of a boat hander, he's run. Okay, these middles, uh, updates the estate variable. Cool rent title on, then the estate variable. Current title s updated. Okay on, then the new worry about the new value, the new value. He's just by the custom text field component on, then the new value. This place inside the text field. Okay. Okay. So and I have to get over to the console. And now I have toe. I have to refresh this application on. Let's see what happens. Okay, guys, we're OK. Well, now what you can see uh, the the the text field. Okay. Now, as you can see, the the text field in this place toe there to the browser. Okay on. Um Okay. Now what? I want to do these. I have to open the council. Okay. Now I'm going to input some text. Okay, I'm going to input the text. Hello from ah, custom. Thanks, field. Now you can see I am I input. Text on the text appears inside the text field on If you pay attention on the eve you pay attention on the on the right side, off the screen. You can see that on the right side. Off the screen in the JavaScript console appears the text that I input. Okay, aside, he put text. The text appears on the right side off the screen. OK, someone did they being a title chart title now, as you can see a sigh Input text. The text appears on the right side. Off the off the screen. OK? And what did they mean? Addy for indexed Another fixed on. But you can see aside input text. The text appears on the right side, off the screen in the JavaScript console. Okay, So as you can see, my text field is working well on the next lesson, I will continue working on these applications 16. Another text field created with React: Okay. Welcome back to another lesson off these tutorial on this lesson. I will. I'm on this. Listen, I'm going to improve these leg out so well on the previous Listen, I creative. Uh huh. A text field on the previous lesson, I created a text field. So now in this lesson, what I want to do is creating another text field. So But before I create another text field, I have to improve the layout. Okay, so now I'm going toe import. I'm going toe import the container component from react. Bootstrap slash container. I'm going to import the row component from react. Bootstrap is last row on going toe in Fort. The gold component from react. Bootstrap is last call. Okay, Now you can see I am importing three different components from react. Bootstrap. Okay, Now I have to scroll down these. This is green, and I'm going toe. I'm going toe. I'm going to create the container component on the instance of the container component, and now I'm going to create an instance off the road component, and then I'm going to create, uh, two instances off the cold component. Okay, So, well, basically, what I'm doing here is creating a table. OK, I am basically creating a table. OK, that's what I'm doing right now I'm using They go that I am selecting right now to create a table. OK, so now what I want to do is selecting. I have toe I I want to I have to select the growth off the custom text field cargo. I have to select the cost custom text field instance and I'm going to got this growth. And now I'm going toe based the growth in between the first called component. Okay, Like this. Now you can see I thought, um, I have one call 11 Kulka Poland On inside this component, I have the custom text field component. Instance. Okay, I Okay, I have the custom text field component. OK, so now what I want to do is creating another text field. OK, so I'm going to select this gold. I'm going to copy this gold. I'm going toe based it inside the second cold Instance like this. Now you can see I have to text fields. Okay, but off course I have to modify the settings off the second text field. So in this case, the custom ivy will be, ah, chapter description. The label will be a chart description as well. The name off these a text field. He's chart description on the placeholder is a type of brief. Ah, a brief description. Now liberal property equals are referenced to the variable. These daughter state the current description, and now they put on their property contains a reference to the methods these dot import tender Okay. On the text property equals, enter a brief chart description. Okay, so now you can see I've creative toe takes fields. Now, before I continue, I have to head over to the custom text field component. Okay, Andi, I'm going to modify this component, so I'm going to add 1/4 for the for the label. Andi, I'm going toe have one setting toe the form control component. The new setting is size on day, I'm going to set the size toe large. Okay, So in this case, as you can see, I am using the setting size on the setting. Size equals lash. Okay, now I say the changes, Aunt. Um, well, now, as you can see, if I analyzed this cold, you can see that the second component, The second custom text field component contains a reference to the variable these thoughts , estate, the cool ranch description. Okay, so I have to head over. I have to. Sorry. I have to I have to scroll up, and I'm going to create the variable current description. The fourth value is an empty strange OK, no, um, if I analyzed this cold, you can see that, uh, the name off the second text field. He's charged description. Okay, the name off the second text field. He's chart description. Okay, so, um, so, basically, what I have to do now is very simple. I'm going to copy these if block and I'm going to paste it like this. Okay, Both in this case, I'm going to modify this line of growth, and I'm going to bean chart description, Okay. And then I'm going toe modify the variable that with that will be updated. In this case, the variable that will be updated is coolant description. Okay. And now I'm going toe. Look. A message to the council that says the current description is the Korean description is and then the value off the Korean description variable we'll display to the council. Okay, so now you can see Basically, the growth is the same as the previous lesson, but in this case, I I modify the growth so that this growth run when the user inputs the description off the chat. Okay, so now, uh, I have to go back to the guns sold. Everything appears to be working. So now I have to go back to the toe. The with patient. I'm going to refresh the with Page on. Now let's see what happens. Okay, Now you can see this is the appearance. This is the layout on. Well, I have a chart title as well as a child description. Now, what I want to do is opening the I want toe open the JavaScript council Ondas you can see here I have the script council on the right side of the screen on Um Okay, well, eso no. What I want to do is I want to input the chart title. So in this case, that title will be the charts. Title is my favorite places on. In this case, the church description will be, uh, places. Ah, that are amazing. Okay, that is the description off the off the chart as well as the title off the chart. Okay. On that, you can see a sigh. Input to the text, the text, this place on the right side, off the screen. Okay, so, uh, when I input text the text thes place on the right side of the screen inside the javascript console. Okay, so, um well, I guess this is it for this lesson. On the next lesson, I will continue improving these application. 17. Textfield created with React for labels: Okay, Welcome back to another lesson off this tutorial on this lesson. I will continue improving the layout off this application. Well, you know, what I want to do is creating, uh, what I want to do is creating two different text fields. Okay, Uh, so no, I have to head over to the section that says labels and numeric values. OK, on what I want to do as a first step is creating an instance off the container component like this. I know what I want to do is creating a row component on. Then I'm going toe create a P three instances off the coal component like this. Okay, I am creating three instances off the gold component like this game. No, um, as you can see, I am creating a table right here on Well, what I want to Louise. Um, What? I want to Louise toe asked some content toe to toe the first cold component. OK, so I'm going to select the, uh, custom text field component. I'm going to copy these goals. And now I'm going toe based the growth inside the first instance off the goal component like this. Okay. And now I'm going toe Modify the settings off these text field. In this case, um, the cost of ivy will be the custom Ivy East. Uh, Corrine labeled. Ah. Who rent label on the label off these six field ease. Ah, be labeled as well on three. Name of this text field is cool. Red label as well. Cool rent label. No. Uh, I thought the placeholder is they bean? Uh, they being the label. Okay on. But now the well, property contains a reference to the variable these dot estate thought, uh, current label. Okay, current label, current label. Okay, but now you can see here. I have a reverence to the variable these dot State that Corinth label. Okay, so I have to get over to the so the state I'm going to create one more valuable that says, uh, I'm going to create another variable in this case, the name of the variable escorted label. Andi thes variable. He said toe an MP stream like this. Okay, now I have to scroll down on um Okay. Now what? You can see these thes component contains a reference to the metal import tender. Okay, Aunt, before I continue, you have to remember that the label that you have to remember that the name, name parameters equals current label. Okay, that is Ah, In this case, the name parameter equals current label. Okay, so, uh, now I have toe hit over to the equaled candor Metals. Okay? And now what I want to do is very simple. I just want to select the block. I copied this. If bloke I based it like this. And now I have to modify thes line off both. In this case, I'm gonna I'm going to play schooling label okays corn label, and I have to modify the estate variable on the new estate variable. That will be money. Five. He scored label as well on a Now, the message that will display to the console is the current label thes on. Now, what I want to do east to display to the console the value off the variable. These don't estate the current label. Okay, so now you can see the growth is the same as they produce if a statement or as they above. If bloke if block. But I just made some some modifications. Okay. Okay. So, um, so I guess. Okay, I have to get over to the toe to toe the component. Onda Azul can see Here we have the text parameters in this case detects parameter equals. Enter a brief in there. Ah, are descriptive label. OK, enter at descriptive label. Okay, that Is that the value off the text parameters? Okay, so Well, I guess this is it. Now. I have toe have toe open the Gozo on according to the council Will with back Castle. Ready Castle ready. Compiled the growth off my application. So now I have to go back today to the Web browser and I'm going to refresh the obligation on Let's see what happens. Okay, well, now what you can see after refreshing the webpage. This is what happens here. I thought the label text field on What I want to do is to enter some texts, OK? In order to test whether everything is working or not. Okay, some point to input. Some text. I going to input. Um ah. Ah, some label. Okay. I know what you can see. A sigh in boot. The text. The text appears on the right side, off the screen inside the javascript council. Okay, so I give this seat for these. Listen on the next lesson I will continue working on this application 18. Text field for numeric values: Okay, guys, welcome back to another lesson off this tutorial on this lesson. I will continue improving these thes radio. These application. Well, you know what I have to do is, uh well, I have to get over to the to the growth on now. I went to Louise is creating what I want to do is creating another text field. OK, so I'm going to select the growth off this component. I'm going to copy these goals, and now I'm going to paste it. Based the growth inside the second called Component. Okay. No, What I want to do is, uh he's is to modify the settings. So in this case, the custom ivy equal school rent number. Okay, Now the label. Our east a numeric value numeric value is the label. And okay, make value. Numeric value is the label. Uh, the placeholder east 18. The numeric value. A numeric value. Ah, Now, the estate thes component contains a reverence today. Variable. These thought estate, the current number. Okay. And now I'm going to have the text parameters. In this case, this text parameter equals in there. Enter a number. Okay. Now you can see these component contains are referenced to the variable. These thought estate. That current number. Okay, this component contains our reverence toe the variable these dot estate, the current number. Okay, so what I have to do is very easy. I have to create the state variable current number. Okay. Like this on these, um, this thesis variable the default. But the default value for this valuable is an empty string. OK, now I have to head over to the toe the growth off the component off the text field on. If you analyze these calls, you can see that the name parameters equals cool rent. Okay. I have to modify the name parameters in this case. And a parameter equals our current numbers. Okay. No, uh, as you can see, the name parameters equals current number. Okay, You have to remember these The name parameters, equal school rent number. Okay, on now I have toe scrolls up the screen and I'm going toe copy this block are now going to paste it like this. But in this case, I'm going to modify the's piece of growth and I'm going to die bean current numbers now I have toe a modified the variable in this case, the variable will be currid number as well. On the moustache that will display to the council is the correct number is And then I have to explain to the console the value off the variable these dot estate, the current number. Okay, now you can see I just finished creating uh, these component eso now I have to do is to get over to the go. So and according to the council, everything is working the application WASP updated successfully. So now I have to go back to the browser and I'm going to refresh the application. Okay. After refreshing the application, this is the with page that this place on. Now you can see I have the theme, the text field. So now what I want to do is I want to input any number. Okay, so in this case, I'm going to input 45. I know. As you can see, the number 45 appears on the right side, off the screen inside the inside the JavaScript council. Now, I'm going to input the number one country than 50. And as you can see the number of this place on the JavaScript council, OK, which means the text field is working well. I gave this seat for this lesson on the next. On the next lesson, I will continue he brewing this application. 19. Dropdown menu with React: Okay, Welcome back to another lesson off these tutorial on these. Listen, I'm going to create, uh, another component. Okay, So, um, what I want to do now is creating a new component. Uh, so in this case, the component is going to display I drop down menu. Okay, So I have to get over to the components folder, and I'm going to select the option new file. Now, I'm going to save this file as a color picker. Colores pickers. Okay, okay. Yes, That is the name of the vile. Now I have to import, react from react. And now what I want to do is to import the form component from react. Good strapped react. Bootstrap, this lashed form. Okay. No, uh, the next step is very easy. I just have toe. I just have to use the statement, export the fall, then class, and I have to provide the name of the component in this case, the name of the component. Uh, he's got bigger, remember? Remember that the first letter off the name of the component most be uber case. Okay, that's very important. The first letters off the name of a component most be, uh, Cooper case. Okay, then they have to use extents, extends, then react. React those component. Okay, now I'm going toe create a constructor. Remember that the constructor is just to set up the parameters. OK, so I'm going to say constructor props, then super perhaps. Okay. And now I'm going to declare the render metals, uh, the render Mento mitt and then the return statement. Okay. Okay. So now the next step is creating an instance off the form, uh, group component like this for form dote and group on. Um okay. Now what I want to do, he's, um okay, I'm going toe. Specify the control Ivy parameter. Okay. In this case, the control, the control ivy parameters equals call of pickers. Okay, that is the value off this parameters color picker. And I have to use one instance off the form label component. Okay. Like this form label on again form label. Okay, uh, in this case, the former label will be color picker colores because okay, now I have toe use one instance off the farm. Those control components on in this case I have to provide a different set off settings. Okay. Have to provide other settings before setting. He's us on. In this case, us will be select. Okay, I'm going to modify these calls a little bit. I'm going to ask our closing that for the form control, dynamic form, control component. Okay, as you can see, am adding, are closing death for the form counter component. Okay. And then I have to provide the value. But I'm a church. In this case of a new perimeter equals these dogs. Props don't bad on. In this case. I have to provide the own change. But, I mean, there are gay and have used the on change parameters equals thes those props don't input candor. Okay, on now, I have to specify the set off colors that I want to display on the menu. Okay. As I said, this is a call of speaker. Okay, so I have to create a listing off colors. Okay, on, um Okay, the first color will be blue aunt uh And what does I feel? I'm going to take being blue now. I have toe copy. This goes on. I'm going to baste it several times like this. Okay, now, the second color will be read. Now. The Earth galore will be his green gay now 3/4 colorist. Yellow. Uh, you know, now, if the fifth color is luck, Okay, Black, black. Now the sixth color is white. Why? It's OK. I have to specify the color white on. Now. Um, the next color is, uh there. Bill Gates. Philby. I don't know how to say it. Purple on three. Next color will be, uh, or I should say orange. Oh, All right. Or ranch. Okay, so now you can see I have 12345678 Um, I have to specify one more color. I have to specify the color ray. Okay, so now you can see I've just creative a color picker. Okay, On these components requires two parameters people tender as well as bad. Okay, so now I have to head over to the chart settings layout component on. I'm going toe import. Thank all the speakers like this import color. Uh, be good from now. I have to specify the but for the file that contains the component in this case, the file that contains the component is the file about it slash color bigger. Okay, that is the bat toe the file that contains the component. Okay, Now what I want to do is very simple. I just want toe to create one instance off. These, uh, component. Okay, So what I want to do now is to at one instance of the Goler holding cooler speaker component off the color picker component like this. Okay, on if I go back to the component, you can see that I need to specify two parameters while on input hander. Okay, So, uh, in this Katie parameter well equals state variable. These door is state the cool rant. Okay, Andi, I have to provide the parameter input candor. And in this case, the parameter input candor contains a reference to the meadows these dot input candor. Okay, on now, as you can see, he recover Referenced. Oh, the valuable these dot state dot Cool rent color. Okay, so I have to create the variable current color like this current colors. Okay, on the fourth value for this variable is in this case orange. Okay. Also review. I'm going to use blue as the default value. Okay, on. Now, if I go back to the component, you can see that. Well, I have to provide. I have to specify the name parameters. OK, so in this case, the name attribute off barometers equals cooler figures. Okay, That is the name they attribute. Name equals schooler pickers. Okay, you have to remember these. Okay. Theater tribute. Name equals color picker. Okay, you have to remember it. You have to remember these. Okay? Color picker is the name that their tribute name Equal Scholar Bigger. Okay, so now I have to head over to the input handlers. Meadows on. I'm going toe select the block. I copied this block and I'm going to baste it like this. Okay, now And I have to modify these things. Growth. I'm going to ask or bigger here. Ah called a bigger now I'm going to modify the variable that will be updated. In this case, the variable that will be debated is cool ranch Cool off. Okay. On the message that this place on the council is the current color he's on. I have to display to the council the value off the variable thesis daughter ST dot current Kohler's. So now you can see. I just I just, uh now you can see I've just set up a color picker. Okay, so now I have to go back to the console on. According to the console, everything appears to be working. Okay, so I know I have toe go back to the today with Paige, and I have to refresh the application. Okay, Well, after refreshing TV with page on, as you can see here, I have a drop down menu. So now the next step is I'm going to select a color. In this case, I'm going to select the color. Uh, the goal, Doreen. And as you can see on the console on the JavaScript console appears the moustache. The Korean color is green. I'm going to select another color black and again on the condo. JavaScript console appears the moustache. The cooling color is black. I'm going to select the color red on on the right side. Off the screen appears the Korean color red. I'm going to select the color they call Array on again on the on the JavaScript console. On the right side, off the screen appears the message. The Koran color is great. Okay, Okay. So now, before I finish, I have took it over to the color picker component on. I'm going to us. Uh, the component, form dot text gay form dot Fixed. And I'm going to ask the mystics Select call off. Okay. Select a color. No, I say the changes. I have to get over to the to the console on. Well, according to the console, everything appears to be working. And I have to go back today to the big toe, the to the web browser, and I'm going to refresh the application. Okay, Well, now, as you can see, the application waas refreshed on now, As you can see, below the color picker appears the text. Select a color. Okay. Below the color picker appears the text. Select a call off. Okay, so now, as you can see well, everything is working so well, I guess. Is it I guess, basis it for these less? Some guys on the next lesson, I will continue working on this application 20. Setting up a Button with React: Okay. Welcome back to another lesson off this tutorial on these. Listen, I want toe. I want toe. Well, I want to continue. I want this lesson I will create. Um Okay, I will continue working on these application. OK, I will. And now the next step that I want to take he's, um, the next step that I want to take ease. Okay. Now, what you gonna see? This is the section that says labels on numeric values. OK, here I have the section labels and numeric values on will, um, as you can see here, except a row. Okay. I have a row component. Andi inside the row component. I'm going to us another cold component like this. Okay. And now I'm going to create a bottom. Okay. Inside these components. Um, okay. In order to create, I would don't. I'm going toe import. I'm going to import the Bhutan component from react. Bootstrap is lashed golden. Okay, but you can see them creating I can importing the bottom component from react. Bootstrap. Okay. No, uh, I'm going to create on instance off the Bhutan component like this Bhutan. Okay. I'm creating one instance off the bottom component sorry. I have to create an instance off the bottom component like this. Now, the text off the button with the, uh, at sittings That is the text off the wooden. Now I have to provide some settings to these golden. Okay, differ. Setting his type on the type of these Bhutan is would turn as well. Now I have to provide. Um I have to provide the variant setting, and in this case, the variant parameters equals success. Okay, these parameters, uh, this parameter for the valiant parameters makes the Bhutan toe have a green background. Okay, again, the variant parameters makes this Bhutan tohave. I'm green background. Okay, Now I have to specify the size parameter. In this case, the size parameter equals large on. Now I have to provide the on bleak even. Okay, Wendy, when the user hits this Bhutan, uh, the middle's the stone these dot Uh, a candle. Ah, these thought at settings will be around. Okay. Again, I have to repeat this, Uh, every time the user hits these Wootton okay, the the middle thes thought at settings will be run. Okay. Every time the user heats this Putin vehement with these Those at settings will be run. Okay, but a So you can see I don't have the metals at sittings. So I have to create the metals at say things like this have to set up the metals like this . These thought at settings equals these thoughts at say things, though. Bind these. Okay. Well, now, as you can see, I've used a set up the path settings. Meddoff. Okay, Now I have to declare metals at settings like this, and, um okay, Okay. Every time the user hits these metals, Okay. Before Okay, before I continue, Okay. Every time the user hits the boot on this method will be run OK on these metals is going to create three different arrays. Okay. No, no. Okay. Now, before I continue, I have to create a three estate variables. Okay. One state, variable east colors, and it contains an injury. The other state valuable variable. These labels on equals. And in theory on, uh then I have the state variable numbers. Okay. On this variable equals and in theory as well, now what I have to do is very, very simple. Ok, I have toe make a copy off the off their race. Okay, I So I have to the clear a variable cook. Let I have to make a copy off the a race. OK, so I'm going to take being let a copy colors. So in this case, the variable copy colors equals the state variable. Deep thought ST dot colors. Okay, now the variable copy on labels equals these thought ST dot labels. OK, Andi, variable copy The numbers equals the thought is ST dot on numbers gay. So now you can see I am making a copy off their race. Okay. As you can see, I am creating a copy off their race. Okay, I'm creating. Ah, a copy off the different A race. OK, Am I have okay? I think in the section I am creating, I am making a copy off their race. OK, Andi, Then what I want to do is very simple. I just want to update the estate. Okay, so, in orderto date the estate a race Ah, I have to use the metals this dot said the state on. I'm going to need a TV. The array, uh, colors. Okay. Like this. As you can see, the array colors is empty. Okay, As you can see here, the array colors is empty. So what I want to do now is very simple. I want to That being Ah. Okay. I have to take the copy off the colors like this. I know. I'm going to us. Uh, new item. Okay, so they're rate. So in this case, I'm going to ask the item these thought state dot core rent colors. Okay. So you can see the variable copy colors contains, uh, the array off colors. Okay, on what I'm doing here is having a night them toe the arrange. Okay. I'm going to add a comment that says having a night them through the rain to the ray. Okay, Now I'm going to select these these calls. I'm going to copy these goals, and I'm going to select. I'm going to copy this code like this. Okay, I'm going toe based the gold like this. Now I'm going to ask Ah, night them to the to the array. Copy labels. OK, on going to ask the item. The item these thought estate. The current label. Now I'm going to ask a night them toe the array could be numbers. Okay. On the new item will be current will be the start estate that current no current number. So you can see I am a thief. First step that I take is making copies off their race on. Then I am having items to their race. OK, on Finally, what I have to do is updating the A race. Okay, I'm going to add a comment that says they teens, they did the A race. Okay, so basically, I am ovulating the race. Drink up here. Okay. The array colors, the array labels on the right numbers. Okay, I am updating. Those are race. Okay, so now theory colors equals Could be colors copy colors on theory. Uh, labels equals could be labels. And you're a numbers equals theory. Could be a numbers. Okay, So as you can see again doing something very simple. Okay? I don't making copies of their race as the first step. Then I am adding items toe their race. And finally I am off day teens be a race, OK? And finally, what I want to do is very easy. Ah, okay. What I want to do now is very simple. I just want toe after they race with after the race R elated. I want to display a message to the gun. So that says that I want to obey to the to the console, the colors array. Um uh, on the label Serey as well as the, uh, as the Ah, Sorry. Sorry. Okay, After the after the race, Arab dated. I want to to look to the console. Uh, the three. A race. Okay, Somebody. I'm good. I'm going to take being feast. Thought state, though called coolers on. Then these thought state thought labels on the's thought state thought numbers. Okay, So again, I'm going to repeat what I'm doing here. Every time the user heats the boot on the Mentos at setting at settings is run. Okay, this method creates a copy off the race. Okay? These methods creates three different copies off their race on then these metals ATS items . So the so they race to the copies of their race. Okay, then this metals acts, items toe the race on. Finally, this metals who dates the empty A race. OK? In other words, these methods updates the race there are placed right here. Okay on then after the race are updated then each off the A race are each off the A race is displaced to the council. Okay, after the race are updated each off the A race is displaced to the council. Okay. And, uh, well, I get a seat on now. I have to go back to the council. Everything appears to be working. Now. I have to go back to the browser, and I'm going to refresh the application. Okay. Well, now, after after refreshing the obligation, this is the world. What? This place on their browser. Now I'm going toe Hastert. Um, I label in this case I'm going to insert label Mexico, and then I'm going toe insert a number. In this case, I'm going to insert the number 57 and then I'm going to select a color. In this case, I'm going to select the color green. Now I press a button at settings. Andi, after pressing the Bhutan at settings, you can see that, uh, that in the console in the JavaScript console appear three a race. Okay. On the javascript console appear three a race One is the colors array. The other one is the labels array on the other one is on the numbers array. Eso as you can see on the JavaScript console, the three erase our displays, which means our application is working. 21. Make a React component to display settings: Okay. Welcome back to another lesson off these tutorial on these. Listen, I will create another component. Another another component. So will the next step. He's well, I have to get over to the opponent's folder. And now I'm going toe. I'm going to choose the option. New file. Okay. No, uh, what I have to do is I'm going to name this file as settings listing that year. Yes. Okay, Andi. Well, now, the first step is important. React from react from react. And now I'm going to import the container components. Thank react. Bootstrap. It slash container. Okay, now I'm going to import the coal component from react. Bootstrap slash cold, and I'm going to import the row component React. Bootstrap is last, bro. Okay, Now the X Step east toe is to use the statement export default, and then class and I have to specify the name off this component. Remember that the first leather off the name of the component must be uppercase. Okay. The first leather off the name off the component most be over case. So in this gaze, three name of the component is said things listening. Now I have to use the keywords, extents and then react the component. And I have. So I have to set up the settings. The parameters. Sorry. So you can see I kept I have to create the constructor in order to set up the settings. The parameters I have, uh, okay, I am. I am creating the constructor in order to set up the parameters for these components. Okay, Now I have to define the render methods on. Then I have to define the return. Met the return. A statement? Okay, I have to create I have to use the return statement. Okay, So thes component requires three parameters. The first parameter is the colors. So in this case, the variable colors equals these thought props dot colors. Now. Now I have to define the variable numbers. And in this case, the valuable numbers equals the parameters. These dot crops don't numbers. Okay. And now I have to define the variable labels. OK, In this case, valuable labels equals the parameters. These good crops dot labels, OK? No. Um Okay. Now the next step that I have to take ease. I'm going toe. I'm going to pick the rate over the numbers array. Okay? I'm going to eat the rate over the numbers array. That's the reason why I'm using the map metals. Andi on. As you can see, this map mental requires a function on this function Has two parameters. OK, the first parameter is number. I'm physical parameter is index okay on? Before I continue, I have to define another. Another variable. The variable html mark up. Okay. In this case, the variable html marco equals and in theory, so the variable html markup equals are named theory. Okay, Aunt. Um Okay, now, now, the next step that I want that I have to take east toe safe is to have And you like them toe the html Marco beret. Okay. On each iteration, I want to add a new item. So the array html markup. Okay. On each iteration, I want to add a new item to the HTML Marco array. Okay. On such I them east a row component. Okay, well, it's important to say that the row component, uh, most contained on a key parameters. OK, so, um, this is this is ah. Okay. The key parameters is a barometer that I have to provide to the row component. Okay, um when we save I Dent's inside a race. When we save, uh, when we save aged. When? When? When? When we save react components inside a race. We have to provide the key parameters. OK, Every time we save items inside a race, we have to use the key parameters. OK, this is very important. Every time we save items inside a race, we have to use Dickie. But I mean dish. Okay, Andi. Okay, so now I felt that they mean index on now. I have toe specify the index for lease. Okay, s. So now I'm going to, as you can see again, creating on instance off the row component. Now inside, I'm going to place three different instances off the core component. Okay, Now the first call component. Go Go. Thesis place. The first call component contains the number the sorry. The first call component contains. I like them off. The labels are raped. In this case, the first call component contains a night them off the labels array on such items us an index equal to the variable index. Okay. And the second, called component, contains on number on the third come cold component growing pains a call off. OK? In other words, the surgical component contains a night him off the colors array. In this case, V item off the colors array because the index equal toe the perimeter index. Okay, so what you can see, I am creating a row on this road contains three different Aydin's. Okay, one label, one number and one color. I know. The next step that I have to take is to get over to the return. The return, uh, the return, a statement, and I'm going toe create AC an instance off the containers component. Okay. And now I'm going toe display the array html Marco. Okay, now I'm going to copy. I'm going to copy. This Goes are now going to paste the coast inside the container component like this. Okay. And, uh, okay, he first spoke. Opponent, um, contains a feel for a headed for, uh, element that has a fixed labels. Okay, On the second call, components contains a heather for for, uh, element that because it takes ah, number numeric value numeric value. Okay. Now, as you can see, the second call component contains a heather that has it takes a numerical value on the fourth on and l. A. And the last call component contains ahead that has it fixed. Call off. Okay, now, as you can see, I am creating a table. OK, this is a table. That's basically what I'm doing right here I am creating a table, OK, A table that this place a listing off labels, numeric values and colors. Okay, Andi, I'm going to get over to the charts, settings, layout, and I'm going toe import the settings least thing component from the file. Don't this slash said things listing. Okay, so I I am important. The setting this the settings listing component from the setting settings listing file. Okay, on now I'm going toe scroll down these goals. And as you can see, I am in the settings least in section. Okay? I am in the settings listing section on here. I'm going to use one instance off the settings least in component on. Now. If I analyzed the components, you can see that I have to provide four parameters colors, numbers and labels. OK. Sorry. I have to provide three parameters colors, numbers and labels. So I'm going to specify those those parameters Colors cool colors, numbers on labels. OK, those are the parameters that these components requires. In this case, the colors parameters equals the estate variable colors. Okay, I'm going to use this is take variables, colors, labels and numbers. Okay, so I head over to the goals on, and, ah, uh, I'm going toe. In this case, the perimeter colors equals thes these dot state dot colors on the perimeter numbers equals these dope state. The numbers on the perimeter labels equals these thought state, though. Labels. Okay, Now you can see I have just created on the components settings listing on. I am providing the required parameters. OK, so now I have to I have to go back to the so the console. And as you can see, everything appears to be working. Okay. It seems like I haven't ever misses here. Ah, now it seems everything appears to be work. Everything appears to be, uh, yes. Everything appears to be working. Well, I gave this is it for these. Listen on the next. Listen, I will continue working on these on these on these components. Okay? 22. Make a React component to display settings: Okay, We'll come back to another lesson off these tutorial. Okay. Well, now, at you can see on the on the on the console on the comments prompt. I never miss Ash this place. Okay, The several moustache is, uh, the error says JavaScript. Extension attributes most only be assigned a non empty expression, and now it indicates the line where the problem is happening. Okay, It indicates the line where the error was found, so well, I'm going to verify those lines off both to see what happens. As you can see, these are the lines off growth. So well, it seems like everything is OK for me. It seems like everything is working, so I'm just going toe, I'm going toe. I'm going to save the changes. Okay. I'm going to save the changes now. I'm going to head over to the council. Andi, let's see what happens. Okay, This time it seems like everything is working so well. It seems like everything is working Well, So, um so? Well, the application was compiled successfully, which means that everything is working. Okay, so just not what I have to do is tow pill over to the working with browser. I'm going to refresh these things with Paige to see what happens. Okay, well, after refreshing the application on error massage displace. Okay. As you can see, three different error messages will never message this place. Okay, so I have to get over to the growth on a so you can see I am inside the settings, least in component. Okay, this is the settings listing. Listing listings component. Um, okay, so now, as as you if you analyzed this growth, you can see that here. I have the return. A statement. Okay, this is the return. A statement on in these return a statement. I have a row component. Okay. And now these row component contains a key parameters. OK, so I'm going to remove these key parameters like this. Okay, now I say the changes, and now I have to get over to the to the council to see what happens. Okay, Okay. I have to say the changes by pressing the keys. Okay. Well, I have to say the changes. Sorry. And I have to get over to the console on. Let's see what happens. Ah, Well, it seems like everything is working. So now I have to kill over today with browser on, I'm going to refresh the application. Okay, well, after after refreshing the application Askew can see Thea application this place on the web browser. Okay. Now, as you can see in the settings listing, I have three different to different sections. OK, I have labels I have numeric value on. I have called her. Okay, so now what I want to do is adding some labels. So in this case, I'm going to ask the label Spain and I'm going to set the value 100 on. Then I'm going to set the color jello. Okay, I press they don't at settings. I know what you can see at the bottom. Well, in the settings listing section appears Spain one Konrath on color jello. Okay, Now I'm going to have another another another another values. I'm going to ask the values U S. A devalues this the numeric value 250 on. Then I'm going to set the color green and then I'm going to heat. They don't at settings. Now you can see in the settings listing section Um a new a new row appears ok. The road contains the Values USA 250 Andi calories green. So as you can see Asadi at settings, the settings appear in the settings listing section. Okay, so the settings listing section displays the different values that are that I in boot. Okay, so and I have to get over to the something's listing Gambone int on. I'm going to add some styles to the road, so I'm going toe. Uh, I'm going to use this growth. Okay. I'm going to add some styles toe the Roath. Andi, I'm going to set the phone size. I'm going to set the find size toe. Uh, one book points, one EMS. Okay, I'm going to set the phone size to 1.1 EMS. Now I get over to the food to the council on, but you can see the application waas The growth was created by with back. Now I have toe get over to the browser. I'm going to refresh the obligation. Okay, Well, after refreshing, the application thing is this is the webpage that this place now I'm going to ask the value Spain as well. One more time. I'm going to sit there, then wait. Value 240 on. I'm going to set the color breath. Okay? I hit the button at settings, and as you can see, uh, the text appears at the bottom off the well, the settings or the values appear in the settings listing section. Okay, so I have to get over to the component on. I'm going to increase the size to 1.21 point toe EMS on. I'm going toe. I'm going toe. Um, I'm going to use the property formed. Wait for fun. Phoned. Wait. Sorry. And I'm going to set this property toe both. Okay? No, I say the changes I head over to the council on everything appears to be working. So now I have to go back today to the wife browser. I have to refresh the application. Okay. Now what? You can see the application waas refreshed. So now I'm going to add another value in this case, I'm going toe the value and chocolate chocolate, and I'm going to set this value toe 350 on. I'm going to set the color to purple. OK, now I hit the button at settings on that you can see in the settings listing section appears Chuckle 8 350 on the color purple. OK, now I'm going to have another value. In this case, I'm goingto have a cake, and I'm going to set the value through to hundreds on going to use the coloring. I hit the Bhutan at settings and as you can see, the new values appear on the settings listing section. OK, okay, so now what I want to do is to head over to the the component said things listing on inside the render metals. Okay, inside the render metals. I'm going toe asked Anethe block like he's OK. And I'm going to say if the if the arabize if the array numbers, uh, gold chains if there ray numbers east empty In other words, if the if they're ready numbers, he's empty. Okay. In other words, if these components ah e if okay, if it if there ray numbers is empty, Okay. In other words, if the number is the number off items in their array numbers is equal zero. Okay, So even over if they're even numbers array east empty, then I want toe return. This goes to the browser on the coast will be a feather one. Tough. I feel that took that. That says, Ah, items. Ah, as items in the section. Both. Okay, So if they know their reign numbers is empty. In other words, if these component, uh, does not have information toe work with it, Okay, If this component does not have information toe work with, then, uh, these Miss Ash will be display toe the browser, have items in the section about OK, And I'm going to customize these things together by a green, the text align property. And I'm going to say this property toe centers. Okay. Okay. Now I save the changes. Have to go back to the council, and it seems like everything is working. Okay, so now I have toe, I have to refresh the application and let's see what happens. Okay, guy. Okay. Well, now, as you can see, nothing happens. Which means that my growth is not working. So I have to go back today to the component on. I'm going to modify this property. Okay. I'm going to say if the array numbers, if the property numbers don't lend, equals zero, then ah, this message will be displayed to the Web browser. OK, in other words, if this component has no information to work with, then these, uh these message will be displayed to the browser. Okay, So I have to head over to the council. Everything appears to be working now. I have to refresh the application on. Let's see what happens. Okay. Okay. Now, after the application is refreshed, you can see that this message this place okay, as items in the section above. Okay. As items in the section above uh, the summit such that is displayed by default. Okay, so? Well, as you can see, our component is working. Eso Well, I think that I guess this is it for this lesson. On the next lesson, I will continue working on this application. 23. Create the Chart Component: Okay, Welcome back to another lesson off this tutorial on this lesson. I will continue working on these application. Well, now, you know what I have to do is is creating a new component. Okay, So, um, so we'll, um Okay, I'm going to create a new component, so I have to head over to the components folder, and I'm going to choose the new file option. Okay, Now, I'm going to save this file as chart generate door doctor. Yes. Okay. Now I'm going to eat port, react from react, and, um okay, I'm going to import react from react. Okay, Well, before I continue, I have to InStyle's toe more dependencies. Okay, I have to install two more dependency, so I have to head over to the council, and now I'm going to a stop the Web server by pressing the keys. Contras E. Okay, Now I'm going to install two dependencies. So I thought to use the comment NPM mpm in style. Safe on the first upended the first dependency that I need his chart chart. Yes. On this account dependency is react Chart Vegas two. Okay, Re. Do I have to require to dependencies one east charge A Yes, on the other one is react. Charge? Yea, yes, to Okay, now hit. Enter on. Let's see what happens. Okay, now, as you can see, both dependencies were installed on the on the project. The installation process is complete, as you can see it. So now I'm going to run the Web server with the government and knows servers. Dog? Yes. Now hit. Enter. Now that you can see, the Web server is running again. Okay, Now I'm going to head over to the Buckeyes. Buckeyes Jason, Fire. Honest. You can see here I cough. Three dependency chart. Yes, In the dependency in the dependencies section, I have the charge genius. A chapter? Yes. Dependency as well as the react chart. Yes, to dependency. Okay. As you can see, both dependencies appear in the dependencies section. OK, now I have toe head over to the to the file and I'm going to import Charlie, charge. Ah, I'm going to import chart from from the from chart dot Yes. OK. I'm going to import chart from charger. Yes, and now I'm going to import the so so note the the note. I'm going to import the the note component from react charge. Jay s too. Okay on. Um Okay, now, the next step is toe use Theus statement export the fourth. And now the keyword class. And I have to specify the name off these components. Remember that the first letter off the name of the components must be uppercase. Okay, so the component name is chart generators on. Then the king work, extends, and then the keyword react on, then react that component. Okay? And then I have to set up the parameters. So I'm going toe the finally constructor on. Then I have to provide the props parameters on. Then I'm going to I'm going to use super props, okay? No, I have to define the render metals on. Then the return statement. Okay, Now I'm going to, um I'm going to the clear I'm going toe. I'm going to declare three constant. Um, the constant colors. Andi, every constant colors equals the parameter. These thought brooks dot colors. Now I'm going to define the constant labels on the constant labels equals the parameter. These rock props don't labels, and now I'm going to define the constant and numbers. And the constant numbers equals the parameter thes thought props dot numbers. Now I'm going to define the constant title on the constant title equals the parameter These rock props the title. And finally, I'm going to define the constant description how the constant description equals the parameter. These turboprops dot this creation. Okay, Okay, Now, the next step is toe eyes to define the constant settings. And in this case, the constant settings is an empty array on empty for an empty object. Sorry, Andi. Thesis empty object has the property labels on in these gays the property labels. Uh, he said toe the labels constant. Okay. And then I have to specify the property that assets and in this case, the property that has its contains a name theory on these in theory, contains ah contains an object on these object contains toe, uh, properties. The first property is back ground cooler on this property background color, he said to the east said toe the constant colors on the property that he's said so the numbers constant. Okay, so you can see I am using, um okay. I am creating toe to properties the property background color on the property that okay on the property that is said to the constant numbers. Okay, so, um okay, What else? Where This. Okay, Now I have toe kill over to the return, a statement, and I'm going to create the leave. I leave, uh, a deep element. I'm going to add some styles to these elements. Okay, So in these games, the week I'm going to set the weight property. Uh 0 70% And I'm going to set the left margin property to 15%. Okay, Now I'm going to create one instance off the component, though, Newt. Okay, I'm going to create one instance off the component, though the newt, though. Newt the snoot. Sorry. And, um, and these thes thes this component requires a setting that but in this case, is sitting that there equals so really barometer that there equals the gun stand settings. Okay. Equals the constant settings. I know. Um, now I have to probe. I have to specify the barometer options on in this case, the parameter options, um, equals a na object. Andi thes object contains several properties. Okay, the first property is responsive, and I'm going to set this property toe true. Okay. OK, so ri service sorry, I have to repeat this part off. The growth the perimeter options equals equals an object. Andi, As you can see, here I am using toe two races. OK, two races. OK, pay attention to this cold, please. As you can see here, I am using to braises. Okay, that's very important. I am using two races. OK, now I'm going to set the property responsive too. True. And I'm going toe set the property mine Spain Aspect ratio. And I'm going to set this property true. And now I'm going to set the property. Uh, title on the property Lay gance Okay on both Both properties are said toe empty objects. Okay, Now the property title contains the the properties play set to true on then the property formed size, fun size. He said toe 20 on the property. Uh, thanks. He said toe Honore on disarray. The first piece array contains contains two items. The first item is the title constant on the second I them is the description constant. Okay, here we have the title Constant as well as the description constants. So I'm going to place the data Gunston first and then the description constant Onda, and then I'm going toe. Uh, I'm going to set the property display equal truth. I'm going to send the properties, pray to true, and I'm going to set the position. Property equals toe left. He quotes left. Okay, so? Well, as you can see, I've just created this component and well, I guess this is it for this lesson. On the next lesson, I will continue working on these components. 24. Continue creating the Chart creator: Okay. Welcome back to another. Off these on this leg will be new. Working application? No, no, The nexus them that I want today. He's, um Well, I'm going to get over to the I'm going to open. I'm going to open the chart settings layout component. Okay, this is the chart settings layout component. OK, now I'm going toe. I'm going to ask one more. One more state variable. Okay, I'm going to create the estate variable display checked on. I'm going to set the default value falls. Okay. Forced peace. The default value off the display chart. Variable. Okay, now I have to, um I have to head over to the I have to head over to the chart section. Andi in the chart section. I'm going toe. I'm going to add races on inside these Racists. I'm going to place some JavaScript both. Okay. Okay. Inside these races, I'm going to place I JavaScript growth. So I'm going to use turn area, turn every operator. OK, I'm going to say if the variable these thought estate, though display chart peace is true. If the value if the variable if the estate variable these thought estate that display chart is true then. Um okay. Sorry if the if the estate variable ive the estate variable if the variable these not estate thought this preacher equals force then I'm going toe. I'm going to create. I'm going to return the the the scope. OK, I'm going to return at a Bhutan toe. The Web browser. Okay. Um okay, well, no. If the value off the estate variable display chart is force, then I'm going to return these coals toe the toe, the browser and these growth. Um, this place I wouldn I wouldn't component Onda text off. These wooden component is create chat. OK, and now I'm going to add some settings toe these wooden. The type of this Bhutan is is Bhutan as well. Besides the size of this, Bhutan is large on the back. Well, the valiant property, the variants property, he said toe danger. This property, the variant property makes the the Putin toe have a red background color. Okay, The variant property makes the Bhutan tohave arrest, background color Okay, on there. And then I'm going toe set up. I'm going to set the on click parameters and in this case, the on click parameters the on click even. Sorry. The on click event is going to run the metals. These vote display chapped. Okay on, um Okay, so give the value of the off the estate variable. This play chart equals falls. Then these growth is return is displaced to the web browser. OK, now I'm going to add some styles, and in this case, I'm going to use the property. Text align. Um, I'm going to set this property tow center. Okay, Andi. Now, what I want to do is have to complete this turn every operator. So, um okay, So this is a cause that will be displaced to the browser if the display tracked variable equals falls. Uh, but if the displaced chart variable equals true, then what I want to do is tow east to display the chart. Okay, so the first step that I want to take east to import, I have to import the chart generator component from the file, though this slash chart generator. Okay, I have to import the chart generator component from the file charge generator. And now I'm going to use one instance off these components, so I have to I have to ask I have to create one instance off this component like this. Okay, on. Um Okay. Um well, and now I have to add some settings to these on these components. So if I go back to the to the component, you can see that this component requires five parameters, OK? Colors, labels, numbers, numbers, title and description. Okay, so I'm going toe set up the parameters colors. In this case, the parameter colors equals you state variable these dot is date. These notes state the colors. The perimeter of labels equals state variable. The stock is state the labels. The parameter numbers equals the variable. The stock is steak. Those numbers okay. On the parameters. Tyto equals the variable these dot State the title. Sorry, I have to check these. Okay. In this case, I'm going to use the variable Cool rev title as well as cool and description. Okay, So I'm going to take being these daughter state the cool rent I titled Andi, I'm going to say it. One more. One more parameters. I'm going to set the parameters description. In this case, the perimeter description equals variable. These dot is ST dot cool ranch description. Okay, so now, as you can see, I am creating. I am setting up on instance off the component charts. Generators. Okay. And, um Okay, so now what I have to do is tow. Um Okay, I'm going to head over to the I'm going to head over to the okay. I'm going to add some styles toe the Bhutan. Uh, well, if you analyze thes these boots on this thes reboot on here, half settings, you can see that the position off the off the green Bhutan at settings he's not very is not well, the position he looks with, I mean, eso I'm going to add some merging at the top off there off the green Bhutan. OK, so I'm going to ask, emerging at the top off the Putin at settings. OK, so I'm going toe at some styles. Uh, okay, I'm going toe. I'm going to use margin top. I'm going to use the property. Amar Jindal up on. I'm going to send this property toe ems. Okay. As you can see, I am adding some merging to the top off these bhutan. Okay, Margin top equals two m's. Okay, Andi. Well, I guess this is it. So Now I know what I want to do. Is, um Mm. Okay. Yes. So, no, What I want to do is testing this component. Okay, So if I go back to the okay at according today so that if I go back to the console, you can see that here on never moustache this place, it says ever in components Charge. Generator. Well, you will not found Can resolve charred. Okay. Yes. Eads. Uh, chat creator source. Okay. Okay. So I have to verify these. Okay. Now, as you can see, the console, this place I never miss Ash. It says that it can find the chart of the JDS dependency. Okay, so I have to get over to my goals, and I'm going to modify this import statement. I'm going to take being, uh, it slash chart thought Yes. OK, I'm going to try that on. Let's see what happens if I get over to the council. Okay, Let's see what happens. Okay, Now, if I opened the console, you can see that the error moustache, Theis place again. So, um well, I'm going toe modify these important statement. I'm going to use visa statement. Okay. In both sharks, from, um, Chart. Yes, but you can see the first letter. East Cooper case. Okay, the first letter. He's super case. That's very important. The first letter off chart, his upper case. Okay. And I'm going toe head over to the council on I'm going toe stop the I'm going to stop the application by pressing the keys controversy so you can see am stopping. I you stop the application by pressing the keys controversy. And now I'm going to run with back one more time. Okay, Well, now you can see the same error. Massage this place one more time. It says that my application cannot find the the chart. Thought Jay is dependency. Okay, so what? What I'm going to do right now is very easy. I'm going to head over to the council and I'm going to stop the application by pressing the keys contra See? Okay, I have two presidencies Controversy on now I'm going to install the dependency one more time. NPM in style. He's done safe chart that don't forget to place about okay, you have to place the dot. Otherwise, the application is not going to work. Okay? You have to place the boat chart. Vote Yes. Okay. You have to place the thought. Otherwise, the application is not is not going to work. Okay. Eso you have to use chart that? Yes. Now hit. Enter on. Let's see what happens. Okay, well, now what You see, Theo, the installation is complete. So now and now I have to get over to the Packers, Jason, file. And if you analyze the packers Jason file, you can see that Here I have the chart thought Yes, dependency. Okay, but you can see I have toe dependencies. I have one that says chart. That Jakes Andi thinks is the one that I'm going to use. The one that says chart. Yes, on below Chart, Doctor. Yes, I have another one that says charger. Yes, but the one that I need is chart thought. Yes. OK. Don't forget to use the dependency chart. The Yes, in this case I'm using. I am using the version 2.9 point three. Okay, so? Well, well, I guess this is it for this lesson. On the next lesson, I will continue working on this application 25. Testing Chart component: Welcome back to another lesson off this tutorial. Well, on the previews. Listen, I I have to install the chart doggy s dependency again. Okay, on now, as you can see. Ah, here I have the dependencies section inside the packers. Jason, file on. As you can see, here I have the chart, the JDS dependency. Least it. Okay, here I have the chart of Julia's dependency, and right now I'm using diversion toe 0.9 point street. Okay, well, and now I have toe I have to head over to the council on. Well, I'm going to stop the application by pressing the keys controversy. And now I'm going to run with back one more time. Okay? I'm going to run with back. One more thing. So I hit. Enter. Well, I have to use the comment MPX with back. Ah, watch. Okay, now heat enter. Okay. Well, now you can see with back has already compiled the growth off my application. Okay? Everything appears to be working. So now I have to close this This common problems and I'm going to open the other comments problems on in this case. I'm going to run the the server. Okay, so I have to use the comment. No server? Yes. Now I heat in there. Let's see what happens. Well, as you can see, the web Several running. So now I have to close thes comments prompt as well. Okay, Andi will now have to do is very simple. Just have to head over today with browser and I'm going to refresh the application on Let's see what happens. Well, after the application, Waas refreshed this east with Page that this place on now, as you can see, a red boot on this place. Okay, on the ref, Bhutan says create chart. Okay, as you can see at the bottom of this page are right. But on this place on the boat and says create chart. OK, now I'm going toe. I'm going toe test this application. So in this case, I'm going to create a chart. Um, on the name of the chart is Ah, um I, uh the the most, Uh, but for the most popular countries Okay, The most popular countries, the most popular countries. Okay, go countries. Okay, that is the name of the chart on now. Now I have to provide a description for these chart. In this case, the description is the most be seated countries. Ah, worlds. Why? Okay, The most recent that visited countries worldwide. OK, now I'm going toe asked a country in this case I'm goingto have Spain on. I'm going to set the value off 45 and I'm going to set the color off orange. Okay, I hit the Bhutan at settings. Okay, I hit the Bhutan at settings. Now that you can see, Spain appears in the settings listing. Okay, Now I'm going to add another country I'm goingto have at China, and I'm going to set the number 70. Okay, In this case, I'm going to use the coloring. I hit the button at settings on going toe us the country on Canada, and I'm going to set the value toe 35 I'm going to use the color blue, and I'm going toe hit the Bhutan at settings. Finally. Well, I'm going to ask Mexico on. I'm going to set the value of 50 and I'm going to use the color uh, de color ref on my feet. The Bhutan at settings. Okay. And finally, I'm going to add one more country in this case I'm going toe Russia, and I'm going to set the value 30 30. I'm going to use the coal or, uh ah, Barbell Barbeau. Okay, now heat the boot don't at settings. And well, as you can see here, I have at least at least off settings at least off values on now, at the bottom of these application, I have they will don't create chart. OK, so I'm going to hit the road. Don't create chart on Let's see what happens. Well, as you can see, nothing happens off course. This is wrong. I have toe head over to the growth and now I'm going toe. Uh, I'm going to analyze my growth. Andi. Well, if I analyzed the coast, you can see that he right have the Bhutan creates chart on that. You can see this wouldn't create chart on requires demento tomatoes. These thought this play chart. Okay? I have to set up the metals. These thought this play chart, so I'm going toe. Um I'm going toe. I'm going to set up the meadows. So what about it? I mean, these dot display chart equals these. Does this play chart don't bind on then? These Okay on now I have to declare the metal the meadows, this play chart. Okay, Andi. Okay. Every time the user hits the boot, don't create chart. These methods will be run. Okay. Andi. Um, okay. Again, Every time the user hits, they would don't create chart. Every time the user heats, they don't create chart. These methods will be run on. These metals is going to modify the the value off the off the variable. Here we have the valuable this play chart. Okay, I have the variable display chart. So in this case, and I have to modify the display chart variable on the new value. The new value off this variable is true from day. Okay, I'm going to set this variable true. And then I'm going to run, call back. I'm going to add a callback function. That Prince. This message to the council, the chart Waas created. Okay, Okay, now I kid safe. Andi Now I have took it over today to the council. Okay. Well, it seems like the application was compiled successfully, so I have to close this console. And now I have to get over to the web browser on I'm going to refresh the application. Okay, I'm going to refresh these application. Well, after the application Waas refreshed. This is three with Page That this place. Okay, so now I'm going to repeat the process one more time. Okay? The name of the chart will be my Favell read. Okay. The name of the church will be the most the most popular countries. Okay, The most popular countries on the description of the Chart East, the most visited goal Crease world wife. Okay, on now I have to ask a country in this case I'm going toe Spain and I'm going to set the value off 56 on. I'm going to use the coloring. I hit the Bhutan at settings. Now I'm going toe asked the country China. I'm going toe set the numeric value off 70 on. I'm going to use the color orange. I think the Bhutan at settings. Now I'm going to add the country India, and I'm going to set the value off 60 and I'm going to use the color red. OK, I hit the button that settings. Now I'm going to ask the country kind of that I'm going to use the value at 30 and now I'm going to use the color Purple. OK, now I get the boot on that Settings on. Finally, I'm goingto have Mexico, and I'm going to use the value off 55 on. I'm going to use the color. Uh, the cooler real Okay, The caramel color. I'm going to use the color blue. Okay, now I hit the button at settings and well, and now, as you can see here, I have a listing off the foreign countries on the make the numeric values and the colors. OK, now I'm going to hit the Bhutan create chart on Let's see what happens now as you can see our beautiful chart. This place. Okay, Andi, The title off the chart is the most popular countries on the description Is the most visited, visited countries world wife. I know. As you can see. Um, no. As you can see here I have the different countries on the left side. Andi, uh, you can see every they You can see the the chart because labels, for instance, the blue section is for Mexico. The the resection is for Spain. The yellow section is for China. The red section is for India on the poor poll section is for Canada. OK, so as you can see, three chart complains labels aunt's Well, I guess PCC for these, uh, toria, um And will I can see the obligation the application is working.