ReactJS Tutorial - 8 - JSX

📘 Courses - learn.codevolution.dev/
💖 Support UPI - support.codevolution.dev/
💖 Support PayPal - www.paypal.me/Codevolution
💾 Github - github.com/gopinav
📱 Follow Codevolution
+ Twitter - / codevolutionweb
+ Facebook - / codevolutionweb
📫 Business - [e-mail]
JavaScript XML (JSX) is an extension to the JavaScript language syntax. With React, it's an extension to write XML-like code for
elements and components. And just like XML, JSX tags have a tag name, attributes, and children.

[@Codevolution]

React Fire - github.com/facebook/react/issues/13525

[@ItsmenikhilKr]

link not working

[@darklord9500]

@Codevolution should i learn this code in 2022?

[@UzmaKhan-yo2kg]

@@ItsmenikhilKr Its working!

[@dasojushiva8663]

dude... I am halfway through the video and I already like the way that is being explained, though am a newbie... it was very clear to me. initially, i thought JSX pros all are like complicated things to learn... but I know there are smart people like you who made the world so beautiful.

[@adetolasanni007]

Great tutor ever you took your time and energy to explain every bit of the course. Thank you so much.

[@uodige1]

another easy-to-follow tutorial, I am so glad I am improving my React skill thru these tutorials!!

[@noahqyain7311]

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.

[@PadmanabhRudrawar]

I am truly grateful that you have created these videos. These videos are relevant even in 2024, i.e. 5 years since its inception. On top of that, these are all free. I wish to see each and every video related to React as my current job requires me to be good in React. I wish to do something for Codevolution as a token of gratitude. Let me know if there is a way to contribute 😇

[@viveks2619]

Instead of nesting the Createelement function, 'return React.createElement('div',null,Hello Again)', This works perfectly fine.

[@total_breathing]

React has evolved

[@josk8936]

arent you using just more jsx inside the child paramenter?

[@pallavimahanta519]

@@total_breathing hey should i follow the whole playlist in 2023 .curreantly i have not started reactjs . Iam searching for a good playlist .can u suggest me

[@faizanahmed9304]

​@@pallavimahanta519yes you can i know its quite older but the basic fundamentals are same

[@Mahi.375]

You use html tag in return that is jsx
He teach without jsx

[@krisssachintha]

Super understanding tutorials, now i like to work with react js, thanks for good content

[@CANIHAZURDREAMSPLS]

This answered many questions for me! Great video!

[@poojaguru2516]

Your videos are the best ever! Glad i found your channel.

[@kalmi_riding]

So if I understand well, our previously created Welcome and Greet component returned with JSX, right?

[@joellim7271]

yes

[@sunnylal3297]

Yes bro

[@colindante5164]

With such an awesome tutorial the least I could do is subscribe. )) Thankyou for such a clear explanation. )))

[@dhl4102]

You Rock! Such a great tutorial

[@karthi321ful]

awesome tutorial series , Thanks Vishwas.. following

[@SpiritualManish]

Thank You for such a nice tutorial series Vishwas. I am using react 17.0.1 and I don't need to import react in functional components.

[@JohnDoe-rj2kf]

what is the difference between the .js or .jsx extenstion when writing the react component ?

[@ricklove8358]

man this is so helpful. keep up with the good work.

[@Colstonewall]

Thank you, Vishwas!

[@KOSAMAGAMES]

doing the second one threw me back in time.

[@VijayaKumar-qv7mw]

Great Explanation Loved it thanks

[@rahulnag9582]

using the div tag makes it a JSX or making it a cont function makes it a JSX ?

[@ravitejakambaluru1330]

@codevolution how can I write multiple class names for single elements. For examples in case of using bootstrap classes

[@karolinalencina7121]

Thank you, that was super clear! :-)

[@rabiehaed]

Excellent explanation, Thanks

[@alvinrobert3927]

Really ur way of teaching really awesome 👍👌👌

[@shloch2007]

very much a GREAT TEACHER ................. thank you

[@aku_11_11]

:)

[@kirankamath5891]

The reason why we imported React from "react" was clearly understood Sir , thanks for that.

[@sdeneham25271]

Why?

[@kirankamath5891]

@@sdeneham25271 so that it uses React.createElement while compiling , but while coding you need to simply use JSX for syntax

