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.

[@adetolasanni2]

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

[@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 😇

[@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.

[@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!

[@dhl4102]

You Rock! Such a great tutorial

[@poojaguru2516]

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

[@karthi321ful]

awesome tutorial series , Thanks Vishwas.. following

[@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

[@ricklove8358]

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

[@Colstonewall]

Thank you, Vishwas!

[@colindante5164]

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

[@KOSAMAGAMES]

doing the second one threw me back in time.

[@VijayaKumar-qv7mw]

Great Explanation Loved it thanks

[@manueljordan317]

Excellent, well covered!

[@karolinalencina7121]

Thank you, that was super clear! :-)

[@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.

[@visweswarbk7611]

Excellent presentation !

[@shloch2007]

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

[@aku_11_11]

:)

[@rabiehaed]

Excellent explanation, Thanks

[@ericmuhire9995]

Great tutorials. Thank you 🙂

[@alvinrobert3927]

Really ur way of teaching really awesome 👍👌👌

[@kalmi_riding]

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

[@joellim7271]

yes

[@sunnylal3297]

Yes bro

[@gopalakrishnamurthy7862]

Superb explanation I loved it

[@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

[@JohnDoe-rj2kf]

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

[@amolsd8706]

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

[@vaibsify]

awesome explanation 🙏

[@richardmartyns7978]

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

[@harshdevmurari007]

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

[@ashapilkhwal6320]

Really appreciable!!

[@Aditya.Santra]

Very Helpful Video 👍

[@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

[@smilybhanu7779]

Good..great tutorials

[@lathagm666]

completed 8th video. thank you 🙂

[@bollywoodclassichitslyrics2242]

Please upload more videos on react and react native

[@issaissifou4959]

Thank you !

[@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??

[@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.

[@sandeshdeshmukh2136]

thank you so much

[@aku_11_11]

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

[@MatheusPereira-nn9dj]

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

[@iFFOKMedia]

You saved me!

[@madhurikas_music]

Excellent!

[@zoemohamed6599]

Thank you sensei

[@weslolo1074]

glad jsx exists

[@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.

[@alvinrobert3927]

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

[@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!

[@vasantht3379]

Thanks boss

[@nogafouz2174]

thanks alot

[@yaminnather521]

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

[@osmangoni2341]

Thanks a lot.

[@mrinaldas6220]

Good tutorial video

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

[@zakaryalaarrague]

thanks

[@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

[@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! :)

[@alexb.2616]

Thanks

[@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 :]

[@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');

[@visweswarbk7611]

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

[@chetannagar7467]

Please confirm if it is valid at this time ?

[@ngsuraj]

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

[@SumitSinha_ArtFreak]

no

[@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 + /

[@YusanTRusli]

Is there any tutorials for Svelte?

[@anjanasanthosh1040]

Thankyou

[@yashraj6565]

Just.. Thank you

[@akshithaelukapalli184]

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

[@nadicadizdarevic2835]

🙂Thanks.

[@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

[@javadmohammadi3943]

hi its perfect .thanks

[@karteekkosaraju218]

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

[@sonofsatan3196]

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

[@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)

[@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.

[@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

[@sonali2720]

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

[@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

[@zubaerhossain3203]

Super

[@KevinEontrainer381]

9:01 insert troll face here

[@domnicrozariod7367]

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

[@yassinebergui1345]

google it

[@co-de-code]

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

[@abhilashreddypocha6332]

Same 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

[@roopsoops202]

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

[@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

[@gauravpant770]

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

[@e2xsq]

This tutorial is amazing, I only found it 4 years too late. Is it still relevant enough to follow?

[@kristijanlazarev]

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

[@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?

[@kornkorn1699]

some reason i got Uncaught runtime errors how to fix it

[@guleye]

Super Super Super

[@samychaturvedi8035]

Nice vedio 😎🚩✨️💖

[@surabhisharma5169]

How to view elements?

[@latasha2123]

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

[@latasha2123]

what to do?

[@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