Skip to main content

Featured

🎉 Day 46 — React Mastery Completed (Final Summary & Congratulations!)

🎉 Day 46 — React Mastery Completed (Final Summary & Congratulations!) Congratulations, developer! 👏 You’ve successfully completed the 45-Day React.js Roadmap — from understanding the fundamentals to mastering advanced concepts like Redux, Routing, Testing, and Deployment. 📘 What You’ve Learned ✅ React basics — Components, JSX, Props, and State ✅ Hooks — useState, useEffect, useRef, useMemo, and Custom Hooks ✅ Context API and Redux Toolkit for global state management ✅ Routing with React Router & Protected Routes ✅ Data fetching using Fetch API, Axios, React Query ✅ Advanced Patterns — Compound Components, Render Props, HOCs ✅ Styling — CSS Modules, Styled Components, Theming ✅ Animations, Accessibility, Testing, and Performance Optimization ✅ Deployment on Vercel, Netlify, or GitHub Pages 🧩 Final Project Ideas Now that you’re done, build real-world apps to polish your skills: 📝 Task ...
Post a Comment
Read more
Labels

📘 Day 3 — JSX Deep Dive

📘 Day 3 — JSX Deep Dive

JSX (JavaScript XML) is the core syntax used in React for describing UI elements. It looks similar to HTML but works directly with JavaScript expressions. JSX makes your code readable, expressive, and declarative.

🔹 What is JSX?

JSX is a syntax extension that allows you to write markup directly inside JavaScript. Under the hood, every JSX tag is converted into a call to React.createElement(). 

const element = <h1>Hello, JSX!</h1>;
// Transpiles to:
const element = React.createElement('h1', null, 'Hello, JSX!');

🔸 Embedding Expressions

You can embed JavaScript expressions inside JSX using curly braces { }.

const name = 'Rahul';
const el = <h2>Welcome, {name}!</h2>;

Anything inside curly braces can be a valid JavaScript expression — such as variables, function calls, or even ternary operators.

🔹 Attributes in JSX

Unlike HTML, JSX uses camelCase for attribute names. For example, class becomes className, and onclick becomes onClick.

<img src={user.avatarUrl} alt="User Avatar" className="profile" />

🔸 Nesting and Children

JSX supports nesting elements. You can pass child elements directly between component tags.

<Card>
  <h3>React Learning</h3>
  <p>Start your journey with JSX and components.</p>
</Card>

🔹 JSX Must Return a Single Root

JSX elements must have one single root wrapper. You can use <div> or fragments <></>.

function App() {
  return (
    <>
      <h1>Hello</h1>
      <p>This is valid JSX</p>
    </>
  );
}

💡 Try it Yourself — Live JSX Example

🧠 Tips & Best Practices

  • Wrap multiple elements inside a single parent element.
  • Always close your tags — self-closing for void elements like <img />.
  • Keep JSX expressions clean and simple — extract complex logic to JavaScript functions.

📘 Summary

  • JSX allows embedding JavaScript within UI markup.
  • It improves readability and developer experience.
  • JSX compiles to React.createElement() under the hood.

Comments

Post a Comment