React Lesson 4: Components

Components are the heart of React. Every UI element is a component — from a button to an entire page. Components make your code organized and reusable.

Functional Components

// A component is a function that returns JSX
function Greeting() {
  return <h1>Hello, World!</h1>;
}

// Arrow function component
const Button = () => {
  return <button>Click me</button>;
};

// Short form
const Title = () => <h1>My Title</h1>;

Composing Components

function Header() {
  return (
    <header className="site-header">
      <Logo />
      <Navigation />
      <AuthButtons />
    </header>
  );
}

function App() {
  return (
    <div>
      <Header />
      <main>
        <HeroSection />
        <FeaturesSection />
      </main>
      <Footer />
    </div>
  );
}

Component Rules

// 1. Component names MUST start with capital letter
// ✅ function MyComponent() {}
// ❌ function myComponent() {}

// 2. Components must return JSX (or null)
// 3. One file per component is best practice
// 4. Each component does ONE job (Single Responsibility)

Component Files

// src/components/Card.jsx
function Card({ title, description }) {
  return (
    <div className="card">
      <h2>{title}</h2>
      <p>{description}</p>
    </div>
  );
}

export default Card;

// src/App.jsx
import Card from "./components/Card";

function App() {
  return (
    <div>
      <Card title="React" description="A JS library" />
      <Card title="Vue" description="Another framework" />
    </div>
  );
}