React Fundamentals For Absolute Beginners | Build Your First Portfolio Website

1. Course Introduction: Hey, there. Welcome to this course on react fundamentals. I'm Fazal, an entrepreneur and a technology enthusiast who is passionate in helping you master modern technologies that can help you make yours and others life easier. Now, in this particular course, we are going to cover the fundamentals of react, and there is a broad range of topics that I'm going to touch upon in this particular course. So we'll begin. So I have this syllabus over here, first of all, I have the benefits of the course as to why you should take this course. Now to begin with, we will start with the overview of react, what react is and web development. So we'll get a complete overview of how things work when you're working with react. Would be doing a project setup, right? And for project setup, we'll be making use of VS code and Wheat. These both are like production trade tools that are being used when it comes to web development. So we'll be learning about them. We'll uncover GSX. Now, what is GSX and all if you've never heard of these terms, don't worry, I have you covered inside the course. This is just an overview that I'm giving you with the topics that basically you need to know. Okay. Then we'll talk about the components, props, callbacks. So all these concepts I'm going to touch upon. Then destructuring and spread syntax. So how you can make use of destructuring and spread syntax, which is a JavaScript concept with react or react web applications is what I should say. And then we are going to have a hands on project wherein we'll be taking all our learnings and we'll be implementing it to build a portfolio website. Now, this portfolio website is going to give you a complete practice of whatever you have learned in the entire course, and it will give you enough confidence that you can go out and build things with react. Now, while learn from this course, there are a couple of benefits. Number one, hands on lecture. So I understand when it comes to learn technology or development, students prefer hands on lectures, minimal use of slides. So I hardly use slides. I make sure everything from the Ovie of react, web development until building the portfolio website. Everything is covered in a hands on way. Now when I talk about Ovie of react and why react is actually invented and why it actually exists, actually give you examples in the browser as to how what are the things or what are the problems that were there before react was bought in, and when react came in, how it solved those problems. So all of this with live examples. So that's why I've said that the lectures are hands on. We spend most of our time in the browser and the IDE. And then we have a closure with the help of project. So this is one of the important benefits wherein you also get to build thing in the end, which is a portfolio website. So that's the overview of the course, and by the end of this course, I can guarantee that you're going to have a strong foundation with react, which will give you enough confidence to go and learn much more advanced concepts with respect to web development. Also, this particular course comes with a project which you can check out in the project section. And in the end, after you're done with the course, you can do the project and submit it and share it with the entire class. So what are you waiting for? I shall see you inside the class. 2. Introduction to React: Hey, there. Welcome, and let us begin talking about react. So we'll talk about what is react, why such a thing exists. Okay? So here, I'm on Google, and I'm going to simply type in react. So the moment you type in react, you're going to be presented with this official website of react, which is react dot F. Now before visiting the website, let me talk a little bit about what react is. React is a library, as you can see over here in the description, and it is a JavaScript library. If you are a little bit familiar of web development or if you are computer engineer, you will know that web essentially consists of SGML, then we have CSS and we even have JavaScript. Now what is HTML? HTML is nothing but the building block of the web. So if you right click on anything over here, like any element, these are all elements, right? So if you right click on any of the elements, if you say inspect. I'm on Chrome and I have this option, inspect. And let me take this down. You are going to see all the code over here. You can see all the HTML elements here. If you're over on any of the element, you are going to see the corresponding HTML element being highlighted. This is a DIF. HTML essentially consists of tags, you can see over here, DIF tag. Then we have H two tag. These are all in built HTML tags that browsers understand. These are modern browsers that understand these things. Okay? So this is HTML. What is HTML used for? It is used to define the elements. Now what happens is defining the elements is not enough. Okay? You need to beautify them. For example, here, you see this react is being highlighted in bold, right? Why is it being highlighted in bold? Because I've searched for react. Okay? There is a particular styling for this, right? You can see this is being highlighted like in light gray, which is a little bit different from this thing over here. This is a link, right? So this is being highlighted differently. So if I right click over here and if I inspect you'll see this is H three and A tag. Here you can see A tag. So in HTML, you create links using the A tag. Now if you expand a bit, here is where you will see all the CSS. You can see. So A tag, this is the A tag, and here you can see the CSS, the color is defined as blue. If I change the color to let's say pink, red, you'll see the color is being changed in the browser. You can see this is completely real time. If I want to change this to let's say yellow, which color do you want? Okay. So you can change the color. This is how beautification is being added to web pages. Okay. So you can see, beautification is being controlled by CSS. What this code is, you can see over here, this code is CSS. So you're saying for A tag. Now what is A tag A tag is over here, which is if I hover on A tag, you'll see the corresponding tag being highlighted or the corresponding element being highlighted on the left, when you hover on the tag. So it's the react, this react text. That is what it is. Here you have CSS for the same. A tag, it says all the etag. I I hover on Etag, you'll see all the e tags being highlighted on the left hand side, right? So that is where all the tags are being used, which means that is where all the links are being rendered because these are all links, right? So I want all the e tags to be in this color. I don't want any sort of text decoration. That is what you're defining over here. Okay? Cursor is being changed to pointer. So if I hover on this, you can see the cursor is being changed, right? It's being changed to a pointer. I can disable that. Okay. Okay, it's not allowing me to override that, but that's fine. The point is to understand what CSS is? You can see that live over here, right? So I'll try to bring it to the default color. It was something like this. Okay. Yellow and green is not looking that natural. But you understand, this is CSS, right? Then you have something called a JavaScript. Now what is JavaScript? JavaScript brings in life to the web pages. So any sort of validation you want to do in the web pages, any kind of pop up you want to show, you can do all of that. Okay. So if you want to see JavaScript in action, we can go to Console tab over here at the top. Okay. And this is the browser Console. So here I can say alert, and I can simply say hi here, something like this. You can see hi. This is the alert. So any sort of validations, pop ups or any sort of dynamic things you want to do, you can make use of Ja Script. Okay? So Ja Script adds life to your web pages. Okay? Now, what is react React is a JavaScript library. Okay? Let us head over to the website of React and let us understand why this thing exist. 3. How Web Worked Before React?: Now, let us understand how web used to work before react. Okay? So what used to happen is, this is a web page, and you have different interactive elements over here. I can click on the NAF Bar and I can go to another page. Now, when you load a web page, HTML is loaded, CSS is loaded, Ja script is loaded. Now, when you switch over to another tab over here, again, the entire thing is reloaded. HTML is reloaded. CSS is reloaded and Jascript is reloaded. If I go over here, again, everything is reloaded. Click on Community, again, everything is reloaded. So this is not efficient. You know, every time, even though CSS and Jascript does not change and it's constant throughout the side, we are reloading it. Okay? And this is not good, right? This is not the efficient way, and we humans love to be efficient, right? And that is why react exists. So I'll tell you how react is different. So react is used to make single page web applications. What does that mean? So what happens is you have this web application this is a web application. Is a web page. It's a web application. It is going to have a frame outside. This is a frame and inside, for example, it is going to have components. For example, search is a component. These tabs is a NAV bar component. You can create a NAV bar and you can add four buttons over there. Okay? This button is also component. This is also a component. Then the center part is also component. This entire page has a frame and within this frame, you have components inside placed. Okay? Now, what happens is, if you want to switch over to learn over here, you can see the top thing does not change across the website, right? So why do you want to reload this? You don't want to reload this? You can just reload this bottom part, right? So with the help of this component based architecture, this became possible. So instead of reloading this entire web page, even though Navbar is constant, you are reloading that entire thing, right? It is not efficient, right? It is consuming your data, it is consuming network activity. It is also consuming processing power. It is not efficient. So that is why this component based thing came into picture where only the component where there was a change used to be reloaded. So if you go to reference, only this part will be reloaded. If I switch to this, only this part will be reloaded. So that is what is a single page application. So it is actually single page application like one page, and the components are being reloaded. Okay? And they are being reloaded depending on where you are interacting and how the application is built. Okay. So that is what single page web applications are, and react is used to make these kind of single page web applications. Okay? So what reacts allows you to do is here you can see, it allows you to create components. Okay? Now, like I said, here, this thing is a component, this thing is a component. All these things can be components that you have defined, and then you can have a frame, and within this frame, you can load all the components. That is what react allows you to do. Okay. And why does it allow you to do? So I just explained. Because if you go to reference, I'm just reloading this bottom part. I'm not reloading this Navbar. I'm not reloading this message at the top, right? Only this bottom part is being reloaded. If I click over here, only the things on the right side is being reloaded. You don't need to reload the entire web page every time, right? So that is what react allows you to do. It allows you to create components. You can create components, okay? So for example, you can create search bar using re you can create Navbar using react, and then you can define a frame, and within that frame, you can assemble all the components in whichever way you like. Okay? So that is what this thing talks about. Okay? So it lets you build user interfaces out of individual pieces called components, and it also has an amazing demo here on the website, okay? So this website might change the interface might change depending on when you are watching this video. But right now I'm seeing this kind of an interface on the website. Okay, if you come over they have this amazing example. Don't worry if you don't understand this code. What this thing is trying to highlight over here is there are components here. You can see this is an interface. Our interface that you want to show. This is a video thumbnail. Then you have the video title, description, like button, and so on. Okay? Now, here what you've done is you have created a component called thumbnail, so you can see here thumbnail, right? Then you have created a component called button. Like button. You have a component called video. You can see. This is the entire component video, you can see, right? So this is reusable, as you can imagine, like button, if I want to use at some other place, I need to just make use of this tag. Okay? Thumbnail, I need to use a another place, I can just make use of this tag.Tomorrow if there is any change in the thumbnail, I just need to make that change at one place and it's reflected across tab. Tomorrow if I want to change how the animation of this button works or any sort of UI change over here, I want to change the color of like button. You just make change wherever you have defined this button. Wherever you have defined it like button, you make that small change and you save it, it's deployed across the app. That's the magic. Reusability, as you can imagine, is one of the major things that is coming across. You can see over here. Okay. You can see whether you work on your own or thousands of other developers, using react feels the same. It allows you to seamlessly combine components written by independent people. And here you can see, this is amazing, you can see here. Using little bit of JavaScript, it has rendered. You created a video over here. This was a video that you created and using JavaScript, you're rendering video three times, you can see. Three videos. Okay? And syntax, this is a markup syntax that is known as SX. So JSX is something that you will hear often when you're working with react, okay? So this is about react and how it works. Okay. So I would encourage you all to just go through this website. Also, to give you one more example, a little bit interactive one. We can go to earn over here. And if I scroll down here, you can see this. Okay. So here, what we have done is essentially we have created a function. So this is a function that is returning button. And let's say this can be any button. So right now, it's a very simple button, and it says, I'm a button. Okay. But let's say if you need a sort of button that is specific in UI and message to your application, you can define it like this. And here, what you have done is here, I'm like, rendering this button over here. You can see my button. So I'll tell you what happens is when you are developing with HTML, you have inbuilt tags. You have this H one tag, you have H two tag, you have H three tag. And every tag has a meaning, right? H one tag has a meaning, if you write anything using H one tag, it is going to be shown in this way in header. If I replace this and this is like a proper editor, so I'm allowed to change the code over here. So if I change this to H two, like so, you can see this will show things in a different way, okay? The font size is a little bit smaller, okay? So every tag that is inbuilt in HTML has its own meaning. So here you can see this is our own custom tag. So react allows you to create your own custom tag here. We have defined our own custom tag, My button. This is the function, M button that we have defined. What is the definition of MyButon? This is the definition. So whenever you are calling MyButon we are calling Mbiton, we are using Mbiton over here. Whenever you are using My button over here, this is returned, and this is replaced over here in a way. So, this entire thing is being replaced over here like this when this is rendered into the browser. I'll just do Control set. I can even prove it to you. So if I right click over here and say inspect, let us see over here what's happening. So I'll just take this down a bit. I'll scroll towards right. You can see. Here you are not seeing my button. So here actually we are writing Mbton in the code. But here you are not seeing Mybton. Here you are seeing this code being rendered. You can see So what is happening is wherever you are using My button, during runtime, this is going to get rendered. The definition of M button is going to get rendered. So let me replicate this. I'll replicate this and you can see one more button was added. Okay. Now if I change the definition, I am A, let me say I'm awesome button. You can see, it's reflected everywhere. Can you imagine this magic? Like you change at one thing, you change at one place. I'm sorry, you change at one place and it is reflected across the application. So if you have any sort of custom buttons, custom likes, imagine building Instagram. You're using button at several places, right? And you have that theme to maintain. So you create a component. Okay? You use it at several places, thousand places you use. You need to make a change to the component. No problem. You come and make a change over here. And it is reflected across the application. Okay? So this is what you can make use of this component any number of times. I can just keep on rendering this and you will see you can see the definition being substituted over here. So this is the benefit of react. So like we understood this, react promotes the usage of single page applications. You can make single page web applications. You can essentially create your own components. You can reuse those components. So it promotes reusability. It allows you to maintain your code easily as well. So if you want to make a change, you make change at one place, it's reflected across. So it keeps things tidy, okay? Also, react is very popular these days. So if you search for react salary in your location, wherever you are from, you can see, so this is payscale.com for United States and you can see, this is the salary right now that is getting paid to react developers or even full stack developer are being paid well. There are a lot of jobs that demand this skill set, and it's important that you learn this as a software engineer. Whether you are a backend engineer or whoever you are, these days, react is also being used to create mobile applications. Okay. So yeah, it's really important that you understand this stuff and start building stuff using this technology. So this is react. Now, how do we write code in react? So to write code and react, you need nodJs. Now, what is nogs? So nodGs is nothing but a Jascript runtime and it lets you execute Jascript code on the server side. So that's something that we need nod Gs. We'll also need something called as NPM. Now what is NPM? So NPM is nothing but a package manager for JavaScript, okay? It is used to manage the different packages that you use with JavaScript. Like, it is used to install libraries, tools, frameworks. So if you want to make use of react, you need to make use of this package manager. Okay. Also, we will need something called as Visual Studio code. So this is going to be the IDE, okay? And we are going to make use of this and it has a wonderful support for web development as well. So we are going to make use of Visual Studio code for this. So coming to our browser, what we are going to do is we are going to head over to Google and we are going to search for nodeGS. This is something that we are going to need. I'm going to click on this and you can see over here. This is where we will need to install the node JS. You can download the NodeJS LTS version. You can download it from here. And you can even go to download page. And if you need anything custom like for Windows, Mac, you can get the selection from here. Okay? Installation process is very straightforward. You download this like any normal software program, and you just follow the setup and installation instructions. Okay? Once you have downloaded, what you can do is you can come over to your terminal and you can verify whether the installation was successful. So you can say node hyphen V. You should see this version being printed. So your version number might be a little different from that of mine. Because this might depend on when you're watching this video and whether there is a newer version available. But don't worry about different version number. A number should get printed. That is what you should worry about. Then you type in NPM. So we need this node package manager as well. And you can say hyphen. So this should also print a Vosion number. It's okay if it's different than that of mine. But we need these two things to be installed on your system. So one is node JS, which is the JavaScript runtime, and then we have NPM, which is a package manager. Just be sure that you have both of this. 4. Creating Your First React Project: Hey, there. So now it's time that we begin creating our react application, and we're going to do this with the help of the command line. So first thing first, what I'm going to do is I'm going to head over or navigate via the command line into the project folder. Now what I mean by project folder is it's a folder of my choice where I wish to have my react projects organized, okay? So what you can do is you can head over to the Finder. Like if you're on Mac, you can head over to Finder or if you are on Windows like me, you can head over to Explorer, Alright and create a folder in the location of your choice, you can call the folder, whatever you want to. I would name it react. And then from the command line, you can just navigate to the location where you have created the folder. So I've created this react folder here at this particular location, and CD is the command, which is change directory, and it is helping me navigate or head over to this particular folder or to be in this folder from Command line. So now I'm in this particular folder, I'll clear everything else. All right. Now in this particular folder, I'm going to begin creating my react application. And for this, I'm going to make use of NPX, okay? Oops. So I have already created a few react applications before. So you can see this suggestion over here, okay, but there's nothing I can do about the suggestion. Okay? But ignore this suggestion for now because what this particular uh terminal does is, whatever it sees in your history, it just keeps suggesting you, which is good. Showing you the entire command, that's completely fine. So NPX I'm going to make use of NPX, okay? Now, NPX's a syntax right. It's used to execute the node packages, or it is used to execute the packages. And then we are going to make use of Create react app. All right. Now what is Create React app. Create React app is sort of a tool which helps you create the entire react application. Now, why are we making use of this? Because the react project has to be organized in a certain way, it needs to have the SRC folder, it needs to have some files, and all of this come together and they enable you or they enable your application to work in a seamless right? So you can go and manually create those files as well, but this is a tool that enables you to create to create or set up the application structure in the right way. Okay? And after this, I'm going to just mention my application name, so I can call it MyRact app, something like this. Okay. And what I can do is I can simply press Enter. The moment I press Enter, what this is going to do is it is going to create a folder in this particular location. So in this particular location, it is going to create this folder. Why is it creating a folder in this location? Because I've navigated to this folder from the terminal, and this will be the folder name under which all the files of my react project will exist. Okay? So you can press Enter, and you should see some sort of processing happening. So you can see creating a new react app in this particular location. It is installing some packages, and this might take a couple of minutes. So it is installing it is also telling you what it's installing. It's installing react, react Dom, react scripts, and everything, everything it needs. So we'll wait for a while until this entire process is complete and we see a confirmation. So I have got the confirmation, and I also got a minor message. Okay. So by the time I started recording this video, there's a new minor version, it says of NPM that is available, and it's asking me if I can upgrade. Okay, so I'll upgrade later. You might not see this, okay, but yeah I'll just ignore this for now. It's just a upgrade notification. You can see the confirmation over here, happy hacking. All right. And if you scroll up over here, you'll see the entire process of what happened. So we executed this command here. Oops. Let me scroll up. So we executed this command over here. Okay? If you come over here, you can see it added so many packages. It took 36 seconds. If you come here, okay, it has said success created this particular application at this location and inside that directory. So you need to navigate to this directory, and inside this, you can run all these commands over here. Okay? Now, once you navigate it has given you ready made commands like NPN start. It will start at development server. So the react application that you've created comes with an embedded inbilt server. You can run you can run this command to bundle the application and into static files, basically for production deployment, this will start the test runner in case you want to run test cases, NPM run eject. This is something that you can run. So the suggestion is, you can start by executing this over here. I'll copy this. Okay? I'll paste it over here. I'll head over to this directory, okay and then it is telling you NPM start. Now, this is a command using which you can start a development server onto your local machine. So I can run this command as well, okay? And you could see the application up and running. So this is the application, okay? You can see the browser automatically opened, and you can see, this is the application that is up and running. Now, this is a server, which is showing you your content which is executing your react application into the browser. Now, any change you make into the files, you'll see live reloads happening over here. All right? Now, you can see the message over here, like you need to edit this particular file and save to reload. Okay? So this interface is coming in from this particular file is what it says. And if you click over here, this is the link to the official website of react. That is what it has linked to. Okay? So you can go to that website and check out or read some stuff as well. All right. But a few things I would like to mention over here is once you have started the development server, you can stop it by pressing Control and C on Windows or Command and C on Mac. Okay? I'm on Windows, so I press Control C, and you can see it terminated this particular job. And here now, you come if you try to refresh, this is not going to work. Okay, because the server is down, right? Now, in order to get your server up and running, you need to run NBM start within this particular folder. Okay? Only then your server will be up. So while development while doing development, you can keep the server on and actually modify the files and save and see the changes happening live. Okay? Now, I will a bit more about this command. So we created the react app or the entire application using this particular command. Now you can also add options over here in the end. Okay? So what you can do is you can make use of templates over here. Okay? Now, let's say when you're working with react, you also want to make use of typescript. Okay? So if you're making use of typescript, you can add something like this. You can say template over here, and you can say type script. I'm not going to run this, but this is just an extra information. What this will do is it will make use of the typescript template to create your application, and it will add the typescript support right from the start, which is helpful if you're working on a larger project that can benefit from strict type checking. All right. So you can make use of this command in this way, all right. I hope this command is clear. NPX create react tap so we don't have the server open running, but you can now restart the server again by saying NPM run NPM start. I'm sorry. So it's NPM start, something like this. And if you start it, it will again start the server. All right. So I hope this is useful and I hope you have been able to follow along. 5. Installing Visual Studio Code: This is our first react Based application, which we created, okay? Or I should say we did not create. Okay. So this is automatically generated project using Create React app. Okay, and it's also giving us some hint over here. You can edit app dot qs and save to reload. Okay? It has a link to learn react, which will take you to the official website of react. All right, so far so good. So this is our application up and running. Now what do we need to do? We need to start coding and modifying things. And what are we going to do for that? We are going to install an IDE which is the ID Visual Studio code. Okay. So this is what it looks like. If you already have it on the computer well and good, if you don't, then head over to this official website. It is a free tool. It's free, built on open source, runs everywhere. Since I'm on Windows, it's prompting me to download a stable built for Windows. You can switch to whichever operating system you need to. But if your operating system has an installer over here, it is going to automatically. So if you're logging in from Mac over here, it is going to show you download from Mac. Okay? So whichever platform you're opening this from, it is going to show you that button and you can go through this if you're not aware of what visual studio code is. But just download and just install it like any other software program. I have it already installed, so I won't be showing you the installation steps, but installation steps are not at all complex. It's very simple and straightforward. 6. Moving to Visual Studio Code: Now, once you have successfully installed Visual Studio code, you would see a page like this. So if you open Visual Studio code, for the first time, you'll see this Welcome page. Now, I have been a Visual Studio code user for a while, okay? And you are seeing all these recent projects. So it's likely that you won't see the list of recent projects unless and until you are a user, okay? But since I'm a user, like I said, I'm seeing the list of recent projects which I have used or created in the past. Also you'll see these options over here, new file, open file, open folder, Clone Git repository, connect to all of this. It's a very useful tool. Visual Studio code, I use it all the time. Now, to open the project, you know the folder, where you have created the project. So you can just click over here, Open folder and you can navigate to the folder location where you have created the project. Alternatively, if for some reason you are not seeing this, you can go to file from the menu options here and you can say open folder. Both are the same. So what I will do is I'll select Open folder. I'll navigate to the directory of my choice, and I'll open the project over here. Now when I selected Open folder, I saw this folder window, which is exploer navigate it to the folder where I've created the react app. And I'll select this particular folder. This is my react app project that we have created. Inside, you'll see a few files, but you need to select the root folder. I'll say select, and it will open this particular folder for me. Now I can close this welcome page over here, okay? So you can see the project over here on the left hand side, okay? You can see this entire folder. If you expand this, you'll see the files within. Okay? So when you executed the command called Create React app, okay with Create React app, it created all of this for you. You can manually create it as well. But as you can imagine, this is going to be very tedious, right? So that particular tool, Create react app does the job for you, wherein it sets up the entire project structure for you. Okay? We'll go through this project structure soon, but for now, what I would also like to explain is we have the server up and running from the terminal. Now, what I can do is I don't need to make use of an external terminal. Visual Studio code has a way wherein I can actually have a terminal within Visual Studio code. This way, I never have to leave Visual Studio code and switch to a local terminal. Here at the top in the options, I will see terminal over here. You can say new terminal, and you can see this is an integrated terminal inside Visual Studio code. And if you say PWD, which is present working directory, the terminal is automatically opened in the folder which you have opened inside Visual Studio code, which is the project folder. So you don't need to navigate also, you don't need to run command, CD, and all and navigate, this just works like a local terminal. So here, I can say NPM start over here. The moment I say, I'll get an error, you can see, something is already running on port 3,000. And what is running, our application itself is running, and it is asking us whether you want to run the app on another port instead. I don't want to do that. I'll say no. Okay, and it will just stop the execution. Okay? But what I'll do is I'll for shut this server because I no longer want to make use of an external, you know, external terminal over here. Okay? I want to stick to the visual studio code provided terminal, and I'll NPM start, and this should now run the development server for you. Okay? So this way, what we can do is I'll move this to a new Window. So here we are in the new window, and I have Visual Studio code running in the new window. So this way, I don't have to leave Visual Studio code ever. I can even minimize this over here like this. Okay? I can even create new terminal from here, so you can see plus, and you can have multiple terminals running over here. Okay? It's very useful, and this is the reason why. So these kind of tools that Visual Studio code provides, that is the reason why it's loved so much in the developer community. Now, I'll also show you the list of extensions that I have. So here, if you go to this extension tab on the left hand side, you have some options like search, you have source control, run and debug, all of this, okay? I'm making use of Docker also in some of my projects, so you can see Docker over here as well. But you might not see this. Okay? This needs a separate extension, okay? But if you go to extension. Now what are extensions? So extensions enable you to enhance or extend the default functionality that Visual Studio code already provides. So you can see, I have extension for Jupiter notebook. Okay. Whenever I'm coding in Python, and if I want notebook support, I make use of this extension. Okay. So I have this extension. This is not needed for react. I have Python extension. Okay. Now, this auto renamed tag, this could be helpful for react because, you know, if you are renaming a tag, okay and if there is a closing tag, what this will do is it is going to rename the paid version of that particular tag. Okay, so this is something that you can have. It's helpful. For example, if I have to give you an example, let me give you an example. So let's say if I create or let me open some file over here. Okay, let me open an HTML file. Now, this thing over here, you can see, let me go over here, scroll down. So this title has an opening tag and a closing tag. So because of that particular extension, if I rename the opening tag, you can see the closing tag is also being renamed. Okay? So that is the benefit of this auto renamed tag. You don't have to rename the opening tag first and then rename the closing tag, right? Beta colorization, as you can make out from the icon itself, it is used to it color highlights the closing pair of the bracket. This is useful if you're making use of a lot of brackets in your Okay, Debugger for Java, dev containers, jango doco all of this I use for other languages, extension back for Java, gradle for Java, Intel code. Okay? This is for AI assisted development. This is also for this is Intelicode API usage examples. Okay. I have some for Python. So these are all Python related. I'll scroll down, a live server. We don't need this Maven for Java. This also is not needed. Prettier is something that you can use. This formats the code. Okay. I organizes the code for you. Okay. And yeah, this is what we have Okay. I will also add some extensions right now over here. Okay? So what you can do is you can search for react code snippets over here, something like this. Okay. Okay, so you can search for ES seven plus react, something like this. And you'll see this extension with almost millions of installs. So this is 12.9 million as I'm recording this video. Of course, this will keep on increasing and you might see a different number when you're watching this. So this is extension. This is the name ES seven plus react redux react Native snippets. Now, what this does is it gives you templates, okay? Like, for example, if you want to create a function, so you can say RAFC. You can just type in that and it will give you the entire function definition. Okay. So these kind of shortcuts it has, which helps you save time. So you can install this. I'll just click on Install and add it to my list of extensions. Okay? So yeah, we have it installed now, okay? You can explore more react plugins or extensions in the marketplace over here and you can play around with it. And you can enhance the default functionality that Visual Studio code already provides to you. All right. So yeah, that's about setting up Visual Studio code, and I hope you found it useful. 7. Exploring the Project Structure: So now it's time that we begin understanding the react project structure. Now, when you open or when you analyze the react application that you have created, there are lots of files that you'll see. Some of them are folders as well. Okay? So here you see this node modules folder. Okay? And what is node module? This is a directory that contains all the NPM packages, like libraries, dependencies that your project relies on. And you generally during the course of the development of your react application, you generally won't need to interact directly with this particular folder. Okay. So yeah, this is something that is there, you need to know what it is, but you won't be working on it. Public folder. Now, this folder houses all the static files like the main index dot HTML, which contains the root div where your react tap gets injected. Okay? If you don't understand that, don't worry. I'll explain that, but this essentially has a list for all the static files. Like you can see the fabrican you can see a couple of logos, manifest Jason robot dot HD and index dot HTML. Okay. Now what is index dot HTML? Now, this is the file where your react application is being injected. So here, this is the standard HTML, you can see, okay, everything. And here, you see title as react tap. So when you run the application, you see the title as react tap. If you change the title, I can say react app changed over here, something like this. And if I save this, if you come over here, you'll see react app changed, right? And whenever you make a change, the server reloads itself. So if I add three thoughts, and if I save this, you'll see this got refreshed, right? And if you come over here, the changes are immediately reflected onto the browser as well. So I'll get rid of this. I'll save this, and if you come back, you'll see it's react app now, right? So this is the file where your react application is being injected, okay? And here, if you see within the body, you are having this DIF. Okay? Now, we are making use of this root div to inject the react application over here. Okay? And how we are doing it, I'll explain that shortly. For now, just understand that index or HTML is a file where your react application is injected, and it is there in the public directory. You have SRC folder. Now SRC folder is the folder where all the magic happens. It contains all the JavaScript files for your react component, style sheets, images, all of that exist in this particular folder. So essentially, all the source code related to your react application that you'll be working on resides in the SRC folder. So you as a react developer, you'll be building application and you'll be spending most of your time in this particular folder. Okay? You have Get ignore, of course, if you have configured it over here, package log package JCN. Okay? So this is the JCNFle. So you can say that this is the heart of the project when it comes to node package manager, NPM, okay? So this is a file that is going to list all the dependencies that your application is using, okay? And depending on what dependencies this particular file has, okay, all the dependencies are going to be fetched remotely and being added to the node modules folder. That is how it's going to work. Okay. So whenever you add a new dependency, package JCN is always updated. So that is what Package GSN does. Okay. But now, let's take a look at the SRC folder. So in the SRC folder, you'll find this file called app dot Qs. Okay, before exploring app dot js, let's go to index dot Gs. Index dot js is the starting point of our react application, right? And this is where the app component is rendered. So I'll open index dot js, I'll open app dot js, and I'll just collapse this. Okay? Now, if you take a look at the index dot js, what this does is, it is getting the root over here. You can see document dot Get element by ID, root. Now what is root? Root we saw over here. This is coming in from index dot HTML. So index dot js is getting this root and it is rendering. You can see root dot render over here. Okay? It is creating the root of React first using React Dom, and it is rendering app over here. You can see app. All right? Now, what is app? So app is nothing but app dot choir. So you can see at the top the list of inputs, Import app from dot App. Now, what is this? This is app dot chos. Okay? So here we have a component defined this was predefined, we didn't define it. It was defined. It was available by default to us. And this has some code which is being rendered onto the interface. Okay? So we are rendering this component over here. Okay? And if you come over here, this is what you're seeing the UI. You can see edit src slash app dot Gs and save to reload. You can see. So if you want to change the interface, you have to edit app dot js. So yap dot js because that is what is being rendered. And as per the instructions, you can modify this. So you can see edit App Js and save to reload. That is the message that you're seeing over here, and that message is coming in from here. Right? So whatever changes you make over here, you'll see immediately. So reflect it. So I can say reload and I can say update over here, update keyboard. And you'll see here 1 second. I did not. Okay. Update. You can see update is added over here. So I'm updating live and I'm seeing the changes. If I save again, if I go here, update is removed, right? So any sort of changes you want to make in the interface, you can make it in APD has, okay? You can even add more components like we are only rendering one app over here. Like app is the component defined from APD has. You can see we're exporting it over here. Okay. So we're exporting it over here and it's being imported in this file and it's being rendered over here. Okay? Any sort of changes you want to make you can make over here. And if you want to add more components, we can do that, too, of course. You'll be learning that when we go a little bit deeper. But yeah, I hope this gives you a complete clarity as to what is happening, why it's happening. And you'll find some more files like index dot CSS. You can see in the app dots, you'll find app CSS being used. So these are all CSS files, okay that exist and they are being used. You have logo dot SVG. Okay? This is the logo file. Okay. So yeah, this is about the project structure. It's pretty straightforward, and it gives you a glimpse of what is happening once your react application is created when you run it for the first time. All right. So I hope you have clarity as to how this interface is being rendered, and I hope this was useful. 8. Our First React Project: So now it's time that we do a little bit of experimentation with our project that we have created. So what we are going to do is we are going to modify the speech a bit to print a custom message of our choice, and the message that we can print is welcome to react, and this is my first react application. So that's a message that we are going to print. If you think you can take this up as a challenge, okay, depending on what we've understood so far, I would be happy if you do so. Okay? So pause the video right now and attempt this as a challenge wherein you replace this content that you're seeing, and you replace it with the message which I just said, Okay? To replace the instructions are also given over here, you need to edit this particular file, arc slash app dot CHS to make any changes. Allright? So try this out. And if you're not able to, don't worry, you'll come back. You can come back and play this video and watch this solution. So I hope you had a chance to attempt this as a challenge. What I would do is I would start with this particular thing here. I'll head over to SRC and I'll go to app dot Hs. Okay? Now, app dot js is being rendered. So this app component is being rendered in index dot chas. Okay? And this is the main component right now, okay? So what I will do is I'll come over here. Okay. I can actually minimize this over here. The server is running. So here, I'm returning this DIF. So I don't need all of this, so I can just get rid of this. All right? Over here. And then here I can have a message. Okay? So I can say H one. I can say, welcome to react, something like this. And you can have E P tag over here and you can say this is okay, this is my first react app. Something like this, and you can save it. The moment you save it, and if you come over here, you're going to see this message come up. Okay? Now, you can see this is entirely widescreen because we've removed a lot of elements over here, right? So that's what you need to do. Another thing is, I'll mention over here, I have racked these two elements, or these two HTML elements within a parent TIF. Okay? So what is happening over here just observe This is a function, a normal JavaScript function, and I'm making use of logo over here, which actually, I don't know. I'll do a little bit of cleanup. Okay. Now, I'm making use of app dot CSS, this CSS file. This is a function which is returning something. Okay It's returning this, and I'm exporting this particular function. And this is being used in index, index dot Qs. You can see over here. It's being used over here. Which means it's being rendered over here, and it is being rendered in root Def. Okay? So what is happening is I'm returning this okay, this code over here. This piece of code looks like HTML, okay? But it's actually not HTML. It's known as JSX, okay? So Ja Script XML syntax because you can see in HTML, if you want to write a class name, you'll have a different attribute over here. You won't make use of class name over here, okay? So instead of class name, you will write class in HTML. Okay? But in Jx, you will make use of class name. Okay. And the syntax is very similar to HTML. So if you know HTML, this would be pretty easy. Okay. And there is one rule that you need to know is here when returning interface. So actually, you're constructing an interface and you're returning it from the component. So when returning this, you need to make sure that all the UI element is wrapped under a single element. So you can only return a single element and not multiple. I'll show this to you. So if I remove this Okay, you can see I start getting an error. You can see JSX expressions must have one parent. And if I try to save this and go over here, you can see all sorts of errors over here. You can see. And it's giving you the error message also. Okay, it's saying must be wrapped in enclosing tags and you need a fragment over here. Okay. So that's the explanation it's giving. I'll just do Control S, and I'll bring back the TIF, and I'll save this to return it to its original working form. All right. So I hope this is something that you have understood and I hope you have been able to do this. Okay? You can even add your introduction over here. Like, Hey, I am, whatever your name is, you can add that. You can save the file and you'll see the output in the web page. Alright? So I hope you have been able to follow along, and I hope this was useful. 9. Introduction to Vite and Setting it up: So I'm here on my terminal, okay, and I have navigated to my folder where I'm creating the react projects. So if I say LS, I'll see one react project is already created over here. Okay? Now, what I want to do over here is I want to talk about wheat. Now, what is eat? So WT is another way of creating react projects, and WT is actually a modern build tool that offers a fast and efficient development experience for modern web applications, okay? And it speeds up the development time for developers, and it does so by processing files only when they're actually imported, and it's much faster. It has a much faster development server as well, okay? So Today, if you're doing react development, wheat is being used a lot. Okay? And if you head over to the browser, if you search for wheat over here like this, Okay, you'll see it's a local development server. Okay? It's a front end tooling. And if you go to the website over here, you'll see it's a Biltol for web. Okay, and it's blazing fast, front end Build tool powering next generation of web applications, okay? And you can go through. You can see instant server start lightning fast, HMR. It supports a lot of things Ja script, typescript. Okay. And yeah, you can go through the website and learn more as to what it enables you to do. All right. Also, to explore more, you can click on Get started over here. Okay. And you can see more about wheat. You can see how it's pronounced. It's pronounced as Wheat Okay. And you can see, these are the templates that it supports, okay, Vanilla juice Vanilla TypeScript, view it supports react. All of this it supports. Alright? So if you scroll down a bit, you'll also see the commands using NPM, yarn, PNPM, and B. But we are making use of NPN, so we can make use of this command. So what I will do is I'll show you how you can create a project using VT. Okay. You can even create a project using Create React app, but I would say It is a more modern way to create react projects and work on web development. All right? That is what everybody's doing these days. Okay, so you should know what IT is and how you can make use of it. So you can see this command NPM create Wet latest. Okay? So I can copy this. Okay? There is one more version. Of this particular command. So once you run the command, it will prompt you with what sort of project you want to create. What is the name of the project? I'll tell you what template you want to use. Okay. So all of that, it'll prompt you and you can select the options. But if you want to specify the options before with this command itself, without going through the prompt. So you can directly say NTM create Wet latest specify the project name, and specify the template as well. So it specified the template is view. You can specify the template as react if you're working on react over here. Okay. Or if you're working on react with TypeScript support, you can say react hyphen Ts. Depending on what you want to do or what sort of project you are creating, you can specify the template. Okay. But I'll go ahead with this approach. Okay. I'll show you all the options that it asks us. Okay? Now, be sure you are in the folder, which is not a react application. Okay? So I'm here in this folder where I'm creating all the react applications, right? So this is one react application that I have. Now, I'll run this command. Okay? Oops, not this one. Okay? The one that I copied, it should either be this one. Okay. I'll paste it over here. So NPM create Wheat at latest. The moment ta press Enter, it will tell you that, Hey, it needs to install the following packages. Okay to proceed? I'll say yes. Okay. And it will install all the packages, and it is asking me what should be my project name. Okay? So I can enter my project name. I can enter. I can say react or 1 second. So I have my react tab, right? So I can see my uh, react or it should not be my react tap, so I can say what react, something like this. Okay? And I'll just press Enter, and you can see it's asking me the framework. So which framework I wish to choose over here? Okay? Do you want vanilla, you want to make use of react. So since we are making use of react, I'll select react over here. It is asking me whether I want the TypeScript support or something like that. So I'll just select JavaScript over here. Okay. And yeah, we are done, you can see how quick this was. Okay? You can see. No need to install the following packages. Okay, sorry, need to install the following packages. And it asked me a few questions for which I had answered. You can also skip this prompt, like I said, by adding this in the command. You can specify the project name, and you can specify things like template and all over here. Okay? That is also doable. All right? But I choose to go the interactive way, and then it created this project over here, okay? And it is telling you to do CD, what react. And do NPM install, and you can do NPM run Tf. So let us run this commands, and let us see what happens. I'll go to CD at react. I'll say NPM install, which will install all the dependencies that my project needs, and I'll copy this NPM run Def over here. Okay, yeah, it's installing everything. It will take a few seconds. It's done in 10 seconds, and I'll say NPM run def. And now you can see it started the server on Local host 5173. So this is a default port over here. Okay, that is being used to run these projects, okay? And if you head over to this, okay, let me reset so you can see I was zoomed in a lot. Okay? So you can see this is the default page. So it says Wt plus react, and you can see here is a counter which you can click and increase the count. Okay? And you have app dot Jx, which you can explore and you can edit basically to update this particular UI over here. Okay? And you can click on IT and react logos to learn more. So if you click on React, you'll be taken to the React page. If you click on Wet logo, you'll be taken to the Wet page. All right. So I hope you have been able to follow a and I hope this has been useful. 10. Moving to Visual Studio Code and Changing Port: So now what I'm going to do is I have this heat app running, but I'm actually running it from my native terminal. So what I would do is I would head over to Visual Studio Code and just open the heat project in Visual Studio code for me to work on it. So I'll head over to File. I'll say open folder, okay. And here, I'll select eat react. Okay? So Wheat react is what my project name is, right? I'll open up the terminal as well. Here. Okay. Now I can run the server from here. So I can run the server, actually, but here you will notice that a server is running on the port 5173. Okay. So I'll just stop this server. Okay? So we set NPM run deep and it is running on 5173, which is the default port for wheat projects. Now, let's say I want to customize this port to Loose 3,000. Okay? So what I can do is I'll come over here. Uh, you can see the project structure. Okay? It's almost similar to the react application over here. You can see. Okay? What WeatJs. That is the configuration file that we've got. Okay. So what I'll do is I'll come into this configuration. Okay. This allows me to do some custom configuration for Wheat. I'll open this and over here, you can see this. Okay, This is the configuration. So I have plug ins of react. Now here under this, I'll say server. Okay, and I'll say colon I'll add a open and close curly praise. I'll add a comma. I'll end this with a comma. And here, I'll say port, Colin, I'll say 3,000 and I'll end this with a comma. Okay? This is done. I'll save this file over here, o and we can say NPM, run deaf now. Okay? If you do this, you'll see that the server is up and running on local host 3,000. Oops, I accidentally terminated the server, but it's running on 3,000. Now if you refresh 5173, you won't find anything over here. Here on 3,000, if you refresh this, this is our old app that we created. You will see t plus react running over here. Okay? So yeah, you have a counter. You can see everything is same. Okay. So this is how you can change the port by adding a simple configuration in et config chas and you can do it the way I showed you. Okay? Now, here you'll see all the folders and everything that have been created, which are similar, I should say, to that of the one that we saw in the project that we generated using Create React app. You'll see main mean dot SX. Okay? So in the react file or the earlier project that we had, if you create a project using create react app, you'll see it will be mean dot js and not JSX. Here you are having app dot jsx and not app dot Gs. Okay? So here, everything is being defined in GSX extension. And the reason for this is because it has JSX code. Okay? So this code over here that you're seeing is not HTML. Okay, let me minimize this. So this is not HTML. In fact, this is actually JSX code. Okay, which is which is similar to HTML. Almost similar, I would say, if you know HTML, you can actually read this code. But there are small differences like class name. This is how you define classes. So in HTML, you will have class like this, right, with this class tag. But here, you have class name, okay? And you can see rest everything looks similar to HTML. Okay? So this is the JavaScript XML, JSX, okay? And you'll find the file names as jsx dot JSX over here. Okay? So this is something that you need to know, right? And any RRS everything is similar. Index or TML, you have outside the public folder over here. You can see. You have package dot JCN which is used to basically package or not to package, I should say, it's basically used to manage dependencies for your, project over here. And all the dependencies that you add will come in node modules, which we won't be touching. You public folder, which has a SVG file. Okay? So it's a similar structure, almost same, I would say. And you understood if you understand the project created using Create React app tool, then you will understand this as well. All right. So yeah, I hope this is useful and I hope you have been able to follow along. 11. Introduction to JSX Syntax and Rules: So now it's time that we begin talking about JSX. Now, what is JSX? So I have added some comments into this app or JSX file. All right. So you can see over here, JSX is a syntax extension for JavaScript that looks like HTML. Okay? And with the help of JSX, you are allowed to write HTML like code within JavaScript. So can you write HTML code within JavaScript? No, but with the help of JSX, you can write, and this react transforms this into JavaScript objects. Okay. So this is what GSSix is, and this is why it is being used, right? So we'll take a look at some examples over here, okay? You can see already there is some code written in Gasix when we created the project, and this is what is being rendered, okay, with the help of that. Okay? But we'll be clearing it out and we'll come down to much more simple examples. Okay. But one thing to remember is, this is what you should remember. It looks like HTML, but it's not HTML. Okay, if you know HTML you can easily understand and read and write sorry, not Ja Script, GSX, and it allows you basically to help you build react components, and you can see what your UI will look like directly in your code because it's HTML like. Okay? So what I will do is, you can see here there are a few variables and everything created, so I'll just get rid of this, all of this. Okay. I'll just get rid of all of this. Okay. And I'll save this. So there's literally nothing now on the page. Okay. It's totally empty, as you can see. Okay. I'll get rid of these imports as well, okay? I'll just keep the CSS file. If you go to the CSS file. Okay, it's pretty decent CSS, right. So something have been written over there. Okay. So I'll just stick to this file. We won't touch the CSS yet, right? But we'll start writing some six code. Okay? So what I would do is I can say over here, here within this. Okay? So here, let's say this is DIF. Okay, so I'll have a TF element. O it was an empty tag. I can say over here H one, o. And I can say how I can say wold, something like this. And you'll see hello world being printed over here as an output. Okay? Now this is JavaScript. This out thing is entirely JavaScript, right? And within JavaScript, you are allowed to write HTML like code, and this looks like HTML, but actually it's JSX. Okay? You can even skip this Div tags if you wish to. I'll explain the importance of having a DIV, like everything wrapped inside a TIF. But you can see this is also working absolutely fine. Okay? Now, what you can even do is you can take this over here, okay? I can say const ligment over here, and I can assign this over here, something like this. Okay. And so over here, you can simply say, okay, lament within the pair of within return. Okay? Now, if you save this and if you come, okay, you are not seeing any output. The reason you are not seeing any output is because this needs to be wrapped inside a TIF, okay? So I'll cut this and I'll paste it over here. Okay? Something like this. Okay. And I'll save this. And if you come here, you'll see hello world as the output. Okay? So yeah, this is another way of rendering the same thing. You can even cut this and paste it over here like we did early on. Okay? But yeah, there are some rules when you're making use of GSX, there are some rules that I want to talk about. All right. Now, the first rule is the GSX elements. So you're returning JSX elements over here as the part of the return statement. Okay? So take a look at the structure of this code, okay? You have this function. That is returning the JSX elements, whatever you're returning over here is being rendered onto the interface, right? So if you don't return anything from here, if I don't return element, it won't be rendered onto the interface, you can see, right? If I save the file, it is not rendering. If I save the file again, it will render. So whatever you're returning over here is being rendered onto the interface, and this is what you are exporting over here. And the reason it's being rendered is because in main dot Jx, you are rendering app over here as a part of the root element. And what is app app is coming in from here, it's this component. Okay. So whatever you are rendering, whatever elements you are returning over here as a part of the return statement must be wrapped in a single parent element. Okay? So let me explain this better. Okay? So what I will do is, I'll just comment this out for a while, okay? And I'll have hello world over here, okay? Directly rather than having this element. Okay? So let's say I have hello world simple. Okay? Now, without this parent element, I can have hello world. There are no issues as such. You can see. If I have this, it'll work fine. Okay? But the moment I add one more element over here, let's say I say high over here. Okay. First of all, you see I get an error. Okay, so you can see JSix expressions must have one parent element. And if I come over here, you can see the error over here. You can see it must be wrapped in a closing tag and you can see it's not working, right? So there has to be one parent element. And if you're having multiple return multiple elements that you are returning, multiple J six element, what you can do is you can wrap them into a single parent element, the error will go away and you'll see the output over here. So you see hello world, and then you see high, which is written in the P tag. All right. So I hope this is making sense. This is rule number one, okay? JSX elements must be wrapped in a single parent element. You'll be working with JSX a lot if you are doing react development and remember this rule, because people always wonder as to why you have to wrap everything in a single tip and all of that. Okay? So this is one of the rules. Okay? Another rule is in HTML, you make use of class, right, to assign a class name to a particular element, right? But with JSX, you have to make use of class name. And not class. So class name is used instead of class, and class is not used because class is, of course, a reserve word in Ja Script. Okay, so we are making use of class name over here. Okay? So this is something that you need to keep in mind. So if you want to add class names so that they could be styled properly, you have to make use of class name. Okay? And remember the syntax over here. Oops. So remember the syntax, it has to be class name. So N, you can see the camel case in action over here, okay? So this is another rule, then there is a rule about self closing tags. Okay? Now, there will be tags that don't need any sort of children, for example, image tag. Okay, so they have to be self closed. Okay? For example, I need to have hoops. So I can say, I have to make use of image like this. I can add SRC and all over here. Okay? But the tag has to be self closing tag. It's self closing itself, right? So that is something that you need to keep in mind. Okay. So these are some of the rules about GSX, okay. But remember, key points from this particular video is JSX is not HTML. Okay, it looks very, very similar, but it's not TML. You can use JavaScript within JSX as well by embedding it into curly braces. Okay, over here, something like this. You can say seven plus six plus seven, something like this, over here, and you'll see 13 as A output. So you can have JavaScript code embedded within single pair of urbass. That is something can be done. Okay? And JSX elements must be wrapped into a single parent element like DV over here. Okay? So yeah, this is about J six, about introduction to JSix. I hope this is clear, and I hope this is turning out to be useful. 12. Expressions and attributes with JSX: So let's start talking about expressions and attributes with Jax. So I have some comments over here. Okay, so you can see this first one. The first point says you can embed any valid JavaScript expression inside the curly prese in JA six, okay? And JSix attributes use Camel case syntax. So these are the two points that we are going to cover. Okay? Now, what I will do is I'll do some bit of cleanup over here. I'll just have a single tiff over here. Okay. So first point C, you can have or you can embed any valid JavaScript expression inside curly pres, okay? And this is within JSX. Now, what this means is here, if I want to print edition of two numbers, okay, ten plus two, I can absolutely do that because this is a valid Java expression, okay? This is completely allowed. Now rather than just printing in the total over here, I can have H one tag, something like this. Okay, 1 second. So I'll have each one. I'll say hello. Okay, and I'll have name over here, something like this. Okay. And over here, I can say const, name, and I can say ALS, something like this. Okay. So with this, you can see, we are greeting Alice, okay? And here, what we have done is we have created a JA Script variable or JA constant, I can say, called name. And then I'm making use of this within JSX syntax. Okay? Now, this is an expression that is getting evaluated, okay? So the result will be Hello Alice, and that is what we see as the output. Okay? Now, one thing I would want to mention over here is I've mentioned a couple of times that G six is not HTML. Okay. Then the question is, how is it being rendered onto the browser? So it is converted into HTML by react, and it is being displayed onto the browser. So that is how the rendering works for JSX. Now this is about expressions. Okay. Let us take an example of J six attributes. Okay? Now, whenever you are using elements, it's, of course, evident that you will be making use of attributes as well, right? For example, one such attribute is over here, one such attribute would be class name, okay? Or if you want to assign H one tag a class, you would add class name over here. This is how you will assign a class to an element in JSX, okay? And you can call this as greeting over here. Okay. Now, remember this is camel case, okay? And you cannot have class over here, okay, because this is HTML, right? And this is JSX. Alright. So keep that in mind, okay? You can even have inline. You can even use attributes that enable you to make use of inline styling. Okay? Let me give you an example for that as well. Okay? So let's say I wish to have a button over here, okay? And I'll say, click M, something like that over here. Okay. And let's say I wish to have style over here. Okay, so I'll say style. Okay. And I'll add double curly pears and I'll see. So without a style, let us see how this button is coming in. So it's coming in this way. You can see, click me. Okay. And here I can instead now see background color. Okay. Background color. You can see that over here and I'll assign, let's say, green. Okay. You can assign any color you want. Okay. And I'll have color to be that of white. O here. Something like this. Okay. I'll save this. And if I come over here, you can see, click me. Okay. You can see how this got rendered. Okay. Let me move this two separate lines so that it's visible for everyone. Okay. All right. So you can see. I'm making use of inline styles over here instead of an external styling. Okay? And I can even remove this, get rid of this text. Okay? I can add this as an expression. So I can say const button, label, something like this, and I can click M over here within single codes as a string. Or you can make use of double codes. That would be better. Okay. And here you can have the label assigned as the expression, and you'll see the same output. You can see. Okay? So this is how you can make use of attributes, okay? You can even have another button. Okay, so let me get a button, oops. I'll copy this button. I'll add it over here. Okay. And over here, you can say alert me, or this is the text. Okay. And over here, you can say. So here, what I'm doing now is I wish to assign a on click event. Okay? So I've created a button. You can see alert to me. Okay. But let's say I wish to have a onclick event over here. Okay? Now on click in HTML is on click like this, right? But in J six, like I said, it follows the camel Kaye syntax, right? So C will be capital over here. Just keep that in mind. Okay, C will be capital over here, and then within the pair of curly braces, you can have this kind of a function over here created, and you'll have alert, and I can say backticks button, click, something like this. Okay? If I save this, let us see how this works. Okay. You can see button clicked. This working absolutely fine. Okay? So these are small things about JA six that people always wonder about. So if you're a beginner, if you skip this and if you directly go to react code, and if you see a code written like this, you'll wonder why this is caps, first of all. Okay? So you need to understand this is how it's used in JA six. Okay? So remember these two things, you can embed any valid Jascript expression inside a Curly breeze in JSix code, and JSix attributes use Camel keys syntax, right? So I hope you have been able to follow along I'll give you one last example over here of displaying an image. Okay. So what I will do is I'll make use of IMG tag over here. Okay. And we'll display an image. We'll say SRC over here. Okay. And what I will do is we need image over here, so I'll say please hold the image, something like this. Okay. And I'll come to this website and we'll get the placeholder image of 600 by 400. So this is a website that will give you any sort of placeholder image. Okay. So I'll say SRC, this is the image part. And if I save this and if I come over here to view the output, you can see. Okay. Okay, 600 by 400 is super huge. So I'll just change this to hundred by 100. If this come over here, you can see 100 by 100 image. And this can even be converted into an expression. So I can cut this. Okay, I can go over here. I can say consimage URL, something like this. I can add this over here, and I can come over here and I can have image path over here, image URL. Like so. Okay? I can even add a placeholder. I can see Alt and this is dynamic image. Like so. Okay. You can see. The output hasn't changed, okay? It's working absolutely fine. Okay, so this is how you can work with image. You can even move this declaration over here, let's see. Okay. Oops, you cannot. You cannot. So given that, it has to be at the top over here, okay? Just outside of return, okay? This cannot be part of written. I'm sorry about that. Okay. So yeah, this is J six, and I hope this is pretty clear to you and I hope you found this useful. 13. Conditional Rendering: All right, so let's now talk about conditional rendering and react. Now, conditional rendering is used when you want to render different UI elements based on certain conditions, and in react, you can make use of conditional rendering in multiple ways. So there are multiple ways to implement conditional rendering. Okay? First way is by making use of IL statements. Now, if you know JavaScript, you must be aware of FL statement. So you can make use of FFL statement to do conditional rendering. You can make use of ternary operator as well, and you can make use of operator as well. Let me show this to you how it works. So here, I have this function which is returning an empty TIF. It's not returning anything yet. And if you come over here, you won't see any sort of output. Now, let's say, if I wish to check if a user is locked in or not. And depending on whether it is whether the user is locked in or not, I want to display a message, right? So what I can do is I can have a variable over here. I can say is locked in, o, and I can say true. Okay? So the user is locked in. I can say if is locked in. Okay. Then in that case, what you can do is okay, this won't come over here. Okay. So I'll have to add it over here. Okay. So if the user is locked in, then you can return. Okay? So I'll remove this return over here. I can return, and I can see each one over here. Okay? Welcome back. Something like this. I don't need this return over here. Okay. So this is what becomes my return, okay? And if he is not locked in, okay, then I can say return, and I can say H one and I can say, please log in. For example, and I'll save this. Okay. So here you can see, welcome back. And if I change the flag to that of false and if I save, you are going to see, please log in. So depending on the condition, so this variable is controlling the condition. Depending on this variable, value the value this variable is holding, whether it's true or false, you are actually rendering different messages onto the interface. Okay? And this is how conditional rendering works. You can see if we are making use of two return statements, which is absolutely okay. I have even skipped the round brackets. Okay. So those round brackets are skipped. You can add it if you want, but I just wanted to have a cleaner look over here. Okay? Something like this. It's absolutely okay. Okay. I'll just get rid of these round brackets. So this is how conditional rendering works using if statement. Okay. I hope this is making sense. Now, you can convert this entire thing into using a Turnary operator as well. Okay? So what I would do is I would just add the comment over here. Okay. I'll just convert this into a comment. And now, I'll make use of the tonery operator. Okay? So what I can do is I can say const over here. Okay, I can say aliment. Okay. And I can see each one. Okay. Now, if the so I'll have this as an expression. Okay. Now, the expression says if he is locked in, okay, then I'll have welcome. Back. Okay, something like this, or else, I'll say, What is the message? Please login. So I'll have this over here. Okay. Now what I can do is I can return T, so I can say return over here, and I can simply return H or I can simply return the element over here, something like this. And I can save this. Okay. Oops, so this won't work. I need to wrap it inside a TIF. Okay. So This should give you the output. Okay, you can see, please login, and if I change this to true over here. Oops. True over here. Then in that case, you'll see Welcome back. Okay? So we are making use of ternary operator, okay? I'll take this to new lines so that it's visible to everyone. You can see how this is being used, okay? Constant element is equal to H one is logged in. Okay? So here we are making use of this expression is locked in Welcome back, please log in, and I'm closing the H one tag. And based on that, we are returning this element over here. Okay, so here we are making use of ternary operator, essentially, to do conditional rendering is what I would say. Okay? So I hope this is making sense, all right? Let me give you one more example. Now, this example is conditional rendering using and operator. Okay, now what is operator? Using and twice? Okay, so you can use this as well, basically to render an element only when a condition is true. Right? Now, let me give you an example for this also. Okay? So let's say here, what I can do is just above written, I can have const messages. So let's say I have I'm maintaining a list of messages, okay? Let's say it's a chatting application. Now, if there are any number of hundred messages. Okay, so these are 100 messages, let's say, okay? There's an array of hundred messages. Now, if there are any hundred messages, I wish to show a notification to the user that, Hey, you have X hundred messages over here. Okay? How would I do that? So over here, what I would do is simply, I would say messages dot length. If messages dot length is greater than zero. Okay, and I'll have and operate over here. I'll say H two, something like this. Okay. And I'll say have messages dot Length. Okay. Hundred messages, something like this. Okay? If I save this, you'll see there's nothing being displayed. Okay, because the length of messages is zero. Now if I add one message to it. Okay, you can see you have 100 messages. If I add one more message, okay? Any message, okay, we are just taking a look at the count. You can see you have 200 messages. Okay? How's this working? So this is actually taking this array length into consideration and it is seeing if the array length is greater than zero. Now, let me explain to you how this line is working and how it is conditionally rendering the message for us, okay? So we are making use of logical and over here. And if you're familiar with JavaScript, you must be aware of logical operator. So when and is being used, the left hand side is being evaluated first. So this is the expression on the left hand side. Message is at length greater than zero. Okay. So it evaluates this and if this expression is true, it evaluates and returns the right side. Okay? If this is true, then it evaluates and returns the right side. And if this is false, the left hand side is false, it does not return the right hand side, and it short circuits, essentially. And this is known as short circuiting, okay? Where it does not evaluate the right hand side, and basically, it then renders nothing over here. Okay? So yeah, this is how it's working over here, okay? And this is being used to do conditional rendering. And you will see these kind of expressions a lot, okay? So if you will have some condition over here and you'll be making use of and and then whatever you want to render on the right hand side. Okay? So that's how this short circuiting is being leveraged over here to display conditional messages. And I would say this is much more concise than writing FL statement and ternary operators, in my opinion. Okay? So you can also convert this entire expression uh, into something of this sort, okay? But ternary operator actually is useful if you want to have a failure message as well. Okay, so you're having two messages. Welcome back, and please log in, okay? So so here you are just having one message, okay? But here you're having two messages that are being rendered when something is true of. So actually, they both are not same, okay? But yeah, if you are displaying only one thing, okay, then this could be the best option out there. All right. So yeah, this is about conditional rendering. So we took a look at conditional rendering in multiple ways. First is using FL. Then we made use of the ternary operator, and then we saw with the help of logical and operator. All right. So I hope you have been able to follow along, and I hope this has been useful. 14. JSX and Functions: So let us now talk about J six and functions. Now, JSiX allows you to use functions dynamically to generate and return elements or components, and this could be useful if you want to encapsulate a logic inside a function and reuse it across your application. Let me give you an example for this. So let's say I have this greeting over here, which is a simple greeting, hello, right? Let's say I add a name to it and I'm personalizing, so I can say Alice. Hello, Alice over here. Okay. Now, let's say I want to greet multiple users pased on their names, so I can duplicate this. Hello Alice, hello, Bob, let's say. Okay. Okay, this won't work because I need a parent def as per the rules, right? So I need to move this. I'll cut this, and I'll paste it over here, something like this. Okay. Now, this would work. Hello Alice, Hello Bob. Now there is a better way to handle this. Okay? What I'm doing is I'm essentially replicating the way I'm greeting users into multiple blocks. Okay? But this thing can be generated with the help of function as well. All right. What I can do over here is I can say function. Oops, I need to disable the caps. I can say function. I can say welcome message over here. Okay. And I can have name as the parameter over here, o, and I can cut this I need this. And here, I can say return. I can add this over here. Instead of Alice over here, I'll just say name. Okay? So I'm generating JSX with the help of this function. Now how do I make use of it? I can make use of it with the help of expression syntax. I can say welcome message, and I can pass in Alice over here. Something like this. Okay. And I can save it, and you'll see Hello Alice, hello boop. So I've not changed this for pop yet, okay, but I'll get rid of Pop's greeting over here, and I'll convert the Bob's greeting into that of pop. Okay? Now, you'll see Hello Alice, Hello Bob. I can even add one more. Hello, John. Okay. You can see. So this is how you can make use of function that returns six and this Aix can then be rendered into a component within a component. All right. So yeah, how it works is we have welcome message function over here, simple Ja Script function that takes name as the parameter and returns a greeting message. This is a greeting message. And in the app component, you can call this function and pass the name as the argument, and you can pass in different names to render personalized greetings. I hope this is making sense, okay now you can even do this conditional. Okay? So you can conditionally or you can use functions to decide which JSX elements to render based on certain conditions. So that's what I mean by conditional rendering. Okay? So let me give you an example. Let's say, depending on the time in a day, I want to push good morning or good evening. Okay? So what I can do is I can have a function over here. I'll say function. Okay. I'll say greeting, I'll say is morning. Okay? Now, if it's morning, if is morning, Okay. Then what do we do? I return each one. Over here, something like this. I can say good. Oops, morning, something like this. Okay. And if this condition is not satisfied, then I can return good evening, something like this. Okay. Now what I can do here is here, I can make use of Const nows equal to new eight, something like this. I can say const is mourning over here, and I can say now taught, get Rs. So this is logic which I'm using to check if it's lesson 12 or greater than ten here, what I'm doing is here what I need to do is I can say within an expression, I can say greetings, and I can pass in is mourning over here, something like this. Now I'm seeing good evening because it's evening over here, okay? So I'm actually getting the time over here, right? But yeah, if it's a morning time for you, then this logic is going to return good morning over here. Okay. So what it's doing is it is taking the current date, okay, current one, and then it's getting the Rs. Okay, so if RS is less than 12, it means that it's morning. If it's not, it means that it's evening. So this will be false over here in that case, and depending on that, whether it's whether the boolean value is true or false, or we are actually rendering the greeting over here, okay? So yeah, this can be done, and you can even I would also want to show you one more example wherein you can have functions that return JSX and can also be passed as argument to another functions allowing for a more complex UI logic. So let us say we want to display an alert box depending on a condition. Okay. What I would do is I would create one more function. Okay? I'll say show alert over here. Okay. I'll have the condition over here and I'll have message. Now, this condition, oops, not welcome message. It will be message. Now, this condition that I'm having as a parameter, this is a boolean, okay? So I'll have a boolean check for this. If condition, then return. Okay. And I can return alert over here. Okay? So I can say TIF and I can I can add a message over here, something like this. Like so. Okay. And I can even style it or whatever I want to do. Okay? So this can be done. All right. And otherwise, I'm returning null, right? Now, let me call this over here. So here, what you can do is you can you can have an expression sort of syntax. You can say show alert. True. Okay. And then you can say this is important, something like this. This could be your message. I'll save this and you can see this is important. This is what you're seeing over here, right? Now here, what we can do is within this particular function, I can have another function call. Okay? So here we are rendering this alert we're creating this alert within this particular function. Okay? So instead, what I will do is here I can have function. Okay, I can say alert box, like so Okay. And here I can have message. Okay. And over here, I can say return and It this. Okay. Now I can additionally style it over here. I can make the alert a little bit complex because I've segregated the code into a separate function. And over here, I can simply call this alert box with message, and this won't impact the output over here or the output that I'm getting. Okay. And if you come over here, you'll see this is important. So we are seeing the output, okay? This is important, and you can see how this is coming in. We have a separate function to generate the styled alert box. You can say, Okay, this is not actually style. We need to write CSS for this, but you get what I'm explaining over here. Okay? I need to add semicolon over here on the return statements. Okay? So all the return statements will have semicolons. Okay, I realized I missed a few. Okay. I guess, yeah, this should be good over here. Okay. So yeah, this particular function is then being called by this function over here. So we are doing a function call within function call, and we are returning the Jx from here depending on the condition. And then that condition is being rendered over here. Okay? So this is also allowed, and this is how it would work. If I save this, you can see the output is over here. All right. So I hope this has been useful and I hope you have been able to follow along. 15. Comments in JSX: So now it's time that we begin talking about commons in JSX. So this is a simple app dot JSX file. Okay? It has JSix code over here. So this is the JSix code that I'm returning, you can see, and the rest of the file has JavaScript code. Okay? Now, I'm seeing this output over here. It's working fine. Now, if I want to add commons, okay? Now, there are two places here or there are two types of code. One is the JSX code that is over here, and then we have JavaScript code which exists in the rest of the file. So in Ja Script code, you can make use of the regular comments that you normally use. So this is a single line comment. This is a comment, and you can also have the multi line comment in the Jascript code. Like this, this is multi line comment, something like this. This is how you write comments in JavaScript, okay? But you cannot do this when it comes to JA six. So inside J six code, if you try to do this, it won't work, right? Now, how do you write comment over here? So you can add comments like this. So I just made use of the shortcut Control and forward slash, so it added these tags for me. Okay? So if you want to add comments inside Jasix, this is how you would do it. Okay. You can see, this is a comment. Okay. And you can add a single line comment or a mult line comment depending on your need. Okay. So actually, this is a single line comment. I can even add a multi line comment over here. Okay. I can say this. I'll see this is a single line comment, and this is a multiline comment, I can say make a note of this here, something like this. I hope this is making sense as to how comments work in GSX file, and I hope this is useful. 16. PROJECT: Building a Portfolio Website using React: So now it's time that we are going to do a project using whatever we have learned so far and react. And what are we going to build? We're going to build a simple portfolio web page. All right. So you can see this portfolio over here. This is what we are going to build. So you can see the name, the tagline. You have sections like about projects in contact. This is the A section, you can click over here and head over to About as well. Okay. And here you have projects. So you can click on projects and Good projects. You have this Project one, description of the project and the link to the project, Project two, Project three, and so on. And then you have an option to contact over here, and then the FUTA, okay? Pretty simple. Okay? It's a single page application, single page web application, I should say, wherein we are making use of react J. So this is exactly what we are going to build. We'll keep it really simple, and the goal is to learn and put together everything that we have learned so far into building this application so that we get some hands on practice. So let's get started. So I'm here on Visual Studio code, and I have the app dot JS open, okay? And it's simply printing a very simple message called hello. All right. Now, what I'm going to do is we are going to come over here. And within the function app, okay, we are going to have some variables created. Okay. Now, these are the variables that will help us display all the information that we want to show onto the single page application that we are building, okay? The first variable that we are going to have is, of course, name. Okay, you can have name of your choice over here. I'll just have this dummy name called John Doe. You can have profession over here. Okay. And you can say full stack developer. Something like this. Okay. You can have projects over here, something like this. And here, we'll have this will be in sort of a JCN format. Okay, I can say title. Oops Title Colin and I'll have Project one. You can have any sort of project detail added over here, okay? Description over here, something like this, and you can see web application. Built using React and Node Chase, something like this. Any sort of description you can have. Okay. I'm also going to have a title. Sorry, not title. It should be link over here. The link, I'm going to keep it as hash. Okay. There's no need to add link right now, okay? That is what I think because it's not a real project, right? So ad comma, and that's why we are getting the error. I think this is done, okay? You can duplicate this for one more project, Aada comma, one more project, Project two. Okay. And you can say an e commerce platform. Oops, so I messed up. All right. So it's a E commerce platform. We can say it's an E commerce platform. Built using Gingo. You can say something like this. Okay? I'll just have two projects for now, okay. And now we can come over here. Okay? So this is returning hello. Okay. I don't need to return hello over here. Okay. So what we can do is I'll move this. Okay. First of all, for this particular tab, I'll have class name as app. And I'm doing this because later, I would want to style it as well. Okay? Now here I have a header. Okay. So this is A HTML header that I'm adding. Okay, let me add. Last name. Okay. And this is called a header, something like this over here. Okay. Now this header is within header. I'm going to have some things over here. I'm going to have each one, and this would be name, this would render name over here. I'm going to have P tag. This would render profession, something like this. And then I can have E NAF par over here. I'm going to have NAF over here. I can say, oops, I can say E tag over here, and this can be about and this can point over to HF and this can point to hash, about something 17. Introduction to Components and Creating Your First Component: Hey, there. Welcome. And now it's time that we begin talking about what are components and how they work in react. So here, I'm on the official website of react, which is react dot TEF, and I'm going to take we're going to analyze this website and understand and get introduced to this concept of components, right? Now observe this website, okay? You can observe any website, but I've taken this example because we are learning react, and this is the official one. If you see at the top, there is a top bar over here, okay? You can call it a header or the top Navbar or whatever you want. Now, within this, there is like logo on the left hand side, the version, okay? You can see the search bar, the navigation items like learn reference, community blog, and some more options over here. Okay? You can scroll through the website, all right? Now, if you change the page over here, reference, community, learn, you can see this top bar remains as it is. It does it does not change, right? It's static throughout all the pages. And the same goes for the footer. Over here. Okay? So what I meant to say over here is the point I'm trying to make is whenever you're building any sort of web applications or any sort of software, there will be some components or some things in your application that would be same and it can be reused, right? Now, in traditional web development, what used to happen is if you are building this kind of a website, you will create this page over here. You'll have this code written at the top, to render this UI. When you create the page for learn over here, this page, you'll again replicate this code which creates this particular thing at the top. Okay? If you're building reference page, you'll build again this at the top. So this used to happen in traditional web development, okay? And as you can imagine, there was a lot of repetition, right? Now, if you have tomorrow if I have to make any sort of change in the top nav bar, I want to add one more option over here. So I have to remember to make changes in all the files, wherever I have this top bar being used, right? And this was tedious, not easy, and it was not a good practice, right? Now, with the concept of reusability. Okay? So there is a concept of reusability, which means that you create things once and you reuse it multiple times throughout the life cycle of the application. So what the reusability means is you have this bar at the top created, a footer at the bottom created, and you can just reuse it on all the pages. Okay? That is what reusability means, right? And this is possible with the help of components in react. Okay. So what is a react component. So if you go to learn react over here, okay? So I have actually opened it open over here. Okay so you can see over here. A component is a piece of UI that has its own logic and its own appearance. Okay? It can be as small as a button or as large as an entire page. Okay? So let me put it this way. React components are the building block of any react application. Okay? What it is, it's a reusable piece of user interface or UI that that can be defined by the developer and it allows you to use it, reuse it at multiple places in the single application. So for example, I gave you the example of this bar at the top, okay? You create it once and you reuse it across the entire application, okay? And it is independent. It has its own piece of code. Okay. Tomorrow, if you want to make any sort of change, you have to just make the change in one file, and it is reflected everywhere. That is a benefit of components. Okay? Now, you can see this is how you can create components, all right? Now, before I talk about this piece of code, let me tell you one more thing. Components in react can be created in two ways. One is by making use of functions, as you can see over here on my screen. Another way is by making use of classes. Now, classes if you explore any sort of latest code in react, you won't see much use of classes over there. So functions is what is being used at all the places. So that is what we'll be sticking to. And the components created using functions is known as functional components, right? So you can see this piece of code over here. It's a Ja script function. You can see react components are Ja script functions that return a markup. Right. So here you can see this is a function, a Ja script function, which is returning JSX, the markup, right? And this is a very simple example of a component that is just a button. Okay? So you can see how it's returning this button, and you can make use of this button in your application, okay, wherever you want to use it. Okay. So here you can see it is making use of this in my app over here, and it is rendering the button over here. Okay? Now, one thing you need to note over here, so it says it starts with a capital letter. Okay? So react component names must always start with a capital letter while HTML tags must be lowercase. Okay? So you can see over here. Okay. This is starting with the capital letter, right? So this is how components are created. Now here, you have an editor as well to play around. Okay, you can see this is the button that has been created. Of course, this is all in the same file app dot js. You can have multiple files created. So for example, you can have button or mybutton Js created over here separately, and you can have myapp dot js where you're making use of button. Okay? That also can be done. But here, the example is demonstrating this in a single file over here. Okay? So here, if you see my button, okay? And I can reuse the button over here. So if I want to, I can make use of it like ten times or as number of times as I like. You can and if I want to make a change in the text over here, I have to make a change at one place, and I'm a button saying hello. Sorry. Sing hello. You can see. I got reflected in all the usages. You can see I was using it at multiple places, right? So you can see it's being reflected at all the places. So this is a benefit of components. Now imagine if you are not making use of component, you are actually taking this code button and you are actually rendering it this way ten times. Tomorrow if you want to make a change in the copy over here or tomorrow if you want to update any sort of text or any sort of styling, you have to do it at all the places, right? And that is not good because, you know, it introduces the possibility of having errors in the application because we are humans, right? We developers are humans. You might miss making a change at a particular play, right? And that would introduce any sort of errors in the application. So this is not recommended, but this way of components is recommended, right? And you can make use of it in your application, right? So what I would do is I would since now we have some clarity about what react components are, okay, we would switch over to our application. I have this react application created, okay, with very simple app dot Jx. Now, here in APDt Jasix here you would see, I have a very simple, very simple greeting that I'm returning over here, right? And this is actually a component, okay? So if you see over here in main.j6, I'm actually rendering app over here in root, right? And I'm importing app from app dot Jx, and app is being exported over here, you can see, right? So yeah, this is an example of components as well. Okay? We are seeing the export Oops IMS semicolon over here. I'll just add it. Okay. But you can see how this is working. You can also add components over here in this file itself. Okay? So what I can do is I can take this piece of code. I can create a button. Okay. So what I will do is I'll come over here. Okay. I'll add a button this way. Okay? I'm a button saying hello, and I can actually add a button. Okay? But before doing that, let me show you what the current output looks like. So current output says hello because there's no button involved right now. I've not see the file yet. Okay? Now I've created a button. I've said function, my button. I'm a button and I'm saying hello over here. Okay. Now I can come over here and I can say my button, something like this, and I'll close it and you can see a button coming in over here, right? And I can just replicate this the way I want, okay? So I can add any number of buttons as I like. You can see there are so many buttons being added, right? These are all buttons. Tomorrow if I have to make a change in the UI, like I said, I have to make it at one place, right? And this all is coming in single file, right? I might want to modularize the code. So this is not a good practice to have multiple components in a single file. So what I should do is I will create a new file over here. Under SRC, I'll say my button. Taught JAX over here. Okay. And I'll cut this code, and I'll move it over here. Okay? Something like this. And here, I'm going to say export or default, and I'm going to say myPton over here, something like this. And over here, I'm going to just get this imported. So the moment I press Control and space over here, okay, this line is imported. You can even type this line at the top. Okay? You are actually importing my button from this file over here, okay? If you hold control, and if you hover on this, you'll see this gets converted into a link, and you can go to this file if you want to. All right? And if you save this, the output won't change, but the code is now much more modularized. Okay? So you have a component that you've created and you're using it in your application. All right? I hope this is making sense. And I hope this is useful. I hope you're getting the importance of how components are important. So this is a very simple example that I've demonstrated. But imagine like you're building a complex application where you're managing multiple user profiles, right? Now, there could be multiple kinds of users, and you might want to display the profile information at different places in the app. So you can have a component right? You can have a profile image component to display the profile image in a certain way. And you can reuse it at multiple times at multiple places. For example, if you want to display profile image on the home screen, right? So you can use that component. Okay, if you want to display it in the Edit profile page, you can display use that component, right? So this is valid if you have any sort of custom requirements. So for example, normally profile pictures are displayed in a circle, right? Whenever you go to any application, profile pictures are displayed in a circle, right? So you might want to have a circle sort of view wherein you are displaying the profile picture of the user. So you could create a component for that and you can reuse it across the application wherever you want to display the image. Right? And if there is any change in the UI tomorrow for displaying the profile picture, you make change in that one file, and it's reflected across. It's so good and it's so useful, right? So I hope you have some good understanding of how components are important and building blocks of react application, and I hope this was useful. 18. Going Hands on With Components: So it's time that we go hands on and do some practice with components, right? And here, what I have is a react application, which is rendering a portfolio of a developer, so you can see this application over here. Okay? It's a very simple app. But the problem with this application is everything is coming in or being rendered from a single file. So if I have to give you a ist over here, okay? Uh, let me scroll up. So okay, this is app dot JSX, which is being rendered by main dot JSX in the root element. And within app.j6, you are making use of this CSS file and you have this function app that is being used over here. And within this, you have these variables. Okay, first, we have these variables. And then what we are doing is we are returning this JSix that is making use of these variables, like the data stored in the variables, and we are rendering the data. What we are going to do is we are going to modularize this and introduce some components over here. So that is going to give us some bit of hands on practice with components. So first thing first, we are going to modify header over here. So what I'm going to do is I'm going to come here in SRC. I'm going to add header dot Jx. Okay. Okay. I'll first create all the files. So header JSix is what I'm going to need. I'm going to need about to J six. Okay. I'm also going to need you can say, project list tat J six over here. I'm also going to need contact Jix over here, and I'm going to need a Footer in the end, which is Puta tout, J six. Okay. Now, to organize this better, I can introduce a folder over here and I can say components over here, and I can move all the newly created files that I just created into this particular folder. Okay? So this looks a bit clean, including about contact header project list. I've moved all. All right. Now what we are going to do is I'm going to come over here in app dot JSX, and first, we'll work on header dot JSX. So I'll take this header section over here, okay this entire header section over here. Right? And I'm going to move this into the component. Okay? So what I'm going to do is here in header. What we need to do is I need to create first thing. I need to have a function. Function statement, I'm going to say header. And here in the parameters, I don't need anything. Okay. And I'm going to return. All right? We need to return the JSX. Okay. So I'm going to return this part over here. I'm going to paste this. All right. Now, name and profession is missing over here. So what I need to do is I'll scroll up, I'll cut or get these two things over here, and I'll add name and profession over here, something like this. Okay? So this is done, okay? And, yeah, this is it. I need to add an export statment over here. I can say export default, and I'll export head. Okay, something like this. And this is it. Now over here in this particular file, I'll scroll down and here in place of header section, I can say header. You can see this component and I can press Enter. The moment I do that, I need to make sure I self close the tag as well over here. The moment I added that or selected that from the order suggest, you can see this import statement being added at the top, which means that we are importing the component head over here. And okay, there's some problem. The app is not working as expected. Let me see what the issue is over here. So I'll just check the error here in the console. Okay? The error says profession is not defined at App JA 626. Okay, I got the error, by the way. So we moved profession into header, okay? And it's needed by in the app dot JSX, I should say over here. You can see profession and also, I would say name is needed. Okay. So I'll just keep the variables over here. We'll delete these variables in the end to avoid any issues. All right. And now if you come over here, you can see header is working absolutely, okay. Without any issues. So this is absolutely being rendered from here. You can see the header section. Okay? I'll just remove this comment now. Okay. And yeah, or we'll stick to the comment. We'll remove it at the end. Okay? Now, let us do the same with the A. Okay? Now I'll cut this about section over here. Okay. And for A, we have already created a file called at JSX over here. Okay? So what I'm going to do is I'm going to add a function, about no parameters, and I'm going to say return, o and I'll paste this Jx, something like this. Okay, so this is done. Okay. And I'll just press tab for this. All right. So this is about, and I need to add export over here, export default, A over here, something like this. All right. I'll save this and if you come over here, I need to import about. All right. This is done, and if you come over here, okay, we again see a problem. The problem is name and profession does not exist. So I need these two keys as well. So I'll take the skis sorry, not take these variables over here and I'll beat it over here. Okay. I'll save this and you should see the output. You can see. A is also being converted into a component. Okay? If you come over here, scroll down. A is done. We have projects. So I'll take the project section like this. I'll go over here. I'll add a function, something like this, projects or project list. Something like this. No parameters, LO, and I'll just get the list of project also that we are defining over here, this list. Okay? So I'll add that list over here. Oops. So there is a problem. This should be part of return statement, right? So it should be returned. So I'll just cut this Something like this. Okay? So this is done. Okay, we are returning this GA six, and we have this projects to find it to top. All right? This is making sense, and I'll do export default, and I'll say project list away. Something like this. Okay. And here in app.j6, I'll come over here. Project section, I'll say project list, self closing tag, and we'll see the list if it's being rendered in the right way, it is, right? We'll do the same for contact as well. Okay? It's pretty much the same stuff of moving this. Okay? So contact, I'll come over here. I'll say function, contact. I'll get rid of this, and then I'll say return over here. Like so. And then I have it done, okay? And I'll say export default, and I'll say contact. Oops. So I'll say contact over here. Like so. Okay. And you need to make use of contact over here. Okay? So I'll say contact. And yeah, Footer also will do the same. I'll cut this. We'll go to footer.j6 and I'll say function, Futter Okay. And then I'll say return here. Like so. And I'll have the Puta t, and I'll add **** tag. Okay. Okay, so you're not seeing **** as an import over here because you've not exported. Okay? So I need to say export default Puta. Okay. And then over here, Puta. You should see Puta coming in over here. Okay. And tan, a tan, right? Now, if you come over here, everything should work, absolutely, okay? You can see. Alright we'll do a little bit of cleanup here in this particular file, so we don't need these variables. I'll get rid of them. Okay. And I'll get rid of the comments, okay. So something like this. All right. And yeah, we're good. I'll just align this a bit. We're good now. You can see. So this is our app component now, okay, which is having multiple other components like headbo project list contact FUTA. And these are all individual components now, okay, that are being rendered or that are being create it separately. All right? These are all individual components, and what is the takeaway over here, okay? So tomorrow, if you want to add multiple components into a single project, that's absolutely possible. It's not like you can have single component in a react project or something like that. There is no such rule. You can have as many number of components you want, okay? And you can use it in this way. Now, tomorrow, if I want to change the order over here, if I want to move about below project list, I can easily do it. You can see it's changed. I can do Controls and I can bring it back to the original state, right? So this is possible, right? Also, One thing you remember this is app over here is a component itself. And within this component, we are entering other components. You can see app is a component in itself, and within this component, we are entering other components like header bow project list, contact, potter. So this is possible, right? A app itself is a component, it is being rendered over here. So if you go to main dot Jx, it is being rendered over here in the root element over here, right? So root element in the main.j6, what is being rendered app dot JSX, app component. And app component is rendering these many components in itself, right? So component can render other components as well that is perfectly valid and there's no issue as such in that, right? So you can imagine how components are modular. So they allow you to bring in modularity into your code. They allow you to break down your entire application into small manageable parts. So tomorrow if I want to make change in header, okay? Header across the application. I have to just make change in this one file. Okay, if I have to make change in the FUTA across the entire web application, I have to just make change over here. That is it, right? So it's reusability. Once the component is created, you can reuse it number of times. You can reuse FUTA number of times at any place you want, right? Maintainability, of course, because of reusability, modularity, it enables you to maintain these components individually separately. And also, there is a separation of concerns is what I would say, because Components help you organize the code by separating different things right into their own individual files, right? So it's an individual it's a self contained block is what I would say, right? So there is separation of concern wherein you have its own function. The component has its own function, its own JSX, its own interface in its own file itself, right? So it is self contained, right? So yeah, this is about components in react. And one more thing I would want to mention if you want to make use or reuse the component, you have to add this export at the bottom whenever you are creating this function this way, right? And that once you add the export, only then you'll be able to input it this way in the file wherever you want to use it, right? So we didn't write this input because if I remove this, let's say. Puta. If I save this, I'll get an error, of course. This is not going to work. And if you see the console, it is going to throw you the error. You can see. Potter is not defined. Now to bring in Putter, you can type in this entire line of input, or what I suggest is I just press Control and space. Control and space on Windows, command and space on Mac, you can see this suggestion, with this import over here. You can see I'll select this. And the moment I select this, the input is automatically added at the top. There are no issues as such. If I save this, the application starts working again, you can see, it's working again, right? So yeah, I hope this was pretty good, and I hope you have some good clarity as to how you can create multiple components and organize them within a single application. And I hope this gave you some insight as to how important components are when working with react. 19. Props - An Introduction: Welcome, and it's time that we talk about props in react. Now, to demonstrate the same, I have this very simple application. So here, if you see, I have this main dot Qx, which is rendering this app on the root element. And this is app over here, which is just rendering hello over here. So you can see Hello as the output over here, right? Now, let me create a scenario. Let's say you are building or showing user profiles, right? So you're building an application wherein you wish to show user profiles for different set of users, right? Now, what I would do is I would create another component. Okay? I would call this as profile card over here, o dot Jx over here. Okay. And inside this, I'm going to have a function. I'm going to say profile card. Oops. So I'll say file card over here. I'll get rid of the parameters. And over here, I'm going to return some GSX. Okay? So interface we need to return. Now, what is the interface that you're returning? I'll keep it very simple, right? I'll have a TIF. I'll have H two. I'll say name over here. We'll display name and I's. Or let's stick to name over here. Okay? We'll just stick to name right now. And of course, I'll add export over here, default, and I'll say profile card, something like this. Okay? Now, I need to make use of profile card over here. What I need to do is I need to say profile card, something like this, and I'll get this imported. Okay? So you can see the input statement direct to the top. I'll just collapse this so that we have some more room. And now, if you come to the application over here, you can see name being displayed over here, which means that our component is being rendered successfully. Okay? Now, we'll come over here. I need to show user name over here, right? So what I can do over here is I can say constant. I'll create a variable. I'll say name, and I'll call the name as Alice. Okay? So this is some Java script I'm writing, and I'm going to make use of this JavaScript within JSX like this, and I'm going to say Okay. Now you're going to say you're going to see name Alice over here, okay? So for the sake of the convenience, I'll just change this to H three, something like this. Okay? So you can see, name is Alice over here. Okay? So okay so this is working fine. Now, let's say our application expands and it's a multi user application. Now, you might want to make use of this profile card to display information of multiple users, right? Right now, what we are doing is we are displaying hardcoded ALS over here. I don't want to do that. I want to keep it as dynamic as possible, and there will be scenarios where we might get data from the back end, we might get data from the user input. We can get data from anywhere, right? So I should be able to have some sort of dynamicity into this particular component, which allows me to render this name based on what is past or what is available, right? So how can we make this happen? So this is where the concept of props come in picture, right? So props in react, what are they? They are used to pass data from one component to another. So imagine this. What I mean by this is this one component, this is another component, right? You want to make use of profile card in this component over here, right? Now, wherever you're using, you would have some sort of data, right? For example, I might make a EPI call over here, let's say, API call over here, and I might fetch the user name from this server, right? I fetch fetching user name so right? Now, I'm actually not doing this, but let's say I have an API call wherein I'm fetching the name of the user from the server using JavaScript, right? And I might want to make use of that name, and I might want to display it with profile card, right? Profile card is a component that I want to make use of it. So how can I pass this name that I have got over here? And display it with profile card. There's no way to do that, right? But with the help of props, you can do that. So you need to make use of props to enable this functionality, right? So what is happening over here is understand this this app over here is a parent component, which is rendering this child profile card. Why is profile card child? Because it is being rendered into app. And hence app is parent component, and this is child component, right? So props in react are used to pass data from one component to another, specifically from a parent component to a child component. And with the help of props, props help make components more flexible and reusable, right? Right now, we have hard coded Alice over here. So of course, you can only use this to display the information of Alice. Okay? But if I remove this hard coded thing over here and if I make it dynamic, something dynamic over here, then this would enable me to make use of this profile card to display any sort of user information, right? Let me demonstrate this. So I'll get rid of this over here, okay? And I'll add a parameter over here. I'll say props, something like this, okay? And here, I'll say props. Dot name, right? Now, where is this props coming from? So right now, it won't display anything, Okay, because we are not passing anything. So here, I need to pass. So I need to say name is equal to, and I can say, let's so. Okay, so I can see Alice. You can see Alice, right? Now, if I duplicate this card, let me duplicate this card over here. I can see Joan. Okay. You can see John being rendered. So this is what I was talking about. This is the dynamicity that props add. Okay. Without this, if you have hardcoded Alice over here. Okay, imagine this. You have hardcoded Alice over here. Okay. Then this won't work. Okay? So I'm not hardcoding right now. I'm not reverting my code, okay? But if you hardcode Alice over here, you can imagine, like if I duplicate this profile card, I'll see Alice everywhere, right? Because it's hard coded. But right now what is happening is I'm dynamically passing this element over here or I should say this property over here, and this is being used to display the information. All right. So yeah, this is what props are. So props is a short form for properties, okay? And they are a way to pass data from one component to another in react, okay? And they are used to make components more reusable by passing different values as input to the component, right? So instead of hard coding name and all the other sort of information inside the component, you can pass them as props, okay? One more question I would like to address which you might be thinking, okay, I said, I will have the user information available in this component, right? Because I'm making an EPA call, or I might make a call to the database over here, right? Now, the question you might ask is, instead of using props, what if I move the EPA call from here to here? Right? That's a very good question. But I'll tell you something, if you're doing this, you don't need to use props, right, because you have the user information over here, you can fetch it and display it over here. Okay. But let me tell you here, if you're hardcoding the API call, then what you're doing is you are defining how this particular component is fetching data. Okay? You might not want to do that because depending on the scenario, you might fetch the information from different places. So for example, if here you are displaying the profile information, you are fetching the data from the server, let's say. If you are using this profile card in some other file and there you want to display the information from the database. So you might have instead of API call, you might have a database call over here or some sort of other call over here. Okay? So the data fetching is completely decoupled over here from the component. If you start hardcoding data fetching into the component, it will be restricted. So here we have bought the data component out like the fetching part out. Okay? Data fetching is outside the component, and we're just passing the data that we retrieve into the component. So the component just focuses on rendering the information. Hope this is useful and I hope you are able to get a sense of this. Now, a couple of things that you need to keep in mind about props is the flow of the props. So props are passed from a parent component to a child component. I already discussed what parent component is. Parent component in our case is app over here. So in this case, it will be passed from parent to child, which means app to profile card because profile card is being rendered inside app. So profile card is child component, right? So this is how the flow would work. So this is the flow of props from parent to child. Another point I want to talk about is immutability. Okay? So props are read only. This is something that you need to remember. Props are read only, meaning child components. So whatever props you're passing in, child components cannot modify the props that they receive. Instead, the parent controls the data and passes it down as needed. All right? So if you try to modify props over here, let's say. So if I try to say props that name over here is equal to test, for example, if I try to save this, the output would disappear. And if you head over to the console over here, if you scroll up, you can see, cannot assign to read only property, and you are trying to modify this. That is what it's trying to say. Okay? If you get rid of this line, the error will disappear. If I save this, you can see the output is there and the error has disappeared. You can see, right? So yeah, props props are immutable. They're read only. They cannot be modified by child components, and they rely on parent component to pass the data to them, right? So I hope this is useful and I hope you have been able to follow along. 20. Multiple Props?: So I have this example wherein we are rendering the profile card by passing in name as the prop over here, and we are displaying the name like this in the profile card, and we are seeing name being rendered over here onto the interface. Now, it might seem looking at this example that we are passing only one prop over here. So what is a possibility? Okay? So I would want to show you and tell you that you can pass in multiple props as well. So I can say 23 and I can say H is 42, for example. Okay? So here I'm passing one more prop over here, which I can display over here. Okay? So I can say H and I can say H over here. Okay. Something like this. And if I come over here, you can see Alice and John, okay, with their respective Hs. Okay, so this is completely possible wherein you can pass in multiple props to a child component. Now in our example, H that we are passing in over here is being passed as a string. There will be scenario wherein you might want to pass the data as integer or number. So what you can do in that case is you can say num over here, I'll pass another parameter. I'll say num as two over here. Okay? Or let me pass it as string, okay? I'll pass at one place at string and another place over here this way. Okay. So this is how you can pass as a number. Okay. This is not a string. Okay. And over here, let me try out something. I can say const sum is equal to props taught, num plus one. Okay? And I'll display the data over here. Okay? So here, you can say num is so I don't need to I don't need this, I'll see sum over here. Okay? Now if you come over here, you can see num is 21 over here, which means so two plus one, it became 21 because it was being passed as a string over here in this case. Okay? In the second example, we have passed it this way, and here it is being displayed as three, which means it is being passed as an integer, Allright? So I hope this is making sense, how you can work with data and pass in multiple props into a single component. All right? I hope this has been useful. 21. Manage Boolean values and Prop Types: Now let's talk about how you can make use of Pollans when working with props. So here in our example, we have profile card, which we are displaying I'm passing in to strings and number, Allr? And I'm displaying this number in this way with the help of calculations. So I'll get rid of this display for the number. We don't need it. Okay. And I'll also get rid of Num over here. Okay. So now let's talk about boolean. Let's say I want to pass a Boolean prop, I'll say is member over here. Okay, and I'll say true over here. Okay. And I'll pass a similar thing over here as well. Oops, I need to close this over here. Okay. I'll pass in is member, and I'll say falls over here. Something like this. Okay. Now, I'm passing Boolean over here, but this is being passed as a string. Okay. Let me show it to you. So if I duplicate this, if I say is member over here, I sorry. Is member? Okay. Something like this prop start is memo. Okay. Now, if you see over here, true and false, it is being printed as E string. Okay. Now, to pass it as E boolean over here, I need to, like, remove these round brackets here. Sorry, these inverted commas, and I need to add the Cobras. Okay. This is the same for integers as well. Now if I save this and if I come over here, you'll see you're not able to see the boolean values. Okay? So what is the purpose of passing in the boolean values? So Boolean values are used for decision making. Okay? So let's say you want to showcase, or you want to show a message depending on whether the user is member or not. So you can make use of this Boolean is member over here and you can display that. Okay let me show that to you. So I can say status over here. Status. And if you take a look at the status now, there's nothing because it's a boolean value. So I can say if I can make use of ternary operator actually over here. Okay? So I can say props is member. Then if this is true, then I would be saying active member or else, I would be saying guess. Something like this. I save this and you can see active member and guest. So Alice is active member because we passed in true for Alice over here. You can see Alice was true. And John is not an active member, so you can see guest over here because we passed in false. Okay, if you want to make this also true, you can pass in true like this. Oops. So I'll select this, save this and you can see active member. Okay. For a word, you'll see Johns guess. Okay. So this is how you can make use of boolean values within props. So props except boolean prop member, okay and it allows you to manage the state inside the component. So if you want to add some sort of conditional display or anything like that, you can make use of boolean props, right? And how do you pass it? You pass it within a pair of curly pass and not in inverted commas like this. This is a way to pass a string over here. All right. So I hope this is useful. 22. Destructuring Props: So let's start talking about props destructuring. So here, I have an example wherein I have this app component, which is making use of profile card twice, right? You can see it's rendering profile card twice, and it is passing in this data over here, and this data is being passed in the form of props, and this profile card component is using this data. With the help of dot notation. So you can see how it's using it. Now, what I mean by dot notation is this data that you're passing in from here, name, H is member. These attributes are being passed in in the form of object over here. Okay? So props becomes an object, and you can access whatever has been passed with the help of dot notation, which means using this dot over here. Right, so you can see props dot name, props dot h and props dot member. This way of accessing things is known as dot notation, and we are able to make use of dot notation over here because props here is an object. Okay? It's in JavaScript object, right? Now, in JavaScript, it's common to make use of destructuring, right? And when you're making use of props in react, destructuring is commonly used to make code cleaner and more readable. Let me give you an example. First, I'll just give you a review of what destructuring is. So think of it this way, okay? You have a JavaScript object over here. Okay? This is not react. This is simple Java script that I'm writing over here. Okay, I'm saying name, John. Okay. And it has to it has two things in it. It has name and each. So the each is 30 over here. Okay? Now, one way of extracting the data from this object is one way of unpacking, is you can say name, person, taut, name over here. This is one way. Okay. So this is without destructuring, okay? And using dot notation, right? That is what you're using, okay? You can say g over here and you can say person dot age. This is one way of doing things, right? Another way of doing things is with the help of T structuring, with destructuring. How would you do it? So you can say const, okay? You can say name, g over here. Okay? And you can assign it person. Oops. So this would unpack all the values that exist in the person object and it'll assign it to both these variables. Now I'm getting an error because this is redundant, right? Name and age is already created, so I'll just comment this out, okay so that we don't see the error. But you get a sense this is restructuring wherein you are unpacking person into name and each, right? And what is name and age? Name and each are attributes you can see over here within the object over here. So we unpacked the properties that existed within this object. You can see this got unpacked. Now this is known as destructuring. It's a better syntax as compared to this one. Okay? This is also doable. You can do this, but this is not that readable. It's a bit lengthy and cumbersome process, right? Now, I said this is being passed in as the object, okay? And these are all the properties over here. So here, if you see you have props, you have props dot name, props dot H. So name age is member are nothing but properties. So you can also apply the similar D structuring pattern over here. Okay. And to do that, what you would do is you can get rid of this over here. Okay? We can make use of the similar syntax, right? You need these curly braces, so I'll copy this, paste it over here, and here I can have name H and I have one more is member, something like this. Now, the moment I do this, I don't need to access all these attributes or all these properties, not attributes, all these properties using dot notation. So I can get rid of dot name, dot H, and tot is over here. Okay. I'll save this and this also can be saved, and you'll see there's no change in the output. There won't be any errors also. Okay. It's all good, right? So this is what JavaScript destructuring is, and I believe you're familiar with JavaScript destructuring. But this was just a refresher. So I hope you understand what this is and how this is used for props destructuring. Now, remember, destructuring in JavaScript is a convenient way to extract values from arrays or objects into variables, right? It is very frequently used and the term that is used is destructuring allows you to unpack. So unpacking is the term that is being used everywhere, right? So here, what we are doing is we are actually unpacking the props, right? We are unpacking the props into the individual variables over here, okay? And we are making use of those variables inside the component, right? So here directly variables are being used, and this is much more readable rather than making use of tot notation, right? So when you're working with react components, this kind of a syntax, you'll see a lot wherein the attributes are being passed in this way. Properties are being passed in this way, and here they are being destructured in this way. So don't get confused. This is normal object destructuring with Java script. So Javascript the concept of JavaScript is being used over here, right? So I hope this is useful and I hope you have been able to follow along. 23. Validating Props with PropTypes in React: Let's start talking about prop validations and how it can be used to validate the properties that you're passing, right? So I have this component over here, app, which is making use of profile card twice, and we're passing in some props over here, you can see, and this prop is being destructured over here by us, and we are making use of the destructured data inside the compoun over here, right? Now, let me give you a scenario. Here we are passing in H and we're passing in H as a string, right? Now, there's no sort of validation as such, okay? There's no sort of validation that we are doing right now that can help us highlight that highlight to a developer or whoever is using this particular component that, hey, g is supposed to be a number and not a string, right? So right now we are not getting any sort of errors. We are all good, but there will be scenarios wherein you have designed a component and you would want whoever is working on that component or using that component in their file, they should pass data in a certain way, right? Because normally what happens is in a team you are working on one component, you're writing one component, and that component is being used by any number of developers. How do you communicate that? So that is where prop validation comes into picture. Now, with the help of prop types, prop type is a tool that can be used for validating the props that is being passed or that a component receives. Okay? So with the help of prop types, you can help you can catch pugs early during the development when the data is being passed, ensuring that the current type of data is being passed to the component. And if a component receives the props that do not match the expected types, react will issue a warning in the console in the development mode. Right? So this is something to know, and let us see how you can add validations. So what I would do is first, we would need to make use of an input statement, so I'll say input, prop types. Okay? I'm writing this in profile card dot Qx, and I'll say from I'll say prop types over here. Okay, so I'm making this input statement at the top. Now, what I would do is here, I would write in the validation that I need to have. So to add validation, what we would do is over here, we would say profile card. Okay, this is the name of the component. We would say tot, I would say prop types or something like this. Okay. And then I'm going to open a pair of curly praises. Okay, align this with a semicolon. And over here, I'm going to write validation, whatever I want to have. So I can say name. For name, I need to say prop types, tot string. Okay. So this is one. Okay. I can say for each prop types, thought, let's say number. We want it to be number, right, so I'll say number. Okay. And for a member, Okay, I'll say prop types, and I'll pass in dot Bool over here. Okay. And I'll pass in a Coma. Okay? I've not saved this file yet, but before saving, I want to show you that we are passing in string right now and we are not getting any sort of errors, right? So here, if you see from app.j6, we are passing in string for each. We're not getting any errors on the console. The moment I save this and if I come over here, you're going to see these warnings over here. Failed prop type, invalid a prop age of type string applied to profile card, expected number. Okay? So you get these sort of warnings in the development mode only when you are making use of prop types validation. Okay? Now, what will happen is if a developer is making use of profile card component. Let's say profile card component is developed by you and I as a developer, I'm your teammate, and I'm making use of this profile card and I happen to pass H S 23. Which is a string. It would just start throwing warnings onto the console and the developer, I'm the developer, in this case, I would know that, hey, I'm not supposed to pass it as a string, but instead I'm supposed to pass it as a number. Okay? Now, I can change this to number also over here, and the warning will go away. So I can say 23. If I save this, I'm still getting an error, okay, because I've changed only at one place, right? So I need to make a change here also. Just save it. Okay. And now, you'll see there is no error as such. Okay? So it's all sorted. Now, one more thing I want to talk about is if I don't pass is member, let's see what happens, okay? So if I skip I member, you'll see there's no issue as such, right? So you can see, there's no issue, right? Am I getting any sort of error that I'm supposed to pass is member? No, right? So you can add validation for that as well. So if any sort of prop is mandatory, okay? You can add any sort of you can add that sort of validation. Asking the user to pass the value for that particular prop. Okay? So here, Boll I can say tot, and here I can say is required. You can see. If I save this, if I come over here, you will see the prop is member is marked as required in the profile card, but its value is undefined, right? So earlier passing I was not passing in this prop and I was not getting any sort of error, but now I have to pass this compulsorily Okay, it's mandatory. There is no escape. And if I save this and if I do a refresh, you'll see the error go away. All right. So I hope this is clear as to how the props validation work. Now, remember, this will be shown this will be the errors that you are seeing will be shown in the development mode, and this will be shown as warnings, okay, onto the browser console, which will help developers rectify the issue and address them, right? So that is what prop types are for, okay? So this means you want a string. This means you want a number. This means you want a boolean, as well as it is required, okay? He and name are optional, but member is required, okay? You can make T's also required over here by passing in this over here. If you add is required, then it means that H is also required and it is not optional. All right. So depending on your requirement, you can add these sort of validations and get things done. All right? I hope you have been able to follow along, and I hope this was useful. 24. Using Props with Arrays: So let's start talking about how can you make use of arrays as props over here. So we have this component app, which is making use of profile card twice over here. And I have this profile card, which is restructuring the props that I'm getting. I'm displaying the props and I have some validation for the props over here. Okay? Now, what I'm going to do is let's say I wish to display the hobbies over here, and hobbies can be multiple. So what I would want to do is I would want to have hobbies being stored in the form of arrays over here. Let us say I have hobbies, so I can say con hobby one. Okay. I can say hobby one, and I can have E of this sort. Okay, something like this, and I'll say reading, and I'll just have two hobbies for now cooking. Okay. I'll pass in this. Okay. And what I can do over here is I can add a prop over here, hobbies, and I can pass in this. I can say hobby. One. All right, so this is being passed now, and what I need to do is I need to make use of it over here. Okay? So I can say hobby over here. Okay. And yeah, I get the hobby over here. Okay, hobbies, it won't be hobby. It'll be hobbies because you're passing it as hobbies over here. Okay? So I got hobbies. Now what we need to do is we need to display the hobbies, right? So first thing first, I'll come over here. I'll say age three or age three, hobbies. Okay. And over here, what I'm going to do is I'm going to say I'm going to add an unordered list, L, and then over here, I'm going to have some Ja script written. I'm going to say hobbies map. So I'm going to make use of map method over here. Okay, hobbies dot map, and I'm going to say hobby. I'm going to have two parameters over here, okay. So just in case you don't know what I'm doing, I'm making use of map over here and I'm making use of map to iterate essentially over each element in the hobbies array. So hobbies is a array over here that I've received. Okay, I'm passing it as an array. You can see here, right? It's an array. Okay? Now I need to iterate over it and display it to the user. So arrays in JavaScript. So this is JavaScript and arrays in JavaScript have this amazing method called map, which you can make use of, right? So I'm making use of hobbies dot Map. Now, what map does is it ads over each element in the hobbies array or whichever array you are using it with. So right now, the array in question is hobbies. I'm saying it rate over each element in the hobbies array, and what you do is for each element in the array, execute this arrow function. So I have this arrow function that you see, so I'll just cut this. Okay, This is map. Okay. Now within this, I'm pasting this arrow function. Can you see? Okay. This is the arrow function that I'm making use of, and this arrow function is what will be applied or executed, and it is going to return in new value. Okay? So this is taking in two parameters, this arrow function, hobby and index. Now, hobby is the individual or the current element in the hobbies array during each iteration. So it is representing the current element during each iteration. For example, if our hobby list is reading and cooking, first, hobby will be reading and then it'll be cooking. And the corresponding index will be passed over here. Okay? So what I would do is I would return something over here. So whatever you are adding over here is returned. So I'll create an LI element over here. Okay. And I'll say key is equal to, I'll add index over here and hobby will be added over here, something like this. Like so. Okay? So what we did is we added this function over here, and this function basically is executed for every element in the array. Okay? It has two parameters. One is the current element in the hobbies array during each iteration. It is called hobby. And then we have index. This is index of the current element in the array, okay? And what happens is, after this function is executed, a value is returned, and the value that is returned in this case is this markdown, okay, or this JSX code that we are returning over here. Now this is happening what this is doing is this is LI, okay? So it's a list that is being constructed. It represents a single list item. Okay. And I have this key over here. Okay. Now, key prop is being added over here with the value of index. So for the first element, the key will be one. For the second element, the key will be two. Sorry, for the first element, the key will be zero. Okay? And for the second element, key will be one and so on, because indexes start with zero, of course, right? Now, why do we add this key over here? Okay? So adding this key is one of the best practices whenever you're working with lists in react, right? Or whenever you're rendering arrays in react. So this is very important because the usage of key over here is being done to efficiently manage the rendering of list, okay? And this key helps react, keep track of each list item and update only the ones that change that need the changes when the list changes. So if there is any changes in the list or the array over here, okay, based on this key value, it will do a hot update, okay, because it needs to perform an update, right? If there is any change in the value, it doesn't instant reload. So based on the key value, depending on how this key is being assigned and rendered onto the interface, the hot reload will be done. So basically from the optimization standpoint, react needs this key, and it's important to include this whenever you are rendering an array, or a list, I should say. Okay, so this is what we have done. And if you come over here, okay, we are not seeing any sort of output. Why? Why so? Okay. So, okay, so I'm getting an error over here 11, okay? And cannot read properties of undefined. All right. It's because I'm passing in at this for only probably 11 component and not the other one. So if I save this, I should idely see the output over here. You can see the output I'm seeing. Okay. Now I'm not seeing hobbies being shown over here. Hobbies are not being shown. Okay, hobbies are not being rendered, in fact, okay? So let us see why the hobby is not being rendered. So I think I got the problem here. We are just crafting this LI, but we are not returning it. So right? We need to add a return statement over here. Okay. And the moment we add the return statement, let me save it over here. I'll also close this with a semicolon, Okay, and I'll save it. And if you come over here, you'll see reading and cooking being shown. Okay. Ignore the interface. Alright. It's not looking that pretty, but I hope I'm able to communicate the concepts that we are learning about, right? So here you can see Hobby, Hobby one being passed. Okay. What you can do is I'll directly cut this instead of making use of a variable. I'll just get rid of this over here. Okay. And over here, what I can do is I can simply paste the hobby. Okay? So here I can have reading and hiking. Okay, and swimming. So first one has reading, cooking, another one has swimming and hiking. And if you see over here, reading and cooking and swimming and hiking. Okay? So it's properly being displayed. This is absolutely great over here. Okay? Now here, what we are doing is we are passing in the array of string over here, right? The array of string is being passed. Now you can add some sort of validation over here if you wish to. So here, I'll come to prop types. And I can add validation. Let's say I wish to have hobbies as the array of string only. I don't want any other type come in hobbies. Okay? So what I can do is I can say hobbies over here. Okay? Colin I'll say prop types, something like this. Array of over here. And over here, I can say prop types dot I can say string, something like this. So this is a syntax that you need to follow. Okay. We're seeing prop types array of and we are seeing it should be string, all right? And this ensures that hobby is an array of strings always. So if I save this and if I come over here, okay, if I fresh, you'll see that there are no errors as such, okay? But if I change this to that of number, and if I come here, you can see invalid prop type provided a type of number. You'll see rendering happening over here. Nothing is stopping from rendering, but a warning is issued, okay? That is what the benefit is of the validation that we are doing. All right? So, yeah, I hope this is useful, and I hope you have been able to follow along as to how you can make use of arrays with props in react. 25. Setting Up Callbacks: Now it's time that we begin talking about callbacks. Now, what are callbacks? Callbacks are functions that are passed as arguments to other functions and are executed after a particular task is completed. Now, that particular task could be anything like a sort of rendering operation or a sort of asynchronous operation like API call or something like that. Okay? So I'll show you how we can make use of callbacks in this example. So here, what I have done is I have this, uh app component that you're seeing here. Okay? This is the entire app component, which is making use of profile card over here. Okay? And profile card is the component over here, okay? It is rendering some data, some props that it's getting from the parent component. And I have added some CSS just to beautify this interface over here. So you will see a little bit beautiful interface, a decent interface. Okay, presentable. I won't say it's too good, but it's presentable is what I would say. All right. And if you come over here, this is the CSS I've added for the same. It's there in the app dot CSS file. Okay? It's very simple CSS, pretty straightforward. And I've got the job done by adding a couple of classes as well, like App contain over here and the profile card over here. Right. Now, coming to the topic of callbacks, okay? So let's say I want to add a on click listener on hobbies, and this on click listener will bring in alert, okay? And I want to know which hobby has been clicked. I want to show it to the user. Okay? So functionality is simple. Okay, it could be more complex, but I'll just stick to the simple functionality. All right. Now, what I would do is I would have a function defined, right, first of all, within app, I'll say, let's have a function. So here you can say, const handle, Hobby, click over here. Okay. And I'll have a parameter. Okay, over here. I'll make use of arrow function, and I'll say alert. Okay, something like this. And here, I'll say you clicked on I'll say taller hobby, okay? Hobby, something like this. Okay? So this is a function that I've created, and I want this function to be triggered whenever hobby is clicked. Okay? Also, I'll just align this. So this has become fairly long, I would say. Okay. It's going off the screen, so I'll just align this pet in a better way. Okay? So you can see this over here. Okay. I'll get name over here. Each is member hobbies. Okay, so this is now readable and it is not going off screen now. All right. So now what I need to do is what I can do, I can pass this particular function as a callback to this particular component. Okay? How with the help of props? All right. So I can come over here, okay, and I can press Enter and I can say on Hobby, click, that's the name of the prop. I can have this JavaScript syntax, and I can say handle hobby click, something like this. Okay. And I can pass it for this as well. Here, something like this. Okay? So yeah, I've passed both for both the components that I'm rendering, both the profile cards, I'm passing in this as a prop. Now, over here in the profile card, what I need to do is I need to get on Hobbie, click over here. Okay, something like this. Okay? Now, what I'm going to do over here is here, I need to add a listener in the LI element when we are rendering the LI element, right? So what I can do here is after key like this, I can say on click over here, and I can have equal to. Okay. And I'll add this and I'll add arrow function, and I'll say on hobby click over here, and I'll pass in the hobby that I have, okay? So I hope this is making sense. Okay? So what we are doing is we are adding a on click L's over here. We have access to the hobby. So with the help of this map, this map is iterating over the Hobbie array, right? And for every iteration, these two things have the current hobby and the index. So I'm passing in this hobby over here. Okay, whenever the click event is being triggered, and I'm calling the on hobbie click. What is on Hobbie click? It is coming in as prop over here. And what is coming in as prop over here? This thing is coming in. This function. Okay. And what will happen is this thing that we are passing in as the parameter over here. Okay. Let me take this also to the new line, something like this. Okay. So this thing that you are getting on this thing that you're passing in as a parameter, hobby will be passed in over here. Okay, over here to this function, and this alert will be triggered. Okay? Let us see this in action. I'll save this code. I'll come over here. Oops. So you see swimming on click hiking on click. There's some problem in the rendering. So over here, if you see on click hobby. Oops. We did a mistake, so I'll just cut this. Okay. I'll just cut this. Okay. And, uh, so I accidentally added this at a wrong place. Okay, so it should be over here. Okay? Yeah, something like this. Now let me take this at a new line. It should be after key, and then this closing tag over here for HTML, and then we are rendering the AI like I hope this is making sense now, okay? So how it worked is LI tag has two attributes. One is key, another one is on click, you can see. And then we are closing this tag here. We are entering the hobby, and then we are closing the LI tag. Okay. I hope this is making sense. And if you come over here, I'll do it fresh. You clicked on Cooking, okay? You clicked on hiking. You clicked on swimming. You clicked on reading. So you can see how callback is in action, okay? Now, this can so here we have passed into a component. We've passed this as a prop to the component. Okay? You can pass this to any normally callbacks are used to be triggered. They are supposed to be triggered when asynchronous operation or any sort of rendering is being completed. Okay? So in that kind of scenarios, you can make use of callback. So let's say you have an API call, what you can do is you can pass in this function as a callback. And once the API call is done, depending on a certain operation or a certain event, you can trigger the callback, like we are triggering over here. Right? So this is the function defined in the parent component being triggered from an element in the child component with the help of on click Lissner. All right. So I hope this has been clear and I hope you are able to follow this along. 26. Props and the Spread Syntax: Let's talk about how you can make use of spread operator when working with react and passing in props over here. Okay? Now, spread operator is a JavaScript concept, okay? And we'll see how we can apply it over here. Now what is happening over here is I have this app component, okay, which has this function created, okay, this function, handle hobby click within the app component, and I'm passing in this handle hobby click along with some other props over here to Profile card, and I'm rendering profile card over here, okay? And profile card is a very simple card that renders this information in the UI. All right? It has some validations, too. So what I'm going to do is I'm going to pass in the props in the profile card with the help of spread operator, all right? And what I'm going to do first is I'm going to create an object with all these values. Now, these props are being passed to the profile card, and these are props of different uses, right? So these are properties in a way for representing Alice and John, right? So what we can do is we can get these props converted into objecs over here. Okay? So what I would do is here, I would say const, I would say Ale profile. Okay, I'll say Alice profile over here, and I would add these as objects over here. Oh, sorry, as uh properties. Okay. So here, I'm constructing an object, okay, I don't need this curly brace. Okay. And here, then I'll have, uh, this member, okay, something like this. I don't need True, something like this. I'll have hobbies. And when you get rid of these curly braces, this was needed in GSX, but not over here, okay? I'll have comma. And, uh, I'll add this. Okay. And yeah, I'm still getting error, I know. And the reason for that is it should be key value pairs and not equal to, okay? So I'll Oops. I'll Oops. I'm messing up with the keyboard. Okay. So I'll just copy this. Okay. I'll just copy this and I'll paste it away. Oops. So yeah, something like this. Okay. And yep. So this is what Alice profile looks like. Okay? So we are passing in the data for the Alice over here. Okay? We need to do the same for John as well. So I'll cut this. Okay, cut this over here. I'll come over here. Okay. This is done. I'll say const, John, profile. Okay. And here, let's have this. Okay. First thing first, I'll get this over here with a comma. Okay. And we need to format this a bit, okay? So 42, I don't need a the curly braces. Those were needed for chewy sex. And I'll add colon. Okay, coma. And here, again, I'll add colon and these curly braces are not needed. I'll add coma and this will be colon. The curly braces are not needed, and then I'll align this. This is done. All right. We have John profile and we have Alice profile. Now what we can do is we can come over here, in the profile card. Okay, we need to pass these as props, these object as props. What I can do is I can add a curly Base. I can say three dots and I can say Alice profile over here. And over here, I can see three dots and I can see John profile. I can see if this. Now, if you take a look at the output, it hasn't changed. There is no change in the output, no errors as such, okay? Everything is same. It's just that we have made things a bit more better where we are creating profiles first for every member, what all we want to pass, and we are passing in that using the spread operator to this particular component. So the spread operator is used to pass all the key value payers in the object as props to the profile card component. And this way, instead of listing each prop manually, you spread the object and the component receives the corresponding value as props. All right. Slide benefits over the older approach. Many people would prefer the older approach as well, but some benefits here is cleaner code. You are reducing the reputation and basically you have objects created now, based on what data you want to pass. Now, this object we are constructing on the fly, right? We are constructing, we are hard coding all the values. There will be scenarios wherein you will get this object right from the API, Okay, you get some data from the EPI, you convert it into this object sorts, and then you pass it this way to the props. Sorry, to the component in the form of props. Okay. So don't get confused with this kind of a syntax. It's one and the same, right? It does the same job. It's just the different ways of doing things. Okay? This is very useful if you're getting some data from EPI call or a database call, and then you have it in the form of objects, okay? So rather than the constructing the entire props manually over here, you just make use of spread operator and pass it because you are already getting it in the form of objects. Right? So I hope this is useful and I hope you have been able to follow along. 27. Course Conclusion: And that brings us to the end of this exciting journey into the world of react fundamentals. Together, we have explored the core concepts of react from setting up your first project, mastering chair sX, components, props, and lot more. Along the way we have built practical skills and even completed a project to solidify your learning. But remember, this is just the beginning. React is a powerful and very versatile tool with endless possibilities for building the dynamic web applications as you have understood till now. I encourage you to continue experimenting, exploring, advanced topics, and applying what you have learned to your own projects. I'm thrilled to see how you use react to create amazing applications for your portfolio. Whether it's a personal project, professional assignment or anything, feel free to use react, and it will serve as a create foundation for a large application. The skills you have gained here will serve you as a stepping stone going forward in your career. Thank you for being such an engaged and motivated group of learner. I hope this course has not only taught you new skills, but also encouraged you to think from a completely different perspective and dimension about web development. Also, don't forget to check out the project section of this course where we have a project that you can complete and share with the entire class. Thank you for joining us on this journey. Happy coding, all the best.