React Components🌱 Beginner

Components are the absolute building blocks of any React application. Every single thing you see on a React screen—from a tiny icon to the entire page layout—is a component.

What is a Component?

At its core, a modern React component is simply a standard JavaScript Function that returns JSX (HTML-like syntax). They act exactly like custom HTML elements that you define yourself.

// This is a Component! It must start with a Capital Letter.
function ActionButton() {
  return (
    <button className="btn-primary">
      Click Me!
    </button>
  );
}

Why Do We Use Components?

Components allow you to practice strict Modularity. Instead of writing a massive 5,000-line index.html file, you break your UI down into logical, reusable pieces (e.g., <Navbar />, <Sidebar />, <Feed />). This makes your codebase drastically easier to read, test, and maintain.

How to Nest Components

Once you define a component, you can use it inside other components just like a regular HTML tag. Notice how we use the self-closing syntax <ActionButton />.

function UserProfile() {
  return (
    <div className="profile-card">
      <h2>Alice Engineer</h2>
      <p>Senior Developer</p>
      
      {/* We are nesting our custom component right here! */}
      <ActionButton /> 
    </div>
  );
}