[LIVE] DAY 03 - Complete Frontend Web Development with JavaScript and ReactJS | COMPLETE in 7 - Days

e hey guys I hope that I'm live right now if you guys are able to listen me properly as well as there's no issues with the audio or the video please let me know hello everyone I hope that I'm live right now guys if you guys are able to listen me properly as well as there's no issues with the audio or the video please let me know no issues whatsoever right guys okay great so today onwards we are going to start with our react GS that is the aim of our today's class so we'll be starting out with something called as hello world in react okay so that is our aim like our very first like Hello World application in react GS so again for the same as well we are going to use the platform that is repelled just like what we we have been using in the previous few days itself so uh that is what we're going to do was there a class yesterday no assassinator there was no class yesterday uh today is the class that is going to happen Okay so that is it okay so shall we start with our today's class guys please let me know shall we start our today's class guys please let me know yes no what's what's the scenario guys yes okay great so let me share my screen first of all with you guys so present share screen entire screen share okay okay so we'll go and I'll bring out a live chat as well so I'm able to keep a track of that pop out chat let's place it up on the left hand side let's make it a bit smaller new tab and let's go further with uh repel it okay again just like the last time itself what we to do is we're can click on the plus button right over here guys we click on the plus button and then we are going to select uh we're going to see see more okay and we'll try to find react GS right over here guys so R is there python visual Basics KLA Julia Pascal demo Alexi brain brain power Shell express JS Pearl Howard C50 TCL latex spice script Crystal I think so I should just search for it we'll just search for it right over here react uh react JavaScript so we'll be selecting react JavaScript right over here guys and then we're going to click on create reppel that is what we're going to do it's going to create an environment for us where everything is actually pre-installed we don't have to do anything right over there and we can directly focus upon uh learning we can directly focus upon writing the code rather than something else okay so this is what we're going to do uh if you guys are not able to use repel it I'll sest another platform that is code sandbox okay so if you guys are not able to use uh reactjs on uh ret there's another platform called as code sandbox guys it is also free of cost you can use that as well just letting you guys know but for our purpose we're going to use repet right over here now once we have opened up repet as you're able to see there are three screens in front of us guys on the left hand side you are having all the different files all the different folders ERS that are there inside of our current sandbox in the middle you are having all the files that you will open up you will be able to see and edit them right over there and on the right hand side you will be having your console you'll be having your shell you'll be having your browser as well whatever the case be the first thing that we going to do is we're going to click on this uh green color icon right over here guys uh is repel it better so I don't treat it as such but I prefer to use repel it in many cases it is much more reliable when it compares to code sandbo box okay so that is the reason why so now that we have opened up uh our rippel okay what we're going to do is we're going to explore our files and folders that are there so you're having this public folder and you're having this SRC folder then you're are having this index.html file so this index.html file is the basic HTML file the basic structure of your website all your reactjs code is going to go inside of this app.jsx and index. jsx this is where all your code is going to go but because we want to start from scratch we don't want to have any prerequisite code right over there I'm just going to delete everything from right over here so I'm going to delete this entire file app.jsx so I'm just going to delete that and uh then I am going to also go into index. jsx I'm going to delete everything from index. jsx guys okay I'm just going to delete everything right over here so we are having a plain index. jsx file the index.htm file is just a basic template guys this is not uh anything that we are going to add to it it's just a basic template a pre-written template for us so whatever we are going to code we going to code it inside of the index. jsx file now up to this point of time we have heard that okay JavaScript requires us to write code in uh sorry react GS requires us to write code in JavaScript right you guys remember that please let me know that reactjs requires us to write code in JavaScript now usually JavaScript files are named as index.js sh. JS uh suzie. JS app.js here the file name is actually jsx guys please uh look into it the file name that you're able to see right over here is index. jsx guys so what is this jsx we will be learning in the next few minutes and how is it related to JavaScript as well what is the differences and everything we'll try to understand it right over there so don't worry okay I will be explaining that just be a little bit more patient okay now the first thing that we to do is we are going to open up our website in a new tab so that we are just having the code that we want to write in front of us so for that just click on this particular button on the top right corner of your web view okay there will be a web view right over there the top right corner of that you will be having a box with an arrow so just click on that it will open up your website in a new tab and this website that you are going to create you can share it with anybody okay you can put it up on your resume you can share it with your friends as well and they will be able to access it no matter uh where you are okay so it does not matter it is already deployed for you guys okay so the next thing that we are going to do right now is that we go back and we going to just close this off because we don't require it so we are having just this index. GSX uh file in front of us now once we are having this particular file the first thing that we need to understand is uh so react GS right is Library okay and it is not inherently present inside of JavaScript JavaScript is like uh you okay you are JavaScript let's assume you do not carry a library along with you if you want to access a library then you will have to get into a library itself right you will require a library if I am a particular I am shis right I I want to get access to a library a library of full of books right so I'm not able to access react from both these platforms Anand why most likely uh it is your network issue so try it after the boot camp itself you will be able to access it many times maybe due to your network issues you are not able to access it please try it after the boot camp itself so right over here guys like I said if I want to get access to um let's say our uh library then in that case I will require a library at the end of the day JavaScript is the library please pay attention I've already taught this uh two days before I'm not going to repeat it again and again okay so in the exact same manner for JavaScript as well okay um it's asking for premium uh to get access Anand why please try to understand it even I'm not using premium if I'm not using premium and I am able to write code in reactjs then you can also you want to become an IT software engineer and you are not able to access a website then that is not something that looks very good for you okay these are the small things that you should be able to figure it out on your own you are the Next Generation you are a generation next to me you guys should be better at using a website than me itself okay so please do not ask these silly questions because it's like it's something that even I can't help you out with okay I'm using the free version if I'm able to access it you will also be able to access it it's as simple as that so right over here guys like I said uh the first thing that JavaScript needs is it requires this Library called as reactjs okay it requires this Library called as react GS guys so let's require it in JavaScript to require a library how what you can do is you create a variable called as react you create a variable called as react inside of which I will be storing the entire react library inside of which I will be storing the entire react library to get the entire react Library I just have to write required that JavaScript requires okay which particular Library the react Library okay JavaScript requires the react library and through this the entire library of react will come to JavaScript that is what we are saving inside of react that is a variable name called as react so that we are able to access it at a later point of time we are able to access the library at a later point of time guys are you guys able to understand this particular line of code please let me know now every single time I want to access the library I will have to use the name react that is the variable name react to be able to access the library now there is a big problem right over there after this a few lines ago or after 100 200 lines of code I can just write uh react is equals to 10 now that access to my entire library is gone now that access to the entire library is gone right over there are you guys able to understand this because I declared react as a variable because I declared react as a variable itself my entire particular like if I write this particular line of code react is equals to 10 okay uh mahila Maha please be patient I know you guys know a lot okay but we need to go step by step if you if you don't understand why I'm teaching you this line of code first before you learning about import then that basically means that it is very essential for you that means you don't even know this particular line of code why don't you know this particular line of code okay yes import react as react that is also important that is the latest trends but this line of code if you're not able to recognize it then you guys are in a Hell lot of a trouble okay step by step don't skip steps guys otherwise in your interviews you will just your entire interview will just be a big pile of turd okay so like I said guys here what is happening is now my entire access to the library is gone my entire access to the library is gone from right over there guys now this is not something that we can happen at any particular point of time to us while coding right so how to avoid that this is where the concept of constants come into picture if you guys remember Pi is a constant the value of pi cannot be 5.14 it is always going to be 3.14 right Pi the pi as a number itself there a constant value right it can not change no matter what you do no matter if I try to add something to the PIP the pi value is not getting changed right it is always going to remain the same these are called as constants in the exact same manner because we are declaring react that is the variable as a variable itself due to that reason we can change it we can modify it at a later point of time to avoid react from being modified like we have done right over here we are going to declare react as a const or a constant itself const okay con react is equals to require react in this particular manner no matter what happens in the future you will never be able to change the value of react react is always going to contain the library inside of it you'll never be able to change it in the exact same manner there is another library that is very important for us to require right over here along with react that is your react Dom library now why is this react Dom Library important right over here you guys will only be able to understand after a few like tomorrow itself today I don't think so I will be making guys understand about react Dom this is what we contains a very important uh concept of react that is virtual Dom and real Dom like that entire concept I'll be teaching guys tomorrow not today so if anybody has this question what is this react Dom or anybody ask that in the live chat itself please make sure that they know about this that we will be learning about this tomorrow right now if I try to explain it it will just go above your head okay okay the next thing that is going to be there is that uh we have created this now we are going to uh okay the first thing that we do is we're also going to create a particular const app is equals to and then we are going to have react parenthesis so instead of calling react again and again we are going to give react another name right over here that is app okay now this is done as a particular uh like it is a historical thing itself uh when uh Facebook created react GS This Is How They imported react and used react at the end of the day due to that reason uh we are also doing this okay it is basically just to make sure that whatever Norms are being followed in the industry we are also following the exact same Norms uh so that is what we doing right over here now once that is done okay you guys can actually uh like ignore this as well you don't actually have to use it uh so yeah we'll just ignore it for the while it will come at a later point of time but let's keep it at a later point of time so that I'm able to explain you the essence of that in a much more easier manner right now if I try to explain it to you you won't get it the next thing that we we going to do is we are going to render something to our screens now many of you guys might have heard about rendering something right have you guys heard about the meaning of the term rendering in normal English guys in normal English what do you mean by the term rendering in normal English guys you guys know about it rendering do you guys know about this rendering guys rendering okay what do you mean by rendering in normal English to get something something okay anything else guys to display something to load something up very good performance won't be uh like good processing would be fine processing time won't be fine to get something good okay giving something okay approximately the same so rendering basically means to show something to load something okay that is what it basically means right over here what do we want to do we want to showcase hello world on our screen we want to load hello world World on our screen to do that uh you are having the render attribute of react Dom so just write react Dom do render now this render takes in two attributes what and where okay this render property takes in two attributes right over here what do you want to render and where do you want it to get rendered okay so what do we want to get rendered guys we want to render hello world on our screens right we want to render hello world on our screens so how what do we want to render hello world now that we want to render it using htable okay so we are going to have an H1 tag right over here opening and a closing H1 tag that basically says hello world okay uh so uh HTML or hyper text markup language I'll tell you guys shot itself is a type of markup language markup language basically means that using the same text to convey more information okay using the same text to convey more knowledge more information is called as markup language a very good example of markup language is your emojis right you guys are using emojis on a daily basis so the same text what are you doing can convey a lot of information using emojis if I'm having a laughing Emoji at the end what are you doing so I'm like what are you doing right over there huh okay now if I'm having angry Emoji right over there then I'm angry what are you doing right over there huh what are you doing if I'm having a smirk Emoji then I'm teasing you what are you doing what are you doing right over there so just by using emojis the same text what are you doing is conveying multiple levels of knowledge multiple information right over there and that is what happens inside of HTML but instead of using emojis right over there we use something called as tags okay we use something called as tags right over there so this is one of the examples of tags that is the H1 tag putting this particular tag in front this the opening H1 tag and this is the closing H1 tag will make whatever content is in between these tags as big and bold for our website we make it big and bold for our website guys this is called as the heading one tag it's called as The Heading one tag guys now that you guys are able to understand the H1 tag this is HTML right over here we need to figure out where do we want to render this particular H1 tag where do we want to render this hello world now to do that we going to go back to our index.html file the already built index.html file that we are having right over here you are having another tag that is called as the div tag guys having another tag right over here that is called as the div tag think about this div tag as just a lunchbox think about this div tag as nothing else but just a lunchbox it is a container tag it does nothing it doesn't make anything big and bold it doesn't make anything pretty it doesn't do anything it just contains other tags inside of it okay it contains other tags inside of it so it can contain multiple H1 tags you can contain multiple paragraph tags and multiple other tags as well inside of it's just a container okay so this div tag that is there has an ID of root ID is basically like your role number okay in your entire School in your entire College whatever role number that you are having will be unique in the entire College itself am I right or wrong guys whatever role number or ID that you guys are having will be unique in the entire college or entire school so if I'm asking about btech 10828 it will be referring to a particular student in the entire college no other student will have that particular role number or that particular ID in the exact same manner inside of this particular HTML uh page itself there might be multiple diff tags there might be 100 200 thousands lacks of div tags inside of it we don't know so we're giving it an idea unique idea unique role number called as root so that this particular div tag we will be able to identify by its ID by its role number that is root guys now the index.html file is also referred to as document inside of JavaScript if I want to get access to this index.html file it is called as document inside of JavaScript guys now where do I want to render this hello world let's come back to the original question I want to render this hello world inside of this div tag having the IDE of root I want to render this hello world inside of the div tag having the IDE of root to get that div tag with the IDE of root guys we are having some JavaScript code that we'll have to write that is from the document from the document that is your index.html okay we want to get a particular ID get element by ID okay get element by ID that is get the uh particular tag with the ID of root right over there guys so what do I want to render I want to render Ender the H1 tag where do I want it to be rendered I want it to be rendered from the document that is in index.html file get the element inside of JavaScript we call tags as elements so get the element by its ID okay and the entire particular uh document itself there is only one particular tag with the ID of root so it will get that particular thing for you guys now if I save this if I save this and I go back to my website and I try to refresh my page itself okay it is not showing up did I make any particular errors right over here would I have to restart my particular thing me check the console once okay why is it not loading up did I make any errors Rea render render where do we want to render I think so there is a problem with the repet itself let us try the exact same thing with cons uh not console with our uh code sandbox as well I think so there's a problem with repell it right now let us do the exact same thing using uh code sandbox let's let's do that okay I will have to create a new one let's go back sandbox react GS let's go down create sandbox okay let's delete everything let's save everything let's delete app.js as well is the delete option delete permanently delete okay index.js let us just copy everything up contr a contrl c contrl vrl s yeah it's working here I don't know I think so there's a problem with it that is the reason why it is not working inside of code sandbox the same code the same thing is working absolutely fine I don't know why so as you're able to see the same code I just copy pasted it right over here and our hello world is coming up on our screens okay I don't know what is the reason that uh it was not working in repel it but it is working here inside of our uh code sandbox so I will suggest you guys to use code sandbox right over there that will be my uh opinion okay so uh right over here guys as you're able to see uh the hello world is coming up on our screen using this particular code the next thing that uh we want to check up right now is that we have to what is this jsx okay so here you are having JS but actually whatever files that we'll be creating this is not actually JavaScript code guys whatever code that you guys have written right over here is called as jsx code guys this is not actual JavaScript code this called as jsx code or JavaScript XML code guys okay JavaScript XML code that is what it is called as now why is it whatever we have been learning about JavaScript till yesterday was called as vanilla JavaScript or your simple JavaScript or plain JavaScript so that was Vanilla JavaScript right over there your GSX code right over here is Javascript XML code as you're able to see this is not actually JavaScript code guys this particular part on the entire code is your HTML code it is not JavaScript code right over there so jsx code is like a hybrid between JavaScript and HTML so that you are able to easily use it right over there you're able to easily use it right over here guys that is the reason why this is not pure JavaScript code now browsers don't understand jsx code guys whatever your react GS code that you guys are writing right over here your Chrome browser your particular Opera Mini your Firefox is not able to understand this code this jsx code so you have something called as a compiler a babble compiler inside of reactjs guys having something called as a babble compiler inside of reactjs okay so you are having this particular Babble compiler that is present inside of react GS that compiles that reads your GSX code and converts it and converts it into JavaScript plain vanilla JavaScript code that your browser is able to understand you guys will be asking sir why don't we directly write our code in plain old JavaScript why are we writing it in jsx itself we can write it in JavaScript we don't require this Babble compiler if you try writing the same line of code this one line of code itself in ven JavaScript will take you five lines of code to do the exact same thing it take you five lines of code to write this exact same thing and as your code becomes much more complicated your JavaScript code will grow exponentially so just for example for a simple web page if you require 100 lines of code inside of GSX you'll require more than 1,000 or 10,000 lines of code in vanilla JavaScript that is the reason why we prefer using jsx rather than vanilla JavaScript itself guys again I'll show you guys Babble as well B A BBL e Babble compiler b a b e l okay my spelling was very out of date itself so as you're able to see right over here this is basically your Babble compiler that we are using right over here guys are you guys able to understand this please let me know are you guys able to understand this guys please let me know yes no what is the scenario guys okay okay so now that you guys have able to understand this let us try to understand why are we not using using uh Imports why are we using const Okay the reason for that is recently JavaScript has been updated okay recently in the past two to three years JavaScript has been updated and due to that reason inside of companies inside of interviews as well you guys are going to see these two lines of code everywhere because most of the previous version of react GS or your react code actually got their react and react Dom libraries using the required method itself but using the updated methods instead of doing this you guys will be writing import react as react good react I'll have to write it once again in itself there is some problem right over here yeah it is very similar to python itself absolutely yes is very similar it has become very similar to python definitely yes for that I'm so sorry my cough has become a lot uh a lot more than before itself what happened is my screen visible to you guys right now okay I didn't knew that it was visible okay so like I said guys instead of doing that you guys can write import react from react and similar to that instead of writing this you guys can directly write import react Dom from react Dom simple as simple as that this is the latest method of writing code I'm I'm going to show you guys both the methods itself guys because you guys are going to see both the codes quite frequent and it shouldn't be the case that you guys are not able to understand the code at all this is the latest method of writing react code I've have shown you guys the older method as well but because it is still in use so I need to show you guys both of them okay so we'll stop right over here tomorrow onwards we will see what are components why are components so important we'll try to understand about react Dom a little bit more about these virtual Doms and real Doms which is a very very very important interview question for frontend interviews especially for reactjs interviews itself this is a very important interview question so we're going to spend a little bit more time on that right now I'll be giving guys today's attendance so start filling it up as I said the attendance will be Clos in five minutes you'll be having five minutes to fill up your attendance who the is closing the HS nothing I just showed you guys a new way of instead of writing cons react is going to require react instead of doing that you can directly write import react from react it means the exact same thing it means the exact same thing there's no difference between the two there is no difference between the two guys okay it is just the latest method of writing react code okay so right now I'll be taking up your attendance guys so please be ready you will be having three minutes to fill up the attendance after that the attendance link will be closed so I'm creating your attendance I'm opening up your attendance I'm creating the link for the attendance itself I'm shortening the URL and the attendance link will be closed exactly at 858 okay at exactly 858 the Ence link will be closed the attendance link will be closed exactly at 8:58 guys please start filling up the attendance okay the attendance will be closed uh sir I do DSA in python or Java I'm interested in AI oh do do DSA in Java or C++ do not do it in Python okay both the attendance link is in the live chat guys please start filling up the attendance we'll meet in our tomorrow's class the attendance L will be closed exactly at 808 sorry 858 guys so please start filling up the attendance we'll meet tomorrow's class and continue from right over there thank you so much guys thank you bye-bye bye-bye

Channel: DevTown

Views: 3,317

Keywords:

Id: qfeyZi3P9gc

Length: 35min 1sec (2101 seconds)

Published: Sat Jun 22 2024