Multiple Components

Real apps are made of many components working together.

Creating Components

// Navbar.js
const Navbar = () => {
  return (
    <nav>
      <h1>My Blog</h1>
      <div className="links">
        <a href="/">Home</a>
        <a href="/create">New Blog</a>
      </div>
    </nav>
  );
}
export default Navbar;

Nesting Components

import Navbar from "./Navbar";
import Home from "./Home";

function App() {
  return (
    <div>
      <Navbar />
      <Home />
    </div>
  );
}

Component Tree

Components form a tree structure — the App component sits at the top and renders child components below it.