React JSX , Babel, React Components & Props Explained from Scratch | ReactJS Full Course #2

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