Intro to Next.js | Lesson 5: JSX

Transcript

English (Auto-generated)

talk about the jsx. So Js 16 No, J next Js actually so you can see that here. We have put the the html text uh and html tags and uh the html ization we did here but it is the, you know, it's the Js file and that is the javascript function. Okay. And we are returning here, we are returning the function Okay. Whatever we want to return in the function and here we are just exporting the function then how and why? We just simply put the the html in the javascript without adding, you know, the double or single quotes because html is a string thing. So here it looks like html but it is not html, it is jsx the javascript. Xml or you can say javascript, same text extension. So actually facebook defined it and facebook, which is now metaverse actually first designed and created it and it was using it in their internal system. Then they opened it for the public and now we can use it in our in our react. And Js react in next year's frameworks like I'm doing here. So there are a few perks of using it. The Gsx like you can, you know, you just can write the html, this is kind of html but this is J s as I mentioned, it is Gsx which is which has a similar same text as the html. So by using the html syntax, you also can, you know, you also can write the javascript inside the kind of html, for example, you can write, you know, five plus five Plus nine by adding the collaborator is you can write the the Java's prepare if I go to the browser. You you should see the 14 here so you can do not just this but you also can create you know the the, the conditional statements and you also can, you know, you also can do many things inside the jsx that is jsx kind of a standard defined by the facebook and you can do whatever you want. Uh you want to do in the html you can do here a few things I mean are different for example the styling in the gsX is different than the html styling. Absolutely. The style tech doesn't work the way it works in the html we will be talking about that. No problem. But later the second thing is we just cannot define the class this way. And I am going to tell you the reason I'm writing here uh my class just as it is, I'm going to the browser and uh we should get the we should get the error but you're not getting it if I go to the X inspect element Okay, there is the error. You can see that invalid down property class. Did you mean class name? What is this meaning? Actually as I mentioned that you know the Js the this is the javascript, not the html So in the javascript class is a reserved javascript word which has a certain meaning, I mean you can define the class as you can define the function by you know, by writing the function keyword. So similarly you can define a class by using the keyword class. So to make it the class here, you need to write the class name. Okay, so you can see that the camel style is applied here. So this is also a sign that when you do something like that and I mean you want to put the two words so you don't just use this method or I mean you can just put this space but you go with the Camel style when you are you know, connecting two words together in the jsx that's a method. Anyway, this is the I mean simplest explanation of the jsx and I hope you understood it. Try it well, you can apply any any method like you can apply the date and this date will behave the way it behaves in the html. I think that's cool. And that's simple. So you also can save it uh the basics in the variable without putting the string because as we discussed it is not the html but a kind of javascript which behaves and looks like the html with a similar you know, results. So in the next cast we are going to talk about something else until then stay tuned
114 Views 0 Likes 0 Comments

In this cast, we will learn what is JSX and how to use it in NextJs

Comment
Leave a comment (supports markdown format)