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 5 — Handling Events in React

📘 Day 5 — Handling Events in React

Event handling in React is similar to handling events in DOM elements, but there are important differences. React events are named using camelCase, and functions are passed as event handlers.

🔹 Basic Example

function Button() {
  function handleClick() {
    alert("Button clicked!");
  }

  return <button onClick={handleClick}>Click Me</button>;
}

🔸 Passing Arguments to Handlers

function GreetButton({ name }) {
  return (
    <button onClick={() => alert('Hello ' + name)}>
      Greet {name}
    </button>
  );
}

You can pass arguments using arrow functions or bind. React ensures efficient event delegation.

💡 Controlled Inputs

function InputExample() {
  const [value, setValue] = React.useState('');

  return (
    <div>
      <input value={value} onChange={(e) => setValue(e.target.value)} />
      <p>You typed: {value}</p>
    </div>
  );
}

Comments

Post a Comment