[@shishirrai1069]

@@sdeneham25271 it is not required with version 17

[@manueljordan317]

Excellent, well covered!

[@ericmuhire9995]

Great tutorials. Thank you 🙂

[@richardmartyns7978]

I started learning react here, hope am on the right track and there is no new changes

[@gopalakrishnamurthy7862]

Superb explanation I loved it

[@visweswarbk7611]

Excellent presentation !

[@negros111]

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) ?

[@MatheusPereira-nn9dj]

can i use emmets inside create.element to maybe nest parent div and child div??

[@amolsd8706]

you are an awesome.....
happy learning react.

[@suzsg6169]

This is a bit outdated explanation. JSX no longer requires importing React and translation works differently under the hood. New translation: _jsx('h1', { children: 'Hello world' }); instead of React.createElement('h1', null, 'Hello world');

[@nikimehta5323]

according to your tutorial i have import a jsx element but it does not show anything i have used default export also and my path in another page is also correct

[@harshdevmurari007]

hats off to ypur explaination sir.................

[@vaibsify]

awesome explanation 🙏

[@sonofsatan3196]

Why did we use parenthesis for return in Hello.js, while in greet there wasn't, I'm a newbie to react

[@uniquezay2019]

Hello Vishwas, why the code didn't work as it should at 5:16 was because the Hello Vishwas was inside of a quote, I wrote it without the quote and it worked.

[@rahulnag9582]

hi sir,
if we write the Hello function as function Hello() {
}
the it will be a JSX or not ?

[@yogibaba6008]

Arrow function or ES5 function has nothing to do with JSX. Basically what you are returning from your function is JSX . You can also return JSX from class based component.

[@LearnWithNoor036]

I am watching your series on January 2023.Thanks for your hard work on this Course. You should teach in Udemy.

[@harshsinghal8527]

Is this course relevant in 2023

[@rahulpramodmarada4448]

@@harshsinghal8527 ofcourse why not??

[@lathagm666]

completed 8th video. thank you 🙂

[@bollywoodclassichitslyrics2242]

Please upload more videos on react and react native

[@Aditya.Santra]

Very Helpful Video 👍

[@yerraguntlaharish4109]

@Codevolution sir i am seeing this series now am i good to go or are there any changes

[@zribiahmedyassine1582]

is this serie still usefull in 2023 @Codevolution ?

[@kristijanlazarev]

Yes, 90% of the course is basics, and is still relevant today!

[@bikashbhandari5608]

How many times we have to use react.createElement if there is many child inside div?

[@SalmanMKC]

That's for demonstration purposes I guess, it's much easier to use jsx and no need to have to learn the js implementation! :)

[@ashapilkhwal6320]

Really appreciable!!

[@aku_11_11]

Awesome tut sir, plz make tut on java script full course too sir..

[@smilybhanu7779]

Good..great tutorials

[@Sandeep_trader17]

Line 3:9: 'Greet' is defined but never used no-unused-vars
Line 4:9: 'Welcome' is defined but never used no-unused-vars
getting these error and nothing is printing on web could you help me with the same

[@JYOTSNA018]

using React.createElement though returns a line here, but can be highly tedious when it comes to entire page, and the same is easily achieved by functions(greet) why then is it even used?

[@backseatgaming9087]

It is advantagous if you want to use XML later on to manipulate the DOM tree

[@sandeshdeshmukh2136]

thank you so much

[@iFFOKMedia]

You saved me!

[@ngsuraj]

Is it not mandatory to use .jsx extension when we use jsx in a react file?

[@SumitSinha_ArtFreak]

no

[@whynot-vq2ly]

are we going to make something else then greeting Vishwas in the coming tutorials ? :D
in the meanwhile I find the tutorials amazing, thanks a lot :]

[@alvinrobert3927]

I'm one fellowing u to all the videos to learn react .js

[@zoemohamed6599]

Thank you sensei

[@domnicrozariod7367]

showing an error with curly braces before and after your return types so pls help me out?

[@yassinebergui1345]

google it

[@gauravpant770]

how your element was aligned at center and not mine ???

[@yaminnather521]

That HTML jsx syntax looked a bit weird at the beginning but u explained how it actually works really well

[@100mdabrarhussain9]

its give error:
TypeError: Class extends value undefined is not a constructor or null

