KOMPONENTY I rekwizyty w REACT

Zanim zagłębimy się w komponenty i rekwizyty w React, najpierw zdefiniujmy, czym jest React; React to biblioteka JavaScript skupiona przede wszystkim na budowaniu interfejsu użytkownika (UI). Pozwala programistom tworzyć komponenty interfejsu użytkownika wielokrotnego użytku, a także zarządzać przepływającymi przez nie danymi.

Porozmawiajmy teraz o komponentach w reakcji.

Komponenty w React

Komponent to element interfejsu użytkownika, który reprezentuje określony element na stronie internetowej. Komponenty mogą być proste lub złożone i można je łączyć w celu tworzenia bardziej złożonych elementów interfejsu użytkownika. W React komponenty są definiowane za pomocą funkcji lub klas Javascript, na przykład;

function Welcome(props) {
  return <h1>Hello,{props.name}</h1>
}

class Welcome extends React.Component {
  render() {
   return <h1>Hello, {this.props.name}</h1>;
 }
}

Rekwizyty w React

Rekwizyty to sposób przekazywania danych z komponentu nadrzędnego do komponentu podrzędnego (przekazywanie danych z komponentu podrzędnego (dzieci) z powrotem do komponentu nadrzędnego w tym przypadku nie jest możliwe). Właściwości są przekazywane jako obiekty do komponentu podczas renderowania i można uzyskać do nich dostęp w komponencie za pomocą argumentu props w przypadku komponentów funkcjonalnych lub this.props w przypadku komponentów klas.

Poniższy kod pokazuje, w jaki sposób komponent nadrzędny może przekazać właściwość name do komponentu Welcome;

function App() {
 return (
  <div>
    <Welcome name="John" />
  </div>
  );
 };

Rekwizyty mogą być również używane do przekazywania funkcji lub innych struktur danych, a także prostych wartości. Na przykład poniżej pokazano, w jaki sposób komponent nadrzędny może przekazać funkcję wywołania zwrotnego jako właściwość do komponentu podrzędnego

function App() {
 const handleClick=() => {
  console.log('Button was clicked');
 };

return(
 <div>
   <Button onClick={handleClick} />
 </div>
 );
};


function Button(props) {
 return (
  <button onClick={props.onClick}>  
    Click Me
  </button>
 );
};

Podsumowując, komponenty i rekwizyty to podstawowe pojęcia w React, które pozwalają programistom budować komponenty interfejsu użytkownika wielokrotnego użytku i zarządzać przepływającymi przez nie danymi. Korzystając z komponentów i rekwizytów, programiści mogą z łatwością tworzyć złożone interfejsy użytkownika i zapewnić, że komponenty pozostaną łatwe do utrzymania i skalowalne w miarę rozwoju aplikacji.