React JS | Sara Al-Arab | Skillshare

Playback Speed


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

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

19 Lessons (4h 44m)
    • 1. Introduction

      2:03
    • 2. Setting up Local Enviroment

      8:11
    • 3. JSX & Babel

      9:39
    • 4. Javascript Expressions with HTML

      9:09
    • 5. Styling React Elements

      20:21
    • 6. React Components

      16:00
    • 7. Import & Export Modules

      11:32
    • 8. Notepad Application Part 1

      21:30
    • 9. React Props

      27:55
    • 10. React Developer Tools

      11:36
    • 11. Mapping Data to Components

      11:53
    • 12. QuotePedia App

      13:19
    • 13. Map, Filter, & Reduce

      16:44
    • 14. Notepad Application Part 2

      7:35
    • 15. Conditional Rendering

      16:10
    • 16. States & Hooks

      25:49
    • 17. Event Handling

      7:29
    • 18. Notepad Application Part 3

      45:29
    • 19. Project

      2:01
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels

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.

48

Students

--

Projects

About This Class

Welcome to learning React JS framework! React is one of the most demanding and most known javascript front-end frameworks which makes it really easy to build an interactive user interface. It's an intuitive, declarative language that provides reusable components. Throughout this course, you'll be introduced to all the main concepts of React including components, hooks, & props, and many other concepts that will be applied to applications that we will code ourselves. We will mainly build three React Applications that will help you further understand the concepts explained throughout the course, and with the project given at the end, you'll be able to test your knowledge and check whether you understood all the concepts! 

Meet Your Teacher

Teacher Profile Image

Sara Al-Arab

Computer Engineer

Teacher

