React JSX , Babel, React Components & Props Explained from Scratch | ReactJS Full Course #2
42.3K views on YouTube
Learn React the RIGHT way – no memorization, just pure understanding!
In this video, we dive deep into React fundamentals using a first-principles approach. Instead of just showing you “how” to write code, we explain “why” things work the way they do.
🔥 What You’ll Learn in This Video:
✅ JSX – What It Actually Is
• JSX is NOT HTML – proof with real examples
• Why className instead of class
• Why style is an object, not a string
• Self-closing tags requirement
• JavaScript expressions inside {}
✅ Babel – The Transpiler
• What is Babel and why we need it
• Transpiler vs Compiler – the difference
• How type=”text/babel” works
• Runtime vs Build-time transformation
✅ JSX Expressions – The Complete Picture
• What can go inside {} and WHY
• Strings, Numbers, Arrays – what renders
• Booleans, null, undefined – why they don’t render
• Objects – why they throw errors
• Functions returning JSX
✅ React Components
• Component = Function that returns JSX
• Why capital letter is REQUIRED (not just convention)
• How React.createElement handles components vs DOM elements
• Component composition – components inside components
✅ Props – Passing Data to Components
• Props as function parameters
• Different data types in props (string, number, boolean, array, object, function)
• Props are read-only – why?
• Destructuring props
• The children prop
✅ The Complete Flow
• JSX → React.createElement() → React Element (Virtual DOM) → Real DOM
• Who does what: Babel vs React vs ReactDOM
• Recursive resolution of components
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
💡 Why This Tutorial Is Different:
Most tutorials tell you WHAT to do. This tutorial explains WHY.
– Why does JSX need Babel?
– Why can’t objects be rendered in JSX?
– Why do component names start with capital letters?
– Why is style an object and not a string?
If you want to truly understand React (not just copy-paste code), this video is for you.
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
🎯 Who Is This For:
– Beginners starting their React journey
– Developers who know React syntax but don’t understand the “why”
– Anyone tired of memorizing rules without understanding them
– Students preparing for frontend interviews
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
#react #reactjs #jsx #babel #javascript #webdevelopment #frontend #programming #reacttutorial #reactcomponents #props #webdev #coding #frontenddevelopment #learnreact #reactforbeginners #javascripttutorial #webdeveloper #softwaredevelopment #hindi
Visit Strike: https://strikes.in/
Class start from 1 december
Visit Coder Army Website: https://coderarmy.in/#home
Course start date: 1 september
Timing: 6pm (Mon-fri)
Hackathon will be organised after course completion
Join Premium Whatsapp Group: https://whatsapp.com/channel/0029Va6H0tbHVvTbcuT99Y1f
Class Notes : https://www.notion.so/Lecture-02-JSX-Babel-props-and-React-Component-2b13a78e0e22804797a1ef605cb2d3fb?source=copy_link
Code Link: https://github.com/coderarmy-notes/mern-stack-course
Twitter: https://x.com/rohit_negi9?s=21
Channel: @CoderArmy9
Buy Our Premium Course of Web dev+Blockchain+HLD+DSA: https://rohittnegi.akamai.net.in/new-courses/4-web-development-block-chain (5500 only)
Time Stamp:
#javascript #webdevelopment #mernstack