Components

Functional Components

Functional components are JavaScript functions that return JSX.

Basic Component

function Greeting() {
  return <h1>Hello, World!</h1>;
}

// Arrow function
const Greeting = () => {
  return <h1>Hello, World!</h1>;
};

// Implicit return
const Greeting = () => <h1>Hello, World!</h1>;

Component with Props

function Greeting({ name, age }) {
  return (
    <div>
      <h1>Hello, {name}!</h1>
      <p>You are {age} years old.</p>
    </div>
  );
}

// Usage
<Greeting name="Alice" age={30} />

Component Rules

1. Name components with PascalCase
2. Export components for reuse
3. One component per file
4. Return JSX or null

// Good
function UserProfile({ user }) {
  return (
    <div>
      <h2>{user.name}</h2>
      <p>{user.email}</p>
    </div>
  );
}

export default UserProfile;

Component File Structure

Single File Component

// Button.jsx
import React from "react";

function Button({ label, onClick }) {
  return (
    <button onClick={onClick} className="btn">
      {label}
    </button>
  );
}

export default Button;

Component with Styles

// Button.jsx
import React from "react";
import "./Button.css";

function Button({ label, onClick, variant = "primary" }) {
  return (
    <button 
      onClick={onClick} 
      className={`btn btn-${variant}`}
    >
      {label}
    </button>
  );
}

export default Button;

Folder Structure

src/
  components/
    Button/
      Button.jsx
      Button.css
      Button.test.jsx
      index.js
    Card/
      Card.jsx
      Card.css
    Header/
      Header.jsx
      Header.css

Index Files

// components/Button/index.js
export { default } from "./Button";

// Usage
import Button from "./components/Button";

Component Composition

Compose components together to build complex UIs.

Basic Composition

function App() {
  return (
    <div className="app">
      <Header />
      <main>
        <Sidebar />
        <Content />
      </main>
      <Footer />
    </div>
  );
}

Passing Components as Props

function Card({ title, children }) {
  return (
    <div className="card">
      <h2>{title}</h2>
      <div className="card-body">{children}</div>
    </div>
  );
}

function App() {
  return (
    <Card title="My Card">
      <p>This is card content</p>
      <Button label="Click me" />
    </Card>
  );
}

Layout Components

function Layout({ children }) {
  return (
    <div className="layout">
      <header>Logo</header>
      <main>{children}</main>
      <footer>© 2024</footer>
    </div>
  );
}

// Usage
<Layout>
  <HomePage />
</Layout>

Composition vs Inheritance

React favors composition over inheritance:

// Good: Composition
function Dialog({ title, children }) {
  return (
    <div className="dialog">
      <h2>{title}</h2>
      {children}
    </div>
  );
}

function ConfirmDialog({ message, onConfirm }) {
  return (
    <Dialog title="Confirm">
      <p>{message}</p>
      <button onClick={onConfirm}>Yes</button>
    </Dialog>
  );
}