Lekcja 4: Komponenty Funkcyjne i Props

Komponenty to serce aplikacji React. Pozwalają dzielić interfejs użytkownika na niezależne, reużywalne części. W nowoczesnym Reactcie dominują komponenty funkcyjne, które są prostsze i łatwiejsze w użyciu dzięki Hookom (o których w kolejnych lekcjach). W tej lekcji skupimy się na tworzeniu komponentów funkcyjnych i przekazywaniu do nich danych za pomocą "props".

Komponenty Funkcyjne

Komponent funkcyjny w React to zwykła funkcja JavaScript, która przyjmuje jeden argument (obiekt "props") i zwraca elementy React (zazwyczaj JSX), opisujące, co powinno zostać wyrenderowane.

// Najprostszy komponent funkcyjny
function Welcome(props) {
  return <h1>Witaj, {props.name}!</h1>;
}

// Użycie komponentu
const element = <Welcome name="Sara" />;

// Renderowanie (zakładając istnienie elementu #root)
const root = ReactDOM.createRoot(document.getElementById(\'root\'));
root.render(element);

Kluczowe cechy komponentów funkcyjnych:

• Są to standardowe funkcje JavaScript (mogą być zdefiniowane za pomocą function lub jako funkcje strzałkowe const Welcome = (props) => { ... }).
• Nazwy komponentów muszą zaczynać się wielką literą (np. Welcome, a nie welcome). React traktuje komponenty zaczynające się małą literą jak zwykłe tagi HTML.
• Przyjmują jeden argument - obiekt props (skrót od properties).
• Zwracają opis UI (najczęściej JSX).

Props (Properties)

Props to sposób przekazywania danych z komponentu nadrzędnego (rodzica) do komponentu podrzędnego (dziecka). Działają podobnie do atrybutów w HTML.

W przykładzie powyżej, komponent Welcome został użyty z "propsem" name o wartości "Sara": <Welcome name="Sara" />. Wewnątrz komponentu Welcome, ta wartość jest dostępna jako props.name.

Props są tylko do odczytu (read-only). Komponent nigdy nie powinien modyfikować swoich własnych propsów. Wszystkie komponenty React muszą działać jak "czyste funkcje" w odniesieniu do swoich propsów - dla tych samych danych wejściowych (props) zawsze powinny zwracać ten sam wynik.

// Przykład przekazywania wielu propsów
function UserCard(props) {
  return (
    <div className="user-card">
      <img src={props.avatarUrl} alt={props.name} />
      <h2>{props.name}</h2>
      <p>Email: {props.email}</p>
    </div>
  );
}

// Użycie komponentu z wieloma propsami
const element = (
  <UserCard 
    name="Jan Kowalski"
    email="jan.kowalski@example.com"
    avatarUrl="https://via.placeholder.com/100"
  />
);

Możemy również użyć destrukturyzacji ES6, aby kod był bardziej czytelny:

function UserCard({ name, email, avatarUrl }) { // Destrukturyzacja props
  return (
    <div className="user-card">
      <img src={avatarUrl} alt={name} />
      <h2>{name}</h2>
      <p>Email: {email}</p>
    </div>
  );
}

Kompozycja Komponentów

Komponenty mogą renderować inne komponenty. To pozwala na budowanie złożonych interfejsów z mniejszych, reużywalnych części.

// Komponent Welcome
function Welcome(props) {
  return <h1>Witaj, {props.name}!</h1>;
}

// Komponent App, który używa komponentu Welcome wielokrotnie
function App() {
  return (
    <div>
      <Welcome name="Sara" />
      <Welcome name="Kasia" />
      <Welcome name="Tomek" />
    </div>
  );
}

// Renderowanie komponentu App
const root = ReactDOM.createRoot(document.getElementById(\'root\'));
root.render(<App />);

Props `children`

Specjalnym propsem jest children. Reprezentuje on zawartość umieszczoną pomiędzy tagiem otwierającym a zamykającym komponentu.

// Komponent Card, który może renderować dowolną zawartość wewnątrz
function Card(props) {
  return (
    <div className="card">
      {props.children} 
    </div>
  );
}

// Użycie komponentu Card
function App() {
  return (
    <Card>
      {/* Ta zawartość będzie dostępna jako props.children w komponencie Card */}
      <h2>Tytuł karty</h2>
      <p>To jest treść karty.</p>
      <button>Kliknij mnie</button>
    </Card>
  );
}

Możemy również użyć destrukturyzacji dla children:

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

Domyślne wartości Props (Default Props)

Możemy zdefiniować domyślne wartości dla propsów, które będą używane, jeśli komponent nadrzędny nie przekaże danej właściwości.

function Button({ label = "Kliknij", color = "blue" }) {
  const style = { backgroundColor: color, color: \'white\', padding: \'10px\', border: \'none\' };
  return <button style={style}>{label}</button>;
}

// Użycie:
<Button /> // Użyje domyślnych wartości: label="Kliknij", color="blue"
<Button label="Wyślij" /> // Użyje label="Wyślij", color="blue"
<Button color="green" /> // Użyje label="Kliknij", color="green"
<Button label="Anuluj" color="red" /> // Użyje podanych wartości

// src/UserInfo.jsx
import React from \'react\';

function UserInfo({ user }) {
  return (
    <div className="UserInfo">
      <img className="Avatar" src={user.avatarUrl} alt={user.name} />
      <div className="UserInfo-name">{user.name}</div>
    </div>
  );
}

export default UserInfo;

// src/Comment.jsx
import React from \'react\';
import UserInfo from \'./UserInfo\'; // Załóżmy, że UserInfo jest w tym samym folderze

function formatDate(date) {
  return date.toLocaleDateString();
}

function Comment({ author, text, date }) {
  return (
    <div className="Comment">
      <UserInfo user={author} />
      <div className="Comment-text">{text}</div>
      <div className="Comment-date">{formatDate(date)}</div>
    </div>
  );
}

export default Comment;

// src/App.jsx
import React from \'react\';
import Comment from \'./Comment\';
import \'./App.css\'; // Załóżmy, że mamy podstawowe style

const commentData = {
  author: {
    name: \'Anna Nowak\',
    avatarUrl: \'https://via.placeholder.com/50\'
  },
  text: \'Mam nadzieję, że podoba Ci się nauka Reacta!\',
  date: new Date()
};

function App() {
  return (
    <div>
      <h1>Komentarze:</h1>
      <Comment 
        author={commentData.author}
        text={commentData.text}
        date={commentData.date}
      />
    </div>
  );
}

export default App;

Cel: Stworzyć komponent Comment, który wyświetla komentarz użytkownika (awatar, imię, treść, data).

Kroki:

1. W projekcie React (np. Vite) stwórz nowy plik komponentu, np. src/Comment.jsx.
2. Zdefiniuj komponent funkcyjny Comment, który przyjmuje propsy: author (obiekt z name i avatarUrl), text i date.
3. Użyj JSX, aby wyrenderować strukturę komentarza, wykorzystując przekazane propsy.
4. Stwórz pomocniczy komponent UserInfo, który przyjmuje user (obiekt z name i avatarUrl) jako props i renderuje awatar oraz imię użytkownika. Użyj tego komponentu wewnątrz Comment.
5. W komponencie App.jsx zaimportuj i użyj komponentu Comment, przekazując przykładowe dane.

Stwórz komponent Product, który przyjmuje propsy: name (string), price (number), isOnSale (boolean), features (tablica stringów). Komponent powinien:

1. Wyświetlać nazwę produktu jako nagłówek <h3>.
2. Wyświetlać cenę. Jeśli isOnSale jest true, cena powinna być wyświetlona na czerwono i z dopiskiem "(Promocja!)".
3. Wyświetlać listę cech (features) jako <ul>.
4. Użyj domyślnej wartości dla isOnSale na false.
5. Użyj tego komponentu w App.jsx kilka razy z różnymi danymi.