Learn programming concepts interactively
A React component is a reusable piece of UI that manages its own content, presentation, and behavior. Think of components as custom HTML elements that you can create and use throughout your application.
Components help you:
// Without components - repetitive HTML
<div>
<h3>John Doe</h3>
<p>Software Developer</p>
<button>Contact</button>
</div>
<div>
<h3>Jane Smith</h3>
<p>UX Designer</p>
<button>Contact</button>
</div>// With components - reusable and clean
function ProfileCard({ name, role }) {
return (
<div>
<h3>{name}</h3>
<p>{role}</p>
<button>Contact</button>
</div>
);
}
// Usage
<ProfileCard name="John Doe" role="Software Developer" />
<ProfileCard name="Jane Smith" role="UX Designer" />Components eliminate repetition and make your code more maintainable. You can pass different data via props to customize each instance.
"text-blue-400 font-medium">function Todo() {
// Your component code will go here
"text-blue-400 font-medium">return (
"text-green-400"><div>
"text-green-400"><p>Hello from Todo component!"text-green-400"></p>
"text-green-400"></div>
);
}
"text-blue-400 font-medium">export default Todo;