ReactJS Tutorial - 8 - JSX
HTML-код
- Опубликовано: 29 сен 2024
- 📘 Courses - learn.codevolu...
💖 Support UPI - support.codevo...
💖 Support PayPal - www.paypal.me/...
💾 Github - github.com/gop...
📱 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.
React Fire - github.com/facebook/react/issues/13525
link not working
@Codevolution should i learn this code in 2022?
@@ItsmenikhilKr Its working!
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 😇
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');
Instead of nesting the Createelement function, 'return React.createElement('div',null,Hello Again)', This works perfectly fine.
React has evolved
arent you using just more jsx inside the child paramenter?
@@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
@@pallavimahanta519yes you can i know its quite older but the basic fundamentals are same
You use html tag in return that is jsx
He teach without jsx
Super understanding tutorials, now i like to work with react js, thanks for good content
Excellent presentation !
glad jsx exists
Superb explanation I loved it
Excellent explanation, Thanks
Good..great tutorials
🙂Thanks.
Hello Vishwas,
please include the source files too..that way , it's a great help
Thanks in Advance
thank you so much
I'm one fellowing u to all the videos to learn react .js
Thanks boss
hi sir,
if we write the Hello function as function Hello() {
}
the it will be a JSX or not ?
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.
Super Super Super
Is there any tutorials for Svelte?
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?
It is advantagous if you want to use XML later on to manipulate the DOM tree
Is it not mandatory to use .jsx extension when we use jsx in a react file?
no
By now I think classname has changed to class
How many times we have to use react.createElement if there is many child inside div?
That's for demonstration purposes I guess, it's much easier to use jsx and no need to have to learn the js implementation! :)
can I watch this in 2022?
without jsx is boring
React.createElement("div",null,React.createElement("h1",{name:"greetings"},"Hello World"),React.createElement("p",null)); . please help me convert this to jsx
4:11 That is not a parameter Its an Argument!
It does not matter. It is just a technical term, but we all know what it means lol....
im new to this but i truley struggle to even try to like it. im sorry but its so stuppid and wiered language that i just don understand why stuff must be so complicated just to print a h1
I had to put the speed at 2x. Much too slow.
we should understand that not all people can absorb knowledge fast
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.
So if I understand well, our previously created Welcome and Greet component returned with JSX, right?
yes
Yes bro
is this serie still usefull in 2023 @Codevolution ?
Yes, 90% of the course is basics, and is still relevant today!
This video is uploaded in Nov 2018. Can I refer this tutorial for freshly learning React JS now in Mar 2021? Please help :)
same question.hehe
Please confirm if it is valid at this time ?
Great tutor ever you took your time and energy to explain every bit of the course. Thank you so much.
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.
10:11
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.
Although, it is none of my concern, and I know I should be concerned with only the context in your video, but still could not stop myself from saying that, your accent sounds absolutely not real. Why do you have to copy foreign accent?. Why can you not speak in your real Indian accent.?
Nonetheless I am very much grateful with the context you are providing in your videos.
if he type return React.createElement('div', null, 'Hello vishwas') the browser would still display the name but not bolded text
I swear JSX brings some old vibes where we were used to write php in html files.. Disgusting.
Good tutorial though.
I had to do this at my job in 2020 😖
This tutorial is amazing, I only found it 4 years too late. Is it still relevant enough to follow?
Yes, 90% of the course is basics, and is still relevant today!
another easy-to-follow tutorial, I am so glad I am improving my React skill thru these tutorials!!
You Rock! Such a great tutorial
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
Any idea why this code works for you, but it doesn't for Vishwas?
return React.createElement('div', null, Hello Vishwas )
This works fine as we expect.
Please let me know why dont we use this.
It's just a point of preference
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.
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
Please upload more videos on react and react native
what is the difference between the .js or .jsx extenstion when writing the react component ?
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.
because in real world, applications are way more complex and hard to manage, imagine Facebook atm uses more than 40000+ components in there development, think all them were plain js files on a single page?! how hard would it be to manage or catch a bug. Also React's reusability makes the work much easier, if you use plain Js you could copy n paste code for each thing (for example think Airbnb,) so your code would become much more lengthy. But in React we can easily call again once we write the code in a component. Just with
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.
Sir it's working even if I type // return React.createElement('div',null,'Hello Rohith')
Same here,
very much a GREAT TEACHER ................. thank you
:)
Perez Susan Young Elizabeth White Mary
they didn't change className to class yet I suppose
hi bro can you share the ppt which you display in every videos
I am watching your series on January 2023.Thanks for your hard work on this Course. You should teach in Udemy.
Is this course relevant in 2023
@@harshsinghal8527 ofcourse why not??
doing the second one threw me back in time.
Subtitles: JSX? - Chair sex!
const Hello = () =>{
return React.createElement('div',null,Hello JS)
}
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 :]
Garcia Jessica Allen Barbara Brown Maria
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) ?
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
return React.createElement('h1',null,'Hello Shandy')} This made me print with h1 function.
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.
Why did we use parenthesis for return in Hello.js, while in greet there wasn't, I'm a newbie to react
Please give notes of reactjs
In 2022 is it okAY TO learn?
027 Greenfelder Drives
its give error:
TypeError: Class extends value undefined is not a constructor or null
Do not see the name and introduction of tutor anywhere ....just curious to know who is doing this great presentation !
I am not sure whether you will reply or not but if possible please make a video on react.CloneElement(). No such helpful article is available on any tutorial site
8715 Glover Alley
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)
1399 Carlo Loop
Thank you, that was super clear! :-)
using the div tag makes it a JSX or making it a cont function makes it a JSX ?
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
@codevolution how can I write multiple class names for single elements. For examples in case of using bootstrap classes
Hi , can you please upload videos for react typescript testing using jest
I am sorry, but how do I write "//" multiple times at once?
Is React.createElement still used in react 18? Newbie here!
This answered many questions for me! Great video!
Kovacek Isle
Awesome tut sir, plz make tut on java script full course too sir..
With such an awesome tutorial the least I could do is subscribe. )) Thankyou for such a clear explanation. )))
awesome tutorial series , Thanks Vishwas.. following
I started learning react here, hope am on the right track and there is no new changes
thanks alot
can i use emmets inside create.element to maybe nest parent div and child div??
Will u please provide any other alternatives to solve the queries sir
Dislike :(
some reason i got Uncaught runtime errors how to fix it
Super
@Codevolution sir i am seeing this series now am i good to go or are there any changes
Your videos are the best ever! Glad i found your channel.
how your element was aligned at center and not mine ???
good
completed 8th video. thank you 🙂
Why in my vscode jsx is not executing?
you are an awesome.....
happy learning react.