React – komponenty a props

📖

Teorie

React komponenty (funkční) přijímají props a renderují UI. Props jsou readonly a umožňují parametrování komponent. Komponenty mohou být presentational nebo container (smart/dumb). PropTypes nebo TypeScript typování.

🎯

Tahák

1Props jsou vstup do komponenty
2Funkční komponenty + hooks
3Decomposition: malé komponenty

❓

Typické otázky u maturity

1Jak posílat callbacky přes props?
2Co je composition vs inheritance v Reactu?

🏷️

Klíčová slova

propscomponentpresentation/ container

⚡

Praktická část

Zadání:

Napiš komponentu ProductCard(props: {title,price,onBuy}) v TypeScript React.

Kroky:

1Definuj props interface
2Renderuj markup a volání onBuy

Kód:

ProductCard.tsx

import React from 'react';
interface Props{ title:string; price:number; onBuy:()=>void }
export const ProductCard:React.FC<Props> = ({title,price,onBuy}) => (
  <div>
    <h3>{title}</h3>
    <p>{price} Kč</p>
    <button onClick={onBuy}>Koupit</button>
  </div>
);