Pierwszy komponent

W sercu React znajdują się komponenty - samodzielne, wielokrotnego użytku bloki kodu, które enkapsulują HTML, CSS i JavaScript. Komponenty są jak klocki LEGO, z których budujesz swój interfejs użytkownika. W tym module stworzymy nasz pierwszy komponent React i zrozumiemy jego podstawową strukturę.

Czym jest komponent React?

Komponent React to funkcja JavaScript (lub klasa), która zwraca element React (JSX). Komponenty pozwalają podzielić interfejs użytkownika na niezależne, wielokrotnego użytku części i myśleć o każdej części osobno.

Tworzenie pierwszego komponentu funkcyjnego

Zacznijmy od stworzenia prostego komponentu funkcyjnego. Komponent funkcyjny to zwykła funkcja JavaScript, która zwraca JSX:

1// Plik: WelcomeMessage.jsx
2import React from 'react';
3
4function WelcomeMessage() {
5  return (
6    <div className="welcome-container">
7      <h1>Witaj w świecie React!</h1>
8      <p>To twój pierwszy komponent.</p>
9    </div>
10  );
11}
12
13export default WelcomeMessage;

Kluczowe elementy tego komponentu:

Import React -
```
import React from 'react';
```
(w nowszych wersjach React nie jest to konieczne, ale dobrą praktyką jest dołączanie tego importu)
Deklaracja funkcji -
```
function WelcomeMessage() {...}
```
Return z JSX - Funkcja zwraca JSX, który definiuje strukturę komponentu
Export -
```
export default WelcomeMessage;
```
pozwala importować komponent w innych plikach

JSX - co to właściwie jest?

JSX (JavaScript XML) to rozszerzenie składni JavaScript, które pozwala pisać kod przypominający HTML bezpośrednio w JavaScript. Bez JSX, tworzenie elementów React byłoby znacznie bardziej skomplikowane:

1// Z JSX
2function WelcomeMessage() {
3  return (
4    <div className="welcome-container">
5      <h1>Witaj w świecie React!</h1>
6      <p>To twój pierwszy komponent.</p>
7    </div>
8  );
9}
10
11// Bez JSX (tak naprawdę React przetwarza JSX do tej postaci)
12function WelcomeMessage() {
13  return React.createElement(
14    'div',
15    { className: 'welcome-container' },
16    React.createElement('h1', null, 'Witaj w świecie React!'),
17    React.createElement('p', null, 'To twój pierwszy komponent.')
18  );
19}

Jak widać, JSX sprawia, że kod jest znacznie bardziej czytelny i przypomina HTML, z którym większość deweloperów jest zaznajomiona.

Zasady JSX

JSX wygląda jak HTML, ale ma kilka ważnych różnic:

className
zamiast
class
- Ponieważ "class" jest słowem kluczowym w JavaScript, w JSX używamy
```
className
```
do definiowania klas CSS
Atrybuty używają camelCase - Atrybuty HTML jak
```
onclick
```
są zapisywane jako
```
onClick
```
w JSX
Samozamykające się tagi - Tagi jak
```
<img>
```
muszą być zamknięte:
```
<img />
```
Wyrażenia JavaScript w JSX - Możesz używać wyrażeń JavaScript w nawiasach klamrowych:
```
{expression}
```

Używanie właściwości (props)

Komponenty mogą przyjmować dane za pomocą właściwości (props). Props to sposób na przekazywanie danych z komponentu rodzica do komponentu dziecka:

1// Plik: WelcomeMessage.jsx
2function WelcomeMessage(props) {
3  return (
4    <div className="welcome-container">
5      <h1>Witaj, {props.name}!</h1>
6      <p>{props.message}</p>
7    </div>
8  );
9}
10
11export default WelcomeMessage;
12
13// Użycie komponentu
14<WelcomeMessage name="Kosmonauto" message="Gotowy na podróż przez galaktykę React?" />

Możemy też używać destrukturyzacji props, co czyni kod bardziej czytelnym:

1function WelcomeMessage({ name, message }) {
2  return (
3    <div className="welcome-container">
4      <h1>Witaj, {name}!</h1>
5      <p>{message}</p>
6    </div>
7  );
8}

Renderowanie warunkowe

