React JS v19 Tutorial in Hindi #5: JSX (JavaScript XML) The Essential Building Block of React

Hello what's up guy my name is vinod bahadur thapa and today in this video we will see j ak end ri jae believe me guys j one is very important and once you master j6 life will become very easy for you to work in react Because React is all about your component and what is component? Component is nothing but a JavaScript function which returns one. Meaning if you know j one then whatever function j is returning one is called your component and react. Is all about your component so see how it is connected and believe me guys in this video I will tell you in depth about Jess how to understand behind the scene because our browser obviously does not understand them as react so behind the Scene: Which is the compiler which is converting React into JavaScript and then showing it to you on your browser? Basically, the user interface of the website. How all these things are happening is very important, so today's video cannot be missed at all. Can't do without any further guys now let's go to our computer screen guy so you can see today we are going to see what is JS okay so let's go here you can see what is it okay So guys what is this JS it is very simple you can see it stands for JavaScript xa and with the help of j6 now you can write either you used to write it inside script tug all were different but now in react Guy, you can write ATML inside JavaScript also, many people can write ATL and JavaScript together, simply represent your JS in this way, I will show you the code right now, you will enjoy, one thing is definitely written here which Maybe you are wondering and that is see it allows you to write ATML elements in JavaScript that's fine but and place them in the DOM without any create element and open sl method remember when our first video was Our first video was like introduction to react, I had said that react is declarer, here you just have to say react, I have to show my particular code in this way, rest how to show it, what is the hard work behind it. Whatever scene is yours, who does it and reacts? Same thing is happening here, you will write JavaScript and HTML together, which is your JS. After writing that, now how to show that code on the screen. That's not our hassle, that's not our tension, that's the automatic react for us. Behind the scene guys create it's elements. Basically here you can see that it converts the elements of react into them and then that goes from the object to the DOM. It gets converted and then it is visible to you on our user interface, so here it is just told that we just have to write our normal code and rest all the things will be handled by React only, okay you. Do n't think this at all, please watch the video of the first part, react is declarator, you will know, but I hope you will know, you know, I had told you about imperative versus declarator, okay here you can see two things that Here, this particular code that you are seeing, I am telling you that it is not the same, when we write this code, behind the scene it gets converted in this way, your Babel used to convert it from this and then That's the thing ahead, okay so this is one part and then here we also have one more part okay here is one part and then here is one more part, you can see the differences, I will clear the whole difference but one more thing Look here, it is a syntactical sugar introduced by the Facebook's component to write the component of React. They created JAS, you know because of JAS is a syntax extension for JavaScript that lets you write something, which means it compiles in this way. You can see for yourself, look here, this is the code that is visible, just one second, guys, all we have to do is write this, brother, I want Hello World on my screen, you know, now obviously this is. This is React, this is your JS, and the browser does not understand this React JS, if it understands it, then it is pure JavaScript, so there must be something, guys behind the scene, which is yours, here in React, we have a compiler. It has come in version 19 but whatever it is, we also have a bubble which converts it in this way and then this is visible after converting it into your guys virtual dome and then your actual dome, so some behind the scene. This is while we only have to write this much, abstract guys, that's all, now I will take you directly to my code editor, oh my God, so first of all I am still on my app.js file and please guys once again comment me. You tell me whether you have installed React Propel yet or not. If it is done, then just write 'React Done'. That's fine. And if not, please tell me because I want us to work together. Okay, okay, so see. I am inside the app.js file and this is the code you are seeing, this is your code, where you look like this, this is a function, right, it is JavaScript, but why did you write this h1, brother? Why did you write this ATML, this is how your JS works, that you can write ATML like code inside JavaScript and this makes you JavaScript, I mean JS, right, okay, this is the code, I will run it and show it, okay once. Let me try LS and see, okay, I went inside CD React Thapa, I clear it, now I can write be and then and then run and then deb. Else I can directly skip run and write become and then deb and if. If you have gone through npm, then I am saying again, you can write npm run and then deb. I can write anything, even if I have gone through one, but even after that, if I write npm, it will work for me because We have already installed Naat Jas, it means app will work for you easily but let's go with ban and then the depth is simple, so you can see that it is running on local host 5173, so I am on local host 5173. Let me open and or this is our first JS, a code and our first react website, okay, now this is behind the scene of yours, it will continue to run, you know whatever hot module is there, now fast refresh, all that has come but I will give you a Let me show you the thing. Now this is the code. Well, we have written it but in reality how it would look like. I will tell you. See, this is one way of writing. There is another way of writing it. I will tell you this is what happens behind. Look at the scene react, as soon as you write the react, it has been imported automatically. Dot we have a create and then element. See what was written here that a and place them in the do without any create element. Without any create element means we need to write that. No, behind the scene, React automatically converts it and shows it as we want, so let me tell you how it is happening in reality, this is the only coding, only this h1 code, I am writing one work. I copy and paste this and I am not writing this function. I am just writing a particular h1. Hello Thapa. Technically, see how it is happening behind the scene. In reality, if you want to write through React, then react dot create element. Now if I do every here, then you can see that we need to pass three arguments, okay, the first one is your type, which is the input type, your h1 is your paragraph, ul l is the anchor tag, video tag is one. So what is your input tag then second is your props which is the short form of your property but a little bit of time we will see the props later and then at the end look here comma and then we have these children Okay so I Let me tell you, look carefully, first of all what is our input type, tell me obviously this is h1 right so you have to write inside the string h1 and then comma and then again I am doing the denominator. Look, we have written our type right so. It's an ATML type script ahead of the attribute, whatever it is and then, after that now we have to write the props. In our case, you can consider the props as an attrile somewhere where like we used to write a class or whatever. So I used to write its width, remember so that is your attribute in HTML but in this same attribute will be called props and property but right now we do not have its neat so right now we don't have any props so we will write null. See why I wrote null. Because by default these people must have also said null somewhere, at the moment it will not be visible or here we have null, you can see it here itself and operator, if not then write null because it is not there now, now after that this The value which is Hello Thapa Technical is just guys again it's a string and pass this is it so here you write this either you write this still yours will be equal okay I copy this I am here you guys your Let me uncomment this and remove this particular piece of code. Let's try what happens. I keep this. Let's check it out. What happens if I go here and oh my god refresh. Hello Thapa technical saw so guys. This is your JS one and I hope you will have a lot of fun now it's totally up to you you can either go with this way or you can just look at an h1 meaning inside the JavaScript if I htl1041 here what we talked about was what it was Now let me tell you one more thing, remember you must have heard Virtual Dome a lot, so going ahead we will read how React works but in reality there is no term called Virtual Dome because this is the created element, now it will be converted into your React. In elements, this was react.create elements, this piece up code is your convert, in react elements the same react elements and virtual DOM means that is a miss leading term, you call it react elements, whatever gets converted after this will become your react elements. Now I show the same comparison in old versus new where to update and after that an actual DOM is created and it is visible on our screen. Okay, so what I do now is I copy it and go back to normal for a second. That's all, now this is the particular code. Look carefully, guys. For you guys, I put it inside the console dialog in this way. It is not needed at all. Okay, here we go and inspect the console. It goes on like oh my god we have an object and this is it so what you are seeing right now you can call it virtual dome somewhere so this is your virtual dome why because this is a part of the virtual dome tree Where you go and check what is there and what is not there and on this basis only see this is your type and here we have a children, look for a second I make this and that a small one so this is your type h1 hair we have A children look at the props I children your Hello Thapa technical and here we have this look at the sender element so this is guys your one of the react element that is your tap and or so this is your react element which can go ahead guys help in your DOM. And when your rendering is done, you have to understand all these things, it is just a symbol telling you what elements you are using, what are you not using, so much happens behind the scene, then go to your interface. You are seeing it, okay, so I hope guys, you must have liked today's video, but wait, wait, there is still more left, I will tell you a simple thing again, whenever you write a text like this, writing HTML inside JavaScript is yours. JS is called a simple piece of code. React does not understand the mean browser, hence RE is used with the help of compiler, basically it is converted with the help of Babel and these things are further converted and your objects are converted into React elements. This is You can call this a virtual DOM and this is what gets converted into your actual DOM and you see it being rendered. So guys, how did you like it? I am really enjoying it. Let me show you more. You must be wondering what this thing is. How did this happen? Let me tell you, we don't have to do anything. You know what Babel is, so it's a compiler for obviously in React 19 by default we are going to get a compiler and in React we also have a Babel as a compiler. Which is converting your react code into JavaScript so that it can be understood by the browser. Okay, try it out, I will give you everything in the description below in the link, no tension, now look carefully at this particular piece of code. If I copy, you can see guys, there is already a piece of code here, this is the particular piece of code, this is basically React, you know I converted it, see here bubble into JavaScript and this is already I showed you. So now you know that we do not have to do what I have just shown, by default all those things are happening behind the scene and it is important for you to understand why and how it is happening, see here you are seeing this, you see the red cut element. h1 Name Binod Look this is your props I had written nun here but now finally here we have a props and this is a hello world this is a simple one hello word ok so this was guys your traditional way it's your classic way but here We have see, it will come in the run time of React. Now we have this automatic. In today's time, where if you look at the same piece of code, now how would you write it, you can see, here it is very clear import j6s h j6 okay and then the app. Now see, they have made it even more easy, there is no need to even write a create element, it is just these children inside the h1 object, Hello World, so these are the two ways through which it works for you. Now guys, it is totally up to them, what is that? Use it but it is important for you to understand that earlier there was only create element but now we have automatic method in which now you do not need to create element here, return directly here, they have made j one so powerful that j one Log import from han j directly h1 and then directly we have an object in which name is equal to vinod and children equal to hello world okay so these were the two methods through which your guy who behind the scene is converting the react javascript and your After making that dome and then whatever things are happening, okay, this is done, I will comment it, you will get the source code, no tension, but let's see a little more interesting after I think version 18, we don't even need to write this import react. There is no need, earlier we had to write this but now there is no need for this, what will we guys do through this series, we are awesome [Music] You know which Korean series are you watching or on the net, which series are you watching? If you like it best, please comment to me. Whenever you see any cards, we have a poster. We have a name. Rating is summary, I have it here. Rating is h3. Let's go with the rating. What you see. Hey guys in react, we are just writing HTML inside JavaScript and writing HTML inside JavaScript is what is called as simple, just tell me what is going on, what is yours and I think it is 8.2 than we have. A summary, I would like to write that inside the paragraph tag. Summary copy and I have pasted it. Now here you see carefully. Now if I go here on my code oh my God here over here now see I am getting an error adjacent GS one elements. Must be wrapped in an enclosing tag It must be wrapped in an enclosing tag and the react fragment and this fragment I'll tell you about that later but for now just understand that whenever you work with this one you need to have One Main Parent I guess I have some data here okay or so we have these two things which will be very useful for you this is a note no I will present it in a better way further don't worry but these two It is very important for you to keep these things in mind that is is expression must have one parent element only one parent element which means if you try to write multiple elements react will throw an error and that's what I threw for the sake of knowledge Showed you and second things ATML When you were writing ATML then you can write the image tag as it is but in reality when you write a void element or a single element then such elements guy two are void elements basically we call them void Elements are also called because they do not have any closing tag, so those elements which do not have any closing tag, you will have to close them yourself, these are two rules, memorize them, whatever they are, stick them in your mind, okay, so here you have made a deliberate mistake. So what will we do here we will go with one deep and I will remove this deep from here and I will put it at the end in this way and or this is it, did you notice one thing what happened by default they put this I have meant a parenthesis, we will call it parenthesis, so make sure that you do not have to use a single brace here, okay, you cannot use a single brace, see, you will get this error, always whenever you are returning, you need to have. Only one parent and then if the code of multiple is basically the code of atl then you will have to use these parents after the return these are very small things which are very important and that's the end of my work now see Queen of Tears Rating 8.2 Summary Ye & O Okay, now let me show you one thing, we have a public folder over here, so I remember I told you that what is inside the public folder is where we add our images, so I have added an images. Did Queen of Tears, it looks something like this, okay, so now what I will do is I will go inside this because a wave and then I am going to put the image, so see, whenever you add an image inside any public folder, then guys. The best part is that here you do not have to do anything, directly you have to give the name of that particular file and then your work is over, just this is it, give an alternate, then give the same, okay or now there is another one here. You are going to get an error, see, I have closed it myself, if I don't do it, then I am getting an error, see the image is coming to me, okay, now here I guess one more error is going to be given that every image tag must have width and Height is something like this, people speak but for some reason, remove it and refresh it one more time, no, right now I am not able to understand, but it is a good thing, okay, so what will we do, let's go with it, isn't it? Sim, remember it, yes. We used to do inline style 100% height let's go with let's go with 40 let's see how it looks ok wow it looks very cute but if the card feel is not coming then is it a square or not let's check it out Oh my god si ya it's looking best it's looking awesome so we have one image we have one queen of tears name rating and then we have our summary so guys yeh aapka ban gaya hai ek card with the help of react gs isko fard hum aage jab You will enjoy if you see CSS but in Atlas now you must have gained confidence. Hey man, React is easy. Really, it means you will be advanced but in Atlas, you have come to know how now you can create anything in React. ATML pages or cards. You can do it one more time, no matter what you return, you can return only one element, one parent element and then another thing. Yes, all the wide elements which do not have closing tag, you will have to self-close these two things. Keep in mind and rest, I have shown you everything that is happening behind the scene, but you are not worried about it so much, just for a general knowledge that this is the world's best react course, so you should know things, so it is okay. Hey guys, that's all for this video today, I hope you have come to know the complete logic of JS and in the upcoming videos I will tell you many things like dynamic values you know functional call in JS and many more things which you will enjoy. How to include CSS will be discussed later, but as of now, it is important for you to know as much as I have told you in this video. And then keep in mind the two tips I told you regarding Jesus. If you like the video, please like it with your friends. Share it with us, our next target is 1 million subscribers, if you haven't subscribed yet then please do so, I will meet you in the next video till then guys, thank you so much, I took it [music]