Transcript for transcript_Drillbit_1P6soSGihRdkReneE-yAGeeqhZZqHyZhq.txt

transcript_Drillbit_1P6soSGihRdkReneE-yAGeeqhZZqHyZhq.txt

[00:00:34]  I'm not.
[00:00:37]  Yeah, yeah, yeah. You are audible.
[00:00:40]  Yes, sir.
[00:00:41]  Okay.
[00:00:44]  So hi, hi, welcome.
[00:00:47]  Hi.
[00:00:48]  Okay.
[00:00:49]  So, so currently you're studying.
[00:00:55]  Currently you are studying?
[00:00:58]  Yeah, I am studying. I am in my second year.
[00:01:01]  Okay, okay, okay. So this is regarding front-end Next.js related part. So what do you know about the front-end or the Next.js application?
[00:01:13]  Frontend is something which our client or the user would be seeing in the interface
[00:01:20]  where he will be interacting with the application directly.
[00:01:25]  That part can be called as frontend and this frontend can mean many languages like HTML,
[00:01:33]  CSS or React or newly Next.js framework like this.
[00:01:40]  various technologies are used to develop this front end part of the application.
[00:01:45]  Okay. So when it comes to framework like Next.js or any library kind like React,
[00:01:54]  so the initial level is from HTML, CSS, and JavaScript.
[00:02:00]  So can you tell about how it is aligned in the development cycle?
[00:02:05]  So how these three are aligned?
[00:02:09]  So HTML and JavaScript are the main and like CSS is like styling.
[00:02:18]  So the browser would be can only read the JavaScript and HTML to display and CSS for styling.
[00:02:29]  So ultimately, in any language we write, it ultimately comes down to HTML, CSS and JavaScript.
[00:02:38]  and the user can see the things like in react react uses babel to
[00:02:45]  difference like to be right in JSX format which is JavaScript X HTML and it separates both
[00:02:54]  JavaScript and HTML and gives it to the browser and browser displays the content for the user
[00:03:00]  and next year's as it's react framework it also works in the same way
[00:03:08]  Okay, so what HTML provides when it comes to development?
[00:03:15]  It HTML provides the skeleton of the website.
[00:03:24]  Okay, so when it comes to styling, so the CSS will be?
[00:03:30]  Yeah, styling, CSS and functionality, JavaScript.
[00:03:34]  Okay, okay, okay.
[00:03:36]  So you have told about JSX.
[00:03:40]  So what is JSX?
[00:03:42]  JSX is JavaScript X HTML.
[00:03:47]  It is like HTML only but not HTML.
[00:03:50]  We write similarly to HTML in Java in React and we can write JavaScript code in between
[00:03:58]  the HTML which makes it like unique.
[00:04:03]  So does the browser understand JSX?
[00:04:08]  No, the browser doesn't understand JSX.
[00:04:12]  So here Babel comes into the picture and it separates the HTML and JavaScript and gives
[00:04:17]  it to the browser so browser can understand and display it for the user.
[00:04:22]  Okay.
[00:04:24]  So what is DOM?
[00:04:28]  Dom is document.
[00:04:34]  document object model if I'm not wrong.
[00:04:37]  Yeah, it's correct.
[00:04:39]  Yeah.
[00:04:40]  So DOM is the document object model where the HTML DOM document structure is replicated
[00:04:48]  like.
[00:04:50]  used like that and like HTML header and header file and then
[00:05:03]  diffs and all like that.
[00:05:05]  So it's like a tree like structure.
[00:05:07]  Yeah, tree like structure.
[00:05:09]  Okay.
[00:05:10]  So how you can manipulate the DOM
[00:05:14]  when it comes to Next.js or any framework like React.js,
[00:05:19]  how the process, like DOM manipulation,
[00:05:22]  do you heard any DOM manipulation?
[00:05:24]  Yeah, in React, a virtual DOM is created and when an update is made, React updates it in the virtual DOM, then compares it as the virtual DOM is lightweight.
[00:05:40]  and so it uses virtual DOM and after comparing it with the original main structure which is there,
[00:05:49]  it compares both by diffing all algorithm and finds where the updates are needed to be changed in the main DOM.
[00:05:57]  So it calculates how low amount of updates needed for this particular change happened
[00:06:07]  And after calculating that, it updates that in the main DOM using reconciliation algorithm.
[00:06:17]  Okay, so what's the benefit?
[00:06:20]  So like if we directly update the real DOM, the resources are going to be used a lot and the time required for updating also increases.
[00:06:34]  So and it updates the whole thing like that.
[00:06:39]  So in this case, in virtual DOM, like React minimizes the updates for the DOM, actual DOM, and updates only that particular components in the main DOM.
[00:06:55]  so that the resources are consumed less.
[00:07:00]  Okay, so that is done.
[00:07:04]  So what are the key features of Next.js?
[00:07:07]  Do you know about the key features?
[00:07:10]  How it is highlighted when it compared to the previous React version?
[00:07:14]  So it's built over React.
[00:07:16]  So then what are the key features of Next.js?
[00:07:21]  The key features of Next.js is server-side rendering and SEO optimization and file-based
[00:07:30]  routing or folder-based routing.
[00:07:34]  In Next.js, server-side generation happens where the client or the browser gets the whole
[00:07:43]  HTML to display to the user.
[00:07:48]  And the Next.js server compiles everything and sends the HTML page so that when the
[00:07:57]  In SEO case, no blank HTML comes into picture and directly the page comes to the direct
[00:08:06]  HTML page comes to the picture so that search engines can read or like that.
[00:08:12]  And folder based routing in app router when we create any folder in the app folder.
[00:08:21]  app folder in next years if we create any folder automatically a route is created whereas in react
[00:08:27]  js we had to use the react
[00:08:34]  React router DOM to create routes and we have to maintain a central folder where all the
[00:08:44]  routes are being managed and when the application size increases, it decreases the code quality
[00:08:55]  also.
[00:08:56]  Okay, so when it comes to React and Next.js, what may be the difference?
[00:09:04]  So we have file-based or the folder-based.
[00:09:08]  How it is different?
[00:09:09]  Because React is a library, right?
[00:09:12]  Yeah.
[00:09:12]  Yeah, Next.js is a framework.
[00:09:14]  Yeah.
[00:09:15]  So then what is the difference?
[00:09:17]  The main key difference between React and Next.js is React uses client-side rendering and Next.js uses server-side rendering.
[00:09:28]  Okay, okay. So do you know about the components?
[00:09:33]  Yeah.
[00:09:35]  So what are components and can you classify that one?
[00:09:41]  Yes, components are like a piece of code.
[00:09:48]  Like we can create multiple components.
[00:09:51]  And for suppose we are creating a page and there are multiple components.
[00:09:57]  Instead of writing the whole code, which the number of lines are also increased,
[00:10:03]  we can write some part of the code in another component and import that component into the place where we want it to be displayed.
[00:10:15]  There we can display the component.
[00:10:18]  Okay, so why we need components?
[00:10:22]  To maintain the code modularity and reusability of the code also we use components.
[00:10:30]  So do you heard the class components, functional components?
[00:10:34]  Yeah.
[00:10:36]  I heard about class components and functional components, but I use functional components,
[00:10:41]  but I have a little bit of idea about class components.
[00:10:44]  Class components are like previously we used like this.state to manage the state and class, classes to create and manage the components.
[00:10:57]  Now in latest React, we use functions simply and like functional components are used.
[00:11:06]  it is simpler and we react provided us with some of the hooks like use state and use effect like
[00:11:14]  that so that the state management would be easier and like that
[00:11:19]  Okay, so what is the states and props?
[00:11:24]  State is like a variable in which some data is stored.
[00:11:32]  And we want to preserve the data across re-renders or when the data is changed, the page should re-render.
[00:11:42]  Like that, we use state and state management can be done in the particular component itself.
[00:11:47]  Whereas in props, they are read only, which are sent to the child component by the parent component.
[00:11:54]  And if we want to update that particular prop, like some value in that variable, we use another function where we send that function also.
[00:12:08]  And if we want any updates, we can update it through that function like that.
[00:12:13]  Okay, so you told like when it comes to props, so the data is transferring from parent to
[00:12:22]  child, right?
[00:12:23]  Yeah, yeah.
[00:12:24]  So how you can pass data from child to parent?
[00:12:28]  uh like uh in react like we can import the component like child component which we have
[00:12:36]  created and then when uh the place where we are going to use it we have we keep it like in html
[00:12:44]  tag like that only fit boy and uh in in like uh in like html like we use class like that right
[00:12:53]  So we used the key name and the prop which we wanted to pass as key value pairs.
[00:13:02]  And after in that, when we go to the child component, we get that props and use that props accordingly.
[00:13:10]  These are read only but in child component.
[00:13:13]  Okay, okay. So, do you know about the hooks?
[00:13:20]  Yeah.
[00:13:21]  So, what are the very, very important hooks?
[00:13:25]  The very important hooks would be like useState and useEffect.
[00:13:30]  useState is used for the state management.
[00:13:33]  Like useState returns two things, the variable and the function for updating that particular variable.
[00:13:39]  and in array format it returns and use effect is used to perform side effects like fetching the data
[00:13:48]  from another api or our server we use use effect for that fetching data and we have dependency
[00:13:57]  array in use effect where if
[00:14:00]  this dependency variables change or modified we need to perform the fetching of data is performed
[00:14:08]  again so that latest data can be displayed again okay okay so that is about the hooks and so do
[00:14:19]  you know the state management
[00:14:23]  Yeah, state management like we use your state, right?
[00:14:28]  Yeah, okay.
[00:14:29]  So that is a hook.
[00:14:31]  So that's okay.
[00:14:32]  State management is like if you have applications and if you want to pass data.
[00:14:39]  So around globally.
[00:14:41]  So the statement like, do you heard use context?
[00:14:44]  Yeah, yeah, use context.
[00:14:46]  I'm aware of that.
[00:14:47]  Use context is used for like, previously we used to prop drill, which unnecessarily other components which doesn't need this props also needs to be passed on to the child component, which needs this particular prop.
[00:15:06]  But with using views context, we can create that particular variable globally and access it anywhere in the...
[00:15:16]  components okay so do you heard anything like redux yeah use redux
[00:15:28]  use reduce redux yeah i have heard about that redux is like larger state management
[00:15:36]  in that okay
[00:15:37]  Okay, okay, okay.
[00:15:39]  So, that's it.
[00:15:47]  Just one second.
[00:15:48]  Yes.
[00:16:22]  I'm pretty sure.
[00:16:37]  So, okay. So I'm going to assign a work. So like a front end. So I will sharing that question. And you can submit at the end of the day. Can you submit? It's a small.
[00:16:53]  Yes, sir.
[00:16:54]  Okay. Okay. Just a second. I will share that question through chart.
[00:16:59]  Okay.
[00:17:01]  So.
[00:19:51]  Hello, Neil.
[00:19:52]  Yes.
[00:19:53]  Yeah, I have shared a question in the chat.
[00:19:56]  Yes.
[00:19:57]  So it's a simple blog application.
[00:20:00]  So you need to display all the blog post and need to add correct functionality like posting, creating the post.
[00:20:09]  So using next year's and also I have shared like an endpoint so you can create.
[00:20:15]  So since it is a stack framework, so you can create that one also.
[00:20:19]  And just before 6 o'clock, submit this one.
[00:20:26]  Okay.
[00:20:26]  Okay.
[00:20:28]  Okay.
[00:20:29]  Okay.
[00:20:30]  So I will be sharing the mail ID.
[00:20:33]  So you can send that one.
[00:20:35]  to my okay okay okay
[00:20:57]  Okay, share that mail ID so you can send it to me.
[00:21:00]  Okay?
[00:21:01]  Okay, sir.
[00:22:37]  Hello.
[00:22:38]  Yes, sir.
[00:22:39]  I'm looking and looking into the no problem.
[00:22:42]  This is yet in the room from a little bit.
[00:22:45]  Is it may know who is this?
[00:22:46]  Lokesh is in the call.
[00:22:47]  Can you know about him?
[00:22:50]  Hi Lokesh.
[00:22:51]  Yeah, hi, actually, I'm an associate solution engineer here.
[00:22:57]  Okay, you are from NIT. Okay. Yeah. Okay. I would like to know, there is one more candidate, right? So, Jenna. Yeah. So, will she join the call or how about that? Yeah. After that, the milk and the sugar will join. Okay, fine. Fine. Okay. Great.
[00:23:16]  Okay, and you can once you note down this thing, you can exit the call, right? He will be exiting the call. So, so Jenna will be joining. Is that right? Yes. Yes, sir. Do I have to include a DB for this like MongoDB like that? Yeah, yeah, yeah, you can.
[00:23:36]  Thank you.
[00:23:37]  Thank you.
[00:24:06]  Thank you.
[00:24:06]  Thank you.
[00:24:07]  Thank you.
[00:24:08]  Thank you.
[00:24:09]  Thank you.
[00:24:10]  Thank you.
[00:24:11]  Thank you.
[00:24:12]  Thank you.
[00:24:13]  Thank you.
[00:24:14]  Thank you.
[00:24:15]  Thank you.
[00:24:16]  Thank you.
[00:24:17]  Thank you.
[00:24:18]  Thank you.
[00:24:19]  Thank you.
[00:24:20]  Thank you.
[00:24:21]  Thank you.
[00:24:22]  Thank you.
[00:24:23]  Thank you.
[00:24:24]  Thank you.
[00:24:25]  Thank you.
[00:24:26]  Thank you.
[00:24:27]  Thank you.
[00:24:28]  Thank you.
[00:24:29]  Thank you.
[00:24:30]  Thank you.
[00:24:31]  Thank you.
[00:24:32]  Thank you.
[00:24:33]  Thank you.
[00:24:34]  Thank you.
[00:24:35]  Thank you.
[00:24:36]  Thank you.
[00:24:37]  Thank you.
[00:24:38]  Thank you.
[00:24:39]  Thank you.
[00:24:40]  Thank you.
[00:24:41]  Thank you.
[00:24:42]  Thank you.
[00:24:43]  Thank you.
[00:24:44]  Thank you.
[00:24:45]  Thank you.
[00:24:46]  Thank you.
[00:24:47]  Thank you.
[00:24:48]  Thank you.
[00:24:49]  Thank you.
[00:24:50]  Thank you.
[00:24:51]  Thank you.
[00:24:52]  Thank you.
[00:24:53]  Thank you.
[00:24:54]  Thank you.
[00:24:55]  Thank you.
[00:24:56]  Thank you.
[00:24:57]  Thank you.
[00:24:58]  Thank you.
[00:24:59]  Thank you.
[00:25:00]  Thank you.
[00:25:01]  Thank you.
[00:25:02]  Thank you.
[00:25:03]  Thank you.
[00:25:04]  Thank you.
[00:25:05]  Thank you.
[00:25:06]  Thank you.
[00:25:07]  Thank you.
[00:25:08]  Thank you.
[00:25:09]  Thank you.
[00:25:10]  Thank you.
[00:25:11]  Thank you.
[00:25:12]  Thank you.
[00:25:13]  Thank you.
[00:25:14]  Thank you.
[00:25:15]  Thank you.
[00:25:16]  Thank you.
[00:25:17]  Thank you.
[00:25:18]  Thank you.
[00:25:19]  Thank you.
[00:25:20]  Thank you.
[00:25:21]  Thank you.
[00:25:22]  Thank you.
[00:25:23]  Thank you.
[00:25:24]  Thank you.
[00:25:25]  Thank you.
[00:25:26]  Thank you.
[00:25:27]  Thank you.
[00:25:28]  Thank you.
[00:25:29]  Thank you.
[00:25:30]  Thank you.
[00:25:31]  Thank you.
[00:25:32]  Thank you.
[00:25:33]  Thank you.
[00:25:34]  Thank you.
[00:25:35]  Thank you.
[00:25:36]  Thank you.
[00:25:37]  Thank you.
[00:25:38]  Thank you.
[00:25:39]  Thank you.
[00:25:40]  Thank you.
[00:25:41]  Thank you.
[00:25:42]  Thank you.
[00:25:43]  Thank you.
[00:25:44]  Thank you.
[00:25:45]  Thank you.
[00:25:46]  Thank you.
[00:25:47]  Thank you.
[00:25:48]  Thank you.
[00:25:49]  Thank you.
[00:25:50]  Thank you.
[00:25:51]  Thank you.
[00:25:52]  Thank you.
[00:25:53]  Thank you.
[00:25:54]  Thank you.
[00:25:55]  Thank you.
[00:25:56]  Thank you.
[00:25:57]  Thank you.
[00:25:58]  Thank you.
[00:25:59]  Thank you.
[00:26:00]  Thank you.
[00:26:01]  Thank you.
[00:26:02]  Thank you.
[00:26:03]  Thank you.
[00:26:04]  Thank you.
[00:26:05]  Thank you.
[00:26:06]  Thank you.
[00:26:07]  Thank you.
[00:26:08]  Thank you.
[00:26:09]  Thank you.
[00:26:10]  Thank you.
[00:26:11]  Thank you.
[00:26:12]  Thank you.
[00:26:13]  Thank you.
[00:26:14]  Thank you.
[00:26:15]  Thank you.
[00:26:16]  Thank you.
[00:26:17]  Thank you.
[00:26:18]  Thank you.
[00:26:19]  Thank you.
[00:26:20]  Thank you.
[00:26:21]  Thank you.
[00:26:22]  Thank you.
[00:26:23]  Thank you.
[00:26:24]  Thank you.
[00:26:25]  Thank you.
[00:26:26]  Thank you.
[00:26:27]  Thank you.
[00:26:28]  Thank you.
[00:26:29]  Thank you.
[00:26:30]  Thank you.
[00:26:31]  Thank you.
[00:26:32]  Thank you.
[00:26:33]  Thank you.
[00:26:34]  Thank you.
[00:26:35]  Thank you.
[00:26:36]  Thank you.
[00:26:37]  Thank you.
[00:26:38]  Thank you.
[00:26:39]  Thank you.
[00:26:40]  Thank you.
[00:26:41]  Thank you.
[00:26:42]  Thank you.
[00:26:43]  Thank you.
[00:26:44]  Thank you.
[00:26:45]  Thank you.
[00:26:46]  Thank you.
[00:26:47]  Thank you.
[00:26:48]  Thank you.
[00:26:49]  Thank you.
[00:26:50]  Thank you.
[00:26:51]  Thank you.
[00:26:52]  Thank you.
[00:26:53]  Thank you.
[00:26:54]  Thank you.
[00:26:55]  Thank you.
[00:26:56]  Thank you.
[00:26:57]  Thank you.
[00:26:58]  Thank you.
[00:26:59]  Thank you.
[00:27:00]  Thank you.
[00:27:01]  Thank you.
[00:27:02]  Thank you.
[00:27:03]  Thank you.
[00:27:04]  Thank you.
[00:27:05]  Thank you.
[00:27:06]  Thank you.
[00:27:07]  Thank you.
[00:27:08]  Thank you.
[00:27:09]  Thank you.
[00:27:10]  Thank you.
[00:27:11]  Thank you.
[00:27:12]  Thank you.
[00:27:13]  Thank you.
[00:27:14]  Thank you.
[00:27:15]  Thank you.
[00:27:16]  Thank you.
[00:27:17]  Thank you.
[00:27:18]  Thank you.
[00:27:19]  Thank you.
[00:27:20]  Thank you.
[00:27:21]  Thank you.
[00:27:22]  Thank you.
[00:27:23]  Thank you.
[00:27:24]  Thank you.
[00:27:25]  Thank you.
[00:27:26]  Thank you.
[00:27:27]  Thank you.
[00:27:28]  Thank you.
[00:27:29]  Thank you.
[00:27:30]  Thank you.
[00:27:31]  Thank you.
[00:27:32]  Thank you.
[00:27:33]  Thank you.
[00:27:34]  Thank you.
[00:28:00]  are used for a particular purpose where header is something we can use also div but whereas
[00:28:06]  header is something different which is defined for the top of top section and where footer
[00:28:11]  is defined for the bottom section they are particularly designed for them.
[00:28:17]  Okay so so then what's the use of using like a particular naming convention of the of those things?
[00:28:26]  How would be helpful in development?
[00:28:30]  where in development when any other developers are using our code they can clearly understand
[00:28:39]  the part is the header part and the other part is the footer part with clearly mentioning header and
[00:28:45]  footer and it is also okay okay okay
[00:28:50]  and it is also best best convention method to use okay so what do you heard about seo
[00:29:02]  yes sir seo optimization yeah okay how application can be built like when it comes to seo the higher
[00:29:12]  rank
[00:29:13]  the visibility is more.
[00:29:15]  Yes, sir.
[00:29:17]  So, is HTML, semantic HTML elements contribute that one?
[00:29:23]  Yes, it can contribute where during SEO optimization thing, the crawlers in the browser search for the keywords from the HTML content.
[00:29:35]  So at that time, it may help.
[00:29:38]  OK, so what is CSX? Why we need to use those things?
[00:29:45]  So what what is what is CSS? What's the role of CSS?
[00:29:51]  CSS CSS is used for styling parts where we can add our style where you can add styles to the HTML content and make it more attractive.
[00:30:01]  OK, so do you know about like pseudo elements?
[00:30:05]  Yes.
[00:30:06]  pseudo elements in CSS.
[00:30:11]  Yes, pseudo elements.
[00:30:14]  Pseudo is generally recognized as false.
[00:30:17]  Where we can, in CSS particularly, pseudo elements are
[00:30:23]  like hover focus
[00:30:29]  Yes, focus, focus, hover, there is something where we can.
[00:30:36]  So those are the elements.
[00:30:41]  So then what is the use like when we hover a button or any content?
[00:30:46]  So it will do some styling things.
[00:30:49]  So we are informing for particular element.
[00:30:54]  So those are pseudo elements.
[00:30:56]  Okay.
[00:30:57]  So, okay.
[00:30:59]  So JavaScript, what is JavaScript?
[00:31:04]  JavaScript is a dynamic language where we can add functionalities to our HTML content and make it responsive.
[00:31:15]  We can write logics in JavaScript.
[00:31:18]  Okay, okay.
[00:31:19]  So can you mention few primitive and non-primitive data types?
[00:31:24]  Yes, coming to primitive data types, number, Boolean,
[00:31:33]  number, Boolean, string, null and undefined are primitive data types.
[00:31:40]  And coming to non-primitive data types, there are arrays, dictionaries.
[00:31:52]  Okay. So, okay. So what are functions? What is the importance of functions?
[00:32:02]  Functions are used in different languages because using functions we can increase our efficiency of the code.
[00:32:15]  By not using the same particular code repeated times, we can just call the function and we can complete our logic in that function.
[00:32:24]  So we...
[00:32:26]  the code looks cleaner and neater.
[00:32:30]  Okay.
[00:32:31]  So when it comes to functions,
[00:32:32]  we have a lot of declaration,
[00:32:35]  like we have naming functions,
[00:32:38]  we have ifs,
[00:32:40]  and we can assign the functions.
[00:32:44]  So,
[00:32:44]  so,
[00:32:46]  Can you explain about the arrow function when it comes to those other things?
[00:32:53]  Yes, arrow function is a type of shorthand notation for the functions.
[00:32:57]  It is the latest one and it is the modern one and people suggest to use it where we can complete our function within a single line using arrow functions.
[00:33:09]  It is basically shorthand notation.
[00:33:13]  Okay.
[00:33:14]  Okay.
[00:33:14]  So, when it comes to like a framework and library, so do you know React?
[00:33:22]  Yes, sir.
[00:33:24]  So, what is the difference between React and Next.js?
[00:33:28]  Yes.
[00:33:30]  Yes, React is a framework, which is the first one.
[00:33:35]  And then the Next.js is built on top of React because of some minor inconveniences in React.
[00:33:42]  Those are like SEO optimization is the one thing and the water falling problem.
[00:33:49]  and the hydration one.
[00:33:52]  And in React, we need to write this separate backend
[00:33:56]  for using Node.
[00:33:57]  And when it comes to Next.js,
[00:33:59]  we can complete the whole front end and back end
[00:34:02]  in the same platform by just using one command
[00:34:05]  to set up the Next.js project.
[00:34:07]  And React also provides file-based routing.
[00:34:12]  And in React, we need to use React router DOM separately.
[00:34:17]  And coming to React, we also have some issues like...
[00:34:23]  in components or something we have prop drillings and we have the solutions there
[00:34:29]  but when it coming coming to next year's this those are all inbuilt okay
[00:34:36]  Okay.
[00:34:38]  So,
[00:34:39]  developer can develop application
[00:34:42]  using HTML, CSS, JavaScript,
[00:34:45]  right?
[00:34:46]  So, why we need React or
[00:34:48]  any kind of frameworks?
[00:34:52]  but for better performance.
[00:34:56]  For better performance.
[00:34:57]  Okay.
[00:34:58]  Yeah.
[00:34:58]  We have many additional features in these frameworks.
[00:35:01]  Frameworks are something which is already somebody built for some kind of users.
[00:35:07]  So where we can use them using the frameworks.
[00:35:10]  So in HTML, CSS, JavaScript, we need to write everything on our own.
[00:35:15]  But when coming to these frameworks, they have some inbuilt features where we can easily use them.
[00:35:20]  and we
[00:35:21]  We should not waste time in our basic things at that time.
[00:35:26]  Okay.
[00:35:27]  So, do you know JSX?
[00:35:31]  Yes, sir.
[00:35:32]  Yeah, can you explain?
[00:35:34]  Yes, JSX is basically a combination of writing HTML in JavaScript.
[00:35:41]  Writing JavaScript code in, sorry, writing HTML code in JavaScript, it is a syntax for, it is a syntax.
[00:35:49]  JSX is a syntax.
[00:35:51]  So, can browser understand that JSX?
[00:35:54]  Yes.
[00:35:56]  No, so browser only understands JavaScript, I think so.
[00:36:01]  I'm not sure, sir.
[00:36:03]  How it will be compiled then?
[00:36:08]  How JSX will be compiled?
[00:36:11]  Yeah, how the browser can't understand JSX, right?
[00:36:17]  might be said i'm not sure about that okay okay no problem so do you heard like a babble or web
[00:36:25]  back yes sir i heard about babble okay uh babble is for uh corrupting the things uh like
[00:36:37]  the in our code it keeps our code clean it only accepts when the code is clean and prettier
[00:36:44]  that kind of thing okay
[00:36:49]  Okay, so when it comes to React or in the next JS frameworks, we have components, right?
[00:36:57]  Yes, sir.
[00:36:58]  Yeah, so what are components?
[00:37:01]  components are kind of more kind of a function thing where we can do particular logic or
[00:37:11]  particular component components and reacts are basically where we can render something
[00:37:19]  to our front end using components.
[00:37:22]  Okay, why we need to use component?
[00:37:26]  What is the use case?
[00:37:32]  anything we want to update in our front end or in our project,
[00:37:39]  we need components to make changes.
[00:37:43]  and it keeps cleaners.
[00:37:45]  Okay, okay.
[00:37:47]  So what is states and props?
[00:37:50]  Yeah, states are something used in components
[00:37:54]  where in that it is used inside the components
[00:37:58]  and props are something which are passed
[00:38:00]  to components as arguments.
[00:38:02]  They're passed to components
[00:38:04]  and you are used in components itself.
[00:38:09]  So do you heard about the prop drilling?
[00:38:12]  Yes, sir.
[00:38:13]  So what is prop drilling?
[00:38:16]  Prop drilling is when we have some props which are used to pass through many nested components.
[00:38:26]  Like to the children components to very nested children components.
[00:38:31]  When we need to pass the props from parent components, it will be some complex thing where we need to, the hierarchy will be very large.
[00:38:39]  So at the time passing the props will be a problem.
[00:38:42]  So that is majorly prop drilling.
[00:38:45]  And we can prevent this using use context in React.
[00:38:48]  Use context.
[00:38:50]  Okay.
[00:38:50]  Okay.
[00:38:52]  So, what are hooks actually?
[00:38:58]  Hooks are something they are already predefined and we can also make custom hooks.
[00:39:05]  They are used for particular functions, particular thing which is done repeatedly.
[00:39:11]  So we can define some hooks and we can use that when we want, wherever we want in our project.
[00:39:19]  And we can also customize hooks ourselves.
[00:39:22]  Okay.
[00:39:23]  Commonly used hooks.
[00:39:24]  Can you mention any commonly used hooks?
[00:39:28]  Yes.
[00:39:28]  Use effect, use state, use context, use ref.
[00:39:34]  Okay.
[00:39:35]  So what is use ref?
[00:39:36]  Okay.
[00:39:37]  Use ref is something useful when there is a complex thing or one minute.
[00:39:49]  Okay.
[00:40:01]  What is the ref stands for?
[00:40:04]  reference it is yeah what's the reference it is a
[00:40:13]  I am not exactly clear, sir, but the thing I know is it is generally used for when there is something complex, we use a complex thing.
[00:40:28]  We can store that in use ref and when we want that, we can use it without...
[00:40:34]  actually not performing this complex logic every time.
[00:40:38]  Like, use ref is nothing but we are referencing the element, HTML elements.
[00:40:45]  Okay.
[00:40:47]  Some single particular element, if I want to take that as reference, we will use use ref.
[00:40:55]  Okay.
[00:40:56]  Okay.
[00:40:57]  So, then...
[00:40:58]  Thank you for letting me know.
[00:41:01]  Okay.
[00:41:02]  Okay.
[00:41:03]  It's okay.
[00:41:04]  So, what is states, use states used for and also use effect?
[00:41:07]  Use state is used for...
[00:41:11]  When there is a particular change in component and we want to make a change and we need to render it every time, every time after the change, we use use state where we have the current value and the function to change it.
[00:41:25]  We have both the values in use state where we can render every time after the change in the front end.
[00:41:32]  And when coming to use effect, it is basically made for these callback functions where it will start the function.
[00:41:43]  generally used in callbacks, it will do the background process.
[00:41:49]  Okay.
[00:41:51]  Okay.
[00:41:53]  So,
[00:41:53]  so,
[00:41:57]  So in use effect, we have that.
[00:42:01]  Array.
[00:42:02]  So it's a dependency array.
[00:42:05]  Right?
[00:42:06]  So if I remove that dependency array, what happens?
[00:42:17]  No idea?
[00:42:18]  No idea, sir.
[00:42:19]  Sorry.
[00:42:21]  Okay.
[00:42:21]  You need to search.
[00:42:22]  But I would love to.
[00:42:23]  Yes.
[00:42:24]  Okay.
[00:42:26]  Okay.
[00:42:27]  So when it comes to components, we have class components, functional components.
[00:42:32]  Yes, sir.
[00:42:33]  So I hope you haven't.
[00:42:35]  done any work in class components.
[00:42:38]  So probably nowadays all the developers use functional components.
[00:42:43]  Yes.
[00:42:44]  Okay.
[00:42:45]  So what is the difference between those components when it comes to class and functional components?
[00:42:53]  Majorly, I don't know any difference because I barely seen class components.
[00:42:59]  I totally use function components.
[00:43:01]  But the difference in the syntax is the syntax of class components is much more complicated than function components.
[00:43:10]  Whereas functional components is straightforward.
[00:43:13]  But coming to class components, the syntax is much complex.
[00:43:16]  That is what I know.
[00:43:18]  Okay, okay, okay.
[00:43:21]  Okay, so do you know var, let and const?
[00:43:27]  Yes, sir.
[00:43:28]  Yeah, what is the difference between those things?
[00:43:31]  What are those actually?
[00:43:35]  They are varlet and const.
[00:43:38]  Yeah.
[00:43:40]  They are used for initialization in JavaScript, basically.
[00:43:46]  The difference between varlet and const, when coming to const, we need to initialize
[00:43:54]  So we need to declare the value when the time of initialization itself and when coming to let and where it is not mandatory, we can initialize and we can later declare the value and.
[00:44:09]  And the other difference between them is let and sorry.
[00:44:20]  So that's it. Okay. So what are scopes?
[00:44:25]  scopes there are different scopes the major thing is block scope function scope and the global scope
[00:44:33]  when a particular value is mentioned when a particular function value is defined in the
[00:44:39]  function scope it is limited to that scope itself means when the function is ended and we can't use
[00:44:45]  the
[00:44:46]  declaration of outside the function it is only confined to the particular
[00:44:50]  function and it is called a functional function scope and come block functions
[00:44:56]  function scope a block scope and when coming to the global scope at that
[00:45:02]  out of any functions, it means not inside any function or anything, anything we are declaring outside, it is a global scope.
[00:45:11]  We can use anywhere in the whole flow.
[00:45:16]  Okay, so where is global scope, functional scope or a block scope?
[00:45:24]  where we can use as global scopes.
[00:45:28]  So it is a global scope.
[00:45:29]  Global scope.
[00:45:30]  So what happens?
[00:45:31]  What's the main difference between those scopes?
[00:45:33]  Like when it comes to functional scope, it has some restrictions.
[00:45:38]  Yes.
[00:45:39]  Right.
[00:45:39]  So when it comes to block scope, it has some restrictions.
[00:45:43]  So what is the major difference between those scopes?
[00:45:48]  difference between the scopes itself.
[00:45:51]  Yeah, yeah, yeah.
[00:45:54]  So why we are naming like global scope, function scope or block scope?
[00:46:00]  So there will be some difference, right?
[00:46:04]  Yeah.
[00:46:06]  When we are declaring something in the function, it is only confined to the function.
[00:46:11]  And after the function is completed.
[00:46:14]  There will be no value assigned to that variable and it will give us undefined and not declared outside the function.
[00:46:23]  But when it comes to the global scope, if it wants defined in global scope, we can use the variable anywhere we want in the function.
[00:46:33]  So then what is hoisting?
[00:46:37]  hoisting is something where we can use the
[00:46:44]  variables or where we can use the variable names before the declaration itself or where we can use
[00:46:52]  the function functions before the declaration the hoisting is the one which takes the function
[00:46:57]  uh to up to the top of the project and we can also use it before the declaration itself
[00:47:06]  Okay.
[00:47:08]  Okay.
[00:47:14]  Okay, I will be giving a small project.
[00:47:17]  Okay.
[00:47:18]  So, I think you can submit that project at the end of the day.
[00:47:23]  So, before 6 o'clock.
[00:47:25]  So, I will be sharing my mail ID in the chat.
[00:47:29]  Okay.
[00:47:30]  Okay.
[00:47:31]  So, just give me a second.
[00:47:33]  Okay.
[00:47:34]  I will paste it in the chat.
[00:47:36]  Okay.
[00:50:36]  Hello.
[00:50:38]  So,
[00:50:41]  I have a,
[00:50:44]  even a project real time weather dashboard.
[00:50:48]  Okay.
[00:50:49]  So can you see that in the chat?
[00:50:52]  Yes, sir.
[00:50:53]  Yeah.
[00:50:53]  Okay.
[00:50:54]  So that project and I also provided some APIs and also that particular link, the website link.
[00:51:04]  Okay.
[00:51:04]  You can go through that project and clear that one.
[00:51:09]  So at the end of the day, you submit that project to Mail ID.
[00:51:15]  So okay.
[00:51:16]  Did you got my Mail ID?
[00:51:18]  So I'll be sharing again.
[00:51:20]  Yes.
[00:51:21]  Yes.
[00:51:22]  And I got it.
[00:51:23]  Okay.
[00:51:24]  Okay.
[00:51:25]  Okay.
[00:51:26]  Okay.
[00:51:27]  Okay.
[00:51:28]  Okay.
[00:51:29]  Okay.
[00:51:31]  Thank you, sir.
[00:52:20]  Yes, I know the thing and you can drop out the call.
[00:52:25]  Okay, sir.
[00:52:35]  Yeah, Akshay, is there any feedback to the students related to that?
[00:52:38]  Yeah, the students are very good.
[00:52:42]  They have very good knowledge when it comes to these technologies.
[00:52:47]  I think it's good, actually.
[00:52:50]  Both students are good.
[00:52:53]  Okay, I'll ask Ranjit to connect after the students have submitted the assignment.
[00:52:58]  Sorry?
[00:53:00]  I'll just ask to connect Ranjit after the students have submitted the assignment with your mail ID.
[00:53:06]  Okay, okay.
[00:53:08]  Okay, okay, cool.
[00:53:12]  Okay. So, so those are the students, right?
[00:53:17]  Like two students. Yeah. Okay. Okay. Then, uh, so is there anything to ask?
[00:53:26]  Yeah, I think we are, we can, uh,
[00:53:39]  after we can we can and this okay okay okay so okay bye bye thank you