Full transcript of “Naan Mudhalavan Frontend Development Session - 8”. Click a timestamp to open the video at that moment. Need another video? Use the YouTube transcript generator.
32:03 Hi all. Uh welcome back to the front-end development with MongoDB database administration uh session. Well, let's wait for
42:38 Okay. Uh sorry guys. Uh sorry for the delay. There was a small technical issue. So uh in the previous class I have seen that you have created a react app. How to you have learned how to create a react app. Right. Right. So now So now let us see what is props in uh
43:25 react. How we send data from one component to another. First of all let me create a react app for real.
44:12 Thank you. So what is the command to create react app? Come on guys, tell me the uh you cannot tell right. Let me share my screen.
45:11 So I hope my screen is visible. So uh what is the command to create react app?
46:16 Come on. So first let us change this. Now let us change this uh space react right sorry capital R it is fine. Now here let us create a react app. So it is npm create week and space
47:03 add latest. Give the project name as n client. Select the framework react. Select JavaScript. Fine. Now follow these three steps here. C displays client npm install.
48:04 What is the command now? npm run dev. Now our front end has uh started. Click on this follow link. Okay, everything is working fine. Now come back. Fine. Now let us create a folder here inside this src called components. Okay. Inside src let me create a folder called components. inside components.
48:53 Let me create a component called my component. JSX. So for React uh you need to install few extensions. One is ES
49:43 ES7. This extension you have to download okay for few snippets for few react snippets you need to download this extension in your VS code okay ES7 react redux graphql react native by this author this publisher name is this fine after you download that extension only then you can use this shortcut for RFCE, React Functional Component export or RFC, whatever it is.
50:34 Let's see. Fine. Now let me write something inside this div tag. Hello Fine. Now let me app. JSX call this in app.jsx.
51:52 Okay, this is hello is working. So now what we have to do is I want to send some data from this component to this component. Okay, from this component to this component. Remove the state. I'll explain the state
52:37 afterwards. So in this this is one component and this is one component right. This is one component and this is one component. So here let me const details equal to or else not like this here I'll send my name okay I'll want to
53:26 send my name as a string okay and I want to print that name here. Okay, I want to print that name here. Hello. Fine. So if I want to send here I have typed it manually. Here I have typed it manually. So from this component if I want to send some data. So using props I can send data from one component to another component. Okay. Using props I can send data from one component to another component.
54:12 Okay. So how to send? You have to send a property called name and whatever value it is having. Now here you have to check Oops. Okay. First let us see what I'm getting it in the props. what I'm getting then I'll print it.
55:00 So this is our output. Open your console. Open your console. In console you can see you have got an object with name and enter. So this is an object. Props is an object. So that means how to get into the object you have props dot the name of the key whatever it is there in the object. Now when I refresh so now now I'm directly getting the value from where now from where I'm getting the value
55:47 from see this name this name is you know uh not from this component I I have given my name in app.jsx component but I am printing I am you know in the console I am uh logging the name in my component. Okay you can see this is in my component jsx line number four. See in line number four at this my name is getting printed. So from this component to this component I have passed the name. So similarly now what we will do is
56:36 here if I want to use the JavaScript uh code inside this HTML. So I'll use this curly braces. Inside curly braces I can use the JavaScript variable. Okay. Now props do me Look what you
57:45 Yes. So I showing that. Okay, robs dot name. So it printed hello Nel. Okay, from where it has printed I have sent the name from here and then get I'm using it to print it here. So as as you all know this React components are you know uh can be used multiple times. Right. In react you can use the components in multiple times. Okay. Like Ctrl C
58:34 here. I'll change the name here. I'll write three. Okay. Now see what happens here. Hello engine. Hello smart bridge. Hello Sigarth. Fine. So like this from here I have sent the name but this component I have written only this this statement here.
59:19 Understood? Understood. So this is how props work. So props in React are unidirectional. I mean in one direction only you can send the props like from app.t J6 you have sent it to my component but from my component you cannot send it to app JSX okay from parent to child only you can send the data app.jsx JSX is the parent component right inside this component only you're
1:00:06 having this child component right so props are unidirectional. Props are unidirectional. That means they flow from parent to the child component in only one direction only. Okay? From top to bottom. But in reverse you cannot send like from my component. This is my component, right? You cannot send a data from my component to app.app component.
1:00:53 Okay. So what we will do is not only a string you can send any data like remove this
1:02:13 Now I can send this as a prop. I can send this as a prop. Okay. Like can take any field called details equal to details or I can create any key name. I can create any key name. So this is info. I have created a key. So this is details. What is this details? This is a JavaScript object. I am passing this JavaScript object as a value for this info property. Okay. Fine. Now here
1:03:02 after coming take the props remove this. Now first let us see what we are getting in props. What we are getting it in props. Okay. So we are getting something called info. Inside info we have name and company. So in my component. So let me print name.
1:03:53 So how to dstructure it? First let us see how to dstructure it. So here only props dot let me see what we are getting. props.info. Okay, we have got the correct object. Now prop.info Info name small bridge. Okay. Now what we will do is I'll print
1:04:48 has lost.
1:08:45 So I hope everyone understood the props concept of props. Okay. So now let us move on to something called states. Okay. to come something called states.
1:11:38 Oh god. So I have made a component called uh counter. Okay. Inside that counter component I have taken one H1 tag.
1:12:24 I'm taking one button. I'm taking two buttons. Okay. So here in React each element will have its own event listeners. What are event listeners are? So let us think what is an event actually. So this is our browser right? This is our browser here. If you move your cursor, that is also an event. If you click anywhere, that is also an event. If you drag this, this is also an event. If you click on this button, this is also an
1:13:11 event. If you click on this button, this is also an event. Okay? If you hover on this count, this is also an event. So we have multiple you know many uh this thing events in our HTML elements. So similarly in button for now let us say we have something called on click on click. Okay, let me give this. Okay, so here on on click what we'll do is
1:13:58 I'll write a small console.log message. So instead I'll write an anonymous function. Inside that I'll write console.log The cloud. Okay. Similarly for this also let me
1:15:53 Okay. Here what I have done I have taken two buttons. For button I have given one on click event. There there is an onclick event for the button. So inside that on click event I am passing this function. Here also I'm passing this function. In that function I have written a small console.log message that you have clicked plus button. You have clicked this minus button. So let us confirm by clicking it in the console. Okay you clicked button. Can you see
1:16:39 you click this? You clicked this. So instead writing the function here. So this is one line. So I have written here. If a function will be big then I prefer not to write there. You have to write it. Cons. Okay. handle um add button. Create a some function whatever function you want to create and you write that console log message there. Okay. and remove this function from
1:17:25 here. Okay. And similarly, wait. Don't take me like this
1:18:14 and then subscri Okay. Now you just simply pass this function in this event handle add button handle sub button. Okay. Handle add button handle sub button. Now see let me refresh still it is working. Okay it is working.
1:19:00 So I prefer to if you have many uh lines of code in the function I prefer it to write it here and call that function here or else you can continue with the previous step what what to like if you have a single line statement there you can write it there there itself. Okay. So now what I need here is whenever I click on this plus button I want I want my number to change. So first let me take a let
1:19:50 count equal to zero. Okay. Now when I click on add, I want to console.log. So initially the count is zero. When I click on this I want to increment count. When I click on this minus button I want to decrement count. So here I'll write I'll remove this line countless
1:21:06 Okay. Now here also I'll write I call this one.
1:22:05 This one. So till here it is fine. Till here it is fine. I have make taken the count variable and I'm incrementing it. And similarly I'm decrementing it with this button. Now I want to print that count here. But it is not showing here. But it is
1:22:51 not showing here. Can you observe it is changing but here in the count it is not showing. Can you see this? So React does not you know uh renders the page. uh React doesn't render this HTML okay with this if in the change in this count variable it is not refreshing the page it is not rerendering the page the HTML content so for this
1:23:37 for this issue I mean not an issue but for this purpose you have to use something called ustate hook to manage the state of the to manage the state of the component. Okay, like if you want to uh render you if you want to do changes and render that changes in your uh front end then you have to trigger the state. So to trigger that you have to use this use state hook. Okay. So use state hook is from React itself. You have to first import it. Excuse me.
1:24:24 Okay. And you have to count comma set count and this is use state in cell value zero. Fine. So I'm removing this count from here. Let me remove this also. Let me remove this also. Okay. So this is the syntax of the ustate hook. Ustate hook will have two uh you know uh parameters. One is the variable state
1:25:11 variable. This is also called a state variable. Then this is the setter function. This is the function. Okay, this is the setter function. Okay, this is a function. You can see yellow color. This is the function. This is the variable. Okay, what how this and here instead whatever you pass that is the initial value of this call. Okay. So what happens is like uh so this is the count. If you want to change the count you have to change it using this u state setter function. Okay
1:25:57 this is called a setter function. Whatever value you pass as a parameter, okay, of this function, that value will be set to this variable like um me. I'll write set count to count + 1. Set count to count + 1.
1:26:44 Or else for your understanding what I'll do is here I'll write set count to 10. See when I click on this button so using the setter function from state I am setting the value of count to 10. Okay I'm passing the 10 as a parameter of set setter function. So this value will be updated to this count variable. Let me show you in a console log. See initially the count will be initially the count is zero. When I
1:27:30 click on this the count become 10. The count become 10. Can you see? So whatever I pass whatever I pass whatever I pass inside the parameter of this setter function so that value will be uh that value will get set to this state variable. Fine. So instead of 10,
1:28:18 what I'll do is I'll take the previous value of count and + 1. Similarly count minus one. Okay. So move this. I'll just let us see a console message. Now let us see whether our functions are
1:29:04 working proper or not. 311 22 2 minus. Okay. Now let us print this count here. Okay. Now let us see. Okay. So, u state helps ustate helps react okay to render whatever branch
1:29:53 whatever branch if this count is changing. So, automatically here it allows you to change the value of the count. Okay. So this this is the main functionality of react to you know manage the state variables. Okay. U state hook will manage the state of the react.
1:34:13 Okay. So this is one of the hook in React. So uh did you all learn about Bootstrap? Did you all learn about Bootstrap? Wait, let me ask
1:35:33 So yeah I have shown you bootstrap here right. So here let me uh in react what we will do is let us go to get bootstrap. Copy this. Where will you paste it? You have to paste it in index.html. Fine.
1:36:19 And you have to copy this, paste it in the body. Fine. And remove everything whatever is there. from this CSS. Okay.
1:37:13 So now what we will do is create another component called CNN. P
1:39:03 I hope I have explained you all everything uh this about bootstrap. So here uh go to the docs come down to accordion select this accordion select this accordion here then you can see this first one itself try to copy this accordion from here first RFC Enter. Excuse me. Okay. Now,
1:39:54 now let me call this component in this app.jsx. Okay. So this is how the accordion is working. So this is how the accordion will work. Okay. Fine. Now what we will do here using conditional rendering we have to change the theme like
1:40:42 so if I want to include style background color black and text color as white. Now let us see what is happening here. Refresh. Can you see this?
1:41:29 Okay, for the button also let me add this style. This button. Okay, for the button I have added this. Okay. So, can you see this is an object here? This is an object. Can you see? So, instead of that, let me make a con my state.
1:42:22 Instead of that I can take this. Okay. Instead of that I can take this and I'll remove this and I'll just give my style there. Okay.
1:43:32 U this is about sorry uh we are you can write this like this also similarly you remove this from here my style Good.
1:44:33 What I have done I have removed my style. I have removed this object from here and I've given it to one variable and I'm call I'm you know calling that variable at wherever I want. Okay. Now let me see will it work or not. Still working. Okay. Now what we have to do is similarly for every accordion div and the accordion button.
1:45:57 Okay. I have given now I have given the style for every accordion item. Okay. Now I have given every style for accordion item. Now here what I need is here let me make a button. So let me copy a button also from here. Let me copy a bookstrap button.
1:47:16 Okay, here I have given a button called toggle. So what I need is what I need is When I click on this button, I need to change I need to change I need to change the theme of my page. Like now it is in dark theme. Right? Now it is in dark theme. Now what I need is I want to change where it is. I want to change this to light. Okay, let me
1:48:09 give this Okay. Let me give it uh three only.
1:48:58 Wait.
1:49:57 and right and whenever I click on this button it has to change it to light mode and dark mode. So in the beginning of the class I have told you like you have to create a function for it. First let me create a function on handle toggle.
1:50:45 Okay. And I'm giving this function here on click and I'll toggle fine. So whenever I click on this button I need my style to change. So for that what I have to write? See if I change this background color to white and color to black.
1:51:31 It is coming with the to the previous style only. So what you need to do here is now let us take a state variable my sty my style comma set my style equal to use create. Okay, my style and set my style. Okay,
1:52:17 now I'll give the initial value of this here. Okay, now I'll remove this style here. So in this I have passed the initial value of the my style variable. What happened? Const. Okay. So
1:53:04 now handle toggle I have to write one condition. I have to write one condition key like if my style dot color equal to equal to Right. Then set my style background color
1:53:50 white and color black or else I'll change it to set my style. Okay, is this clear? When my style dot color equal to white, then change it to background color white and color black. Else let it be however it is. Fine. Now let
1:54:38 us watch is it changing or not. So this is something called conditional rendering. Based on the condition you are rendering the output. Based on the condition you are rendering the output.
1:55:39 So we have something called turnary operator in react like Then write a condition colon and question mark. Sorry. Right. Show you the uh turnary operator operator JavaScript. So this is the turnary operator. Okay. Like it works with um true and false only like if and else only. So you have to give the condition. If the condition
1:56:25 is passed then this expression will execute. If it is false then this will execute. Okay. Let us write the same in R for this. So this should get executed. If it is false then I have to change it like this. Okay. Can remove this or comment this out. Fine. So I have given the condition here. If it is true, this will get executed. If it is false, then this will get executed.
1:57:12 Let me see. Refresh. So this is using the terinary operator. Conditional rendering using the turnary operator.
1:59:02 Okay. So this is about terinary operator. Now let us um We have one more hook. Okay, we have one more hook in this react. We have we have plenty hooks but we'll discuss we'll discuss only few. Now let us uh discuss about the use effect hook. Okay, use effect. What
1:59:49 is actually use effect is use effect hook will you know uh it will track the state variable okay it tracks the side effects okay it is used for side effects like I'll give you an example Let me open. So we are on this page. We are on this page. Now whenever I click on
2:00:39 no mobile phones, huh? Okay, let whenever I click on this air conditioners, what happens is so what happens is see now this you have this page But you don't have the details of what all air conditioners are there. So when I click on this so immediately only air conditions are being displayedly
2:01:27 air conditions are been displayed. This is happening in front end. It cannot store all these data here. Okay. So what happens is whenever if you want if you open this page if you open any page and if you want to load anything like Amazon going to Amazon if you open this page this display okay this is fine but if you want each and every details like if you click on refrigerators within few seconds it is getting me all the
2:02:13 uh refrigerators list. Okay. So this happens when there is a use effect there is a use effect hook like um So here only let me show you the use effect first. Let me import it use effect and I imported const sorry not const directly we'll write use effect.
2:02:59 So use effect will have two parameters. one is a function call back function and one is the dependency like see this is the call back function and one is the dependency array okay this is the syntax of use effect so whenever this page loads console.log log right. This is room use effect.
2:03:44 Okay. So now let me show you. Control shift J. When I refresh, see this is from use effect. Can you see when I refresh? This is from use effect. So once you are entering this page first your use effect will get triggered and this in this use effect whatever you have written that will get executed. Fine. So similarly here when I click on this microwaves immediately the use effect will run and get inside use effect you'll be writing a code you will be writing a request to go to the back end and fetch all the uh data from there. Fine.
2:04:38 Okay. Fetch all the data from there and to display it. Fine. So this is how this is why we use use effectctor and it will also you know uh you know track the state variables like to give con the count variable there is no count see sorry this is my style right if you give my style variable. See, my style is the state variable, right? My style is the state variable.
2:05:24 Now, first if you refresh, first if you refresh, first if you refresh, once it is coming. Okay, again when you click on this toggle again, see it is getting tracked. It is getting tracked. Can you see? So because I have given some the state variable in my I have given state variable in my dependency list of the use effect. So it will track whenever my my style state is changing its state whenever a state
2:06:12 variable is changing its state at that time also the use effect will run okay like once again I'm showing it first initially the use effect has rendered whenever the component loads fine and whenever if you in the dependency array if you give the state variable. So whenever that variable changes its state at that time also the use effect is running. If you don't give the variable here if you give an empty dependency refresh once it came again for the second time it will not.
2:07:00 So if you want to you know uh give a side effect for your uh component I mean if you want to use the use effect uh again when you click on this again when you click on this uh state variable then you have to pass that state variable as a dependency list and use effect. Okay. Refresh fine. This is about use effect. So this is
2:07:46 about use effect hook. Okay.
2:08:43 So, uh, Students, if you have any doubts, I will I am enabling the chat live chat. If you have any doubts, please uh post it in the live chat. Give me 2 minutes. I'm enabling the live chat.
2:13:35 Now I hope you can uh see uh the live chat. If you have any doubts, you can post it in the live chat. I have enabled the live chat. If you have any queries, you can ask it in the live chat.
2:14:37 Students, if you have any doubts uh regarding anything, you can post it in the live chat.
2:16:02 If you have any doubts, please post it in the live chat.
2:17:37 Students if you have any queries please post it in the live chat. Yeah, till JavaScript I hope I have sent you all the file whatever we discussed till JavaScript I have sent it right so I'll send this also in react I'll send this react also once in.
2:19:44 So uh you have a react documentation also. You can uh go to react. this king. You can go to this React website. Okay, you can you know go through this videos learn you can
2:20:30 see you have a clean complete nice document here okay you can use this also react how to use it okay you can explore many things Okay.
2:21:32 Yeah, students if you have any queries please post it in the live chat.
2:23:35 Hey students, please uh don't waste time. If you have any doubts, please post it in the live chat. Get your doubts clarified here itself.
2:24:35 I hope everyone understood what all we have discussed till now. How to create react app using white. Okay. How to create react app using white. How to make components in it. Right? And how to pass props from one component to another component. I've told you right uh props are unidirectional. That means you can only send props from parent component to the child component. But you cannot send it in return. Okay. From child component to the parent component, you cannot send the prop. That means data that means your property something from
2:25:20 one component to another component you can send some props that two in unidirectional that two in from parent to child. Okay. Then comes how to you know uh uh uh using state variable how can you render only one branch? How to refresh only one branch? Okay. Using the state variable. Fine. After that we have seen uh counter app counter component. Then after we have seen um conditional rendering using turnary operator and we have seen use effect. Right? I hope everyone
2:26:07 understood this. If you have any queries or if you have any doubts, you can post it in the live chat or else please ask your faculty so they'll bring your doubt to our notice. Fine. Okay. Uh thank you all. Thank you for joining. Have a nice day. Bye-bye.