[@kornkorn1699]

some reason i got Uncaught runtime errors how to fix it

[@lakshaymangu899]

This video is uploaded in Nov 2018. Can I refer this tutorial for freshly learning React JS now in Mar 2021? Please help :)

[@rajanandd456]

same question.hehe

[@weslolo1074]

glad jsx exists

[@visweswarbk7611]

Do not see the name and introduction of tutor anywhere ....just curious to know who is doing this great presentation !

[@madhurikas_music]

Excellent!

[@roopsoops202]

Is React.createElement still used in react 18? Newbie here!

[@chetannagar7467]

Please confirm if it is valid at this time ?

[@YusanTRusli]

Is there any tutorials for Svelte?

[@uodige1]

I am sorry, but how do I write "//" multiple times at once?

[@GavinWoodthebarbarian]

Forgive me for my ignorance but I cannot see how react is "better" than Angular. I prefer where my components are in their own separate structure with html js and css separated from each other. maybe we still getting to something like that down the line but so far React seems way more complex to me that Angular.

[@akshithaelukapalli184]

Will u please provide any other alternatives to solve the queries sir

[@osmangoni2341]

Thanks a lot.

[@mrinaldas6220]

Good tutorial video

[@karteekkosaraju218]

Hello Vishwas,
please include the source files too..that way , it's a great help
Thanks in Advance

[@co-de-code]

Sir it's working even if I type // return React.createElement('div',null,'Hello Rohith')

[@abhilashreddypocha6332]

Same here,

[@vasantht3379]

Thanks boss

[@nogafouz2174]

thanks alot

[@sameeramrutia18]

which screen recording tool you are using? can you please tell me?

[@viveks2619]

You can access the one available in the windows by pressing win+g

[@toannew]

6:23 js code (not jsx code)
8:46 compare code of jsx and js.
10:19: jsx syntax and what is going to change (className -> class)

[@riyasri7991]

Why in my vscode jsx is not executing?

[@sonali2720]

Hi , can you please upload videos for react typescript testing using jest

[@ankurtiwari861]

Sir what shortcut keys did you use to comment out Greet? Great tutorial btw!

[@jonesquartey5118]

Ctrl k + c

[@surbhibaranwal9749]

and keys for uncomment?

[@rajaryan7566]

@@surbhibaranwal9749 ctrl + /

[@Unknown_vibe952]

sir i am not able to write anything in new folder (hello.js) red line is showing after the return statement

[@shishirrai1069]

can you paste the code

[@vinodp7508]

below code also works properly...try it
import React, {Component} from 'react'
const hello = () => {
// return (
//
// Hello sachin patil
//
// )
return React.createElement('div',null,Hello vinod)
}
export default hello

[@monchoisalive]

Any idea why this code works for you, but it doesn't for Vishwas?

[@javadmohammadi3943]

hi its perfect .thanks

[@KevinEontrainer381]

9:01 insert troll face here

[@mirusvet]

2:55 What is the shortcut to instantly write the import line? Thanks

[@jeremyt7817]

he probably just copied and pasted for the sake of the video.

[@mirusvet]

@@jeremyt7817 figured it out, react does it, if you auto complete, thanks

[@ammarkhan5658]

use *simple react snippets* extension in vs code for autocomplete

[@yashraj6565]

Just.. Thank you

[@jyotsnarachapudi2017]

return React.createElement('div', null, Hello Vishwas )
This works fine as we expect.
Please let me know why dont we use this.

[@abbasshaikh3115]

It's just a point of preference

[@sunnyparmar9692]

Instead of using React.createElement and passsing three parameters, JSX is much easier to write and understand the flow of code.
So try to use JSX for simplicity.

[@aravindb6025]

consider nesting of 8 to 10 elements inside div element which will be difficult so we prefer jsx way which is like writing html and hassle free

[@alexb.2616]

Thanks

[@surabhisharma5169]

How to view elements?

[@nadicadizdarevic2835]

🙂Thanks.

[@anjanasanthosh1040]

Thankyou

[@latasha2123]

For me it is not showing the id value in the inspect.

[@latasha2123]

what to do?

[@zakaryalaarrague]

thanks

[@bryanhui3797]

what happened at 2:57? How to import Hello without typing?

[@bryanhui3797]

Also at 6:33, how to format the code?