Тёмный

What is JSX? | Transform JSX with Babel | The Complete React Course | Ep.04 

Anurag Singh ProCodrr
Подписаться 76 тыс.
Просмотров 12 тыс.
50% 1

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

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

 

4 июл 2024

Поделиться:

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 64   
@procodrr
@procodrr 11 месяцев назад
Watch this video before Babel Setup: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-VnIUmD8Nj68.html
@AmarjeetKumar-to9ub
@AmarjeetKumar-to9ub 12 дней назад
done :)
@reezayn
@reezayn 4 месяца назад
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. ❤
@procodrr
@procodrr 4 месяца назад
I'm glad you liked the course. Keep learning and sharing 😊
@nobody20022
@nobody20022 15 дней назад
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.
@dhruv1877
@dhruv1877 24 дня назад
this type of deep concept teaching i never seen great sir...
@pubgwala5104
@pubgwala5104 4 месяца назад
Really in depth knowledge
@nityanand9773
@nityanand9773 3 месяца назад
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.
@procodrr
@procodrr 3 месяца назад
Thank you so much, I'm happy that someone is understanding the depth and value of this course.
@riajikbal2938
@riajikbal2938 4 дня назад
Your tutorials are great sir
@procodrr
@procodrr 3 дня назад
Awesome, keep learning and growing 😊
@affilatemarketing8573
@affilatemarketing8573 2 месяца назад
babel ka alternative kiya kiya hn and babe se pahle kiya use karthe the
@hrithikrudra4292
@hrithikrudra4292 Год назад
Gem content ❤
@procodrr
@procodrr Год назад
❤️
@ajaymude4795
@ajaymude4795 Год назад
Great quality sir
@procodrr
@procodrr Год назад
❤️
@aditiagarwal7574
@aditiagarwal7574 Месяц назад
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
@procodrr
@procodrr Месяц назад
Correct 👍
@vanshkumar-9042
@vanshkumar-9042 24 дня назад
Absolutely!!
@lovelymusic3549
@lovelymusic3549 Год назад
Sir some people on RU-vid says that react is now ending and you should go for next JS what you think about this news?
@procodrr
@procodrr Год назад
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.
@GauravSingh-id2mf
@GauravSingh-id2mf Год назад
great lecture
@procodrr
@procodrr Год назад
♥️
@user-pc2re4jy4v
@user-pc2re4jy4v 4 месяца назад
Hello Anurag sir, Does this playlist covers complete react course needed to get an internship?? plz reply
@Pain6944_
@Pain6944_ 2 месяца назад
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.
@user-pc2re4jy4v
@user-pc2re4jy4v 4 месяца назад
Hello Anurag sir, Does this playlist covers complete react course needed to get an internship??
@procodrr
@procodrr 4 месяца назад
Yes
@Ashish_Kumar30
@Ashish_Kumar30 Год назад
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
@procodrr
@procodrr Год назад
I don't know any good resource for React Native on RU-vid because I myself personally have not learnt React Native.
@shivamom0298
@shivamom0298 9 часов назад
sir babel setup hme aisse hi bar bar setup krna hoga jb hm new project bnayenge or alag alag project bnayenge.
@procodrr
@procodrr 9 часов назад
Aage se jab naya project banayenge to Vite use karenge. Wo saara setup automatically kar ke de dega. Ye bas samajhne ke liye hai.
@premmourya7060
@premmourya7060 Год назад
Last k 10-15 min dimag ghoom gya sir installation m 😅
@procodrr
@procodrr Год назад
Koi baat nahi 😃😃, tumare liye ye kaafi naya hoga. Waise kaam kar gya ya nahi?
@premmourya7060
@premmourya7060 Год назад
@@procodrr nahi last m error aarhi kuch smjh nhi aarha
@premmourya7060
@premmourya7060 Год назад
Lib folder wala matter smjh nhi aaya
@procodrr
@procodrr Год назад
Telegram par screenshot bhejo.
@premmourya7060
@premmourya7060 Год назад
@@procodrr bhejta. Hu
@shivamanand8194
@shivamanand8194 5 месяцев назад
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
@procodrr
@procodrr 5 месяцев назад
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.
@shivamanand8194
@shivamanand8194 5 месяцев назад
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
@procodrr
@procodrr 5 месяцев назад
@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.
@shivamanand8194
@shivamanand8194 5 месяцев назад
Samajh gaye😊. Thank you sir ❤❤
@procodrr
@procodrr 5 месяцев назад
@shivamanand8194 Awesome, keep learning and sharing 😊
@sidrayousaf2461
@sidrayousaf2461 Год назад
sir apne js k sth course bnaya h react app create kr k ku nh bnaya??? aisy complex lg rha
@procodrr
@procodrr Год назад
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.
@girdharipatel2
@girdharipatel2 16 часов назад
sir nodeJs ka bhi video banao n
@Inayathasan1
@Inayathasan1 Месяц назад
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 ??
@gayatrirawat852
@gayatrirawat852 Месяц назад
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.
@vanshkumar-9042
@vanshkumar-9042 24 дня назад
​@@gayatrirawat852 great suggestion 👍👍
@user-zu3xc8cp9p
@user-zu3xc8cp9p Год назад
your teaching skills outstanding👍, but no one teach this concept when teaching react why?
@procodrr
@procodrr Год назад
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 😊
@user-zu3xc8cp9p
@user-zu3xc8cp9p Год назад
@@procodrr ok thanks
@sandeepvishwakarmaup
@sandeepvishwakarmaup 3 месяца назад
sir npm install nhi ho pa raha hai kaise aap kiye hai
@procodrr
@procodrr 3 месяца назад
Kya error aa rahi hai?
@sandeepvishwakarmaup
@sandeepvishwakarmaup 3 месяца назад
​@@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
@premmourya7060
@premmourya7060 Год назад
bhaiya aap hamesha esi tareeke ka use krte ho kya? projects banane k liye
@procodrr
@procodrr Год назад
Nahi, ye bas seekhne ke liye hai.
@premmourya7060
@premmourya7060 Год назад
@@procodrr seekhne k liye kuch jyda complicated nhi ho gya kya 😟
@procodrr
@procodrr Год назад
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.
@premmourya7060
@premmourya7060 Год назад
@@procodrr hm theeke
@hampam8235
@hampam8235 Месяц назад
As a beginner kuchh bhi samaj nahi aa raha
@lakkojuleeladathasai
@lakkojuleeladathasai 2 месяца назад
please teach in english so that others also can understand.. or provide subtitles..
@Inayathasan1
@Inayathasan1 Месяц назад
sir ye video me ache kch explain nii kiya aapne😓😓
@atuldemond
@atuldemond Месяц назад
Thanks bro ---------------------------------------------------------------------------------->
Далее
Какую одежду я не ношу? 😱
00:13
Просмотров 332 тыс.
Strongest man in the world !! 😱😱
00:16
Просмотров 3,7 млн
Webpack crash course | easy way
32:07
Просмотров 55 тыс.
All The JavaScript You Need To Know For React
28:00
Просмотров 569 тыс.
Getting Started With Babel - Transpiling Javascript
13:59
Learn useMemo In 10 Minutes
10:42
Просмотров 468 тыс.
Какую одежду я не ношу? 😱
00:13
Просмотров 332 тыс.