(#5) How to Create React Component | Use React Component | React JS Functional Components

hello guys how are you I am new and in today's session we will see how to create a VHS component and then how to render I mean how to use this component ngx application okay now let me move to the uh practice react app that we are using in this tutorial now I have to add a folder inside the SRC click out this option new folder and give a name compo hence okay and inside the component I will add two uh I mean components header and footer right now let me add a new file give a name to the file like header dot SX okay and lets me also add one another file new file foot towards their sex okay now let me first move to the header door yes hex here I have to add a basic create case function component so please keep in mind that we will use the react.js function components in this tutorial uh I think you will be aware that there are basically two types of component the class components and the function components in the lattice development of free case All Peoples I mean our developers are using the react as function components and that is why I will also use the red case function components so for creating a body of react.js function component just type RFC react function component and then press tab okay so it will add a basic body of the react case function component and lets me move to the footer.jsx file and here I have to type yet function component and then press Tab and here is the basic code of the footer so this is the basic clear case function component uh give it uh I mean c in detail in our coming videos uh what is the function component how it's look like how to add the JavaScript Port how to render the HTML but the purpose of this video is only how to add a component and then how to render I mean how to use okay so let me save save all now I will use these two component inside our app.js okay now I will remove this code now let me add here a deal sorry I mean uh I will type so it's not working and here I will use my header and footer component now in any website you know that there is a footer and then there is a party of the website and at the bottom there will be a footer so keeping in these in mind I will just import the header component so let me type h e p e r and let me close this okay now here I if I save the uh and go to the browser here you can see an error header is not defined because I did not import the header component inside the app.js so to import the component just type again the r and here in indication I mean the intelligence will show you the path of the component now click on this you can see that the component is imported like in this way you can also import the component manually but it's a good way to click on the adolescence it will completely give the exact path and the component name now let me save again see that the header text is showing inside the top of four browser it's been we are using the header component inside or app.js component in a correct way now let me add here a review and it will be our body web side body forming the document and here I will also import the footer component so for importing the footer component you can see that intelligence is showing me the path of the component now click on these you can see that the footer component is supported now just close this component okay let me save and let me show you the result here you can see that or header and footage component is imported successfully this is why the text from the this text from the header and this text from the footer is showing successfully so this is the basic way to import component inside other component let me show you one another thing if I go to the header component and here we have a simple text if I want to add a component inside the header then I have to use the same rule like you like I use for the app.js for example I add I will let me add another component inside the components folder new file top header to j6 okay let me add basic party uh it will be the top header now I will import the top header inside the header component okay uh here I will add format document top header this one and I will close the tag for me the document Ctrl s now go to the browser here you can see that the top header component that we imported inside the inside the header component stack is showing successfully so you can divide your whole site in different component in your case like in this way and it is the best test to use uh to create and use the components you have to create reusable components so that you can use in every place I mean in many places insert application so this was a basic about how to create and a react cash component that was the end of this video from our next video we will uh I'm in touch a new topic of the rear case uh thank you for watching the video goodbye

Channel: Noor Codelogics

Views: 55

Keywords: react create element, react create component, create component react, create component in react, react components, react component, react js components, react js component, component in react js, components in react js, functional components in react js, react js functional components, reactjs functional components, reactjs functional components tutorial, class component react, reactjs component, react js react, react js tutorial, learn react js, learning react js

Id: -bw-aSsmcCE

Length: 7min 30sec (450 seconds)

Published: Tue Sep 05 2023