ไม่สามารถเล่นวิดีโอนี้
ขออภัยในความไม่สะดวก
What is JSX? | Transform JSX with Babel | The Complete React Course | Ep.04
ฝัง
- เผยแพร่เมื่อ 7 ส.ค. 2024
- Source Code: github.com/procodrr/react-cou...
Watch This Video Before Babel Setup: • NPM Crash Course | Zer...
📖 Chapters
00:00 - Introduction
00:31 - Quick Recap
01:18 - Why do we need Babel?
02:18 - What is Babel?
03:09 - Let's use Babel CDN for now
04:10 - Understand the "type" attribute in "script" tag
14:59 - What is a Source Map?
16:30 - Let's debug the code inside 'babel.js' to understand things in depth
28:39 - How to write JavaScript inside JSX?
30:47 - Settings for Emmet Suggestion
32:17 - Few values that React doesn't show on the page!
36:10 - Why we need to use double curly brackets "{{}}" for style tag?
36:40 - What is JSX?
37:50 - Babel Setup
45:20 - Next Video - Source Maps
46:20 - Conclusion
Have any doubts? Join this Telegram group and ask your question. You can also share the projects that you make in this group.
Telegram Group : t.me/procodrr
Sunday QnA Link: meet.google.com/vbp-hqnm-eiq
Social Media
🌐 Telegram: t.me/procodrr
🌐 Linkedin: / anurag-singh-web-devel...
🌐 Instagram: / procodrr
🌐 Twitter: / anuragsinghbam
🌐 Portfolio: anuragsinghbam.com/
Music by geoffharvey from Pixabay
#react #procodrr #webdevelopment #jsx
![[ GAMECHANGER 🚀 ] REACT JS BECOMES 100 TIMES EASY IF YOU FOLLOW THIS.](http://i.ytimg.com/vi/EaG3Zd04W5s/mqdefault.jpg)
Watch this video before Babel Setup: th-cam.com/video/VnIUmD8Nj68/w-d-xo.html
done :)
Totally underrated channel.
Just found this channel and went through this series and finished 5 videos. I am a developer but I have very little knowledge on how react actually works. I found a gem in the form of this playlist.
Love from Nepal. ❤
I'm glad you liked the course. Keep learning and sharing 😊
Summary:
JSX stands for JavaScript XML. It's a syntax extension for JavaScript to describe what the UI should look like. It allows us to write HTML-like syntax directly within JavaScript code, making it easier to visualize and work with the structure of user interfaces. Under the hood, JSX gets transpiled into regular JavaScript function calls, typically React.createElement() calls, which ultimately create the necessary elements for the user interface.
this type of deep concept teaching i never seen great sir...
Really in depth knowledge
Those who are saying samajh nahi aya ya confusing laga...they should first watch the JS series. Uske baad bht ache se samajh ajaega sab bht jaldi
Correct 👍
Absolutely!!
I am also a developer and learnt a lot from you what a explanation and in depth knowledge this type of topics shouldn't even discussed in live Bootcamps.
Thank you so much, I'm happy that someone is understanding the depth and value of this course.
Your tutorials are great sir
Awesome, keep learning and growing 😊
babel ka alternative kiya kiya hn and babe se pahle kiya use karthe the
Gem content ❤
❤️
Great quality sir
❤️
Last k 10-15 min dimag ghoom gya sir installation m 😅
Koi baat nahi 😃😃, tumare liye ye kaafi naya hoga.
Waise kaam kar gya ya nahi?
@@procodrr nahi last m error aarhi kuch smjh nhi aarha
Lib folder wala matter smjh nhi aaya
Telegram par screenshot bhejo.
@@procodrr bhejta. Hu
Sir some people on TH-cam says that react is now ending and you should go for next JS what you think about this news?
Next.js is nothing but a framework for React.js that means in order to understand Next.js you should know React.js first.
According to me
Next.js = 95% of React.js + Some Extra Features
So, don't worry React.js is not going anywhere.
hii sir, actually i got a internship as sde trainee but the organization provide me react native technology but i know only js core fundamentals not advanced concept so bascially i was just know that, should i learn react native without doing react js and advanced concepts of js? if yes then it is good.
And one more can you pls tell me a great react native resource on youtube
I don't know any good resource for React Native on TH-cam because I myself personally have not learnt React Native.
great lecture
♥️
Hello Anurag sir,
Does this playlist covers complete react course needed to get an internship?? plz reply
this playlist is enough for you to get a job as a associate frontend developer if you actually learn from it and not just watch it.
Hello Anurag sir,
Does this playlist covers complete react course needed to get an internship??
Yes
depth❤
sir i am a beginner cant understand this should i continue with this ?
sir i am afraid of getting errors ?
so i didnt did anything as u said just watched it
any of error comes it lots of time to find why this error is coming and how to prevent it? watching videos on youtube takes lots of time
any solution ??
firstly believe in yourself and don't worry... take your time, and start coding along with the mentor whether you understand it or not, like copy-paste. watching videos only will not work, don't be afraid to get errors...there are many platforms where you can ask questions like chatgpt, StackOverflow and many more. Start coding!!!!! Something is better than nothing.
@@gayatrirawat852 great suggestion 👍👍
sir apne js k sth course bnaya h react app create kr k ku nh bnaya??? aisy complex lg rha
Aisa isliye banaya hai taki behind the scenes kya ho raha hai achhe se samajh aaye.
Aur agar tumhe JavaScript and DOM manipulation sahi se aata hai to mushkil nahi lagega.
your teaching skills outstanding👍, but no one teach this concept when teaching react why?
Because these things are not mentioned in the React documentation.
React documentation directly starts with creating components. And everyone cover only those topics that are mentioned in the React Docs.
But I focus on how things are working behind the scenes that's why I covered these topics before learning components.
And thanks for your support ❤️
Keep Learning and Sharing 😊
@@procodrr ok thanks
sir babel setup hme aisse hi bar bar setup krna hoga jb hm new project bnayenge or alag alag project bnayenge.
Aage se jab naya project banayenge to Vite use karenge. Wo saara setup automatically kar ke de dega. Ye bas samajhne ke liye hai.
Sir mera ek doubt hai, babel mera hellow ko convert karke ek object banata , but jab lib ke andar jo script hai usme react.createElement('h1',{},"hellow") kon karta hai
Babel hellow ko object nahi banata. Babel iss JSX ko React.createElement('h1',{},"hellow") mein convert karta hai.
Aur React.createElement usko ek object banayega.
To sir jab ham , lat div=hellow ko console karte hai to wo react.createElement('div',{},"hellow") kyu nahi aata hai, tab wo ek object aata hai
@shivamanand8194
Tum ye likh kar check karo.
let div= React.createElement('div',{},"hellow")
Aur div ko console.log karo.
Aisa karne par bhi React.createElement nahi aayega kyu React.createElement ek function hai aur usko ham call kar rahe hain.
To uski jo return value hai joki ek object hai wo aayega.
Samajh gaye😊. Thank you sir ❤❤
@shivamanand8194
Awesome, keep learning and sharing 😊
sir nodeJs ka bhi video banao n
sir npm install nhi ho pa raha hai kaise aap kiye hai
Kya error aa rahi hai?
@@procodrr
$ : The term '$' is not recognized as the name of a cmdlet, function, script file, or operable program. Check the
spelling of the name, or if a path was included, verify that the path is correct and try again.
At line:1 char:2
+ $ npm init -y
+ ~
+ CategoryInfo : ObjectNotFound: ($:String) [], CommandNotFoundException
+ FullyQualifiedErrorId : CommandNotFoundException
bhaiya aap hamesha esi tareeke ka use krte ho kya? projects banane k liye
Nahi, ye bas seekhne ke liye hai.
@@procodrr seekhne k liye kuch jyda complicated nhi ho gya kya 😟
Agar tumne JavaScript mein already projects banaye Hain to complex nahi hoga.
Lekin agar tumhe complex laga raha hai to Sunday live mein araam se explain kar denge.
@@procodrr hm theeke
Babel.js file is so big that my VS code stopped working😅
😀😀
As a beginner kuchh bhi samaj nahi aa raha
please teach in english so that others also can understand.. or provide subtitles..
sir ye video me ache kch explain nii kiya aapne😓😓
Bilkul Bhai Mera b pura mood kharab ho jta hai javascript to thk tarah se padai thi but react ki to aisi ki taisi krdi he
@@Tanwar_varun bro agr tjhe nii smjh rha h to tu hitesh sir se krle unka chai aur code channel prr tjhe mil jayega playlist hogi chai aur react prr unka zra sa deep.me h bht
@@Inayathasan1 ok bro
Thanks bro ---------------------------------------------------------------------------------->