Hello, I'm Sara. I'm a computer engineering student at LAU. I'm currently working on web develpment and programming and seek to share my information with as many students as possible!

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. Introduction: Hello everyone, and welcome to a new course with React JS or JavaScript. So first of all, we'll begin by asking ourselves, what is React js. React is a fully open-source front-end JavaScript library for building user interfaces or UI components, is at the third language, which is used to create interactive UIs and design simple views for each state in your application. And react will update and render the right components when your data changes in, sort of just rendering the whole page. And this declarative language makes our code more predictable and easily easier to debug. It is component-based, which means that we can build encapsulated components that manage their own state, then compose, compose these components to make complex user interfaces. And throughout this course, we'll be introducing JavaScript JSX. Jsx is kind of special language used in React and will be also introducing how to style React elements. What are important export modules, what are reactive properties or prompts, and how to map data into components. How to map, filter and reduce components and sorry, data and components. And how to use conditional rendering and introduce the concept of states and hooks, which is one of the most important things in React. And of course after that event handling and throughout all of these forbid doing three hands on projects that will make you accountable to understand these concepts throughout the course. So I hope the projects are going to be a good example for you and as well as the final project that you will be doing yourself. So let's go ahead and get started. 2. Setting up Local Enviroment: Okay, so the first thing we need to do is go ahead and set our, our local environments for us to start and begin using React. So the first thing we need to do is we need to make sure that we first have our NodeJS installed onto our PC. So not know that to check if you have no jeers, just glucagon version notes or eversion. And to give you the version of Node installed. And if you haven't installed node here, you had to the website and install it. And we'll be, we'll be using Node.JS because we'd been using packages and the best reduce packages is through NPM. And if you have, if you don't have an idea on NodeJS, I advise you to watch my previous class, which is all about NodeJS. Just get familiar with the recurse react. It's going to depend somehow on NodeJS. So now that we have no GS, we need to go ahead and open Visual Studio Code. Also. If you don't have those, you go to advise you to install it. Can create a new workspace for this. Let's go ahead and create our folder. So mine is desktop. Okay, and that's add a new folder. Let's call it first. Roger. And says, Come to be our first project over here. So now that we have the pseudocode, we have NodeJS. So what we need to do is go ahead and create our first React application, soap. In order to do that, let's go ahead and just visit our React, observe. So reacts getting started. So we have to go to create a new reactor. And you can see that here are the first three commands that we need to use in order to create our first React application. So first go ahead and just spurt and copy that. So here MP acts as like a packet router to set over here that comes with MPM. So he will say npm create. We're going to see PX we create. And this Create React app is a command that's going to create our application, and this is the name of our application. So here you could just give it whatever name that you want to. So now let's go ahead and copy that. Let's go ahead and Let's first go ahead and copy the path of that. So cocky. And go ahead and add it to here. And now, copy that again. And let's go ahead and paste it. So then Px prey to act up. My app is going to be the name of our application. So you're going to realize that this might take some time. So since we'll be creating or in many, many packages to this React application. So it might take some time depending on your PC. Okay, so everything is installed. It would be about five minutes or so. So in order to install all the packages. And so now if we go back to the documentation just in order to start application or introduce, just get inside of this folder, my project and my application and then start writing a BM start. Then let's go ahead and maybe we could check our folder. So here, first project, you can see that here is my app, which has all these folders. Let's go ahead an opportunity sort of associate CO2 by visualizer. So here this, here's our public source. And don't worry, we'll be explaining all of these in the next video. So this is just for setting our local environment just to get started. So let's just go ahead and try to run it. So we need to go ahead and CCD my AP or whatever you call your application. And we go ahead and click Ambien start. So now if we go ahead and wait, that should give us a, I guess, a URL or just should automatically open for us. So let me just talk to your homepage. So it's holding. See that automatically it opened a page on port 3000 so that the full page of our application is going to be 3000 mature. It's taking that much time to open. Sometimes it just happens automatically, but you could face some ways. You can see that here is our application. When we go ahead and get started with React will be editing these files, the source public, in order to change the layout of our page. So this is just a default page. Now, as you could see, it took us awhile just to create one project. And so since we'll be first getting familiar with React for writing some actual projects, what we can do. And the meanwhile one, just understanding the syntax of React and just a beginner. So what we can do is use an online tool which is called sandbox. So Let's go ahead and search for Sandbox and see what this lets us. Let's just write code cell loss. Okay? So go ahead and enter code sandbox. And since we want to write a React application, so click on Riyadh. So here, instead of going to the command line and clicking, writing story and px, Create, React app and solving always dependencies, which could take you about 56 minutes. What we'll be doing this for now as reusing this I'm online tool that will help us to write React code without installing dispenses because there are already there. And the mainly use dependency that we need in order to get it, Get Started, react or react and wrapped up. Totally will be getting through everything and experience. This is, as I said, just setting up the local environment. And the folders are already over here. So everything we need is over hue to get started. So that concern in the next video. 3. JSX & Babel: So the first thing that we need to start with to introduce React is JSX and label. So let's go ahead and first open code sandbox and reuse our project and scaling started with JSX and label. So this is our project. We have a public folder and the source folder. Let's go ahead and start with index.html. So this is our page that will be changing each time, which is the code. And over here, let's go ahead and first remove all of these to all be needing them right now. And that we had and move those over here. So you could see that here we have this div having an idea of fruit, and here we have a no script. So you can see that here they're giving us a comment. You need to enable JavaScript to run this app application. So what we'll be doing here is go ahead and remove nodes. So this is a script and we're going to be giving it a source. And that source is going to be the source folders that we already have. The full folder will be sourcing index j x js. And we'll give it a type. And this type is going to be text slash JSX, the language that we'll be using MBB introducing. So this is the script we've piloted. This is our div, which is I have that has an ID route. So now let's go ahead and save that and go to our folder. For now as we move up the JS, we won't be using it right now. And let's zoom out. And actually some of this. Now, first thing we need to do is import to mean dependencies. And these dependencies are going to react and little bit importing React from the React module. And we're importing React DOM from the DOM module. So the first thing we need to do, go ahead and use Reactome in order to random renders, sorry, our page. So reactants going to help us On render out peach. And how's this going topic? Well, we'll first specify what do we want to render and then we are, so we have here actually like two variables. And so the first variable is going to be an HTML element. Then start to specify what are we going to enter. So say I want to render an H1 element that says hello world. And I'm going to close this h one elements. So this is our first variable and the second is going to be where. So you can see, as you can see, this is a JavaScript file and being able to write this as HTML inside of this JavaScript file. Let me fix this so we want and let's specify where the we're going to be JavaScript. So document dot get element by ID, and this ID is going to be the root. If the debt having the idea of grouped. So if your head is save, refresh our page. And you will be seeing that we'll have a helloworld. Does this even a minute? So you can see that we have this hello world. So other set, this is our JavaScript file and being able to write HTML inside of this JavaScript. And so how are we able to do that? Well, since we're using this react module, this module is going to help us render this JSX language. So you could call this GSS add language, which is actually HTML written in JavaScript language. And so how is reacts in this rack modeling that, well, it's going to do that using a compiler called people. So JSX is language will be write HTML inside of JavaScript. And label is going to help us compile this language into pure JavaScript code. So if you go ahead and search on label over here, you see people language, language, label, JavaScript. I guess there are many and label things. So the compiler over here, and you can see that wherever you put in any JavaScript now we're just going to go and be compiled to pure comparable JavaScript language for the webpage. So maybe we could just write out. So here, let's say I want to copy that and see what is it being compiled to? Well, you can see that here we'll, we'll actually rendering first grading this element, which is JavaScript code. And then we're getting this element by ID. So and we're adding, whenever we are creating this h one elements and we're giving it this hello world bible. So you can see that this is being compiled pure JavaScript code. So this is why we need this React DOM and this, sorry, this act module and this reactant molecules react is going to help us compile wherever JSX sandwich right over here and the abdomen is going to help us render and see this code being visualized on our webpage. So let's say I want to add another paragraph, another element over here. So maybe I want to add a paragraph that says, Hey, okay, So would this work? Well, you can see that now we're getting errors. Well, the thing is, we cannot add more than one element inside of this variable. So what? We always need to add only one element in order to render our page. And so what could you do in order to fix this error world? We can just join these two inside of a bigger elements. Maybe let's add a div. And this div is going to have these two elements, these in this paragraph and the stage one. And so now if we go ahead and save syntax, oh, okay, I removed this comma. So now you can see that now we don't have this error anymore. We have this div that is containing both each one and p. So you can see that you can add more than one elements, just contain them inside of this div. But needless called a container or wherever you want to call. So let's try and maybe do something more interesting. Male, Let's go ahead and add an unordered list. So maybe this one is going to be things I need to do. And now let's go ahead and add an unordered list. And inside of this unordered list, we'll be adding some list items. So over here, let's go ahead and add some list items. So let's say I want to eat. She is the most important thing. And just copy that. So it's our study. Maybe cook. Cook should be for eating. Actually. Yeah. I guess that's it. Maybe sleep. So I guess we should change this to things that we all need to do. Okay, so you can see that we're able to render this complex, that same page where we have an unordered list within hours, items that are inside, and so on, so forth. So you can add whatever you want. It's not just limited to each one or paragraphs or so. You could add any HTML element inside of the render. First rival of the random function. And then you just go ahead and call on div that you want to add this HTML element two. And in that case it's going to be this ID or the step of ID root. So this is our first step into getting to know more. And the next videos we'll be discovering more things that are related to react. 4. Javascript Expressions with HTML: So now we'll be going further, further step with NGSS and see how we can add JavaScript expressions within HTML tags. So let's go ahead and open code sandbox. And let's say I want to add another, each one heading in the piece that we were working on previously. And let's say I want to add the same location, okay? So, and let's say I have two variables that are on one or two constants that are the city. So the city. So for now let's have just country. So let's have occasion to be the country and say Jamie. So let's save that. And now let's say I want to add this constant or this, let's say variable inside of our HTML. So I don't want to hard-code it. So the way to do that is just curly braces and then the name of our costs. So this curly braces, whenever we want to add anything recently, it should be any JavaScript expression. So let's say I want to also add. But let's see some information about me. Maybe my age, so cons age. And so maybe secretly one column. So let's say plus h. So each one. The annoying thing about this is that it doesn't have this autocomplete, which is a bit annoying, but so age. And then we could just add this other constant which is age. And you can see that here we have these variables being replaced by, replaced by the actual values when we add them inside of these curly braces. Now, you could add anything side of the skirmishes and I said any expression. So let's say I want to. And so what our expression, so let's say an expression could be three plus one, which is poor. So you could see that maybe I could add just math dot random and just multiply it by 10. And you can see that it gives us a random number. So this matter, Brandon pepsin, is JavaScript expression. So as I said, you could use whatever you want. However, you cannot use statements. So statements cannot be used for cellular bone kilobases. So for example, what is a statement? So let's say, I say if age 21, then I don't know. Let's see return. Each time. You could see here that we're getting an error because we cannot add this if statement. So this is like an unexpected token because this is a statement and not an expression. So we have to add only expressions inside of these curly braces. Now let's say I want to add more than one variable inside of the same element h. So I see a hip here also the city. So const c. Let's see. So over here. So the way to do that, well, they actually also a width. So let's say the first thing that we could do is just add C and then come up like that. So that's one way of doing it. Another way of doing it is just remove this and that and just plus and concatenate this. So this is like a JavaScript expression. Remedios JavaScript then niche. So we added score, we're concatenating scribal with this variable inside of these curly braces. That's another way of doing it. And there's a third way of actually doing it, which is, which uses template literals. So an ES6 will have something new called template rules. So it's a bit complex, but no harm trying it out here. Inside of these curly braces, we go ahead and add backticks. Backticks are the ones below the escape button. If you have, depending on the keyboard to have. But it's called backticks. And then inside of this bacteria, we'll be adding a dollar sign. And instead of a dollar sign, will adding another curly braces and inside of it the variable so country. And then see cities and countries over here. And city and then country and you could see, I wonder. Yeah. So what's happening here is that this is interpreted as a string. And all of this is interpreted by a JavaScript expression within an HTML element. So you can see that we have several ways of doing On, of passing by variables from JavaScript to HTML tags. And destroy maybe one more thing and say, we want to add a date. So parent deeds is to just use the date class instead of JavaScript. And let's just console.log to see what would that give us. So console.log current date and open up our console. So you can see over here that we have this deed and we can just get the maybe year of this state, so const year. And it's going to be current date that so have a good day. Destroy dates. So I guess this would mean make it limit an artist and not just have all these values that I don't think it's very current here. So three dates. Why would it give me 19? That's real. So let's try something else. Maybe just get you to cd. Let's try that. And of course you need to add this parenthesis. Yes. Yes. Good for you. Yeah. I guess the best thing to do. And then those so 21. And let's say I want to pass it over here. So common and dollar sign curly braces date. And also I added it inside of you. So the Sunni inside of our techs think this book, surfer dots. Okay, so you can see that we've added a date. And another way of doing that actually is just remove this variable and just add this expression over here. So it would also actually work, but of course, the parenthesis then you're not calling this function, so you have to call it by adding this practices for you to call a function and give you the current date. So as you can see, it's really going to show later on to pass by variables into our external whenever we render a page. So in the next videos we'll be exploring other stuff. Hope this was helpful and useful for you and see you in the next video. 5. Styling React Elements: So now let's go ahead and see how we could add some styling to our React elements. So here's the pace that we've been working on lately. And let's say we want to add some start spit. Maybe you want to change the color of the, each one headings. So the way to do that is we go to Styles is root this. And let's say we have a class called heading. And inside of that class will be adding color, which is blue. So blue, bird. Let's go ahead and save that. And let's go to index.js. Now, let's go ahead and add that class to this one. So let's just start with a normal thing, which is class, that thing that you use to review ever worked with HTML. And let's go ahead and give it a class of heading. And the moment we give it a class heading, it should give us the color choosers burden, save that as fresh added OKRs. So we need to add the style sheet. So style, sorry, stylesheet link. And that link is going to be and source and then style that CSS, but k, So let's smoke working with that style. So here, let's go ahead and save. So now it's working. I don't know why it's not working. If it's a source. However, when we go ahead and start working with Visual Studio code, will be adding that styles. We want this horse or above. Okay, so now that we've added this heading on, on clustering can see that the color actually change. Whoever, let's say we want to open that on a new window and let's open the console. So console, you can see here that we are getting this warning invalid don't property class, did you mean className? And the reason for that is that since we're writing in g as x language and not actually JavaScript, we should change some of the structure, would that be writing this class? So the way to do that, and this language is just by adding this classing. So this is the way to write HTML attributes in JSX. So it's like you have to write them in a CamelCase way. So let's say you have className, so the end halves to be capital. So if you go ahead and check this all HTML attributes, and let's go ahead and click on that. So I do still has to be table with all the attributes. Check the reference really. So you could see that we have all of these attributes. So let's say I want to use the something that we catch we might use like there's this whole chunk perceived over here. So these poacher, low power here. So the spell check was for is whether the element is having a spelling or grammar mistakes. Let's say we want to add that. And so the way to add that by adding over here. So in Cal case that would be spelled and then capital C check. And so let's put that to be true in that way. So let's say now I add something that's wrong. Germany, we forgot. I guess it should give me a spouse, child or something. Yeah. I'm not sure. It's working normally. You get the idea. So you have to put them all and I'm sorry, all counties. We have another one which is content editable. So content editable. So in a shareable, it's checking it over here. Content editable over here. So you can see that the e is small. However, whenever we, whenever we add this camel case, we have to put the IV to be captain says but district true as well. So now I see 30 to change and so on as force. So now there's this garden hose doubts. So. The most one that we'll be using the class name. And just make sure that the class name is Anne calculus and not on everything. Every attribute should be in counties. Now let's say I want to add for the unordered list another color maybe, so. Maybe you're hurt and say unordered list, color, green media, and semicolon, save and refresh. And you can see that now our list has a green cover. So you can see that we could change on the styling of our page by adding this link to our style CSS and adding these camelCase or not necessary, just calling the element by itself. Now let's say we have images. So maybe I won't have color images and add them. So let's just copy some links. So copy the link address and let's add it over here. So maybe below the image. So rich. And the image, of course you have a source, and that source is going to be this. And then we have to close the closing tag. Now, it's not appearing for some reason. So the main thing that you need to know is that whenever you write and read an image, you have to have this closing brackets. If you're running this in pure HTML, this will be a problem over if you don't add it over here and JSX language, it would cause a problem. Maybe you could add some Lorem Ipsum amateurs. So I'm go to Lorem Ipsum. I'm sorry. As our upset that allows you to just add photos, some random photos if you don't want to just copy them. So let's just copy that. And let's add it over here. So we'll just use that. And you can see that we have this here. And what we could also do is just go ahead and define a constant, it just image and then give it this, this article here. And now instead of having source goes to image, we could just go ahead and add in between curly braces. And just like that, and it will still appear. We could also have, I guess we could we could just change things like the grayscale blur. Maybe I want to add a blur. So the way to do that is go ahead and maybe just add like that. Since this as a JavaScript expression, the question mark and polar like that. And you can see that now our image is blurry. What else could we do? I guess this should be four images. Just make sure that you have this closing tag. You could also of course change maybe a sizeable the images. So you could go ahead and say, is, it sounds that says, I want my image to have a width, sorry, with a 100 pixel like that, and a height of 100 pixels as well. So you could change the size of an image by just adding the height and width and styles.css. And you can see that we can do many things styling. Now, one thing we could also do is inline styling. And so an inline styling we'll be adding some styling is inside of the subshell elements. Now if we go ahead and try to say that maybe I want this to have a color that is sort of normal way to do that is to say color red. However, you'll see that this is going to give us an error in JSX. And error is the style property expects a mapping from style properties to values and not a string. So you remember that in JavaScript we have memory, we want to add an object. It's like it should be a key-value pair though, this is the way we define objects in JavaScript. So here is a key and here's the value. And here we're not actually adding that and set of curly braces. So the correct way to do, to do that as to go ahead and let's say we want to add a constant which is custom style. And that style of this custom style, we will go ahead and define our JavaScript object. And so let's say color. It's going to be red. So that's the way to do it. If it wasn't CSS, you'd go ahead and say equals to read. However, over here, we'll add the key-value pair, which is created by these two points. Now, the next thing we should do is go ahead and just, instead of saying style equals to this, we'll just say style. And then we add, now this curly brace. Let's sing that now we'll be adding Azure also expression. And this JavaScript expression is going to be custom style like this. And now you can see that color changed. So this is the correct way to do that in JavaScript. Now, why would we actually do that? Since we have styles.css, why would I want to try to do the cells at one? Well, one reason would be that it would be easier to change the, dynamically change the attributes of this style. So maybe I want to change the color at some point to blue, maybe. So. An easy way to do that just by accessing that object and then accessing that key value, which is column, and give it a value of meaning yellow. And you can see now, maybe I have this column. Of course, we're not doing title here. So over here, you can see that now the color change to yellow. So it can be really beneficial whenever you're writing and whenever you're writing some complex code to just change the color of Diner de from here. Now of course, this is not the only thing that could add. Maybe we could also add a font size. So here we'll be adding a phone size and of course, camel, rugged Intel case, social font-size. And now inside of a string, we add the font size, the ceremony to be 10 pixels. When in CSS we all knew we don't add this shrink cover since we're adding it. And interrupt that cycle. Since we're adding it inside of a JavaScript object, then this is the correct way to do it. Now also, for us, for the border, it will be the same, but just inside of a string, so one pixel, a solid, and let's say blue, like dogs. And it's giving me a guess at the commerce. Okay. So you can see that now changed. So let's just put this should be 20 million. And you can see that whatever we got over here is applied to this H1 since we're passing in this attribute, which is style. So this has four inline styling. Let's go ahead and just try to write some, some styling hover with some conditions. So let's go ahead and re-opened code samples. So Kong ports. Let's go ahead and with the Economy Act. And so this is a fresh page. Let's go ahead and remove our proper noun. So now we're starting as a beginner level, so you don't need to know to get into those. Actually, I'll just copy the just in order to save some time. And I'll just remove whatever it is and if because liberating some, some, some new stuff. Okay, so let's say we have this image and let's see, this is our current date. And let's say we want an hour. So const hour equals to current day dot get hours, and of course, parenthesis like that. And some of those. And let's have a cost which is going to be Neil and keep it empty for now. And so we'll add a condition which is what this pronoun. So if me, if L is less than 12, then we want our meal to be breakfast. So of course it's a string, so breakfast. And else, if and of course this is JavaScript code and outs of our less than 18. And so in that case, what we'll be doing is we'll be going and adding meal is going to be lunch. So here, notch and else. Going to be, so, else is going to be. So, and that way over here. And now, and each one has just one element over here. So each one internals close dosage form, and that's meal and such like this. So cons Neil was purchased and D string for now. Meal, lunch. Let me add those. Hey, why would give me this error? So a sound constant Bible. So yeah, so this would be a variable. Since a constant and change, however, a variable changes. So whenever you want to change something, you put, you define it, sorry, as a variable or just put that. So that's nearly constant protection. Okay, so now let's see, now it's around two and it's giving me launch. So let's say, sorry, lunch. We want to change the date. So sorry that so let's say I want to change it to so today is not team. And then comma nine and that say sorry. And let's say that the hour 17. So lunch 22, it's dinner. If it's less than 12, so 11, it's breakfast. So you can see that this meal is changing according to the hour of date and that's rubric tool here. We could also change the styling arms. Let's do it here, style. So in each one, Let's give it a title, which is going to be sorry, in pieces. So custom style. And let's say that the soldiers remote border. And let's say that why is it yellow? Okay. Let's just continue, I guess Victoria. So let's say if it's breakfast, I wanted to be blue, so custom style dot color. Wanna change it to blue. So I'll do that. And if it's lunch, I want to change it to red. And if it's dinner, I want to change it to green. So now if we go ahead and shift, so this is breakfast, lunch, and dinner. So 20. So this is pretty cool to change stuff according dynamically. So according to time, for example, of course, you could change it according to other variables depending on what you're writing. So there are many ways to change styling with using React or within React elements. And so this is just one of the many things that we were learning from reacting and experience. 6. React Components: So now we'll be diving into a new topic which is the React components. So please go ahead and open code samples. And she notice here that our page is a little bit messy. So for example, over here you can see that we have className, that's spellcheck. Sometimes we would like to have a clean piece whenever we're writing instead of index.js, especially. So one way we could solve that omic, our cook dinner is to use React components. So what our React components? So for example, at C instead of writing this whole thing, so each one, I just want to have this new component, which I want to call maybe heading. And this component is going to do the job of this, this H1. And so how would we be doing that? Well, the way to do that is just to go ahead and, and so our source folder and creating new file. And that file is going to be the name of the component that we'd like to add. And then we have to lean extension to VGS x because we are coming to write NGS language. Now normally the index is always JavaScript, where we are actually writing some JSX language, but it's mostly JavaScript. So that's why we keep it in gs dot js and others and JSX. So here we have this heading or JSX. And what we'd like to do is go ahead and before actually writing to head into gs. So the way to do with inside of index.js itself is just go ahead and write a function called of course heading. And this heading is going to return for us this, each one over here. So we'll add it over here like that. So now that we've added about this, like that. And so now you can see that our heading is over here, so country location. And it's better if everything that we're using as variables is salivary function. So city and the country over here. Just like that. And you can see it still gives us returns gross this. And one thing that you should pay attention to is that wherever we add a component, it has to recapitalize in order to differentiate between components, HTML elements that are not capitalized. So this is for the heading and whenever you don't have anything in between. So for example here, we don't have anything with what we can do is just add one single tag and closing tag for it. And it would work. However, it's not that you have a function inside of our index.js. What we'd like to do is just have on each, each component in its own page. And thus, thus why we're adding the settings.js apps. So now what we need to do is just go ahead and copy that function and add it to our heading successful folder. Now you can see that we're still getting some errors. So for the current date, we also need to get the current day because we're actually using it as well. So let's go ahead and remove that. And then over here. And what you also want to do is we need to import React. So in order to use poetry, react this. And one thing, you use this function inside of index.js. We need to export it. So export default heading and like that without the parenthesis because we're not calling this function now, we're just exploring it to whenever we use. So see that now within this heading dot g sex. However, we visit the groups to gain an error which is heading is not defined. Well, that's because we didn't know, we did not important. So we'll go ahead and import adding from. And then we go ahead and specify from adding dot CSS. So I'm guessing it's from. So I guess we need to go to source. So source, So like I guess we could just put a dot and it would find it. Okay. So this is how we import hanging. And you could just add the GSIs, it doesn't matter, but it also without 36. So that's how we're using this heading component that we actually created inside of the index.js. Now let's go ahead and do that for only the unordered list. So maybe I want, instead of having this whole Honolulu to have a component that is cool on unordered list like that. And so on all lists and other backslash and close the tab. So let's go ahead and remove versus risk URL and creed or function new file. And let's call it or clues that JSX, what are we going to add? We're going to this first heading, legit service and the interest. Just replaced the things that we need to pay. So unordered lists, chipsets, copy over here. So this is the name of function. And now we need to go ahead and remove that. And then pallet inside of our function will return in an ordered list. So we don't need this, so we can just remove them. Now, all we need to do is go ahead and import this unordered list. So copy that and pull unordered list from slash eclipsed. So now you can see that it's perfectly working and see how many lines We actually got removed by adding these components. So now our page, somehow with Tino, we could also do that to these headings. It's actually the same process. So what normally, so let's just go ahead and remove this for now. So what normally happens is that whenever you are writing a React application, what you actually see is that index.js, you only have an app js. So instead of having all this, you'll just have one component which is called up that way. And we will be having up ab.js service, which will be returning wherever you wrote. So sorry, plus-minus copy those carpi set up and what you'll be returning over here is just the heading like that, the unordered list. So you can see that we're importing now our list. So I automatically put it. So let's just go ahead and also important heading. Sometimes shortcut works to unimproved, to import things. So here had ink. And of course, heading home here. So like we don't need this and it should work. So we're only having an an error that is not defined. And why is that? Well, because we did not important. So let's go ahead. We could remove those and just import from. And then just go ahead and specify that up like that. So here k. So here it's giving us that there's something that's not defined as go ahead and see what is that? Oh yeah, obviously because as we said, we only have one element that we could render or return. So we put those two inside of a div and then we return that. Okay, So this is not heading called up and we'll be exploring in that way. So you can see that now it actually works. We're actually rendering this up. And this app is employing both unordered list and heading from here. And we're just returning heroes. You could see how much it is actually alters, how much it, our index.js is now organized and everything is organized. Now normally what you do is add all the components. You may have many components and you'd like to just for them, who spread them from messages. And the way to do that is just add a new directory and recall it home components. And instead of components will be adding all our JSX files. So over here at UT, okay, now, see that now a port up for our app is not working first, rechange place. And so greet, add components, slash. And so now it works perfect. So you could see how much now our page on our project file is organized inside of the source. We have the components and we have the index.js and the public, we have styles and index.html. Now let's go ahead to our recent project that we're working on. Let's do that for this one. So here we had this each one heading that changed the meal according to the hour of the day. And so how would we do that? We'll first go ahead and import to recreate app.js. Let's go ahead versus where the components file. And inside of the components, we're sorry, that room and said, and this one will be adding the JSX with the adding heading jot JSX. And of course these are going to inside of the components. So that's why aren't the heading. Let me just remove this for now. Okay. And at the end, so inside of the index.js with the pooling. So let me choose copy those just drew in order to save some time. And then just added inside the power up and silver apple just bill, we just did it a heading. Now for the heading, go ahead and copy that and go to our heading. However, of course we need to cheese or heading according to what we have here. So our heading depends on meal and custom style. So we need to get everything that has to do with meal and custom style. Since mu changes according to the hours, of course we need to get our swell. And so for that, we just go ahead and copy that and go or just current and good heading and cellular heading. We'll add those at the beginning of our function. And what we need to return as this, each one heading that way over here. So with the returning this inside. So let's just remove that and this one over here. So let's go ahead and close heading. And here we don't have an unordered list so as the smoke stack. And now we only need to go ahead and render up to two years. So here on the surface. So then that way, obviously we need to pull from components. So components slash up. So it's now we need to create these components folder. And let's add our heading, our app.js to it. So now you can see that there are no errors in our page and it's working fine. So here is a recent project that we worked on, and you can see that now it suggests is actually pretty simplified. Stop. We go to this up as suturing for us this heading, for this heading here. And inside of this heading, we're doing this competition to know what heard of me and we have, according to that day or the hour, and we'll change in that corner also according to the hour. So instead of having all of this inside of one file, what we're doing actually is just adding, separating each function and just adding up the outcome proponent and said about index.js. So you can see how much simple our page has become using React components. 7. Import & Export Modules: In the previous videos, we've been exploring and pouring components knowledge, use them in different parts. And in this video, we'll be seeing or women anymore about the importing and exporting and of models specific. So this is a React applications index.js. And you hear you, we have an unordered list which has three list items, a is square and 8 cubed. So let's say I want to have a random variable and I want to import that random variable from another file that's called has created what's called the pharyngeal dot JS. And I would like to have here and the variables so that random, math dot random and Math.random is going to give us a number between 01, so it's multiplied by 10. And now we'll have 1000 or 10. But in decimal, so good and Math.floor and that way having only integers, so 0 to 10 integers. So let's say I want to use that number and add it to our index.js. So go ahead and export default. So by default we'll be exporting this random number. And if you go ahead and save that, we go to the index.js and go ahead and import. Let's call it R and D from random. So like random DOJ or just random doesn't matter. So you could call it wherever you want because by default, we know that we will be getting this random number. So the name actually it doesn't matter because we know that we be getting the default table, so you could just call it wherever you want. And over here, we were having this random number. So for example, here we have three. And now let's see, we want to have a square and a cube. And so the way to do that, now we need to add more variables or less similar functions. So I want to now get a squirt. And the way you do that is go ahead and add a function that's called power two. And this function is going to get taken, let's say random. And it's going to return for us, or knowledge at random over here since we already find out about. So we'll be returning math dot power and random square root. Let's go ahead and add that for three. So function power, random poetry. Now, aside from exploiting the default value, which is random, we also want to explore the functions. And the would you do that is by calling them. So power to power 3, like that. So now by default we'll be exporting random. However, if you want to get those, we could call them as well. So now if we look index, we could just add a comma. However, here the naming matters because we know that by default be getting the random variables, recall wherever we want. However, in order to get the specific functions, we need to call them by their specific names. So here we need to call power to power three. So over here we'll be adding power to Harvard. System is a function we need to call it. And so now that And Bobo here will be having power 3. Like say could see that eight squared is 64, HQ is upon the top. So you can see how beneficial it is to export and import export, what kind of needs to give. There's actually also another way to do that. And this is using what's called a wildcard smoothies, importing everything from random, the GS. And you'll be giving it a name. So important building as the R and D or let's say random like that forum. And we'll be adding random. And let's go ahead and remove that. So now what changes is that in order to call that orange, we need to add random dot R and D. And in order to call that function, we need to call it like that, random.gauss SIO2 and Random Dot power 3. And that way we'll be able to overhear since we now don't have an R&D. So before we said import or indeed from random people. However, now since we have this wildcard, need to call it where it needs, which is random. Um, I guess it's true. Yeah. So just maybe three changes names around them and leave. And over here, and B, C, and D, and random and B and B. So and Here we'll be calling random. So why wouldn't it work? Oh yeah, sorry for that. So since randomly, Let's just such as those that skip a triangle. Since the random is the default, we don't call it by any random followed by the name Default. So here, which is called defaults and your k. So this is an unreal calling the these variables using the wildcard. Now let's maybe add another file. It's, the less it be clearly. So on. Let's added over here. So another unordered list. And let's go ahead and close this and royalties and add all this inside of it. So since we only have one component that we should add, okay, It's externus. And onto our calculator adds or subtracts, multiplies, and eukaryotes. So maybe let's see, I want to add 56, I want to sum truck 648. And I want to multiply. So multiply eight. And last. Sorry. I want to multiply. So over here, sorry, defined. So divide, let's say 100. And let's close this like this. So now you can see that we're getting these errors because we still identifying these functions. So let's go ahead and import maybe hours later. Or really does just since we added the wildcard over here, let's add the aluminum. So let's just add like subtract and multiply. Okay, so now that we've imported them, Let's go ahead and create that paper function. So let's call it cleaner. And let's go ahead and add that while. So that's this. Over here will be having poor functions. One is up. So a richer for us, a spear and squares at copula function. And this is subtract, so subtracting b, so a minus b. And we have multiplied, so lie a means a times b and the bite, so a such P. Now one last thing we do is to export these functions. So you're exploiting and subtract, won't fly. So now we see that we should not help the error anymore. And this works. I plus 6 is 11 hormones, 8 is minus 4, 5 times 8 is 40, and 100 divided by 5 is 20. So you can see that we're able to use this functions using the import and export segments. So hopefully this video made it more clear to you how to import and export statements, which really actually actually using more when using React. 8. Notepad Application Part 1: And let's go ahead and gather all what we've been working on in the previous lessons and apply it to try and dope this Notepad application using React. And this time we'll be using Visual Studio Code and not code sandbox. So let's open Visual Studio Code. And so here I've created this notepad app React application. And so you could do that. We did that in when we were setting up local environment, which is to add that again. So over here, all you need to do is go ahead and say and px, Create React up. So Create React app, and then the name of the application and that gets coded, notepad does up. And then of course you get your reasonable despite the packages. And then you could just say npm start. For now. We get actually stored. We just need to go to our path, compute. So he could go ahead and say npm, start. Our React application should start. Now, if we go ahead and seal public folder, you'll see that we have several files, so we can just remove Most of these. So these are just photos that we do not need. So we could just leave them. Of course, we only need the index.html. So others pure, anything them in the source will be only needing index.js so we could just remove everything else from the source file. So years I've worked out. So delete it. And there are too many bonds to unnecessary force that could won't be needing. So we only need index.js. Now over here in index.js for now, let's remove those. Let's render maybe just active. So this of course will come. And that's just remove all these, all these neat. For now we act and react CTO and public. Let's go ahead and up and up so that Chenault. So let's go ahead and remove what is commons. We have this step. So I said We need a script that is going to have a source. So source script is going to be sous. So we'll be going to the path. And then from the elusive can't go to source and from source, index.js, Let's specify what kind of textbook we're using old language and the stems going to be js X. Let's call our application Notepad. Let's go ahead and move this. We don't need that for now. To remove this follows. It is neither nervous action. So let's create a style CSS folder over here. So styles.css. And let's add a link for this over here. So link, and it's going to styles.css, the name of your folder. And let's get started. So the first thing on recruiting a notepad application, and so the mean, three components that we'll be needing or header, a footer and a node components. So in our index.js, first, let's go ahead and add an app component. And the app components for these array containing everything that will be importing from components. Slash up. Now of course, we need to go ahead and create a file and create that got up JSX. So soluble source will be creating this components for you. And so it will be creating this JSX, like those boundaries apps for Germany to port. Well, of course not down because it's just for rendering and cell components, we don't enter. So the first thing we do is that a function that is going to have the same name as our component name. And this function's going to return for us for now, see a div. And we'll see what is this protein. So here we'll be exporting by default. This. Up function or component. So as we said, we need this elbow up, three main things the hell. So here we have a new component. And a, sorry for that. So every customized components should be capitalized. And of course, a component like that. Now what we need to do is go ahead and import such as coughing this import statement. So Port Hudson from just hadn't. So the third. And now we need to put notes as well. So for you. And now that important, those three, we need to create them. So now we go ahead and create a new file so that JSX fortune. So sorry. And the same limb prototype.js works. Note that JSX, so we have the header and the Node.js x. That's just the competence. And go fish to the header and footer and the note. Now, let's start with Hadoop. So we won't be putting anything set for the arts. Of course, you need to change the name to really exploring, obviously header. And inside of this header we returning. And this header is going to contain in an H1. And this each one is going to be the name of our application which is called Notepad. So we have this header and the Sichuan, and that can take so. So now let's go ahead and add some starch or hidden. And so in order to do that, Let's go ahead to our public page and we have the styles. And let's go ahead. Hadoop, of course, which is the name of our tag. Now, let's give it a background. So background color, mainly something close to ground but not brown. So just maybe add this orange color that specially. Okay, so that's the background color of our Notepad. Let's give it a margin. Auto and 60 pixels padding. So I'm just adding these two unique our hetero look better but you don't need to know successor much. That's okay. This is just if you just copy those, this just to make our application just somehow. So this is the box shadow and let's give it a black or something. So something. Okay, so now let's go ahead and save. So let's just go ahead and check to see how does it look right now. And just just remember that we didn't fix those as just remove those as well. So here the notice was removed those. So no notes here. And over here. Future. So now let's just keep this empty for now. So the footer and the node N2. So save this whole. Okay, so now one more thing. It might not participant safe side and the app component, whenever you have this div with components inside this parenthesis and a semicolon. So now let's go ahead and check our page. And you can see that we have this note part Hadoop. Let's just added our hour in what's called H1. A little look at a font, fruit. Maybe you could add some homophones. So like the Google fonts. So your head to the Google Fonts. That's just, and unlike some nice font, maybe this one. So go ahead and just select the style and we'll copy the link. So link gets there should be this. Now inside of our index set at slick that whenever we want to use it, reaches, go ahead and specify that we want is three. So we maybe we could do that for the whole body. So in order to do that, we go to index sciences and we specify that we want for the whole body to have this font size font family. And let's just go ahead and check if it's working. Yeah, it's working. Let's also maybe add some color to this one and make it a little bit larger. So unsellable CSS header H1 over here. And each one. Let's give it a color of navy white, I guess what would be better than dark? And a font size of marriage, 100 came. Let's go ahead and you can see that much of a difference, but the word actually makes it better and better. Okay, So now we're done with the headroom. Let's go ahead and maybe start with the footer and then we'll jump into the middle or not. So for the footer, Let's go ahead and maybe you want to add a footer instead of death and insert a photo. Maybe let's say a paragraph that has to do with the copyright. And let's include a date, but this state, Let's make it dynamic so I don't want it to be static safely. I don't want to put 2021 and when I read the current date and at that date. So first as good and just say how pyruvate. We could add this. I'm guessing it's this thing. Honestly forgot how to do search warrant, copyright suit. And we need to add the date. Now, let's go ahead and we've done this before. So that current date equals to new date. That get, gets here. Maybe we just need fully like that. Let's us say this is the year or current year. So what I did is just due date and then access the function of state, which is good for you. And over here, what do you need to do? Well, curly braces and then add current here. Now, if we go ahead and check it over here, you'll see that we have this copyright over here. Horrible wanted to be at the bottom. So here is where we go to stats as success and add some. So what do we need out? Well, footer first should be at the bottom was persecuted position, which is going to be absolute. And then let's give it a text-align, just going to be centered. And then let's give it a width of maybe a 100%. So the whole width and height, maybe 2.5 of the homepage, okay. Ram. And I guess needless just put the bottom. I don't want it to be about the edge of the pieces put bottom to be seen. And I guess that's it for the fusion. That's a color for our copyright. And scholar maybe put it closer to gray. So let's go ahead and click on that. Sorry. Okay. So you that color. And now it's guardianship case. So we see that we have this cup right over here. So now what you need to do is I will note component. Which is the last thing. So let's go ahead and add our note component and we'll be adding it inside of a div, will have in each one paragraph so that each one can be the title. So each one is going to be maybe number one. So like this. And over here we'll add a paragraph that says, please write down your notes here and three dots. So this is going to be our notes. Now let's go ahead and check that. But however, this doesn't look right. So let's go ahead and do sunsets, add some CSS to make this better. So and since we only have this div and nots like a header or footer that we could edit. What we could do is give this a class name. So className is going to be, let's say note. However, just a small note here. We can't just go ahead and inside of here and the className full note. Since not as a customized component and customers components, we cannot ask for them a class name. Class name is just added for HTML tags like P or each one or dip. So be careful that. So now that we've added that className folder, we can go ahead and start adding some CSS. So I want and that's the way you cook classes. And so as us. So I wanted to have a background of white. So what else? Box-shadow to see this parts. So 0 to five pixels. And let's give it a color, is almost gray. A padding of 10 pixels and a width of 200 pixels, and a height, oh, without the margins to be like 14 pixels. And let's make it float to the left. So let's start from the left and from the right. So let's go ahead and check. And you can see that it's actually looking pretty cool. Maybe we could make the border radius to be a little bit thinner around, sorry. So let's add a border-radius. So border radius, say four pixels. And looking good. So let's just add some stuff to our h one. So let's give it a font size. And font size really warm point. Or actually a large C loop. And the same goes for our paragraph. So note P Johnson's to leave also large. Maybe you meet these three larger and this MOOC. It doesn't make them the second storage area that's maybe, let's try x-dot. Looks better. Okay, so we've created our application. Looks pretty cool. And this is just the beginning, will be actually working on this project more and can be used when we learn more stuff about VR. But for now, this is like the beginning, start of our project for now, and hopefully we'll be able to finish it at the end of this class. 9. React Props: Okay, so now we'll be seeing or exploring the act prompts or which is short for properties. So let's go ahead and this time, since we're not working on a project, this is like a new concept we're using, so in using code samples. So here is a page are underpins. Our half over here. You can recreate this. Just this, each one. And we'll just see the heading and my cart, which has these products to meet all monks you scrub and image added with two paragraphs and mountain price. And it should be done to get an exercise for you. And inside of style added only this width and height in order to be four inches, K, and this is our index. We see those in a moment. Okay? So let's say we want to on the component, okay, it would be better to just add a component for the whole item. So let's say I want to add for each item these attributes. So instead of just adding this to just say I component is item that contains all these. So over here is whether that function, sorry. So function. And that function is going to be called item. And this item is going to have all of these three, sorry for them. Of course, this has to be a return statement. And that was close the parenthesis. Now it's still giving me. And so why is this? Oh, yeah. Of course you need to relative because we can only have one hour. So all of these are contained inside of the div, like the US. And now what to do is just instead of adding all these item over here and again and again. So like this. Now, of course we don't want to have the same item again and again. We'd like to have an item, however, with different photos with the friend product names. And so how could we be doing this? Well, first of all, let's go ahead to index.html, introduce a concept, and then we'll go back from there. So let's say inside of our body, we have this input. This input has an ID which is called a placeholder cold item as well. This, Let's say we have a value which is called CHEs. Let's pause this and books. Now let's go ahead and just open a new page. Let's inspect and go to console. Now, if we go ahead and just type in document dot, get element by ID, and we named our this input. I don't mind, I guess. So. Like this. And you click on Enter, you can see that we have this input. Now let's go ahead and say R1 equals to this dr IT. Now you could go ahead and access any of the items so that we can access the id, which is item. It could act as a place holder. Actually, we set up this folder and guess to be, let's say hello. I guess some function. Anyways, the point is you could access anything so value, I guess it's a hello. Yep. So we could access many things on, from this input that we have over here. And so this is popularly also doing a React. It's a similar concept. So instead of having only item will be adding these attributes to this item. And we could call them wherever we want. However, in an HTML, these attributes are predefined for each HTML tag. However, in React, you could call you, you create these attributes. So let's say my ion has to have a name. And this name is going to be Leto. And it's going to have, let's say an, an amount. This amount is going to be, say, five. Scoring to have a price. This price is, let's slip. It's good at the scenes three, like this. The image, of course, image that's here at this link over here. Copy that. And over here. Now how would we be able to access these attributes? Well, here comes the role of React props or properties. So each React component has its own properties. So if you had an app, are passed by this prompts us go ahead and just console.log. These probes, console dot log and props for us our page. So you can see here that these are the prompts. It's an object. And this object has these values, I guess. Yeah. Okay, yeah, here it is. So here is the one that leave console.log. So you can see that we have a name smear amount, which is five, price, which is $3, and an image. So this is the object and these are the prompts. And so since we passed by these props, we can just go ahead and use them. So for example, instead of having tomato over here, we were saying props dot name. Since we can now access this. What is it worth it? This property, orbit or this attribute which is neat. And over here, instead of having this image source, or you'll be doing over here, adding props, that image. What we needed. So ropes that name. And I guess we need to add the curly braces in everything. Since since this is curse channels, in order to add some JavaScript, we need to prison for you. So here perhaps that image into wells. So here we have the amount which is going to be poor ups dot amount. So probes that amount. Over here will be having props dot products like this. So if you're wondering why there's this yellow line, well, this is recursion. You need to other alternatives, but since give it an alternative of image. Okay, so now that we've determined is items will add an app that for the others. So I'm just going to copy. And over here I'll give name to be MOOC. So MOOC and I move this source image is going to be over here. So image equals to this. Now we have the amount was known to be one and the price, which is going to be two dot. And be careful to have the same names as we want to access the same attributes. So they have to have the same name. And let's just go ahead and remove this. And we still have the last ones are so high that just quickly added. So here name is going to be serial. So like this. Let's other mount. Just going to be. I'm guessing one you and price is going to be $5. And last but not least, source, S and paper and others and those definitions. And let's go ahead and remove those. Let's just fix the style. So now you can see that we have seepage. However, the side of having is having to write all of these three times. We just write the component, that custom component, grep added more time, which is the item. And then me, just go ahead and pass by whatever attributes that we want, wherever we want to add and then answer stem over here. So it's very simple. We could also have computers and separate folder. So I went to that. So this function, well, I remove it. So this is heading, the heading, delete it. And sort of components as the new form, which is going to be, sorry, new files going to be what did you call it item, island dot JS, Acts and export defaults. And what are we going to export item? However we choose it satisfy users and aside of AP. And so we'll be using hi them and import item, forum slash item like this. Now what do we also need out? So I added this item. Okay, so now we need to go ahead and add up. So here instead of having these items were removed them from here, we'll add our apps. So here we'll add tos inside here. And now all we need to do is go ahead and call this up. Like this. Okay? And it's preferable to have my call the set up here. So in order to keep everything consistent, so that's we just keep them. So you can see that using props were able to do much things like passing these properties and just making things much easier. Let's go ahead and add some CSS. So let's maybe go to Item and give each of these classrooms. And yeah, so the reason why we don't give class names to those, as I say, I are now a class name. Well, this class name is going to interpret it as a, as a property and not as like an attribute for the class name. So that's why we cannot add a class name to custom or customized components, but we do add them only to HTML tags. So clustering, Let's give this a name. When we look out. Let's just add it over here. Maybe let's put a div available here for the name of the component and the image. And let's say this is the top. So className equal to top. And let's go over here and this one to be the bottom. So className and bottom. And let's go ahead and do that over here. Close that. So now an app also, the status and ink cosine over here. So we've added a cosine input, our H1, and inside of the item, we've added top, bottom. Let's give this a class names, name, the name, and let's give our className medium, image, products and new release a class name of in foo. So this product, that information. And also for a price, also className which is going to be called fu, like this. So now let's go ahead and also, let's see, this is the dip of the items. So let's have a className which is for the whole island doing everything k. So now let's go ahead and add some CSS. Now that we've added all the names that we need, Let's start with the heading maybe. So. So we want our heading to have a text-align center of adult kids center. Then we add the link for ocean gets styles.css as added. So it must lead us to some of us actually. Okay. Let's refresh. Let's save this. So yes, we did to it. So just refresh. So we added it to the center. Let's give it a font size. So font size of two, sorry, two models. The color of I guess, margin, the system of the margin. So a margin of 20 pixels. So let's fix this. Okay, So this is for our heading. And let's go ahead and add our item. So let's give our item a border-radius. So a border radius, and let's give it a 20 pixel border-radius. Like this. And the position is going to be relative. And you have, sorry. And placebo padding, also 20 pixels like this. Let's give it background color. So maybe this. And why you do something. Let's refresh to see if anything changes. Yes, we are. So what do we want also to scale margin. So margin of 50 pixels. Okay, so now we have a little bit away from each other. So now it's looking good as either a box-shadow. So box shadow like that to two pixels by 500 pixels. Sorry. Now that we have parks, of course, you need to specify this somehow gray. What also text-align the spirit to the left. So everything to the left. And a height of maybe 200 pixels. So now fresh. Hey, it's taller when it starts over here to specify the padding, various individual pixels, 15 pixels, refresh. I'm not sure why this down. We will figure this out. When we get with nouns. And go ahead to the top, we'll fix them or we go to the bottom, the others. So a border-radius, let's say 25 pixels, 25 pixels, 000. What else? Height, width of a 100. So height of a 100 pixels, width of 100 pixels. Background color, maybe something different. And this came this. And like this. Could also have it displayed reflex. Flux. Follows the top and the left is 0. So I want to, I don't want to have space between the top and same for the left silver 0. Guess that's at position to be absolute. Like this. Flourish. However, we can see on the bottom anymore, we'll see why. And socket. So this is the top, the name. Let's go ahead and check the name. So font size and color of, I guess white would look really good. Models. We need to display also be flux in order for this to work. So display flux. The flux is going to be one, lags, 1 and margin, a multi-lingual to be 20 pixels by 1080 pixels, 0. That way, Let's press Okay, starting to be sterile Petri, not much, but they're getting there. Okay. What else? So we do the name was due for the image. So we did when we did for the image. Let's specify that this is going to be for the current image. And let's just remove the width for now and see their margin. Your margin is 20 pixels. And let's give the, we call them, I guess an image product. So go ahead and copy that. And let's go ahead and specify for the EMS product, I want the border to me or a border-radius first. So border radius 350 percent. So think round. Else who also want to order, and that order BY five pixels. Of course solid, maybe whites. This secret. Okay, yeah, I guess this recall. For a border. Well, so the bottom, just as for some reason, is going to have a margin top. And this margin top is going to be 120 pixels. And let's give all the, so this image just to have consistency between sizes. Or is it over here? So which we've actually heard before. So that's case, you're wondering pixels, height, also pixels. So now they have almost the same size. And foo now with some, some attributes over here. Margin, which is going to be 20 pixels by 0 of Re. So let's first phrase not doing it, right. The next pattern. So there's problem, a problem with the top, I guess so. You specify your business background. Jobs you reach 100 and rush. I guess I guess that's better, but we also need to put the images should be safe, so cleft. All right, Sorry. No true right. Let's Freud's rubric here. It won't float other Lerner. Okay, no problem. So you could see that they were able to create this application or don't have very good looking over. The functionality is worth from polis was copied. Over here. We have these items, multiple communities, Circle K. And we were able to do these cards with components for these islands would come within one component and just added several times and we were able to change it every time I accessing the properties of each of these items. So I hope that was a question for you. Sorry if too much transparency. So you could just skip over if you not that interested in CSS. So yes. So that's spheres you the next one. 10. React Developer Tools: In this lesson, we'll be learning how to use React developer tools in order to meet or understand more how the properties of React actually work. So here is a React application where we have this index.js or when you're importing app components. Inside of our app, we have these two cards, and each card has these properties, name, age, gender, and image. And this is the cart function. Over here. We're accessing the properties and accessing those rivals that we added over here. Now, let's say we want. So for example, just one more thing before we begin. Here. For the class image avatar, we have the specific style that we applied and on the info as well. So over here, we've got card. This image avatar has a specific styling and those as well. Now let's say I want to add this type of image, this type of styling of an image somewhere else. So the best way to do that is create a custom component and it's called beaming image, like that. Let's close it and let's just remove this and create a new, new component that's called image. And this new component is going to return for us this thing that we removed. So function, sorry, image. And this thing. Now obviously, I literally mean this to cheese x. So that this works. Let's import React, sorry. React from React. And I guess we need of course to explore. So explored image, which is the default. So this is going to be our default, sorry for that. So okay, And perhaps so, okay. So you here, you notice that the source of our image is actually prompts that image. However, this props comes from our car 2 over here. So how would we how would we be able to go ahead and pass by this property, which is the URL over here to here. So for now, this is giving us an error because there is no image that we are giving to this image card. So what we could do here, you could go ahead and click on reactive tools. And first let's go ahead and remove this error. Lets us visualize what's happening. So what would you do in order to pass this variable? Well, here is the properties, okay? And we have a property which is called the image. So if you could do here is create a new property for this new component that's call it URL. This URL is editable. So this URL is going to be the props, the image. So now we'll create a new property, however, for the new component which is image. And now of course, go ahead and important. So import image from this. Now what we need to do is go ahead image and here and mu, as you can see, we're not being able to see the image. And that is because the property here is not cold image. So if you go to react, and now let's go ahead and click. So this is our application. Here is a colt. And if you click on card, you can see that it has these four properties. So age, gender, image, name. So this is for the card. However, if we go to the image, so the image only has a property which is URL, and we're trying to access a property called image, which is not found over here. So what we need to do as a teacher, it's TRL, since the property that we want to access this URL, you can see that now we can able to see this image. So this is how we pass by parameters or properties forum like sub components, if you say. So here we have this component and inside little bit, we have another component. Let's go ahead and try to do that with these two. So let's say I want to, instead of adding. Each tours see what I wanna do is create a new component, component called NFO. And this is going to pass some variables. So let's go ahead and create that folder is going to read in food deserts. Copy the one for the image. Here. Let's see, these are both H2 by that. Okay? So here what we want to do is whenever we want to and can you improve, we want to specify what kind of info on trying to access. Here. We could go ahead and say the title is going to be let's say each. And the age itself is going to be oh yeah, sorry. So the H is going to be the props that age. So come to pass by the probes, that piece over here. So now what we need to go ahead and do. So let's go ahead and just remove that and add it to our info. So here will be returning this improve on H2, sorry. However, we don't want to have here h. So maybe we were adding an tenderness agents. So what we want to do over here, go ahead and access the props and the name or title, I guess, I guess pretty cool the title. So here, producer had to include a scientist. Important prove from. Okay, so now that we've rush, Hey, scientists, sometimes this gets a little boat, so this should be in foo. So don't mind the names. Okay, so here is our improved, which is over here. So we have an h and a title. So as you can see, H and title. So now we want to add this. What we need to do is just copy that and add the title to be gender. And here that's the age to be perhaps not age, gender to be crops that. Okay, yeah, so here will be facing a problem. And why is that? Well, since if we go to int foo, here, we're trying to access the age. However, at the end foo, we don't find this property called him food. So what we do in that case is go ahead and change that to just detail or facility detail. And inside of our card, instead of having age and gender, what we'll be seeing here is details. So it's called, it's going to be common for both like dots. So now go ahead and check out page. You see that it's working fine. Let me just refresh here as well and receive the reactive tools, developer tools. So we have this. I don't know why. I keep on saying inventory. This would be in food and waste. So here we have the skirt. Let's see what are the progress of the card. We have age, gender, image, and name. Now the image Double-click. So image has a URL on the URL. This should be an improved by skipping me image. So in foo has detail and title. And he details and for him so detailed and tighten. Okay, So this is you can see how reactive truth is actually helpful for us whenever we want to try to access something. Go ahead, let's see two card, Let's say I want to access gender so I know that it's one of its properties or props touching. And whenever we be working on Visual Studio Code, you can go ahead and search for React, dev tools or the law Pro Tools and add it as an extension from chromosome. Or if you're using Firefox, you can go ahead and add it. And so whenever you right click on the console, so here, sorry, not inspect. Actually lever you inspect. And in new component over here. To be, sorry over here, called components will be, will appear and you'll be able to access these properties. Okay? So I hope this video was useful and you understand more how properties work and how purpose work inside of nested components. So see you in the next video. 11. Mapping Data to Components: In this lesson, we'll be learning all about mapping data, two components. Now this may be weak to you right now, but as we go into the lesson, you'll understand what you mean by that. So, so this is the React application that we've been working on in the previous video. So you can notice here that we have an added JavaScript file, which is which contains these objects. And exporting this array of objects. I was called students. And each object is an object of a student where we have the name, phone, email, and the image, and an ID. So if we go to our app, so here we have those cards. So let's go ahead and first import the JavaScript file. So in pork, student, forum, students. So I'm guessing this is the way to earn polar. Let me outsource. It's working. Yes. Okay. So maybe let's try well-being tones. Okay. So we imported this arm, students variable or constant, which is an object, or sorry, is an array of objects. And now, let's go ahead and sell of hard-coding. This next is find them. Just go ahead and add them from the students array. So here I'll go ahead and say urines. So since this is an array, I want students and the first object in that students and I want to access its name. So of course I'm thinking we need to add tons unexpected token. So this will be during this here as well hover here. We'll add the URL. So I'm guessing it's called image. And let's change this to image. Here we have Amy. So here, smooth image, your own phone. So over here in full and happy. So this is one way of adding an array of objects. So copy that and let's remove this. Now over here, what I wanted to change this to one. So 12. So now you can see that there's another name over here and that's at third objects. And final one. So c, So since it started 0, so 0 is the first one is the second to the third. Okay? So we have these three objects. So let's remove from the title or just telephone. And since here we change this to tell e-mail. Okay. See that now, cadaver system and he was in so you can see that on the chin is over here, made significant changes in the page. So everything over here changed. So only had to just add one thing, knowledge fixed 17 and Lepage. So now that we have there, Let's go back to an exogenous, sorry, trap. So you see that we've done some of the work repetitively, which is pretty good. So we added score and that score and that score. And sometimes you may have hundreds of students and you don't want to do that for each one. So do is go ahead and map these data to this component. So what do we mean by mapping? Go ahead and call that students. Of course, insert curly braces. So students dots. And then I'm going to do is call a function called map. Now this function called map. And sell these parenthesis. It calls another function that we specify. So as y and create our own function. And this function is going to be called Create, called. This function is going to return for us a chord. So it's going to return. Let's solve this. Sorry comb. So it's going to return for us a call. Okay, So this is our fraction now. So what type of function should we add here? So this function map is going to pass by each object in the student's objects. So here, this map function is going to first go to object and then this, and then this. And it's going to prefer a Fock perform surgery, a function on each of these objects. And the function is the one that really adding cover heroes. So over here. So actually this function's going to add to have as an input as students, still a single student. So it's like a single object. We are passing by each term. So what I wanted to turn over here is this student, I want to access his or her reign. And we do that is simply by just saying student dot. So why would this work? Since student is going to be an objective may be passing through. So this function is going to perform over this object and this object has and attributes. Attributes are E coli, so we can't access it. So we could also add the image, the telephone, email spread is copy them over here, however. So here we'll have only one student that we're passing per each time. And now what we need to do is go ahead and call that function over here. So we'll be creating, calling that created called function over here. Now. You could see that working because those and check its work. So save your secret, see that we're actually going and moving up to each object in that student's object and we'll create a chord with you. We are calling discrete called function for each object and we're creating a card for each of these three objects where we are calling the student names, your imageURL phone, and e-mail for each of the students. Now if you go to the console, you could see that we have a warning. Each child and lists should have a unique key. Now, this is important because when we call functions like mapping, we need to make sure that we are actually presenting these objects and efficient way. And the main thing that we, that we should add is a key part. So here, if you notice issued shares have this ID that makes each object unique from the other. So we could, and the key should be something unique. So in order to differentiate between the objects. So we can go ahead and assign the key to student dot id in that way and save that. And I see that the warning is removed, so 0 warnings. So it's important that we add here whenever we want to map. Now, also a comment on, Let's say I want to add over here, let's say let's go to Review. And let's say I want to access, okay, yeah, so let's say I want to access the add, let's say one at here, and each one. And I want to access over here the props dot ID. That's cool causes. Now we already have a property called, called IDs. So this technically sure, but you go to page you can see that we are not printing our ID. So why would that be an increase in heroin over here? So the reason for that contributed to us. Okay, never mind. So the reason why we are not seeing this idea, because, um, this key is not defined as a property, is just a key that has gone to contribute and depreciating between different objects. So if you want to access the id or do you need to do is go ahead and create another property called something other than key and Nike ID. And the answers, go ahead and call student ID. Now if I go to court and say props, dot ID, you can see that it works now. Yeah, I'm sorry. So go and add props dot key. So here in the beginning, I should've said that key. So you could see that key is not appearing. However, if we change, so key is this one here. However, if we change it to idea, now it works. Okay? So this is how we can make use of mapping. If we have an array of objects that we'd like to map to one of our components. And the next video we'll be working on a project that uses this mapping tools in order to get more familiar with them. See you next video. 12. QuotePedia App: In this lesson, we'll be applying what you've learned regarding mapping and we'll applying it on an already built applications, the code PD application, where we'll be applying this mapping technique into this application. So let's go ahead and get started. So this is the, our application, our React application. Well, we have this public folder that has the index.html and the styles.css. The folder will be available on, on, under the course files, the files that are appealing to the course. So you have access to this information. So this is regarding the index.html and styles. Now if you go to source, we have the index.js, which is a simple folder that has, that renders the app, which is a set of components. And of course we'll be adding it to the root instead of index.html. We have this code PDF, a script JavaScript file that has this array of objects. And we have our mean phi, which is the update here sucks. And so what's inside of the file? Well, we have the function are obviously which as the app component, which is going to return for us a first title of our page is called PDO or codes PDO. And then it's going to return for us a dictionary list. And inside of this dictionary list will have different depths. And each step is going to contain a dictionary title and a dictionary detail. Dictionary title is going to contain an icon with the code. And the dictionary detail is going to contain the meaning of this code. So here, for example, we have the icon, the code, the meaning of the code. And so what we need to do is to change the structure of this, of the way the code is written to make it more efficient by using the mapping technique that we learned in the last video. And we'll be applying it over here to make our pitch more simplified without having to write each time a bunch of many lines. Like imagine we have ten to 20 coats. It wouldn't be efficient. You just go ahead and copy paste this div over every time since they all have the same structure. Okay, so let's go ahead and run our application to just see how it looks like. We wanted to look the same. So we want the page with the same, but the code to be cleaner. So let's go ahead and open our commander. And let's go ahead and copy the path. So cooking. So copy here. And Cindy and two paths and npm start. So npm search should go ahead and open our page. So this is our page over here. As you can see, we have the title and these three. Let's see, CAR-T cell have coats and their meaning. So let's go ahead and get started. So the first thing we could do is instead of having to write all this div, which has the same structure in structure, the three quotes, quote cards. We can go ahead and just click on create our own component, which is term and pass these variables. So we could do that on a different file. So let's go ahead and create a file in components. So over here, we'll go ahead and create a new file, which is going to be term JSX that way. And of course we need to first react, so sorry for that. So in poultry, OK, react that way. And random function, which is going to have same name, which is termed. And inside of term will be returning a structure that will be adding enough hue. And let's go ahead and X port. So here we'll be exporting by default the term function in that way. So now what we need to do is just go ahead and copy that. Over here. And let's go ahead and add the same structure. However, we won't be hard coding all these. So here we'll be adding our own, let's say props. So we'll be adding our own, our own variables and we'll be adding over here. So instead of having all of this will be accessing the props dot, let's say coat. And instead of having this will be having rubs, meaning let's call this the icon. And so the reason why I'm calling them this way is has to do with could pedia and we'll be going getting into that in a second. So here perhaps that icon, and I guess that's it. So now what we could just go ahead and do, instead of adding all of this will be just adding this term custom component. And we'll be passing variables which are going to be the item. Also coat the meanings, icon code and meaning that way. And here what we relying as just basically whatever the coders. Now, remember what I told you about hoop here. So here instead of hard-coding the information, we could just go ahead and access them because we already have this information and it wouldn't make sense to just rewrite it. So you can go ahead to app.js port. Let's say hosts, we could give it whatever name we want, RAM. And let's go ahead and import. So it's called PDO. And here what we did say is coats that I can. So with the accuracy, I can and that's why we given the same name. I guess it could mean better. You don't have to, but just to make everything organized. So let's go ahead and continue. Ovary, we have the quotes that I can now go to, Coats. Coats. And over here would be having codes.me that way. So now that we've added this, let's go ahead and save. Now. Let's go ahead and just remove this. So you might be asking, how would we be accessing all these amine? This is an area of objects. So mixing sense to access an icon, I coat the meaning of an array. We need to access an object. So the way to do that is by mapping. So we have to go ahead and map these. The way we do it without mapping is just by going. And we'd be having not an array but an object itself. But since we have an airy, the correct thing to do it without mapping is just by removing it and adding it hard-coded, not what we want. We want to somehow access it in this way. So how could we achieve that? So what we need to do is go ahead and create a function that's going to allow us to map each, let's say the machinery item or turn in this dictionary. So this function is going to say creators are going to create for us the term whenever we access this array or R3. So here turn, sorry, not sure. So let's say we can give it a term. We could just call it prompts or term, but it's not necessary. Has to be named props. Let's give it a name of term just to make it easier, just for you to understand. So here what we are doing is we'll be creating a term and this term as, so you can see here that we've suppose it would be better automatically. Visual Studio Code just imported this term component because it knew that I'm creating from here. So now it's automatically imported this term from file. So when we want to work, what would you like to return? We would like to return the stir with these information. However, we need to make some changes. So what these changes would be? Well first, since we'll be doing a mapping, we need a key. So we go ahead and add a key. And fortunately we have an ID, so we can just go ahead and access the ID of the codes. Codes that ID is wrong, we need to do another change. So remember when I said that we cannot access an array and we can acts, cannot access an idea of an array. Because when an idea is for a specific object in that array. So this is the whole reason why we're creating this crater function that we'll be using inside of the mapping. So mapping is going to go over each object and that codes. And wherever we go to each object, or let's say each term which is over here, will be accessing this terms ID is terms I can these terms coat and this terms meaning. So here is the object that you're accessing each time that array of dictionaries or coats. So now that we've created this function over here, what we need to do, this semicolon. So now what we need to do after the, after we've created discrete function as go ahead and just, of course, Let's go ahead and remove all of these because now we don't need them. However, what we need as instead of this dictionary list, which has a cosine machinery, will be accessing the array coats and go ahead and map this array according to a function which is going to be this create function over here. So now I guess just at, we just go ahead and map this area according to a function that we've created that's going to go ahead and add these terms from cote, pedia dot js or transcript. It's going to add them to these variables. And then we'll be entering terms sex and you'll be adding styles over here. That's pretty simple if you follow along with the code. So now if we go ahead and save everything and open our page once again. So now you can see that we have a fourth item because the dictionary, this dictionary actually consists of four items. So, or here you see, and you could add as much as you want. So this is the main reason why we did this. Because whenever we want to add a new code, for example, we don't have to just rewrite. We could just go ahead and add the information of this code and automatically is going to be added to the speech. This is the most efficient thing the user wants to have his or her pitch. So I hope this was clear for you and meet them mapping concept more clear for you as well. So see you in the next video. 13. Map, Filter, & Reduce: So in this video, we'll be diving deep into mapping and we'll be exploring other types, blood types. But similar techniques to mapping that our filter and reduce. So let's go ahead and open who PDF application. And so I've created this folder over here, the folder that will be adding our examples. So let's say we have a variable array of numbers, and that's maybe 47910 that way. And let's say I want to go over each one of these numbers and maybe double it. So firstly, I'd go and write a function that's going to do that function, Let's say double. This function is going to take a variable x and it's going to return for us this x times two in that way. So if you want to do that through mapping, we go over and say for adding a constant, so number dot map and will be mapping these. So whenever we map you will be moving over every number in this area and we need to pass a function to do something with that number and then for that functions on to be doubled. So here I'll be calling that function, which is going to be applied on every number of these. And you can go ahead and save them a new variable. Let's say new number then that way. So this is going to give us return for us, an array with the double numbers are here. Now, you would ask, why would we do that if we have this for each function that could do the same exact things. So we can just go ahead and say number dot forEach. And for each of these will be calling a function. And what you could do actually is instead of just calling double digit, just go ahead and write an anonymous function in that way. And we'll be adding to this function variable and returning, return x times two. So you could do that either that way or just by calling the double function and instead of writings. So why would you just go ahead? And so here, since we have this for each, in order to get an array and array, what we need to do is go ahead and create this new array. So for one equals to an empty array, and each time we pass through this loop, this for each will be naturally occurring extents to, but we'll be pushing into that new array. So you, number one, the push, so hard SHE, and we're pushing x times two. So that's the difference. Now, you would notice that the mapping is going to be much efficient because we are not going to be pushing each time we enter the loop until each number of this array. What we're doing in the mapping is just creating this new array and this function is Mary Hawkins going to do all the work for us. However, the forage, we need to create this empty array and we need to push each time we loop through each number in that Eric. So in that sense, mapping is better and much easier and cleaner. And now another thing we could use as the filter. So let's say I have also a variable number array over here. So copy, paste. And what we would do is go ahead and let's just say four. And let's say we want to use the forEach first. And what you want to do is check for, let's say we want to filter this array to apply on certain condition. So let's say I want to have this array. However, any number that's less than 10, it, so I want to filter this array to a number that's less than 10. So we could do that using the filter function is by creating a new array. So you filtered array. And this array is going to be number that filter. So it will be filtering and will be filtering according to a function that will be passing by. And left function, we can add it anonymously. It's going to have a number of side, and this number is going to be every number in the array that we're going that we are applying the filter to and will be returning every number that applies to the condition which is number greater than 10. So here what we are doing is that we're saying return all the numbers that apply to this being true. So whenever a number greater than 10, it's true. We'll be adding this number to our new filter area. Now we could also do that using the foreach loop. So here, let's say we have, we want to do it using the for-each. So what we do is new for each c without full to do using the foreach is go ahead and go pass over each function, or sorry, over each number and has this function. And we'll be adding a condition which says if a number is greater than 10, then go ahead. And so here we need to add this. Okay? So here we're saying that if number is greater than 10, what I want to do is go ahead and pursue this new array, this function. So here, you could, you'd notice that we don't need to do that. So here we have to create this new arrays, you for each empty array and each time we're pushing to this, you are a curse, not really pushing this number. You'd see that the pulsar needed actually a lot easier for us. Then for each, we need to go ahead and push two. This created a empty array each time according to a condition that we are. Okay, so now that we've talked about the mapping and the filter, we have one last thing which is the find or let's say reduce. So let's see, we have this new array called numbers, the style and some values, so 1, 0. So now we have this array of variables. And let's say I want to have an accumulator. So let's say I want to add all these numbers. So the way to do that without using the Reduce, go ahead and create a new variable, u. And then what we do is go ahead and use the forEach function. And for each number, what I wanna do is go ahead and apply this function that's going to have this current number that we're passing through. And we want to what Sorry, what you wanna do is go ahead. Sorry, This cannot cause new. So Achilles. Okay, MOOC want to do is add this to the articulators. So each time we're adding the actuator plus the current number. And let's say that our calculator is 0. And the first time really entering the airway will be having the correct number two you want. So one plus 0 is one. Then the next time the accumulator is going to be one and a current numbers going to be six. So 1 plus 6, 7. The third time that can lead to some 37 and the current numbers from 284, so seven plus 84, and so on until we reach the last element of the array. So that's how we'll do it using the For Each. Now, we could also use the reduce function that's going to do that for us in a simpler way. So the way to do that, go ahead and create a variable. So you recuse. And we'll go ahead and say numbers, dot reduce. And we'll add a function that's going to go ahead and have two variables. The one, the first one is like the previous value, which is, which will be having at the actuator. And the second is going to be the current value, so the count value. And what we will do that we'll use functions as we'll be returning the accumulator plus the current value. So what does that mean? Well, here is our actuator or previous value, and this is our current value. And each time we pass through, each element will be saying that we want to return to this array, to this new array, or sorry, to this new number, this value over here. So here we'll be taking this value every time you pass through this array. So the first time our accumulator is going to be 0 and the current Sloan to V1. So we'll be returning 1 plus u. So now the previous value is one and the current is six. So now returning 6 plus 1, which is 7, so on and so forth until we reach the last element of our array. So you can see that using the reduced, we were able to do the same thing with that we did with the four, sorry with a four here. But a simpler way. Now, let's go ahead and apply one of these changes to our our page. One thing we could also use, if you want to use it. One day. There is also defined. So let's say you have cancer, you find array is going to be numbers. So sorry. So numbers that we have defined and you have the findings to find is going to go ahead and fight for us a number according to a function. And this function is going to specify which number two to give us. So let's say I want to get the first number that's greater than six. So in that way, reuse the find function. And whenever we encounter a number which is less than six, greater than six will be returning this number. So this is different than the filter because the filter is going to give us all the numbers are greater than 10. However, here in the fine is going to give us only one or the first unrooted counters or greater and ten or six wherever you specify. You could also let say we want to get the index and not the number itself. So let's say I want to get the index of a number that is greater than six. The first number is greater than six. So I want the position of the summer and the number itself. And so we do that would reduce, just go ahead and change in defined to find index. In that way. That way, this function is going to return for us the index of that variable. Now let's go ahead and apply one of these changes to let's say our index over here. So two up. Okay? So let's say an hour up, I want to write a function, namely that, or let's say Mac as you the map to return only the, let's say it was both for PDF. Let's say I want to return all the coats. I want just to get all, let's see the meaning. And I will just want to get the first 20 characters of that, that variable. So we do that using mouse is over here. So let's just copy that. And will not be using scripture, will be using another function. And this function is going to do what we just said one. And so the mapping functions, we're going to start the function that's inside of them. Happy as long to take in this entry, this object. Let's give it a code entry, meaning so-called entry. And what we'd like to do. And so this quote entry is to return the code entry. So here, let's copy that. However, I just want to access one of its variables, which is meaning since the code entry has a variable called meeting. And whenever we access that meaning I want to go ahead and just return maybe the first 20 characters. So in that way we use the substring method. And the substring method is going to give us this hour. This sentence flows from 0 to, let's say 20 in that way. So go ahead and save this into a new variable. So cons you who eats equals 2 in that way. And let's go ahead and console dot log this new codes. Sorry. So console. And let's go ahead and open our page. So you can see here, this is our console page. And so you can see that we have these functions with only 20 characters. So we were able using the mapping function to just go ahead and gets civic things from an object that had different variables. And you can see how easy towards just to do that. And we could have done many other things is in the folder and reduce, which we'll be using in the next coming videos. So I hope this video we will teach you what is mapping. Or also new functions, the reduced defined, defined index. As they will be really beneficial to you one day when you're maybe try to get specific information which you could only do using these methods. So, see you in the next video. 14. Notepad Application Part 2: So now let's go ahead and upgrade our Notepad application that we've been working on. And applied changes or things that we've learned through mapping to this application. So if we go to our vehicle and this is own path. So here we had this app.js future header node and our index.js. Now notice that the note was hardcoded. So here we have these nice hard coded information. And we've added this new file. I've switched as these different nodes with the title and content under exporting some notes array of objects. So now what we need to do is go ahead and do what we've been working on in the past videos by passing by these variables into our node. So how to do that? Well, let's go First up. So he worked, we want to do is, instead of having this node over here will be having several nodes. And we'd like to pass in some variables, like the title and the content that way. So here, instead of having those hard-coded note function will be, sorry, we'll be removing those from here and adding them into over here. So way, so node number 1. And here please, right? So we'll be adding this to our content over here. And so now that we've added the title and content, what we'd like to go ahead and do is just good to know that this x, and over here, since we passed in the app to this note components, some variables. So when the axis using a perhaps puts now they are answerable probes. And so here, in order to access the title, they go and see prompts the title that way. And over here we'll be adding prompts that content. Okay, so now in our app.js, since we want to go ahead and go over all, this, doesn't make sense to just go ahead and copy notes and then like four nodes. Instead, what we'll be doing is using our map function in order to do that. So first let's go ahead and put our notes, geodesics. So import notes from and from the head. And that 71, all notes that JSX nodes, that JS over that, that JSX. Okay? Then we just say how are we putting it in our previous one. Okay, so double dots. So here we have another one. Okay? So in that way, sorry for the confusion. Okay. So now that we've imported what we go ahead and do is say notes. Dad, of course, serve curly braces. Notes, dot, map, tab. And we want to use a certain function. Now, we could write the function directly over here instead of writing a function from here and then calling it so function. And this function is going to pass in a variable which is the note itself. So note, and what we'll be doing and save that note will be returning and nodes component. And you'll be adding the details of this node object into this node component. So what should we returning sell this note. While since this map function we need a key. So the key is going to be the node that ideas as we have one, I guess, do you have on? Yeah, so okay, it's called key. So let's go ahead and access the ski over here. And we also have the titles is going to be note that title. Okay, also have the content which is going to be note that continent that way. So we call them up function. And for each one of these notes, we returning a node component with all of these. Now, there are certain message. You could also use writing a different way of writing this function using the arrow functions if you're familiar with them. So instead of having this function, which is to move it, and we'll add this function instead. Now, since this is only viable, could remove the parentheses since it's a single variable and since we are returning only one components. So we could just go ahead and remove this richer over here. Okay, This is just add the parentheses first to this note here. And you can just go ahead and remove the return because you're returning only one component. So you could see how simplified our code has become by doing by adding those changes. So let's go ahead and run our application to see if it's working. So we need to go ahead and copy the path of our folder, our application or our project, and click on npm start in order to start our application. And I guess we all seem to move this. So on the kid the practice. Okay. So now let's go and see how printer page and guess so you can see we have these the notes and you could, wherever you want to add a node, you can just go ahead and added over here we just add title and the content and upgrade the key to a different key. So you can see how much easier it is to add a new note, not just by going into our notes and stuff, you only just need to add the content into Node.js apps. So that's it for this video will be upgrading our notes from application further in the next few years when we learn more stuff about React. 15. Conditional Rendering: In this lesson, we'll be learning how to do conditional rendering and then adding several elements in your page according to a certain condition. So let's go ahead and open a new pseudocode. And I've added this new React application that you hit Create that these files, and I'll make this available under the course folders. And so this application or project has the in-depth as usual. And here we have an application which has this form. And we have some styles and the index. Now for the app.js x. Let's go ahead and first open the page. This is our period to have this form with a username, password and submitted. So you can type anything over here. And now, let's say I want this to appear wherever I'm not logged in. However, if I'm logged in, I wanted to show me something else. So maybe I wanted to give me over here. Let's see an H1 that says hello instead of the sorry in the container force. So instead of having this form, I wanted to give me this Hello over here if I am logged in. So how would I be able to do that? Well, you could go ahead. And first let's say have a variable that says is long term, which is going to be a Boolean, which is going to be either true or false. So let's give it a value, let's say true. And let's create a function that's called render conditionally. And so let's add this function, The wherever we want to make this appear. So we'll say if, let's say logged in, logged in is true like that, or you could just, just remove all of this and just add it like this. So it's true this is going to be evaluated if not it. So if this is true, Let's go ahead and make this appear. However, if this is not true, so I'm so sorry, will be returning. So we want to return this. However, if this is not cool, what will be returning is this form over here. So it's open a parenthesis. And I want to turn on this form over here. So return this. So this is our function. And so what we add sales container is this function. So we call this render conditionally function. So now if you go to our page, now since it's true, we have this hello. However, let's change that false and go ahead and see. Now our page is changed because now the variable is false. Now let's go ahead and maybe make this simplified even more. So instead of returning all this risk, return, a customized component, form component, and maybe also customize the input since we have two inputs. So what we need to add is go ahead and add the, Let's call it login that JSX and input dot js X. So one for the input and one for the form itself. So inside of their login, what we're really doing is first import React from React obviously. And let's go ahead and save that. And let's write the function. So function login is going to be written over here and that's poor. By default, this login function. So here, exports are needful luck in that way. And what we need to write inside of that login is this form over here. So we'll cut that added into our login. So here will be returning. Sorry for that. So Return, and let's add it inside of parentheses. That's the correct way of doing it. So let's go ahead and save our app instead of calling this return, what really caught, sorry, this form when calling this customized form over here. Also called Atlassian. Login and of course we need to pour it here, we imported it. And let's go ahead toward login. So here, instead of having these two inputs, what will be having as an customize them. But, so let's go ahead and just copy. Go to input. And here will be changing this to input. And over here, really changing your input as well. And obviously won't have any falls. It's just one. Now here we have two inputs of different types and different placeholders. And thus we need prompts in order to make this possible. So each input is going to be accessed for type. So here, Europe's that type. So we'll be giving you the type. And over here a placeholder as well. So grubs done placeholder. So here we're doing in the login is instead of having December to be having this input with these two variables. So the type and the place holder. So let's go ahead and check. And guess we need to import it so I need to improve them. Put. Sorry for that. So, um, put and pull it from here. Okay, so it had a type and the placeholder reactants means 0. So we're having, Let's see, where is this coming? So again, so the atmosphere is cool, or using JSX 6, 5, that's an input Dodge ESX. So let's go ahead and put it here. So x, o and we need to me. So okay, so I think the problem is we wrote this wrong. So this should be it is. Okay, because the package is called reactors. Same for here nouns but for us, okay? So you could see that it's working fine. So our applications, so the same, but we made it more simplified. So we have this overhead. Now, let's say I don't wanna add this functionality. I just wanted to directly added over the container. So how would we do that? Let's say I wanted just remove this and, and all of this step. So here, at this step now exceeded this is not possible because inside of our return command, what he shouldn't return is HTML. So how would we be able to do that? Well, we could use the ternary operator. So using the ternary operator, let's say I have, I'm just going to add a comment over here to the ternary operator works by evaluating a condition. And if this condition is true, I'm going to true expression. I'm going to do this expression which is going to be evaluated if this is true. And if this is false, I want to evaluate another expression over here. So this form works, etc, HTML. So now if I go ahead and say it's logged in, as it's true, if it's true, I want to return this each one Hello over here. However, if it's false, I wanna return is logged in over here. So go ahead and remove this. And now, if we go ahead and circle page, did see Islam. Was this, Oh yeah, Okay. And this curly braces. And let's go ahead and save and check. So now we can see that since we have is logged into the false, now we see this. However, if we go ahead and change this to true, we can go ahead and see that now we have this hello page. We could also, I guess we could do something else. So here you can just also add through, but since it's up, it's a Boolean. So whenever it's true, it's going to go to here to the first expression. So no need to add this true. Over here. Let's say I want to add also something regarding the time of the day dysfunction. So let's say I have a variable which is the hours new date, and I'm going to get the hours date. And here I'm going to add another condition which is going to say hours greater than 12. So in that case, if it's greater than 12 and 1, I have another H2 which says good to her. If it's false, return. So let's go ahead and check if this is working here. So this is the AES two hours. So here the owl is greater than 12. So sorry, less than 12. So it gave me no. So since triune be greater than and eight, say 11 and check so you can see that now we have a good afternoon because it's greater than 11. And you could also notice if you just check summary article or later when you go and start working with React, you could notice that some people write this in a different expression, which is hours greater than 12 and it's to greater, sorry, it's true, Good afternoon without the null. Why is that wells in React if the first expression is, we go and evaluate the next expression. However, the first expression is false and then an operator, the second is not evaluated. So instead of having this null variable, we go ahead and check this first. If this is true, then we'll be returning. Good afternoon. If this is false, we will be evaluating this. So no need to add the null because automatically since this is false, we won't be seeing good afternoon. So this is like another way to do that. We could also use modifications to our login. So let's see here we could have another input which is going to stay confirm password over here. And also, let's say that this is going to be registered. So let's say, let's just check. So let's put this to me. Let's just comment this out. And this is just an example. And let's go ahead and make this to be false. So let's say, okay, let's say I want to say I want to do what I wanna do is if I'm registered, I want to see a login button and without a password. And if I am not logged in, I want to see this form over here. So how would we be able to do that? Well, if you go to our login page, what you could do is fastener variable whenever, wherever we login. And let's give it a, Europe's over here. And let's go ahead and create an, let's see, not slugged in base register and instead so is registered and here, whatever, what, what are, what we'll be doing is just your and person. Let's just comment this out. So let's say we don't want the hello for now. And let's add in this login component and we'll be passing by in the strategy is registered, which is going to be equals to, equal to this component over here. So this is, I'm a variable that, or a pro property that we're passing to the login, which is going to be either true or false. Now, let's say you go to this login. And over here, we're first going to get this. This proves that, of course inside of curly braces. And we'll be getting this prompts that is registered. So as I guess it's called a switch. Let's go up here and here and add a question mark. If it is registered, what I want to say, I want to say login if this find register, and if not, I want to say register instead. So that's the first thing. Now the second thing is I don't want this confirmed to appear whenever I am locked in. So what we could do in that case is say, and this wraps that is registered is equal to false. And at the same time we, we add this inside of it. So whenever this is true, we'll be evaluating this expression. So what I mean by true is that this is equals to false. Actually. You could also remove this and just add over here it is exclamation mark which says that if this is the opposite of what it is, so this is false, then this expression is true, then true will make this appear. So now let's go ahead to our app and let's check if this works. So now I have this register over here. If we go ahead. So this is because, because I'm not registered, so this is false. So let's change this to true and let's go ahead and see. So now you can see that since it's true, now we only have a login without the compound path. So you can see that it's pretty simple and really nines and interacted for the user to use these conditional renderings. 16. States & Hooks: Until now, we've learned how to customize components and use them within react. However, we have not yet experienced how to interact with our page. And so we'll be learning about states and hooks and how to use them in order to make our pages more interactive. Now, states are going to be like changing the elements of our page and hooks are going to help us do that. So let's go ahead and have an example that will make everything clear for us and maybe give you a clear image of states. So here we have on this React application, on sandbox. Simple application, just an app that triggers this each to check word. And let's say we want to change the state of this H2. So let's save me what has changed according to a variable. And this variable is called as checked maybe. And we'll put it in to false originally. And let's say if this is false, then we wanted to have stayed at if it's true, we'll have a different state. So it's actually pretty simple. We just go ahead and add, let's say a style. And we'll be adding into this style, this text, let's say. So firstly, we have a text decoration over here which is going to be line through, line through this way. So why are we giving us an error? So you can see that here we have our or checked and let's see, we want to make it change according to this variables. We want to change its state according to this variable. So either null or no, null as a no text-decoration or this line through. And so the way to do it is by, let's go ahead first and define this text, curations, accounts, styling. Let's give it a name of styling, which is going to be that way. So text decoration, that's given a line through that way. And what we're doing here is just removing all of this. Just adding this is checked my MOOC through the same way that we've learned to do it before. There it is. So here the style is going to be depending on the size check. So if this is true, we'll be having the styling applied over here. And if not, we'll be having an old value in this way. So let's go ahead and try that. So I think we're having this unexpected side column, this. And let's rush. So const and see, so here, since this is false, so our styling is null, so I don't have any styling and sprue, then this is checked. So you can see that the state is changing according to this variable, and this is what we call bye imperative styling. Now, sorry, declarative styling. So we have another type of styling which is the imperative. And the way that the imperative style works is through going and just say, we have this H2 over here. Let's say we have a button and this button is going to change the state of our H2. So let's go ahead and just add here the parenthesis. So in that case is more, and it's got a div over here. And it's closed over here in that way. And so let's say we want to have a declared, sorry, an imperative study. So the way imperative starting works is by getting this element. So let's go ahead and add function. And this function will say, Right. And the way imperative style works is by just doing head and seeing document. Get element by ID. And let's give it an ID of root. And we'll have style dot. Text decoration. And we'll give you a text decoration, sorry, equals 2, line 3. And that way, this is imperative. So the way we do that is here on the button onclick. What we'll be doing is just going ahead and calling this function that is called strike. So here, this gets rid us, say column. Okay? Oh, yeah, spinning through this and add it over. Okay. Now, so here you can see that all click the button and give it a name. Right? Heel strike in that way. So you can see that the button is over here. And let's remove this for now. And now the word stat chat. And if we click on right, which is over here, this, okay. And if you click on this button will call this function stripe, which is gone to imperatively change this. A state of this work by adding this re-rendering that see this page with this text Grecian. So if we click on text storage trie, you can see that we've added the strike. And similarly we could just go ahead and add another button that's going to change the strike two. Strike. So we do that is we say adding here and right. And let's call another function called an strike. And I did over here. So since the need to unsubscribe, and this is going to put our text decoration to be none. So now strike, strike it and guess this is going to be Nolan that way. So right? Yes. So you can see that now we were able to change the state of the work. However, incredibly. And renewing it with the S checked variable is doing it declaratively. Now, similar linkages, go ahead and change this to true. So changed the S, check that. So let me copy. And if we strike, let's go ahead and just change as chapter true. And if it is on strike as change this to false in that way. And here, these are just at the sake. Now, you'd think that this would work. So if I cave on strike, this would be striped, striped and strike it. However, this is not the way it works because the way this is happening, this is a declarative styling. And so we need to re-render the page. And using this styling, we all not being able to rerender our page. Because here, each time in the past imperative where we are getting the spiral, it just controls it. Yeah, here we are re-rendering our page because we're getting this document and then they were changing its value. And this is making us to, sorry, this is forcing us to re-render our page. However, with this method, we are not being able to rerender our pitch. Here comes the role of hooks. Hooks are going to help us to re-render our pages inside a functional component that will be introduced to in a moment. And we will be doing that using what's called the US states. So use state is like a method that will be important and which will help us to rerun the route peaches and to make our pages interactive. Without having the need to get this to re-render using the document that gun element, however, by using this just changing state of one in order to do it. So here, just, I just forgot to add this. So here on click what we had to do is say Eastern. So it's checked. So on click is checked. This or is it the text-decoration over here is going to be a question mark. Is done AS mark over here. And this is the first one. This is the Okay. In that way. So should stay the same. Yeah, I just forgot to an RLM sample, however, it should. Logic is the same so it won't change stripe and try to unfold. So now let's go ahead and try to use these US state, which is from hooks in order to change the state of our page. Now, I'll be using another example in order to achieve that, which is over here. So here, first, sometimes render. Okay. So that's just an entity for now. So, okay, so here is our index.js and here we have a button, It's Sorry about that. Plus that should increment our unknown. Now, let's try to go ahead and increment our number using this US state. Now, first, this zeros hard-coded Superstore. I hadn't creating variables platelet count, and it said 0. And let's remove this and over here in that way. So now that we've added this variable count, thus create a function that's going to increase our, our variable. So let's give it a crease in that way. And for now, what we want to do is to, let's say count plus plus. So whenever we click on this, plus, sign will be incrementing or viable. Now let's see if this works. Now you can see that our variable is not incremented. And the reason for that is that we are not re-rendering our page. Yeah. And I just forgot again to call this function, which is the reef over here. Okay? So yeah, it doesn't work. And that is as I said, because we are not we rendering our page. Now if we go ahead and copy that rendering functionality inside of our increased function, you would notice that if you click on the plus, it could work because we are first incrementing our counter and then rerun the angle pitch. But you can see that this is not efficient. We can imagine having a long react or not react on that render. It wouldn't be efficient to just copy it and add it to every function that needs to be rendered, the page to work. So here comes the use of this new state. So what we're really doing is, let's first go ahead and work in the app.js. Let's go ahead and just copy this div over here to our app.js. So over here and inside of our app, let's just go ahead and run up and close that. And let's go ahead and just remove this render and cut this. And over here, this should be components. Components and up and viable count. Yeah, what we read them in queue as removing count and we'll be adding another variable which is going to be called state. So let's remove count and whole available scored state. And this state is going to use the US state functions. So we act The US state function in that way. And we could also, instead of or seen reactive, you stick with it. Just go ahead and import this used it functions. So use sit here and just go ahead and use it in that way instead of just calling reactant US, state looks carry only called inside of the body. Oh yeah. So here, sorry for that. We should do it inside of the function up. Okay. So now that we've refined this state, what we'd like to after we've called this state. So let's first go ahead and just console.log what the state is doing this function as those that can't assume the errors that we're having. And here it was heard and just console, don't learn this state. So what are we getting when we call this function which is called US state? So if you go to our console, you can see that we have to an array of two variables for this console, dot log state. So the first is undefined and the second appears to be a function. Now let's try to enter a value over here. So say 0. See that the first value is the thing that we added over here is 0 and the second is a function. So the way you see it works is that the first array, sorry, first object in the array is going to be our initial value. And the second is going to function that's going to update this an issue state or an issue. And so what we could do in just to get this initial value instead of having this fair state is go ahead. And just in that way, say that I want The sorry. Yeah. Cans but count and Catholic. So what are we doing over here? Let's say this is a constant that way. Okay? So what is happening over here? While since you state is going to give us an array of two variables, so a and B, what you could do in order to save first variable is just to save it in this variable count. So here, whenever you add one more element into this array, reactive scope to understand that, we want to save the old first variable, our first array, into this new variable called count. And let's say we wanted to save the other variable which is a function, and let's say set count function. So this setCount is going to be a function that we are going to be using to update this count variable. So now that we've saved our count and set count or the two variables inside of this array. And count should be 0. Advocacy, we consult the plug-in. So this is our 0, which is our initial value. We could just go ahead and add it over here. So this is our count function over here. You can see that now we have it as 0. So now in our data and this function should increase, function increase, and we want to call it whenever we click on our buttons, here, on click, I want to go ahead and release. So let's go ahead and see what she should inside of our increased function in order to meet our incremented every time to contrast. Now, if we go ahead and use setCount function, that's ONE to update this count variable. Let's say, let's set it to maybe one by five and see what was this give us. So say click on plus, and you can see that now our value change to our pipe. Now if I go ahead and click on this another time, see that it's not changing. So this function is actually re-rendering our page with a new value for the scanf function. So this is really what the function is going to help us do. Now, if we go ahead and say I want, my new values should be the old value, which is the initial value count plus one, the C networks. So now Razor page, now it's 0 plus one plus two, so on and so forth. So you can see that using this US state function, we were able to update our value and we render our page without writing too much of Coke. Now let's go ahead and try to do that, but for a decrement, so it's the same thing, however, we'll be calling another function is called the decrement, and of course has changed the sign to later. Let's go ahead and copy this function over here and call it equivalent. And here we'll be calling also that set count as well. However, when we calling it and changing the way we update this value. So here what we want to do whenever we call the secret value is to update the value according to this expression and not this one over here. So now I click on Plus is incrementing effective. It's decrement. So you can see that now we are starting to get an overview of how to interact with our page and make it, make it user friendly and trust. Now, let's go ahead and have another example, which I have over here. So let's say we have this time and wherever we click on this button, which is good time, we want to go ahead and update our time and give us a new time. So how would we do that? Let's first go ahead and create a variable. And this variable is gone. All this is going to be now, of course, a new date. Dot get, let's say, or to local string. Local date string and that, hey, now let's go ahead and use the US state. So const. And here you have two variables and see that time, the initial time and the function that's going to update the time, Let's call it set. So let's go ahead and call the US state over here. And you can see that since we've used it, we'll put it over here. And let's give it an initial values belong to B now. So the current time is our initial value. This is the concept and this is the Sutton's song to update this time Bible, the initial case. Now that we've created this, let's go ahead and first add this variable, which is called time instead of this. And inside of our buttons. And now you can see, let's actually change this time, that time, so to local time. So you can see that this is our time. Now, if we go ahead and click on Get time, we are not being able to update the date. So let's go ahead and add this function, which is going to be called whenever we click. So onClick, I want to go ahead and use a function called update time. Now let's go ahead and create this function. So function of date, time. That way. And this function, What's its own to do is going to Use the setTime function order to update our initial state. So let's go ahead and call setTime. And what we want to do is add the new date. Now, you cannot use this constant. Now, we need to read called initializer. So we'll go ahead and say const new time equals to new date. Okay? Then dot to Luke whole time string that way. And we'll go ahead and set it over here. So we'll be updating, updating our state to this new time Bible. So now go ahead and refresh and click on Get time. You can see that whenever we click on Get time, we aren't getting the new time. So let's try and do that. However, without clicking at time, we want this to just refresh everyone's seconds so we get the actual time appearing over here. So we could do that by using the set interval. And this set interval is going to be called. So inside of our function. So here whenever we want to, actually not onclick, but always cold. So we just go ahead and say set interval. And this is going to be called according to an interval that we'll be adding. So the first variable is going to be the function that you want to call. And dysfunction is going to be the update time variable. And now we specify Hubble one. We would like to go, or how many times we would like to call this Bible. Give it a 11000, which is 1 second. Now if we go ahead and save, you can see that every 1 second we are re-rendering our page according to this set interval, which is calling our update time function everyone seconds. So 1000 milliseconds such as 1 second. And this update times giving us or updating the initial state to this new state, which is newer time. So hopefully these three examples give you a good idea about hooks and states and how to interact with our page using this nested function, which is really beneficial. In the next videos, we'll be exploring more and more about these other topics as well. 17. Event Handling: In this video, we'll meet on diving more into how to handle events or in other words, event handling. So let's go ahead and open our previous projects, the login project, we worked on pseudocode. So this is the application and here is our username or password and login. Now let's say we have a text over here and click on log, and it would say submitted or log them. So let's go ahead and try to use that. Do that. So using US state. So here, let's say we have this each to, each to, let's say. First is go ahead and create this Bible, and we'll be creating it using views state, so const. And here we'll have, let's see set. Let's call it heading. So having set heading in that way. So set and equals to of course, use state. We will use it and you can see that now it's imported and let's initialize it to log n. So we're telling the user to log n. And let's add it over here. So here, just as a small h here. And let's go ahead and use it. So here, heading, title, heading, title and tight. Okay, so now let's close this parenthesis. Let's go ahead and say on this button, on click, soever we click this button. We want to call a function that's going to update our state. Our heading titled state, says go and say Update Heading. Hey, let's go ahead and write this function. And over here, so a gate heading. And what this function's going to do, it's going to change the initial state heading title with this function heading and resetting the heading 2 log n. So this way, Let's go ahead and check. This works. So here, let's login. You click on it and it's locked. And again, now it's not perfectly working, caused me to change some variables. Now it's refreshing each time. So for now, let's just keep it this way. And we could do another thing which is maybe when we hover over this login, we want to change a color. Now, we have two events for that. We have the on mouse over and mouse out wherever you over the button and whenever you're out of this button. So we'll add another event listener over here at this school to eat on mouse, not down but on mouse out. And let's just start with the onmouseover. And to call a function that is called, let's say onmouseover handler, so on mouse over handler this way. And now I'm happy that and let's go ahead. Functioned on mouse handler. And of course you need to create another state for that. So, so Cuffey, and here, let's say we have wherever we're on mouse over, we'll set this to true. So whenever we are over, we'll set it to true. It's not exposed, so initially it's going to be false. So not over here and let's say set mouseover. Hey, So let's say almost all. So whenever we over this button, we want to set this stage true. So we'll go ahead and say Set move over, mouseover, sorry to true. And whenever we were out of it, so unless out eyelid. So owners are GluA1 set this to false. We'll call the on mouse out handlers squared and copy it. So our mouse out of here and here on mouse out handler will set this set mouse over to false. So now that we've added those on mouse states, what we wanted to just change the style styling of this according to this variable. Sorry, it's on mouseover variable. So this style over here, and this style is going to have this double back ground color over here. So background color. And this background color is going surge we, depending on this, on mouseover. So on mouse, sorry for that. So over here, on mouse, over the question mark. And so if it's true, we want it to be blurred and otherwise write the words. Okay? So maybe we could just add another just to make sure this is not a reserved something. Alkanes. So let's go ahead and try to do this. Casey can see that whenever we hover over it, we are changing the color to black because now we're over this button and now it's out on us out. So we changed the color to be white again. And here, whenever we click on that chemical Ogden, because we have, I guess something regarding your fresh page or something, it's not being used or not being consistent. So I guess it's something to do the registered something, yeah. Okay. So and I guess this needed clear how to use these states to an order to event, sorry, to handle events in using React. 18. Notepad Application Part 3: So now we'll be finalizing our Notepad application and penalizing this course by adding states and hooks to our application. And finally, having this clear application where we will be adding nodes using React, and we'll be using all the things that we've learned so far throughout this course to implement this application. So let's go ahead and get started. So this is how I will note that application currently loops. What we aim to find the lives is by adding over here like empty notepad, where the user can click on it and add his own app has no, sorry, his own notes soon zone title its own contents. For now, all of these notes are being added from a JSON file. So there's nothing that the user added. So there's no something that we could react with right now so the user can interact with Snort application to add his own loops. And now what we're going to do is to actually achieve the streaming. The user be able to add his own notes. So let's go ahead and edit our notepad application. So this is our app.js x. Then as you can see here, we're importing notes and we're actually mapping them with the key target content as found in the, it's not that JSX that you can see we have key title and thought. Now what could introduce is to remove this. Sorry, this is the code that we've been working on login or so. Okay, so now what we introduced is to remove this and add our own notes and using States. And we've already seen states. We've reduced lamb. So now let's try and implement that concern of our notes application. So here is our notes from variable that could be using. And this is the out new function that we're using to add a note each time the user wants to add a note. So we were using the US state. So that's why we need to import it. So we could you put it actually in another way by just removing this and come up and just actually a movie go. So here is our US state, and we'll be giving an initial variable for our nodes, which is an empty array. So at getting our notes, variable is going to be an empty array because the user didn't add any variables, especially notes. He had to start Notepad application. And the absolute function is going to allow us to add each time the notes that the user wants to act. So let's go ahead and first write our functions. That's going to allow the user to add notes to this Notepad application. So function is going to have as an input, this note is going to be added by the SAP Note function of the state. So we'll be adding our note here. Now as an input to this AV node, the first input is going, is always the previous notes. So let's say here we have an empty area of notes, the previous loan to be this empty area. So this is how this is the syntax of a function in a state react. So this is always going to be what, whatever was inside of our variable before adding, before applying this absolute function. Now what we would like to do is go ahead and return the previous function. So sorry, the previous nodes in addition to this new node. So this is the way to do that and we act. So what does this mean? Well, here, maneuver we call this add function where we'll be calling it later on regarding its function and our returned. So when we call this add function, will be of course, adding this note to this non-function to add it. And then we'll call this add function will be adding the absolute function of our state. Has notes as the variable and TRA. And the AV node is going to add notes to this anterior. Now, since we want to preserve the previous notes, we need to keep them. And these three dots are a way of telling react that I want all the previous nodes as they are. And in addition to that denoted itself. So instead of adding all the previous nodes, what we can do is just add these three dots and the previous, which is going to indicate all the previous nodes that were already in this area. And in addition to this new node that will be adding. So that's it for them. Advocate will also have a delete function, so we need to add a note and lead to note. So now in order to delete a node, we need like an indicator to know which note to delete. However, we also using the AV node function to delete also. So the anode is going to be used to add and delete because the anode function is going to change the state of this array with or by adding something or by removing something. So you, as we move, this function is going to have as an input, the previous array that was already there before we change its state. And you returning something that is going to somehow delete whatever not good we need. Now, in order to know what note we need to delete, let's first go ahead and define our node over here. So previously we had this key title and content over now will be not using those. This final stage JSX, we are using something else. So will be mapping in a different way. Here. Instead of having only one note as a variable in mapping will be having a node and an index. So map on its own, this map function is going to map this note and give it an index according to the mapping. So this is something that you shouldn't or not issue and you don't have to know how's this indexes mean. Not just note that each node is associated by an index as special. Or you could just see it as a key. So it is only specified for this note. So each node has a specific index that is associated with. So now, instead of having key equals should note dot key, what we're really saying is key is going to lead index itself, duct. And we'll also give it an ID. The ID is going to be the index as well. And title and content are going to be c. Note the title and noted content. And now in order to delete, will be having a onclick function. Also I checked function. So whenever we check this content, note would be deleting it. And so we'll be calling this function which is delete. Now, of course, this isn't finalized, but we also need to go to the Node file in order to apply whatever we wrote over here. So let's go to our notes. Sorry, Node.js acts. And now what we need to add is a button that's going to be for the delete button onclick, well, I want to do is go ahead and call a function. So onclick, I'm going to call a function. And this function is going to do, it's going to take 0 inputs and it's going to go ahead and call the prompts that checked. So the unchecked functions that we wrote and the app.js apps. And we'll be giving it something to identify which node to be one. So let's go ahead and close this button and explain what's going on. So this should be over here. So this I'm guessing. We don't want this here. So let's go ahead and close this first. And then the button itself. Yeah. I think just the props dot on shirt. Yeah, we'll see why keeping good getting this in. Just this consistency. Now. Prompts dot unchecked needs to passing and viable. So let's just go ahead and open the app dot js X over here to understand what's going on. So here, this is the unchecked function that you are calling because we define that a node has a key id title content at unchecked. So this node has these props that are being passed to this function. And now we're accessing the props dot unchecked. And this prompts on chart is going to call the delete function. Now, in order to know which note you want to delete, we need to specify a certain special key that is associated with each node. And that is going to be the ID spear point past boy, a variable called an IT. And on order to pass it by, we're going to pass it back over here, props dot ID. And that way she could see that calling the function whenever we click on the on this button. So now, okay, So I'm guessing here we forget to close this. And that's just from the and just keep it clean. Okay, so let's go ahead and save that. So now we added these is the wavefunction for our note, the checks. Now let's go ahead and go to our systems. So we add all of these over here. Now what we need to do is go ahead and add something in order to begin to write. So go ahead toward page as you can see that now we don't have any user can write to create kind of a card or an area with a user could type in whatever note he or she needs. So go ahead and do that. So in order to actually do that, we need to create a new component which is going to be called a creed area, so that the new component, which is going to equal cold create area dot js X. And this area is going to be important. So of course, first act and the US State, since we'll be using States, cave. And let's go ahead and write our function. So function create area, discrete areas going, of course you have poor ropes. And now let's go ahead and first the note itself. So we'll be adding a state which has a node variable. And of course the set note and use state. And the initial state is going to be a kind of a dictionary, which is going to have a title, which is going to be set to until, and the content which is also going to be set. So before we had this nodes, the JSX, which had all these nodes that had titles and contents. Over now, we'll be adding this component which is going to have this note which is going to have its title and content. And whenever we want out it would be the adding it somehow to the notes and other JSX. We'll, we'll see how to do that throughout this video. So we first created our notes. Now, let's go ahead and write some functions. So one function's going to handling the change. So a handle. So change, of course will be having an event here. And we'll be writing that later, but I'm just writing the function itself. And we'll also have a function that's going to handle the submit form because we'll be adding a form. And as we previously mentioned, we don't want to submit forms because we'll let react deal with that and not the form itself by adding a request. So here will be preventing the default. So let's just go ahead and write for here. Event dot prevent default. Prevent default in that way. Okay? So that's also good. If we didn't have all functions will be, I think them later on. So now that word and other two function. So what we're returning a div, div. And inside of that div will be having our form. Let's go ahead and add this form. Now. Let's give this form or className. Just in case we want to refer to it. So Cree, note. And also met obviously we want to prevent the default, so on, so on. So that will be coding the submit function. Now, sorry, on the phone, we'll first have the text area. And of course the inputs. So the input and the text area. So sort of the cave and the texture that way. So inside of our input, we give it a name of a title. So name equals to total. And what else on change? Let's go ahead and handle change called the handler function that will be riding in a second. So the handle change and that way. And let's give it a value. So the value is whatever the user's going to write inside of this title. So value is going to be on the node dot title equals to. Note that title. And notice the one over here, and you can see the bed could access its title and content versus like a dictionary. So the value is whatever the US road and solve this title. What else do we have on this folder? Of course. Please holder, to title. That way. That's fully text-heavy. Now for a certain for input, now for the text area, Let's go ahead and say that onclick. We also need to do something. And maybe what we could do is maybe just whenever we want to write, the input is going to be over there. And whenever we click on the text area will make this input appeal. So let's, let me reframe what I mean. Let's make the cold box appear with only the text area. And then whenever we click on the text area, let this input appear. So let's do that using state. So we'll create another variable, and this variable is going to be cold, is expanded. It's going to have a true or false value. So x is expanded. And of course we have a function called set, Spanish and upbeat and US state, and we'll give it a notice. So US state and we'll give it a initial value which is going to be false. Okay? And let's get the thread function that's going to be called expand. This function is going to set that to true. So functional span is going to set expanded to true. So now here we'll be adding a Boolean condition. So of course, when it arrives inside of these parentheses and what it's saying is, so if it's true, we'll let this input appear. And let's just see this and remove it to have some space. And if it's fools, I don't want anything to appear, so I'll keep it not. And here, whenever we click on text area, we'll set this variable to true. So as expanded, sorry, we'll just call the function, which is going to set it to true. Now, let's give it a name which is going to be content. And let's also give it an onchange which is going to handle the change. Onchange. Sorry. Let's go ahead and handle the change. Also, the values whenever the writer, the user is going to write inside of the content to note dot content. And of course place holder as the title also, say, taken off and on. So in order to meet this input appeared, the cardboard must be ultimate bigger in size. So it's also change the row size. Whenever we meet this input, appear and make it expand action. So let's add this row variable. And this row variable is going to depend on the expanded. So again, there's expanded. If it is true. So we've expanded, we want three rows. And if not, we want only one rule. So three rows you could imagine like the arm with spoke to be larger and if not, it's going to be small. So this is for the text area. Now, we go ahead and export. So let's go ahead and export. Default creates area like that. Okay, so now we go back to app.js x and we need to add this new component. Subaru might be added. So we'll add it before the notes. So the other nodes, and then we add here and all other previous nodes are going to be to the right. So here, create suny to import it actually. Let's go ahead and first and portals create area. Okay, gerbils as values number. Let's see what's happening here. Function create area k. Let's see what's happening. You owe money to support it, to glow over here and see if still giving us, and I think it's still. So let me just shrink The SUM function creates. So guessing, that's what we're also doing over here. And it just fix those function ropes. And let's try now. Okay, we'll see why this is giving us our Yeah, I think it's just because we didn't use it yet. Okay. So here, let's go ahead and create area. Okay, Nice. So let's add the backslash here. Whatever, sorry, On clip. Whenever we click on this function, what we want to do is to add. So that's called the onClick function. And wherever we click on it, we want to add. Okay, so this small CM onclick, which will be defining. And let's just draw it and finished it. It is function since we only need to finish this function on this app.js cells. So note previous is going to return for us the previous notes, but will it be filtering them? So filtering them according to the First, let's go ahead and add the notes and ideas. So here, as we index, so note slash index, which is how we are defining mapping. And then we'll go ahead and say that maybe returning all the previous nodes that have an index that's going to be different than the ideal that is given to us. So here, whenever we call this delete function, we're passing by an ID that we want to remove. So we go ahead and get all the previous nodes by using the AV node function and will be returning all the other nodes in the previous notes, however, the filtering them to remove some notes or any specific OneNote which has an id then is equal to the index. So all DID, and all, all the nodes that have an index that is different than the idea that we have, we'll be returning to that. However, if it has one that is equal, we want, we literally get, and this is how we are actually deleting the specified notes. Okay, so now that we've added this, let's go ahead and. And go to our note that JSX. So I think we need to go to Create area because area would be adding. And we said that onclick, we want to add. And until now we don't have this onClick. So first let's go ahead and see how it's looking. And let's go ahead and explore some new iced of the cricket bat. Unique or peach, look nicer. So here is our Notepad. Now, here is our trigonal car gutsy. And now if we click, nothing's going to happen to us. We still haven't readin the add function, not the, but the onclick event. So let's go ahead and add some buttons like plus burden stuff. It all to do that we'll be using some packages which are called NPM, NPM, sorry, material, you are core material icons. So in order to do that, we'll be opening a new tab. So you need to compete previous PRB thing. Let's go to pH, which is okay, and just copy the path. So copy paste and open it over here. So CT and npm install and install these packages. So if you go down, you can see that you can install them with MPM using this copy. We need to cool just spoke. And meaning for the semen but with the icons. So such items. So let's just wait until it's installed and copy it again. So npm install. Now let's go ahead and say I can stir and let's go ahead and install that as well. Okay, salami reference told them, let's go back and use them over here. So inside of the Node.js works. Let's go ahead and delete outcome. So here we said that we want to on July to click on this button, is clicked. The button by adding agent biking, which is from the material by shrinkage. So delete icon like this, and we need to put it. So pull delete icon. And it's going to be Forum at material, ai slash icons in its Freud, the name of smoking she's going to delete. Okay, now we did that. We could also add in the Hadoop some nice items. Important highlight, ICU, high, light material, slash, slash highlights. So high. Okay. So it's not been found. Let's see what happens. Let's go ahead and added beside notepad. So here, That's this highlight item. Let's close it down. Let's go ahead and refresh your page to see if this is actually working. So first module not found, so it's not this one. Let's go ahead to icons and see if that's I think documentation or icons search could help us. So search highlight, this gives us, Okay, I think it's just called highlights without the icon. Okay, so go ahead and write like this initial page. Okay, you could see that we have this highlight icon over here. Let's go ahead and continue. With what we're adding. So we add this. We added also the delete, which is not yet visible, which is over here, the elite. I can almost go to the Create area and fix it in order to make everything visible. So let's import re icons. So first, I can forum. So that material, okay, I can slash will be adding the and like. So you have this Add icon, so I'll call it, I can call it whatever you want. Important. And actually no, we cannot call it whatever we want. We have to see what name it is. If it doesn't work, we'll double-check the name. Also from material. However, this is good to be a cool slash and pulled from. So also, and we'll see what each of these, so this is going to also call such soup. Okay? So, okay, so this is an average. And let's go ahead and other gases like a plus sign. It's like a gooey material that you get found. The Zoom and are like more like transitions shoulder and see what they do. So Zoom, so this is soon. So these are the properties of Zoom. It has children appear using proper, but will be only using the probe. And if this improper is true, then the component is going to transition. So whenever this is true as a, so this won't be transitioning in and we'll be using the as expanded variable to refer to this. And so this standard is going to tell us if we want to zoom in or not. So if it's expanded is true, then we want to expand. The z2 variable is going to transition. And if it's false, then we don't want it to transition. Now, as for the fall happen component that we'll be using, one of its properties. And this property is going to be the onClick. So pharmacists like like current, that is going to give us a really fancy way to make our notes appear in a good way. So when your hand and just go ahead and add them and see how they will eventually look. So let's go ahead and atom. And you'll be adding them over here, right below the text area. So Zooms won't be here soon. And as we said, the properties, sorry if it's expanded as true and properties going to be true and vice versa. Now inside of it will be adding this fabulous color. And onclick. See what we want this to happen. So onclick, we want to call a function. So this function to be using arrow function over here. And we'll go ahead and call the props dot onclick, know. So this is going to be the small Click that we are actually calling. And an app.js apps. So here, this onclick, which is increased area, is going to call the add function. And so this onclick is over here. So you can see with that. So we need the props dot onclick. She's going to pass in the note. And where did we get this node from? It's from over here. And whenever we, whenever we click on this component, will be calling a function called onclick, which is going to pass in a variable called note and overhear. And adolescents, we are calling this function. And it's going to pass in the notes that we added over here. So basically this note is bone is being passed by two other JSX to the add function. And now that we've added this to our notes list, we need to reset. This car to empty so that users could add another nodes. So here will be setting the title again to be empty and the content as well. And that way, so we're resetting them, reinitializing then if you want to say, okay, and now that we've closed, T3 could add the icon note over here. So I can go over here and we can just close it like that and said. Okay, not that way. Okay, so now let's go ahead and see how our pages going to look. Now. Brush. And this doesn't look good. But let's see, Let's see if we have actually some over here compiling. Okay, so it's still compiling. Let's do something while it compiles. Okay? So basically you add it goes 0 so the handle change. So let's go ahead and do that. Okay, So here, whenever we click on the title or content, what we want to do is to first save trouble with clicked on. So since we have a dictionary of title and content, will a 106 out here. So value name and valuing is not going to be text content. So I'll make that purines seconds here. Event targets. So what are we doing here? So here comes, sorry. Yeah. So here what we are doing as whenever we access this target event, the target is like me, call this function which is handled changed. And then this is going to be called whenever we have an event and that event is the change. And this change has properties, and one of its properties is the torque. And this target has a value and mean in that way. And what we want to do is go ahead and set note. And we want, so here we have a primase. So this is not set notes, the suicide note is a single node. And what we want to do is go ahead and return over here this Bible, whatever was previous and then name. So let's explain what we did over here. What we actually did this, that whenever we have a change, whether it's the title or the content will be calling the same function, the same function which is called handled change. We will be getting the value and need. And you know that this note, so sad note, is going to change the state of note which actually has two j's, actually a dictionary which has two keys, the title and the content. So here what we are saying is that if we change the title, we want to keep the content as it was. So previous keeps the same over the thing that we changed, which is in that case the title name is the name says title. It's going to change according to the new value. So if we change the title, here will be having a title with a new value, which is whatever we wrote over here. And if we change the and the area or not the area, the content will be changing the content with the new value of the content. However, we'll be keeping the title. So the previous refers to everything else than the title which is content, and vice versa changing content, this is going to refer to the k. So we're done with our page. Go ahead and see what Julie ropes is not defined in Crete period. Sex. So create area. I think I did actually remove prompts previously. I don't know why you're wrong and what we don't know. Let's remove it. Okay. Sorry, I did that by mistake. So now let's go ahead and refresh our page. So now this is still giving us bucks. So let's go ahead and see why. So it seems that the problem is from Crete because whenever we click, something wrong is happening, we are handling a subnet group preventing it full. I think it's because of this. So usually I think that's a poem. Here. This. Let's try it now. So click OK. You can see that now have the title. Now let's add some styling. I've already added some style of you. Just point to uncommented. So here, just like that. Now let's go ahead and see how it looks. Nice. See that now we have taken note. See that now we have this Add icon. Let's add a total C note pad without. And you can see that now we have Sarah and load path, and it's added over here and denotes array. And if you click on this delete contribute. So I hope that this, this application was pretty useful for you in order to get more familiar with states. Are actually, in the next video I'm talking about the product is going to be a really nice project that's going to make you make sure that you've understood everything throughout this course. So I hope you like to project. See you in the next video. 19. Project: Finally, we reach the last part of our course, which is the project. And this is the most important part because in this part of the course, which is the project, you'll be able to test your knowledge and see if you understood everything. Now the project is really simple. I want you to recreate one of the projects that, or applications that we've gone, which is the applicant Notepad application. So as you recall throughout the course, we have three parts for this application. And each part we introduced some concepts. Now I want you to recreate one of these projects and if you can do them all, that would be great. And if not, just do one of them. And you have all the videos as a reference for your project. And let's go ahead and just open the, the browser again just to remind you of how this application looked. So here is the Notepad application. It's pretty simple if you understood all the concepts and have this title, take notes, or you could write anything and just added and it reacted as newt. Now, Let's just go through a hat. But the components you need. So make sure that you use the app component, the Hadoop components, component, one component. And if you are up for the challenge, try to create the creek area component or your own. And as I said, you have all the we use as reference. And I'm going to also add through the project part of this course all the code that we've written so that you can go through them if you got stuck somewhere. Good luck on your project. And if you have any questions, please don't hesitate to ask me. Good luck, and I hope you really enjoy this course.