Jedną z mocnych stron komponentów React jest możliwość renderowania różnych elementów w zależności od pewnych warunków:

1function WelcomeMessage({ name, isLoggedIn }) {
2  return (
3    <div className="welcome-container">
4      {isLoggedIn ? (
5        <h1>Witaj ponownie, {name}!</h1>
6      ) : (
7        <h1>Witaj, gościu! Zaloguj się, aby kontynuować.</h1>
8      )}
9    </div>
10  );
11}

Renderowanie list

Komponenty React świetnie nadają się do renderowania list danych:

1function AstronautList({ astronauts }) {
2  return (
3    <div className="astronaut-list">
4      <h2>Załoga misji kosmicznej:</h2>
5      <ul>
6        {astronauts.map(astronaut => (
7          <li key={astronaut.id}>
8            {astronaut.name} - {astronaut.role}
9          </li>
10        ))}
11      </ul>
12    </div>
13  );
14}
15
16// Użycie
17const crewMembers = [
18  { id: 1, name: "Jan Kowalski", role: "Kapitan" },
19  { id: 2, name: "Anna Nowak", role: "Naukowiec" },
20  { id: 3, name: "Tomasz Wiśniewski", role: "Inżynier" }
21];
22
23<AstronautList astronauts={crewMembers} />

Zwróć uwagę na atrybut

key

- jest on wymagany przy renderowaniu list, aby React mógł efektywnie aktualizować DOM przy zmianach w liście.

Stylizacja komponentów

Istnieje kilka sposobów na stylizację komponentów React:

1. Zewnętrzny arkusz CSS

1// WelcomeMessage.css
2.welcome-container {
3  padding: 20px;
4  border-radius: 8px;
5  background-color: #f5f5f5;
6  text-align: center;
7}
8
9// WelcomeMessage.jsx
10import React from 'react';
11import './WelcomeMessage.css';
12
13function WelcomeMessage({ name }) {
14  return (
15    <div className="welcome-container">
16      <h1>Witaj, {name}!</h1>
17    </div>
18  );
19}

2. Wbudowane style (Inline styles)

1function WelcomeMessage({ name }) {
2  const styles = {
3    container: {
4      padding: '20px',
5      borderRadius: '8px',
6      backgroundColor: '#f5f5f5',
7      textAlign: 'center'
8    },
9    heading: {
10      color: '#333',
11      fontSize: '24px'
12    }
13  };
14
15  return (
16    <div style={styles.container}>
17      <h1 style={styles.heading}>Witaj, {name}!</h1>
18    </div>
19  );
20}

3. CSS Modules

1// WelcomeMessage.module.css
2.container {
3  padding: 20px;
4  border-radius: 8px;
5  background-color: #f5f5f5;
6  text-align: center;
7}
8
9// WelcomeMessage.jsx
10import React from 'react';
11import styles from './WelcomeMessage.module.css';
12
13function WelcomeMessage({ name }) {
14  return (
15    <div className={styles.container}>
16      <h1>Witaj, {name}!</h1>
17    </div>
18  );
19}

Kompozycja komponentów

Jedną z największych zalet React jest możliwość komponowania większych interfejsów z mniejszych komponentów:

1// Button.jsx
2function Button({ onClick, children, color = 'blue' }) {
3  return (
4    <button
5      onClick={onClick}
6      style={{
7        backgroundColor: color,
8        color: 'white',
9        padding: '10px 15px',
10        border: 'none',
11        borderRadius: '4px',
12        cursor: 'pointer'
13      }}
14    >
15      {children}
16    </button>
17  );
18}

Podsumowanie

W tym module nauczyliśmy się:

Czym są komponenty React i jak je tworzyć
Podstaw JSX i jego zasad
Jak używać props do przekazywania danych
Renderowania warunkowego i list
Różnych metod stylizacji komponentów
Kompozycji komponentów do budowy większych interfejsów

Komponenty są fundamentalnym elementem React, a zrozumienie ich działania jest kluczowe dla efektywnego rozwoju aplikacji React. W kolejnych modułach zagłębimy się bardziej w zaawansowane koncepcje, takie jak stan (state), cykl życia komponentów i hooki.

Vai a CodeWorlds→