ReactJS Tutorial – 8 – JSX
- December 22, 2023
- Posted by: MainInstructor
- Category: Go JavaScript Node React VSCode
![*](https://i0.wp.com/allprowebdesigns.com/wp-content/uploads/2023/12/1703285105_maxresdefault.jpg?resize=840%2C430&ssl=1)
Video Title: ReactJS Tutorial – 8 – JSX
Alright guys in this video we are going to learn all about JSX JSX is probably the word you’re going to see and hear a lot in the world of react so it’s really important that you understand what SGS X and white is abused alright let’s begin JavaScript
XML or JSON is an extension to the JavaScript language syntax with the react library it’s an extension to write XML like code for elements and components and just like XML GSX tags have a tag name attributes and children now why do we need JSX well the truth is
JSX is not a necessity to write react applications you can definitely use react without JSX but JSX makes your react code simpler and elegant as you might have already seen it provides a syntax which is familiar to many developers JSX ultimately translates to pure JavaScript which is understood by the browser’s so
We talked about what is JSX and why do we use it but how does it work behind the scenes what does the code look like without JSX let’s take a look at that what I will do is create a react component using JSX and without using JSX that way you not
Only understand how JSX translates to regular javascript but also appreciate how it brings out simplicity in your code now I’m going to start by creating a new file called hello dot J’s within the components folder this is going to be a simple functional component that renders hello vishwas in
The browser so first step as always import react second step create the function that returns what appears to be HTML but is in fact JSX Const hello is equal to an arrow function so empty parentheses and within the curly braces we are going to return HTML which is in fact JSX
Hello vishwas so a div tag within the div tag and h1 tag and the text hello vishwas finally make sure to export it as the default export now in AB dodges I can import the component and include the tag in the render method so import hello from components slash hello I’m going to
Comment out greet and welcome and instead include the hallo tag if you save the files and take a look at the browser you should be able to see hello which was so this is the JSX version of hello component now let’s rewrite the component without using JSX
To help us do that the react library provides a create element method so within the function the code now changes to return react dot create element and this method at minimum accepts three parameters the first parameter is a string which specifies the HTML tag to be rendered for our example we need a
Div tag to be rendered so react dot create element with the first parameter a string called dev the second parameter we get to pass any optional properties for the example we have right now we don’t need any additional properties so we can simply pass in a value of null
The third parameter is the children for the HTML element that is children for the div tag again for our example we simply have the text hello which was which we will pass as the third parameter if we now take a look at the browser you should be able to see the
Text hello which was but this is slightly different from what we had before the h1 tag is missing so let’s include that each one and a closing h1 if you now take a look at the browser the output is not what we were looking for if we inspect the element
You can notice that it is just inner text – the div tag and the h1 tag is not a Dom node let’s fix this if we go back to vs code it turns out that the create element method can accept any number of elements as children so let’s split the
H1 tag and the text into two elements so the third parameter is going to be now the h1 tag and the fourth parameter is going to be the text hello vishwas if you now take a look at the browser the output is slightly different but it
Is still not what we are expecting it to be if I inspect the element now we still have the div element but it contains two text nodes each one is a text node and hello vishwas is a text node to render each one as an h1 element and not as a
Text node what we have to do is call the create element method for the second time so if I go back to vs code the third parameter now is going to be again react dot create element the first parameter is the tag so h1 we have no additional properties so null and
Finally the text hello vishwas if you save this and take a look at the browser the output is finally what we were looking for hello vishwas an h1 tag now let’s go back and take a look at the second parameter we have been ignoring the second parameter basically is an object
Of key value pairs that will be applied to the element for example let’s say we need an ID attribute on this div tag we can specify an object key is ID and the value is hello if you now take a look at the browser and inspect the element you
Can see the ID attribute with a value of hello similarly let’s say we need to add a class to the div tag so within the object class of value dummy class if you take a look at the browser and inspect the element you can see the class
Attribute being applied but if you take a look at the console you’re going to find a warning invalid Dom property class did you mean class name in JavaScript class is a reserved word we did see the class keyword being used to create react components in the last
Video so in react a CSS class has to be specified using the class name attribute so instead of class it has to be class name camel cased take a look at the browser there is no warning in the console and if you inspect the element
You can see that we still have the class attribute being applied as dummy class now the same in JSX is going to be do last name is equal to dummy class so there you go a react component with and without using JSX and by now it must be clearly evident
Which is the more simpler approach basically each JSX element is just syntactic sugar for calling react dot create element and that is why you have to import the react library when you use JSX if you take a look at grete Jess you probably wonder why is react being
Imported I don’t even notice it being used anywhere but the fact is JSX translates into react dot create element which in turn uses the react library our example just has two elements but imagine a component with ten or a hundred elements it starts to become really clumsy chair sex on the other
Hand will keep the code elegant simple and readable let me also talk to you about some of the differences you are going to see in JSX compared to regular HTML the first one which we have already seen is class being replaced by class name similarly we also have for being
Replaced by html4 again for is a keyword in JavaScript you are also going to see kami case property naming convention instead of HTML attribute names for example on click and tab index will become on click and tab index that is camel casing we will see these differences as we progress through the
Series so don’t worry about having to memorize them lastly I want to point out a link which may be very relevant depending on the time you are watching this video the react team is working on making some breaking changes which of course is for the good of react but that
Also means you might see changes in the code you write one of the biggest changes proposed is changing class name to just class there are a couple more changes listed as well so I will leave a link in the description down below the changes are targeted for react 18 or 19
I believe so we have a good year or two before these breaking changes are made now with the less please to take a look at this link as it will help you stay updated with the changes all right that is pretty much what I wanted to discuss about JSX
Thank you guys for watching please don’t forget to subscribe and enable notifications and see you guys in the next video
-
Sale!
Wireless WIFI Repeater Extender Amplifier Booster 300Mbps
$29.99$14.99 Add to cartWireless WIFI Repeater Extender Amplifier Booster 300Mbps
Categories: Electronics, Wi-Fi Router, Wireless Wi-Fi Extender Tags: 300Mbps, 802.11N, Amplifier, Booster, Extender, mobile wi-fi booster, Remote, WIFI, Wireless, Wireless WIFI, Wireless WIFI Repeater, Wireless WIFI Repeater Extender, Wireless WIFI Repeater Extender Amplifier, Wireless WIFI Repeater Extender Amplifier Booster, Wireless WIFI Repeater Extender Amplifier Booster 300Mbps$29.99$14.99 -
Sale!
Full RGB Light Design Gaming Headset Headphones with Mic
$24.99$14.99 Add to cartFull RGB Light Design Gaming Headset Headphones with Mic
Categories: Electronics, Gaming, Gaming Headsets Tags: Design, Full, Full RGB Light Design Gaming Headset, Full RGB Light Design Gaming Headset Headphones, Full RGB Light Design Gaming Headset Headphones with Mic, Gamer, Gaming, Gaming Headset Headphones, gaming headset wireless, Headphone, Headphones, Headset, Light, Mic, Package, RGB$24.99$14.99 -
Sale!
Wireless BlueTooth Multi-Device Keyboard Mouse Combo
$39.99$19.99 Add to cartWireless BlueTooth Multi-Device Keyboard Mouse Combo
Categories: Electronics, Gaming, Gaming Keyboards, Keyboard Mouse Combos Tags: Combo, Keyboard, keyboard mouse combos, Mouse, MultiDevice, Set, WireKeyboard Mouse Combo, Wireless, Wireless BlueTooth Keyboard Mouse Combo, Wireless BlueTooth Keyboard Mouse Combos, Wireless BlueTooth Multi-Device Keyboard Mouse Combo, Wireless BlueTooth Multi-Device Keyboard Mouse Combos$39.99$19.99 -
Sale!
High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar
$199.99$139.99 Add to cartHigh Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar
Categories: Gaming, Gaming Chairs Tags: Adjustable, Chair, computer chairs, Desk, Executive, Gaming, Girl, Headrest, High, High Back Leather Executive Adjustable Swivel Gaming Chair, High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest, High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar, High Back Leather Executive Adjustable Swivel Gaming Chairs, Leather, Lumbar, Office, Racing, Swivel$199.99$139.99 -
Sale!
Professional LED Light Wired Gaming Headphones with Noise Cancelling Microphone
$29.99$19.99 Select optionsProfessional LED Light Wired Gaming Headphones with Noise Cancelling Microphone
SKU: N/A Categories: Electronics, Gaming, Gaming Headsets Tags: Cancelling, Gaming, Gaming Headphones with Noise Cancelling Microphone, gaming headset, Headphones, Headset, LED, Light, Mic, Microphone, Noise, Professional, Professional LED Light Wired Gaming Headphones, Professional LED Light Wired Gaming Headphones with Noise Cancelling Microphone, Wired, Wired Gaming Headphones, Wired Gaming Headphones with Noise Cancelling Microphone$29.99$19.99 -
Sale!
Gaming Desk with LED Lights USB Power Outlets and Charging Ports
$349.99$249.99 Select optionsGaming Desk with LED Lights USB Power Outlets and Charging Ports
SKU: N/A Categories: Computer Desk, Gaming, Gaming Desk Tags: and Charging Ports, Charging, Desk, Desks, Gaming, gaming desk with led lights, Gaming Desks with LED Lights, Home, LED, Lights, Monitor, Office, Outlets, Port, Power, Room, Stand, USB, USB Power Outlets, White, Workstation$349.99$249.99 -
Sale!
Wired Mixed Backlit Anti-Ghosting Gaming Keyboard
$99.99$79.99 Add to cartWired Mixed Backlit Anti-Ghosting Gaming Keyboard
Categories: Electronics, Gaming, Gaming Keyboards Tags: Antighosting, Backlit, Blue, brown, Gaming, Gaming Keyboard, gaming keyboards, gaming keyboards and mouse, Keyboard, Laptop, Switch, Wired, Wired Mixed Backlit Anti-Ghosting Gaming Keyboard, Wired Mixed Backlit Anti-Ghosting Gaming Keyboards, Wired Mixed Backlit Gaming Keyboard$99.99$79.99 -
Sale!
Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset
$119.99$59.99 Add to cartWireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset
Categories: Electronics, Gaming, Gaming Headsets Tags: 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset, ANC, Audio, Bluetooth, Cancellation, Ear, Earphone, gaming headset, Headphones, Headset, Hi-Res Over the Ear Headphones Headset, HiRes, Noise, Wireless, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Headphones, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headsets$119.99$59.99 -
Sale!
Wired Sports Gaming Headset Earbuds with Microphone
$19.99$9.99 Select optionsWired Sports Gaming Headset Earbuds with Microphone
SKU: N/A Categories: Gaming, Gaming Headsets Tags: Accessories, Earbud, Earphone, Earphones, Gaming, gaming headset with microphone, Headphones, Headset, IOS, Microphone, Sports, Wired, Wired Sports Gaming Headset Earbuds, Wired Sports Gaming Headset Earbuds with Microphone, Wired Sports Headset Earbuds$19.99$9.99 -
Sale!
150W Universal Multi USB Fast Charger 16 Port MAX Charging Station
$49.99$29.99 Add to cart150W Universal Multi USB Fast Charger 16 Port MAX Charging Station
Categories: Charging Stations, Electronics Tags: 150W, 150W Charging Station, 150W Universal Multi USB Charging Station, 150W Universal Multi USB Fast Charger 16 Port MAX Charging Station, 150W Universal Multi USB Fast Charger 16 Port MAX Charging Stations, 150W Universal Multi USB MAX Charging Station, 16 Port MAX Charging Station, 3.5A, Charger, Charging, Fast, laptop charging stations, Max, Multi, Port, Stand, Station, Universal, USB$49.99$29.99
React Fire – https://github.com/facebook/react/issues/13525
Will u please provide any other alternatives to solve the queries sir
thanks
Excellent!
completed 8th video. thank you 🙂
Hello Vishwas, why the code didn't work as it should at 5:16 was because the <h1>Hello Vishwas</h1> was inside of a quote, I wrote it without the quote and it worked.
Please confirm if it is valid at this time ?
This tutorial is amazing, I only found it 4 years too late. Is it still relevant enough to follow?
is this serie still usefull in 2023 @Codevolution ?
10:11
I am sorry, but how do I write "//" multiple times at once?
another easy-to-follow tutorial, I am so glad I am improving my React skill thru these tutorials!!
you are an awesome…..
happy learning react.
Nice vedio 😎🚩✨️💖
Your videos are the best ever! Glad i found your channel.
I am watching your series on January 2023.Thanks for your hard work on this Course. You should teach in Udemy.
hats off to ypur explaination sir……………..
Why did we use parenthesis for return in Hello.js, while in greet there wasn't, I'm a newbie to react
Thanks a lot.
Super
Why in my vscode jsx is not executing?
An absolute beginner here , i just have one question , WHYYYYYYY react ??? Why cant i simply make these components out of basics HTML elements why do i have to write such bigggg code for a single head tag?? Why make multiple components for an application in different files , importing-exporting them, ugh it feels so useless right now! I know this isnt flop tho i maybe looking at it from a very different perspective! Anyone here who knows REACT well , can you drop some info as to how and why is REACT beind used.
can i use emmets inside create.element to maybe nest parent div and child div??
I have problem Compiled with problems:X
ERROR in ./src/App.js 14:43-48
export 'Greet' (imported as 'Greet') was not found in './components/Greet' (possible exports: default) ?
thanks alot
I JUST love how enthusiastic Desi people are about their tech careers. It is kind of cute how they run to make videos and are prideful of their knowledge unlike no other culture or ethnicity in the world TBH. They are probably the most cognitive of the mediocre knowledge needed to work in technology and the pay out being greater than the required input in man hours to learning such information.
🙂Thanks.