Full Stack Development with React & Node | Utkarsh Malik | Geeks Summer Carnival | GeeksforGeeks

Key Takeaways

[Music] foreign [Music] live learning job opportunity a perfect way to liven up your summertime discount hello everyone welcome back to geeksforgeeks my name is and in this webinar we are going to know all about full stack development what all various frameworks are there what are the prerequisites if you are planning to be a full stack developer and yes we have utkarsh with us today who is going to guide us throughout the webinar but before i add him to the stream i want you guys to confirm me in the comment section if i'm perfectly visible and audible just give me a thumbs up in the comment section if i'm perfectly visible or not hi devakar hi simon yeah we just wait for another 10 seconds so that more people can join us in the webinar and then we are good to go yes i can see a lot of people i quickly added to the stream hi youtube how are you doing hi everyone i am hi i'm good yeah so let us start by having a brief introduction about yourself so the audience knows you better and connects with you more no picture so hi everyone it's good meeting you all over here so i am kirsh who is connecting with you all along with khan so today we will be talking about full stack development along with react and node.js so about me i'm currently working at the sd at amazon so i mean new intuit i've been into around six months i joined amazon before that i worked for a company called as safer corporations that that was into travel sector apart from this i have been into this attic space from last couple of years now i have been into mentorship uh instructor teaching and all for last couple of years i have been associated with good startup from last couple of years so i work with multiple cryo even even for four weeks i've been with six months i've take made one recorded course in javascript i've taken now i'm now i'm currently taking a live course on full stacks yeah it's good to be here yeah that is really great so talking about full stack development can you like before we start you know deep diving into it can you tell us what full stack development is and what are the sub components that are there in full stack development okay so basically we have i am assuming that we have so many college students over here right so the point is full stack is very interesting right nowadays the everyone is running mostly behind data structures and all right but development has its own fun and everything right so mostly full stack have everything about what you do any any application news nowadays it has multiple components right you as an end user only interact with a client your client could be what as in for my me client could be a mobile or it could be a laptop by the end of the end of the day it's a browser that is running right so that is you interact with the you have your clients clients interact with servers the reverse is where your web application is running where is that the app the all business logic is bigger that actually interacts with the databases where actually your physical data is being stored so yeah from very high level these are the few uh high level components we will talk about today so if i'm a starter and i have to learn full stack development from scratch can you tell me like what are the prerequisites how should i start like what should be the roadmap because in my first year when i also started learning web development one of the mistakes that i did was like i chose like part four before learning one two three like i did not learn the prerequisites and i jumped on to something else which wasted a lot of my time so can you give us a connect roadmap to full stack development for full stack it's pretty simple as i told you uh if you open anything you have heard of three day three day updates website 3ds simply means what we have a client site which interacts with the server we have a server we interact the db so any request you make we have a request response model right that client will fire a request to a server server will attract the db make some computation and it will send you a response back now what are the prerequisites so the point is make it and they could run in any order make sure you do either on the client side or on the note or on the server side first client side could be any languages for example you have to be very good in javascript to be in good client side so basically what you see html css javascript all these are client side things right server side simply means php node.js all these are server-side programming languages so it's good you can start with any framework react and all are very popular framework nowadays so you can chat with anyone so talking about frameworks you mentioned react so can you tell us like there are so many frameworks available so as a student which one should i start with and like what are the advantages of that particular framework so basically okay i will share with you i will share the speed with you after this so it's pretty i have a very good slide and all that shows that what obviously they go it's a very popular statement that every day good amount of javascript frameworks are born every day so javascript in the community is way too huge right so the the space at which the javascript framework grows are made way too high so it's very very important to adopt the right framework but yeah coming to my personal experience now you see from last around seven to eight years react has way too popularity right now even good product based companies have all have started moving to react even in my previous company they were using react i even in my current company they are using the app so all good project based companies since it is made by facebook it has easy to use and it has multiple features we'll talk in the uh session today in the com going ahead so yeah react is way too popular and easy to use especially for beginners i think react is a very good option to start with but i see in a lot of interviews i've been asked that why did you choose react and not angular and like i like i do not have a perfect answer for it right so can you tell like why should we choose react what are the benefits of react over angular or view okay so the point is it's a very standard question but yeah the main point is react is just a view it's just uh we have a we have something called mvc architecture right where m stands for model you stand for uc stands for controllers so react is just a view it's just a library right so it's just gives your new stylings out of the box but when it's angular it's a complete framework so yeah i will share i have a slide with you i will share it with you that why what what are the benefits of that also guys i can see that there are a lot of questions in the comment section after the slide we will try to take each of the question that is there so do not worry stay till then we will definitely try to take all the questions possible okay so i can start right now so how many people do we have okay give me a second i'm sure yeah there are a lot of questions angela versus react i think we answered this particular question the act is a bit easy to learn yes okay so in this next few minutes next 30 40 minutes we'll talk about in very detail that what is full stack what is react what is node.js why do you learn react why do not gs what is something that makes it unique and all so in the next 30 40 minutes that is what we will talk about and it will give you a good road map that where you can get started in the and and also not only this i will also talk about very properly about that why react is the way to go right so i have a very very good demonstrations of an example through which we can talk about it okay so cool then so let me as we quickly talked about the three tier architecture right i think most of the people are aware with this uh right so let me still okay still if there are people who are not aware of what a three-tier architecture is you might already know right what a theta uh support how does it works so any systems or how does it works we have our end user right we have our end user it could be you we interact with water we interact with client side so clients are mostly you interact with what it could be it could be a web browser it could be your mobile applications right so all these are clients what you see is always there in our clients that could be your client sites right similarly then what do we do we have something called as apis right what are apis apis are application programming interfaces so what do we do from a client we follow a request response model and we talk with a server right a client will make a request to a server always asking for some task it has to do and it will make a call to a server right server server has a capability to understand the request coming from a client and it will send a response back to the client right in a meanwhile he might need to interact with the database right right so this is a very very high level what do you mean by three target directives three die architecture that is a main how we communicate in web we communicate with clients clients is where you see what what is being written on the client anything that a person sees is written on the client now you know right what are client-side programming languages html css javascript what are all these all these are client-side programming languages now anything a user sees plus the user interaction is handled with the help of this html css and javascript okay whereas any business logic is written on the server side any kind of business logic that is being present let me change the color uh is being written on the server side right now html css what are html and css everyone knows right you do nowadays we do do all these things in school also what are these they are simply markup and styling things right finally what do they do they simply allow us to create a dom you know right that what are web browsers browsers have a capability to pass the dom right now html and cs help us to create the dom now using only html and css you what you can do you can just render websites or you can just create static websites but you are not able to handle user interaction right or user interaction what do you need you need javascript to handle user interaction into behavior you need javascript okay this help you to manipulate dom when you create a dot okay now this is everything you do on a client site now we have frameworks and all for example react angular what are the main purpose of this i will talk about in a while what are the main purpose of this the main purpose of this framework is to manipulate the dom you know very very efficient okay similarly on a server side what do we have we have node.js we have php so what what is the responsibility of a server-side programming language that it should be able to understand the client request it should be able to under compute and to process and to send the response back to the server after interacting the database okay so this is a very very high level idea of what a three-tier architecture is similar database could be anything we have no no sql sql databases right for example mobile db we have normal sql mysql right so so now when it comes to full stack what do you what do what you should know one client-side programming language you should know at least right that is what html is everyone know right you should be very good in javascript you should be very very good in javascript especially okay then you should know one of the frameworks that is react or angular but react to the way to go we'll talk about it then server side you have to learn any one server side programming language that mostly will try to talk about node.js okay and databases it's mongodb right so mostly we talk about months we'll talk about merge stack over here right man simply means m stands for mongodb a stands for express now what is express express is built on the top of node.js right it is just like you know about bootstrap right bootstrap css and bootstrap what is bootstrap bootstrap is built on the top of css right to make things make writing css easier similarly express is built on the top of node.js to help us write node.js easily sorry similarly react to the on the client side that will talk about node.js so all these if you learn right you can be called as a full stack developer okay so these are the few things i want to talk about okay now now i want to cover today a very very important thing that why react okay a lot of people had a question right that why react okay before i move ahead any questions okay now we'll talk about it okay now if you have any questions do ping me i will take it okay now we'll talk about why react now it will be very very interesting okay now you all know that you might have you all have heard of react right what makes react special and what bite is the need of their right that is what we are going to talk now now the as i told you all almost all good companies all good product based companies have started have moved to react that you can think of right that adobe microsoft amazon paypal so all of these good product based companies are adopted to react why i'm putting it over here it's very simple if you're learning a new skill especially a javascript framework it is very very important that all the big players in the industry should be using it because you are learning something to make sure that you get it in use right so react is something that is adopted by big companies and you know right if they are adopting to a particular framework or a library now in big companies it takes a good amount of year to migrate to something new right so since good amount of companies are moving to react it's a signal that it's a good uh time to learn about react similarly you can see right all those uh popular things facebook see obviously facebook build react you might have know this right so all these all these facebook whatsapp now facebook right so all of these applications are built in react facebook and even react native is what it's a extension of react which allows you to make hybrid mobile applications right that means you do not have to code independently for ios and android using hybrid mobile application app you can make using react native you can make hybrid mobile applications so examples are facebook app instagram app right so or walmart so all these apps that you use in a day to day life mostly in instagram right that is built using react okay so these are the few companies that you can see that are highly using react okay now these are the few statistics you can see that why react is popular right so if you see these are the data of till 2020 now it has even increased a lot you can see right here which one is react the blue one is react so interest over time has significantly increased as compared to angular and view so angular view and react are all on the same level when it comes to javascript frameworks okay the number of downloads of react are way way too high as compared to angular and view in the last six months you can see right so now i hope these are the few motivational points you for you to learn react now i want to talk about a very very few six points i want to talk about i will take one of the every one of them in detail for sure you will take something to learn from this that why react is very very good okay before that any questions i will take few questions okay i will take few questions before that let me give me a second yeah there is one question actually by gaurav that if we want to create a page do we need to write html css from scratch or we can directly use react or angular let go it's a always you should do some facts so web pages simply mean you need you need okay it's if you go if you should or you can the point is let us say you have to make a simple your portfolio website right portfolio website right so yes you can directly use react it has obviously in there you will use jsx which is which is a html html like structure we can do it right now answer could be that yes you can directly use react and make web applications but yeah it's always preferable to have a decent understanding of html and css and a bit of javascript before you make any application with react because internally you will see jsx it is similar to html you might you will style things right so everything you will do but it's good to always know these things before you start moving to make projects directly in reality okay i hope that answers your question right so the next question is asked by digger that is java's like basics of javascript enough to get started with react yes that is a very very big advantage of react with time the react developers if you open okay if you let me give an example some people might have heard of hooks right react books so initially in react we have something called as class bit component and functional components now since class-based components had some some dependencies upon javascript now their developers have shifted things to functional weight contractor okay so yes you should know a very basics of javascript nowadays to learn react but not in depth but there was a time you actually need to know more javascript as compared to now to learn react but yeah a very basics of javascript it's enough nowadays to move to react and then you can come back and learn master javascript again because javascript is not easy to easy language to master for sure so you can learn basics of javascript make decent projects move to react be good in react come back to javascript master javascript and go on then there is one more question by that like she's able to understand the code but not able to implement it so what should she do see the only way to be good at implementing is make small small projects in react it's the the beauty of react is everything is component based i will talk about this you can see the third point right the beauty of react with everything is component based right how will you improve and react start making small small components try interlinking with interlinking them with each other the more you do it small small component make them make them interlink with each other this is the parent component the more you will become better and react in even in my early days around there are now around three to three and a half years i learned react it around three to four years now you can say that in the early days it's very very important to make simple projects because at scale it becomes difficult to learn right make small small multiple projects automatically you will become good but yeah make small projects implement it from scratch right so should we take more questions right now or during the end of the webinar yeah you can take one more question you can take one okay so this is a question asked by arun like which is better javascript or typescript java this should not be a question this should not be a question javascript or typescript therefore it's uh the point is yeah what is typescript okay if you know how does browsers understand javascript we have something called as javascript engine right for example chrome has an engine called as v8 for firefox we have engine called as spider monkey right so this is how browsers understand what javascript now what is typescript typeset introduce something called as types in javascript is if you know typescript is what type of language it is weekly type language right not strongly typed wiki type means there is no concept of types right now as you go at scale it's very very difficult to maintain a weekly type language because you do not know what error could be there right in weekly drive languages that is why in scale in very very big applications it's very difficult to work only in javascript that is why typescript is made typescript introduce the concept of types in javascript for example in string is all these are types they introduced so everything you write first you will write the type of it so now typescript is just a layer on the top of javascript even if you write in the typescript it will get converted to javascript behind the scenes browsers even don't know what typescript is it's just a layer built over typescript anything you write in typescript will be converted to first javascript first then it will run in the browser in the jsa yeah so there are more comments but maybe we can take it after something now give me 15 20 minutes at least now something you are google for sure you will learn something very very good okay now why react first of all okay now i will talk about all these points but i will talk about the most most important point now the first question that you will be asked in any react interview is why are you learning something you should know right key cure right you should know that key why this framework why this library what is something that why i'm doing this html css in javascript we already have right now assuming that we already have html and css and javascript right that what actually happened we needed react what was something that needed that led to the introduction of react right now let me take you to the you might all of you all of you might have used inter that that famous what internet explorers right internet explorers you have used them right now if you remember for example i have any webpage let me open any webpage let me open quora right if you remember at the time of what in the time of what internet explorer any button click for example i clicked on this button right now it's opening something new for example i click on this technology okay it is still opening a new page i want to do something on the same page okay let me open any other what should i open okay let me open netflix okay okay let me open any other thing what should i open what would be a good example okay so let me if i see the point is okay let me put it over here now remember remember on any button click in internet explorer for a split second there there used to be a what a blank screen there should used to be a continuous loader for a split second then a new web page used to reload do you remember do you remember this sorry do you remember this right let me quickly check the comments give me a second you guys remember this right right tell me i can't see the comments you guys remember that days right when any small click on a web page used to be the reload of a webpage from the scratch do you remember this i can't see any comments regarding to yes or no yeah right so what now listen to me very carefully what used to happen behind the scenes you know what you know what what used to happen we have a concept of dog right anything you write is converted into an html doc right anything you write is converted into an html dom browsers have a ability to understand this doc or to parse this talk correct they pass the html dom and that is how they render a web page correct now let us say you have a facebook.com and it will obviously have a big big dom right it has a very big dom right right this is a let us say this is a dom for facebook.com right right now let us say this is your button to this button present on a web page if you click on this it will make an api call to get all your friends okay it will if you click on this button it will yeah call api to get all your friends in the old days what used to happen you know right you have to load a new page if you have to load a new page in the old days the whole dom used to be recreated the whole dom used to be recreated that on any small click on a button since the web page has to be changed the complete new dom used to be created and that is why you used to see a empty screen or a split millisecond right for example this is my dom right what will happen if you click on any node some action will take this dom will be destroyed a new dom will be created and this will be passed by again by browser then you will see a new web page so this that is why you used to get a wide screen in between after loading symbol right in internet explorer's time because there was no concept of virtual dom at that time now react came up with the concept of something called as virtual dom react came up with a concept of something that is called as virtual dog as i told you what used to happen if you see initially what used to happen i told you right what used to happen initially on every update new dom used to be created now what will happen listen now let us say we have a html dom that is being created okay now what you will do let us say you clicked on this button and and for this the only the actual use case is that only few of the nodes should update only few of the nodes should update okay that is the actual use case for example series typing thing right if you do anything only the part of a webpage has to be updated right so this means not all nodes has to be updated this means let us say only this node and this node has to be updated right right now what will happen with the concept of virtual dom we will only update those nodes and their children that actually wants to be changed in this case this node wants to change and this node wants to change this means only this will get updated and only this will get updated so only four four nodes are being recreated this means the whole html dom is not destroyed the dom is still the same only those nodes are actually changed that encountered a change okay so this is a concept of virtual dom i will let you know with the help of diagram what this is so virtual dom simply means what react does react maintains a copy of a dom in the form of javascript by itself every time you change something on a web page react does it not on the actual dom but on that copy then it compares the actual copy versus the changed copy with the with the help of some algorithm called as reconciliation algorithm then it computes the differences that that will help you know the actual dom that has been changed and in the actual browser dom only those nodes i will change that has actually been changed you can see right in this initially this is virtual dom you see so if i click on this only those nodes have changing in the browser dom that are being changed right now can someone tell what how many number of red nodes could be there in the previous flow not in the if the normal flow before react how many red nodes could be there would be there sorry how many red nodes would be there can someone tell it's an easy question in the browser dom in the in the world without react how many nodes will be re-rendered how many nodes will be read here you can see only two nodes that's right because only two nodes are changed all right example correct you are saying correct so in that case all have would have been red all would have been this also red red red red right what is the benefit now the benefit is with the help of virtual dom only those nodes are being changing that are actually being changed and this is saving your lot of time that is why i react gain very very popularity even for large updates you want to do on a web page with the help of virtual dom they were very very quick so that is why now if you i open any let us say youtube right if i say open any youtube uh not any open so on every button click you won't see a every uh the whole page used to remember for example if i click on t series did the whole whole page re-render did you see any loading did you see this change this thing changing no right only the middle part changed why because that was the actual node that was being affected this was not possible before this the before this concept of a dom manipulations so basically all these frameworks have a react especially has a concept of virtual dom that allows you to update only that nodes of a actual dom that needs an update so how do they do it i will quickly tell you again let us say you have a html dom you make some change on any of that node what react will do react will not make a change in the actual term react will maintain a copy of that dom in the form of javascript objects it will make a change to that then it will compare the actual copy versus the changed copy then it will compare the difference only those nodes will be re-rendered in the main actual dom or the browser dom which needs a change this will make sure that any re-rendering of a web page is avoided you saw this over here right you saw this over here right so i hope this makes sense so this is a concept of virtual dom okay this was the biggest advantage okay so react has a virtual dom which is optimized for performance and memory footprint initial so on every update react will build a virtual dom subtree it will differentiate it with the old one computes a minimal set of nodes that are being differentiated and it will put them in a queue right now it is very very fast because the normal dom manipulation was slow and it it computes the minimal dom operations now right now it does a batch read and write for optimal dom performance okay so this concept of virtual dom is usually faster than manual operations so this is what's the biggest one if you see this is a virtual dom this is a new virtual down the affected nodes will be the one who the nodes that are actually being affected and their children so every time what happens you make a change react creates a virtual dom compares it with the real down computes the differences and only that patch is being changed in the actual term so that was a concept of virtual dom so i hope this was useful any questions around this any questions around the concept of virtual dom so it was helpful right it was helpful right any questions around this any questions around this so this is one big advantage of react what are other advantages one other very very important advantage is what okay have you heard of this compositional nature okay again it's very very helpful now initially what you used to do you used to write function you used to return data right this f f of f this is called as compositional nature right this is what you used to do now before react used to come we used to write web pages in the form of html right now we are writing web pages in the form of composition this means till now uv was only returning data from functions when react came we started returning jfx from function or ui from functions you see just like we used to return data from functions react came up with a concept in which we actually started returning ui or html kind of structure from functions you can see right from profile is a function which is returning image profile link is a function that is returning anchor tag profile is a function that is a kind of calling two functions so react copied the compositional model to ui as well in gui before this there was no compositional model compositional model made in the form of functions in react every component is a function which so in react everything is a component every component is a function which returns some html kind of structure that is basically kind of called asd okay that is why it all it is also very popular okay so everything in react is a component if you see every small thing on a web page in react is a component which is nothing but a javascript function behind the scenes which is returning some ui or html or you can say jsx okay so react allows us to visualize every little thing on a web page as a component which can be reused just like function can be reused so this if you see this is one component another component that is a child uh inner component is similar to a parent function calling a child function and calling another function okay so this is how react works everything in react is what a component component behind the scenes is what nothing but a js function that is returning a kind of ui that was a big revolution that it allowed developers to visualize ui as a compositional model that was a big change till now people were only following what date compositional model only for data but react introduced the concept of compositions to ui as well in react you can visualize everything in the form of components every component is a function which is returning a kind of ui to the other components okay so this is how you can see this is a typical any web page there are different boxes every bucket box is what a component this is a big box now we have two blog posts two blog posts means two block components ideally behind the scenes there will be a single component which is being reused twice so react allowed us to use the concept of components which allows us to reuse components just like we can recall functions with different data right or arguments similarly we can reuse react components so these are the things that were easy to use when it comes to react okay so okay so if you see what are the main things that is popular we have covered that everything in reactors are components unlike templates re-rendering and updates you know right you saw right the concept of virtual dom that how re-rendering happens initially on every render what used to happen the whole dom used to be recreated now what will happen only those nodes of our dom should be recreated that are actually gone through a change okay that was the concept of virtual talk okay now you saw that everything in react is a component which makes it very very easy for developers to visualize things also it follows a compositional model what does compositional models mean that it acts in the form of functions before this you could only talk about compositional model in the form of data react allow you to allow to talk about compositional form in the form of ui as well in react we simply write components which are simply javascript functions which simply returns something called as jsx that is the html structure okay so i hope you are clear with these four benefits these are the main benefits i will only now talk about the two remaining things that will then will move to questions now the last one is pretty simple react is nothing but javascript only you do not have to learn a new language you don't react react is simply javascript that is why it is very very familiar if you learn if you know javascript it's easy very very easy to learn react because you just have to learn the concept not the syntax and all okay finally i want to talk about something called a declaration declarative nature now in anything any programming language has two type of things one is what okay ah imperative or a declarative imperative and declarative now when we say react is declarative what do you mean to say imperative let us say we have an analogy that i have to go from one place to another place how will i go if you an imperative response will be that go from there we are telling every small direction to that person a declarative response will be my address is this you have to reach at this place okay now how does it correlate to this before react have you heard of this dom manipulation how do you use to do dom manipulation document dot get element by id get element by class name in that case what you used to do we used to actually get the dom node with that id or class and then we then we used to change that node this is what we used to do uh when we say daw manipulation in a in imperative way okay this is what jquery used to do but react does it in a declarative way in react we do not update the dom directly we only update the kind of virtual dom or we only declare to react that the state is changed please update the dom for me okay so that is why we say react is declarative in nature we are not forcing react we do this do this we are just declaring please do this for me okay so these are the main benefits why react is beneficial okay i will quickly summarize all of them first of all react is compositional model compositional model is important why because everything could be visualized in the form of functions before react only data was being visualized in a compositional model after react even ui was visualized in the form of compositional model you could write javascript functions which could return what jsx that was a big benefit reactive declarative nature unlike jquery and all which are imperative in which we directly go to the browser dom and we update that instead instead in react the only say to react please do this for me react will do that change in the dom for you in a very very efficient way react everything in react is just a component every little button or any single thing on a webpage that you see in react to the web page right now the last point was react is just a javascript and the most important point that react up re-renders on update very very efficiently before the concept of any virtual dom and all we used to recreate the new dom on every event click but when it comes to react what you do you may have a concept of virtual talk how it works react maintains a copy of the new dom in the form of javascript object whenever you have to make a any change he makes a copy of that and does the chain on that but then compare the to the actual and the copy with the logarithm called the three consolation algorithm compares the differences between the two marks the nodes that only needs to be changed on the actual dom and then only those nodes and their children are changed who actually need the change okay so this actually helps you to avoid re-rendering of the complete web page okay so i hope you are clear now that that why react is important so these were very typical use cases of react why it is important now i hope you are clear with react coming back to this so we covered about react right similarly node reacted on the client side node.js is a server-side programming language that is being present over here okay so now this is all about from my side so i'm open to questions just before i open to questions so this is a batch i'm taking in a this is a batch i am taking for example in this you can see so this are 20 classes batch of two rc that approximately 50 are scores that we want to talk about so this is starting on second you can see we have introduction to complete javascript then we have talked about projects then we are moving to react in detail then understanding cloud operations conditional rendering node.js basics introduction to rest apis databases session handling setting up our own rest apis typescript graphql and very basics of typescript and gospel and deployments so this is a course that will help i'm taking over here and that will help you to master all these concepts that i've been i've covered also the i also covered you will give you a brief introduction of why react is the future and what is something that makes react react unique okay so that's it from my side now i am open to questions we can take the questions now right so it was a really you know nice and like about react because some of my concepts of virtual dom was also not clear so i was also listening very carefully so yes thank you for that and i could see that there are a lot of people who are you know being consistent like there are around 50 to 60 people who are consistently watching it from the start so now we can take few of the questions so a question is asked by shweta that what are the advanced topic of javascript that a beginner should know advanced topics javascript is very not an easy language according to the advanced topics that are very adorn topic for number closures who how does uh even group works write prototypal inheritance right so all these are topics are very very so when we say advance this javascript right we say conceptual javascript is not difficult but it is highly conceptual this keyword right so these topics are considered advanced in javascript because these are little conceptual okay so once you learn simple javascript [Music] you can even move even most of the people who know react are not if you are they are not sure they know all these concepts or not okay i've listed just a few how set timeout works and all this keyword and all there could be there are multiple topics like this right so all these are advanced topics that are being called advanced simply means you know that how it works behind the scenes because hosting is a phenomena similarly event loop works behind the scenes inheritance is different in javascript as compared to classical inheritance this keyword we behave different at different places in javascript right similarly call apply bind how does this works right so all these are considered as similarly a bit about functional programming in javascript so all these are considered as advanced topics okay because they're conceptual so they are not difficult there are lots of resources for this but if you know master all these things you can be considered a very good javascript developer i have given personally given lot of fronted interviews one year around not one year not around 809 bucks eight to nine months back so yeah even in interviews all these concepts are way way too popular only all these your javascript interviews will revolve around all these concepts okay right so then there's a question that should we use class components or functional components while using when you are learning things use class components when you are learning things beginning when you're beginner use class based components because that will help you to learn a lot of javascript concepts as well but you when you are clear with class components then you can move to functional components but the point is you should not directly move to functional component because when you go to any company right there is a code that is written four to five years back minimum in any big company you go so over there you will not find functional components right over there you will still find class based components only right you won't find functional components using hooks and all right so yeah once right you should be comfortable in class-based components before moving to functional components don't don't jump directly to functional computers right then there's a question around hoax many people are asking can you tell a brief about what hook says like a hoax is what we have a class based component right class based components have a concept of state we maintain something called a state in class-based components whereas in functional components we we do not use to maintain anything right but class-based components were had somewhere drawbacks what were the drawbacks first of all it was not very friendly for people who don't know javascript is that this is the performance this is something i'm talking about the developer side the class-based conference were difficult for people to maintain and to write at a good level who are not very good with javascript that was one big disadvantage this was from a developer site now from a performance site class based components were very difficult to minify that is why these were the few drawbacks with class-based components that is why the developers had react wanted to shift everything to functional based content now they mimicked everything that was there in class based component and not in functional components for example state state was a concept and life cycle hooks are the main two concept lifecycle hooks were there in life cycle components were there in class based and state and state we could maintain state these two things were not there in functional commons both the things now they provide they provide it to us in the form of books in functional code now you can use different books books are nothing but javascript functions written behind the scenes for you for example you can simply use use state function that's the hook hook is just a name to a function it's a function only you will call just to maintain a state so using hooks or use by calling these functions which we call as hooks you can simply mimic the state and the lifecycle methods which were there in class based component this made sure that anything that could be done in class-based components now could can be done in functional components where as well now you do not need to even know about class based this made sure that for the even people who don't know javascript properly they were also able to do functional because there is no concept of this keyword and all in functional components right so yeah that is the main high level difference okay then there's a question around the course that you're taking that can you tell the name of the batch that you're taking for full stack development so this is the the name is only full stack development with the reactor node.js so this is if you simply search it on google you will get if i have this basically let me say full stack development react simply write it you will get note here so it's a badge 40 that are starting on i think second on this saturday the simply write tfd also we will try to put down the link in the description box below so you guys can easily click from there and register for the course so i think this one is the course the live this is a live code right so that is the same thing oh there's a question around like when is the batch starting so you can see this over here the batch is starting on second that is that set second and uh we will have a 50 hour course 40 hours of live session 10 hours of 50 hours of live session 14 classes and 10 in doubt so we will have 10 weekends 20 classes every class 2 hours each and every okay then there's a question that is data structured an algorithm required for being a front-end uh they developer it's not required obviously but you should know very basic date of basics of data structure to it sustained in the industry but yeah to do the actual work it's not required then ryan is asked that what are the server side things you need to know if you have to be a front-end engineer uh for front-end engineers whatsoever it's a good question you should know that how apis work because as a front-end developer you will a server side people will give you apis keep using apis to do stuff but you should know that how a very basics of how apis are created what accurate operations how different apis gives different responses two hundred four four hundred four not one three zero one two zero one right so there are few things that how this complete api space works web apis at least this much you should know by the front end developer from the server side at least if you want to dig deep the very minimal you should know is how to create cred apis in node.js only any server that program language this is what i believe even a front-end developer should know how to create simple thread api that will help you to write better front-end code right then there's a question asked by raj that are there any major changes in react 18 as compared to the current version i'm not even sure about this so i have not actually looked at the changes but whenever the changes comes in they're always minor there are not there very few are there that are major yeah i'm not sure about the actual changes about this right i think i have taken up all the questions we'll wait for wait for another 10 seconds if you guys have any other questions you can you know put it in the comment section and i will quickly ask those questions uh yes drop the link of the course so yeah we will definitely try to put it in the description box below if it is not already there we will put it after this webinar so yes you can directly click from there and register for the batch yes i think there are no more questions for now one second cool so yes i would like to thank you kash for coming to this webinar and clearing the doubt it was really insightful and even i got to learn a lot so thank you so much yeah thank you everyone i hope you learned something thank you yeah thank you so yes thank you so much guys for joining as well i could see that you know people were consistent throughout the webinar there were like around 40 to 50 people that were consistently watching i hope that you got to learn something and definitely register for the badge for full stack development it is a it is there are live courses and doubt solving classes as well so yes definitely try to check that out we will definitely try to put all the links i could see a lot of comments around the link so we will put everything in the description box below do not worry about that and then lastly i would like to tell you all that as geek summer carnival is going on you know you guys know that and we have huge discounts on all the courses at geeksforgeeks and all the courses are at student friendly prices so do not forget to check them out i think this is an opportunity that no one can afford to miss so yes with this i will end the webinar and i will see you in the next webinar bye