Czym są props w kontekście React?

props (od ang. properties) w React to obiekt zawierający dane przekazywane z komponentu nadrzędnego do podrzędnego. Są dostępne wewnątrz komponentu podrzędnego tylko do odczytu i stanowią główny mechanizm przekazywania informacji w dół drzewa komponentów.

Główne cechy props:

• Przekazywanie danych: Służą do przekazywania danych, konfiguracji i callbacków od rodzica do dziecka.
• Niezmienniczość: Wewnątrz komponentu podrzędnego props nie można modyfikować. Wszelkie zmiany powinny pochodzić od komponentu nadrzędnego, który przekazuje nowe props.
• Obiekt: props zawsze są przekazywane jako obiekt. Każda przekazana właściwość staje się kluczem w tym obiekcie.
• Dostęp: W komponentach funkcyjnych props są przekazywane jako pierwszy argument funkcji. W komponentach klasowych są dostępne przez this.props.

Przykład przekazywania i użycia props:

// Komponent nadrzędny
function ParentComponent() {
  const greeting = "Cześć";
  return <ChildComponent message={greeting} />;
}

// Komponent podrzędny
function ChildComponent(props) {
  return <p>{props.message}, świat!</p>;
}