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 9 — Conditional Rendering in React

📘 Day 9 — Conditional Rendering in React

Conditional rendering allows you to display components or elements based on certain conditions. React uses JavaScript expressions like if, &&, and ternary operators to render UI dynamically.

🔹 Using if-else

function Greeting({ isLoggedIn }) {
  if (isLoggedIn) {
    return <h2>Welcome back, Rahul!</h2>;
  }
  return <h2>Please log in.</h2>;
}

🔸 Using Ternary Operator

function Status({ online }) {
  return (
    <p>Status: {online ? '🟢 Online' : '🔴 Offline'}</p>
  );
}

💡 Using Logical AND (&&)

function Notification({ messages }) {
  return (
    <div>
      {messages.length > 0 && <p>You have {messages.length} new messages.</p>}
    </div>
  );
}

Conditional rendering is a core concept to create interactive, dynamic UI that reacts to state and user input.

Comments

Post a Comment