ReactJS Tutorial - 8 - JSX

Подписаться 646 тыс.

Просмотров 812 тыс.

50% 1

📘 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 - codevolution.business@gmail.com
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.

Опубликовано:

4 ноя 2018

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 187

@Codevolution 5 лет назад

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

@ItsmenikhilKr 3 года назад

link not working

@darklord9500 Год назад

@Codevolution should i learn this code in 2022?

@UzmaKhan-yo2kg Год назад

@@ItsmenikhilKr Its working!

@dasojushiva8663 2 года назад

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 2 года назад

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

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

@noahqyain7311 2 года назад

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 3 года назад

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

@CANIHAZURDREAMSPLS 3 года назад

This answered many questions for me! Great video!

@dhl4102 4 года назад

You Rock! Such a great tutorial

@poojaguru2516 Год назад

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

@viveks2619 3 года назад

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

@total_breathing 2 года назад

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 10 месяцев назад

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

@colindante5164 2 года назад

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

@ricklove8358 2 года назад

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

@karthi321ful 5 лет назад

awesome tutorial series , Thanks Vishwas.. following

@Colstonewall 5 лет назад

Thank you, Vishwas!

@VijayaKumar-qv7mw 4 года назад

Great Explanation Loved it thanks

@karolinalencina7121 3 года назад

Thank you, that was super clear! :-)

@manueljordan317 3 года назад

Excellent, well covered!

@KOSAMAGAMES 3 года назад

doing the second one threw me back in time.

@SpiritualManish 3 года назад

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.

@rabiehaed 4 года назад

Excellent explanation, Thanks

@visweswarbk7611 2 года назад

Excellent presentation !

@ericmuhire9995 2 года назад

Great tutorials. Thank you 🙂

@shloch2007 4 года назад

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

@aku_11_11 3 года назад

@alvinrobert3927 4 года назад

Really ur way of teaching really awesome 👍👌👌

@kalmi_riding 4 года назад

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

@joellim7271 4 года назад

yes

@sunnylal3297 2 года назад

Yes bro

@gopalakrishnamurthy7862 3 года назад

Superb explanation I loved it

@amolsd8706 Год назад

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

@richardmartyns7978 2 года назад

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

@ashapilkhwal6320 3 года назад

Really appreciable!!

@vaibsify 2 года назад

awesome explanation 🙏

@kirankamath5891 3 года назад

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

@sdeneham25271 3 года назад

Why?

@kirankamath5891 3 года назад

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

@shishirrai1069 3 года назад

@@sdeneham25271 it is not required with version 17

@harshdevmurari007 Год назад

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

@issaissifou4959 4 года назад

Thank you !

@Aditya.Santra 2 года назад

Very Helpful Video 👍

@sandeshdeshmukh2136 5 лет назад

thank you so much

@smilybhanu7779 3 года назад

Good..great tutorials

@iFFOKMedia 5 лет назад

You saved me!

@madhurikas_music 7 месяцев назад

Excellent!

@lathagm666 8 месяцев назад

completed 8th video. thank you 🙂

@zoemohamed6599 2 года назад

Thank you sensei

@vasantht3379 5 лет назад

Thanks boss

@osmangoni2341 Год назад

Thanks a lot.

@weslolo1074 2 года назад

glad jsx exists

@bollywoodclassichitslyrics2242 5 лет назад

Please upload more videos on react and react native

@aku_11_11 3 года назад

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

@uniquezay2019 9 месяцев назад

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.

@alvinrobert3927 4 года назад

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

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

@mrinaldas6220 3 года назад

Good tutorial video

@nogafouz2174 2 года назад

thanks alot

@yaminnather521 3 года назад

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

@alexb.2616 4 года назад

Thanks

@javadmohammadi3943 3 года назад

hi its perfect .thanks

@yashraj6565 2 года назад

Just.. Thank you

@anjanasanthosh1040 3 года назад

Thankyou

@JohnDoe-rj2kf 3 года назад

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

@vinodp7508 4 года назад

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 4 года назад

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

@nadicadizdarevic2835 2 года назад

🙂Thanks.

@zakaryalaarrague 7 месяцев назад

thanks

@zribiahmedyassine1582 Год назад

is this serie still usefull in 2023 @Codevolution ?

@kristijanlazarev 10 месяцев назад

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

@zubaerhossain3203 Год назад

Super

@whynot-vq2ly 4 года назад

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

@toannew 3 года назад

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)

@suzsg6169 5 месяцев назад

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

@samychaturvedi8035 Год назад

Nice vedio 😎🚩✨️💖

@ravitejakambaluru1330 3 года назад

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

@rahulnag9582 5 лет назад

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

@KevinEontrainer381 4 года назад

9:01 insert troll face here

@negros111 2 года назад

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

@karteekkosaraju218 2 года назад

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

@guleye 4 года назад

Super Super Super

@jyotsnarachapudi2017 4 года назад

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

@abbasshaikh3115 4 года назад

It's just a point of preference

@sunnyparmar9692 4 года назад

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 4 года назад

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

@visweswarbk7611 2 года назад

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

@MatheusPereira-nn9dj Год назад

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

@yerraguntlaharish4109 4 года назад

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

@ShabnamDeveloper 3 года назад

good

@rahulnag9582 5 лет назад

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

@yogibaba6008 5 лет назад

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.

@nikimehta5323 3 года назад

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

@sonofsatan3196 Год назад

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

@sonali2720 2 года назад

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

@ankurtiwari861 4 года назад

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

@jonesquartey5118 4 года назад

Ctrl k + c

@surbhibaranwal9749 4 года назад

and keys for uncomment?

@rajaryan7566 3 года назад

@@surbhibaranwal9749 ctrl + /

@GavinWoodthebarbarian 3 года назад

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 7 месяцев назад

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

@chetannagar7467 9 месяцев назад

Please confirm if it is valid at this time ?

@hamzahabdelmoaty3064 4 года назад

yeaaaaaaaaaaaaaaaaaaa buudyyyyyyyyyyyyyyyyyyyyyyy

@lakshaymangu899 3 года назад

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

@rajanandd456 3 года назад

same question.hehe

@ngsuraj 4 года назад

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

@SumitSinha_ArtFreak 4 года назад

@e2xsq Год назад

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

@kristijanlazarev 10 месяцев назад

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

@keerthivasanj6170 4 года назад

Remember to keep your class name first letter as capital 😉

@bikashbhandari5608 4 года назад

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

@SalmanMKC 4 года назад

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

@gauravpant770 3 года назад

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

@YusanTRusli 3 года назад

Is there any tutorials for Svelte?

@co-de-code 3 года назад

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

@abhilashreddypocha6332 3 года назад

Same here,

@kornkorn1699 6 месяцев назад

some reason i got Uncaught runtime errors how to fix it

@roopsoops202 2 года назад

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

@sameeramrutia18 3 года назад

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

@viveks2619 3 года назад

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

@domnicrozariod7367 5 лет назад

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

@yassinebergui1345 4 года назад

google it

@kiminomeha 3 года назад

Subtitles: JSX? - Chair sex!

@Sandeep_trader17 2 года назад

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