Fullstack dev

Tento vzor už znáte z čistého JavaScriptu.

Funkce přijímají vstupy, pracují s nimi a vracejí něco užitečného.

javascript

function formatPrice(amount) {
  return `$${amount.toFixed(2)}`
}

function calculateTotal(price, taxRate) {
  return price + price * taxRate
}

function getReceipt(amount, taxRate) {
  return {
    subtotal: formatPrice(amount),
    total: formatPrice(calculateTotal(amount, taxRate))
  }
}

getReceipt(20, 0.07)

Každá funkce závisí na schopnosti přijímat argumenty.

Bez toho se celý řetězec rozpadne.

React funguje přesně stejným způsobem.

Co jsou Props?

Props jsou způsob, jak komponenty přijímají data.

Jsou React ekvivalentem argumentů funkcí.

Pokud rozumíte argumentům, už rozumíte props.

Předávání Props komponentám

Předání prop komponentě vypadá stejně jako nastavení atributu na HTML elementu:

jsx

<Greeting name="Lena" />

Jednoduše dáváte komponentě nějaké informace, se kterými může pracovat.

Props mohou být cokoli — nejen řetězce

Můžete předat booleany, čísla, pole, funkce, JSX nebo objekty:

jsx

<Dashboard
  user={{ id: 42, name: "Lena" }}
  theme="dark"
  notifications={12}
  onLogout={handleLogout}
  header={<HeaderIcon />}
/>

Proč složené závorky?

Cokoli, co není řetězec, musí být uvnitř {}, protože JSX potřebuje způsob, jak interpretovat JavaScript výrazy.

Objekty používají {{ }}:

jsx

<Chart options={{
  showGrid: false,
  type: "bar",
  colors: ["#ff4d4d", "#4d79ff"]
}} />

Jedna dvojice je pro JSX, jedna dvojice je objektový literál.

Boolean zkratka

Tyto dva jsou identické:

jsx

<Notification muted={true} />
<Notification muted />

Pokud vynecháte hodnotu, React nastaví prop na true.

Přístup k Props uvnitř komponenty

React umístí všechny props do jednoho objektu props, který je předán jako první argument vaší komponentní funkce.

jsx

function Greeting(props) {
  return <h2>Hello, {props.name}!</h2>
}

Můžete také použít destrukturalizaci:

jsx

function Greeting({ name, emoji }) {
  return <h2>Hello, {name} {emoji}</h2>
}

Představení props.children

Zatím jsme předávali data pomocí atributů.

Ale HTML má jiný způsob poskytování obsahu:

Cokoli umístíte mezi otevírací a zavírací tagy.

jsx

<button>Click me</button>

React komponenty mohou také přijímat tento obsah:

jsx

<Banner>Welcome to the event!</Banner>
<Card>
  <h3>Profile</h3>
  <p>Some details here...</p>
</Card>

Uvnitř komponenty je tento obsah dostupný jako props.children.

Příklad: Banner komponenta

jsx

function Banner({ children }) {
  return <div className="banner">{children}</div>
}

Příklad: Page Layout komponenta

jsx

function PageLayout({ children }) {
  return (
    <section className="page">
      <Navbar />
      <div className="content">{children}</div>
      <Footer />
    </section>
  )
}

Tento vzor usnadňuje vytváření znovupoužitelných "obalových" komponent, které řídí rozložení, styly nebo chování, zatímco ponechávají obsah flexibilní.

Skutečný příklad: Znovupoužitelný Modal

App.jsx

jsx

import React from "react"
import Modal from "./Modal"

export default function App() {
  const [open, setOpen] = React.useState(false)

  return (
    <main>
      <button onClick={() => setOpen(true)}>Show Modal</button>
      {open && (
        <Modal onClose={() => setOpen(false)}>
          <h2>Custom Modal Content</h2>
          <p>This text is passed through props.children.</p>
          <small>You can change it each time.</small>
        </Modal>
      )}
    </main>
  )
}

Modal.jsx

jsx

export default function Modal({ onClose, children }) {
  return (
    <div className="modal">
      <button onClick={onClose}>Close</button>
      <div className="modal-body">
        {children}
      </div>
    </div>
  )
}

Modal zapouzdřuje:

•strukturu
•chování
•styly

…ale obsah je vždy jiný. To je síla children.

Shrnutí

React poskytuje dva mocné způsoby předávání obsahu do komponent:

1. Props

•Předávány jako atributy
•Fungují jako argumenty funkcí
•Mohou obsahovat jakýkoli typ dat

2. Children

•Předávány mezi otevíracími a zavíracími tagy
•Ideální pro rozložení, obaly, modaly, karty, tooltips atd.

Společně tvoří páteř kompozitní architektury Reactu.

Jak fungují Props a Children