children та композиція компонентів

function Card({ children }) {
  return <article className="card">{children}</article>;
}

function Panel({ children }) {
  return (
    <section className="panel">
      {children}
    </section>
  );
}

function App() {
  return (
    <Panel>
      <h1>Профіль користувача</h1>
      <p>Цей вміст передано до Panel через children.</p>
    </Panel>
  );
}

{
  children: [
    <h1>Профіль користувача</h1>,
    <p>Цей вміст передано до Panel через children.</p>
  ]
}

function Container({ children }) {
  return (
    <div
      style={{
        maxWidth: 720,
        margin: "0 auto",
        padding: 24
      }}
    >
      {children}
    </div>
  );
}

function App() {
  return (
    <Container>
      <h1>Головна сторінка</h1>
      <p>Вміст першої сторінки.</p>
    </Container>
  );
}

function SettingsPage() {
  return (
    <Container>
      <h1>Налаштування</h1>
      <button>Зберегти</button>
    </Container>
  );
}

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";

const styles = {
  page: {
    minHeight: "100vh",
    backgroundColor: "#f3f4f6",
    fontFamily: "Arial, sans-serif"
  },
  header: {
    padding: "20px 32px",
    backgroundColor: "#111827",
    color: "white"
  },
  content: {
    maxWidth: 800,
    margin: "0 auto",
    padding: 32
  },
  card: {
    padding: 24,
    marginBottom: 16,
    backgroundColor: "white",
    borderRadius: 12,
    boxShadow: "0 2px 8px rgba(0, 0, 0, 0.08)"
  },
  button: {
    padding: "10px 16px",
    border: 0,
    borderRadius: 8,
    backgroundColor: "#2563eb",
    color: "white",
    cursor: "pointer"
  }
};

function Page({ children }) {
  return (
    <div style={styles.page}>
      {children}
    </div>
  );
}

function Header({ children }) {
  return (
    <header style={styles.header}>
      {children}
    </header>
  );
}

function Content({ children }) {
  return (
    <main style={styles.content}>
      {children}
    </main>
  );
}

function Card({ children }) {
  return (
    <section style={styles.card}>
      {children}
    </section>
  );
}

function App() {
  return (
    <Page>
      <Header>
        <h1>Панель керування</h1>
      </Header>

      <Content>
        <Card>
          <h2>Вітаємо!</h2>
          <p>
            Цей текст передано до Card через спеціальний проп children.
          </p>
        </Card>

        <Card>
          <h2>Швидкі дії</h2>
          <button
            style={styles.button}
            onClick={() => alert("Дію виконано")}
          >
            Виконати дію
          </button>
        </Card>
      </Content>
    </Page>
  );
}

createRoot(document.getElementById("root")).render(
  <StrictMode>
    <App />
  </StrictMode>
);

Page
├── Header
│   └── h1
└── Content
    ├── Card
    │   ├── h2
    │   └── p
    └── Card
        ├── h2
        └── button

function Page({ children }) {
  return <div className="page">{children}</div>;
}

function Sidebar({ children }) {
  return <aside className="sidebar">{children}</aside>;
}

function Navigation({ children }) {
  return <nav className="navigation">{children}</nav>;
}

function App() {
  return (
    <Page>
      <Sidebar>
        <Navigation>
          <a href="/dashboard">Панель керування</a>
          <a href="/settings">Налаштування</a>
        </Navigation>
      </Sidebar>
    </Page>
  );
}

function Alert({ type, children }) {
  const backgroundColor = type === "error" ? "#fee2e2" : "#dcfce7";

  return (
    <div
      style={{
        padding: 16,
        marginBottom: 12,
        backgroundColor,
        borderRadius: 8
      }}
    >
      {children}
    </div>
  );
}

function App() {
  return (
    <>
      <Alert type="success">
        <strong>Успішно!</strong>
        <p>Дані збережено.</p>
      </Alert>

      <Alert type="error">
        <strong>Помилка!</strong>
        <p>Не вдалося виконати операцію.</p>
      </Alert>
    </>
  );
}

function Dialog({ title, actions, children }) {
  return (
    <section className="dialog">
      <header className="dialog__header">
        <h2>{title}</h2>
      </header>

      <div className="dialog__body">
        {children}
      </div>

      <footer className="dialog__actions">
        {actions}
      </footer>
    </section>
  );
}

function App() {
  return (
    <Dialog
      title="Видалити файл?"
      actions={
        <>
          <button>Скасувати</button>
          <button>Видалити</button>
        </>
      }
    >
      <p>Цю дію неможливо скасувати.</p>
    </Dialog>
  );
}

function Box({ children }) {
  return (
    <div
      style={{
        border: "1px solid #d1d5db",
        borderRadius: 8,
        padding: children ? 16 : 0
      }}
    >
      {children}
    </div>
  );
}

function App() {
  return (
    <>
      <Box>
        <p>У контейнера є дочірній вміст.</p>
      </Box>

      <Box />
    </>
  );
}

function FixedCard() {
  return (
    <article>
      <h2>Заголовок</h2>
      <p>Текст</p>
      <button>Дія</button>
    </article>
  );
}

function Card({ children }) {
  return <article className="card">{children}</article>;
}

<Card>
  <h2>Профіль</h2>
  <p>Особисті дані користувача.</p>
</Card>

<Card>
  <h2>Замовлення</h2>
  <button>Переглянути</button>
</Card>

function Card() {
  return <article>{children}</article>;
}

function Card({ children }) {
  return <article>{children}</article>;
}

function Card(props) {
  return <article>{props.children}</article>;
}

function Card({ children }) {
  children = <p>Інший текст</p>;

  return <article>{children}</article>;
}

function Card({ title, text, buttonLabel }) {
  return (
    <article>
      <h2>{title}</h2>
      <p>{text}</p>
      <button>{buttonLabel}</button>
    </article>
  );
}

function Card({ children }) {
  return <article>{children}</article>;
}

function Panel({ children }) {
  return <section>{children}</section>;
}

function Panel({ children }) {
  return <section>{children()}</section>;
}