Komponenty funkcyjne i props
Proszę tworzyć komponenty jako funkcje, przyjmować i destrukturyzować props oraz używać PropTypes lub typów TypeScript do dokumentowania oczekiwanego kształtu danych.
Komponenty funkcyjne i props to bezpłatna lekcja Frontend Academy na CoddyKit. To lekcja 2 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Frontend Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Frontend Academy zawiera 4 lekcji w sumie.
Czym jest komponent React
Komponent React to funkcja JavaScriptu, która zwraca JSX. Komponenty są podstawowymi elementami aplikacji React — wielokrotnie używanymi i możliwymi do komponowania fragmentami interfejsu użytkownika.
function Welcome() {
return <h1>Welcome to CoddyKit!</h1>;
}
// Arrow function style:
const Welcome = () => <h1>Welcome to CoddyKit!</h1>;Props — przekazywanie danych w dół
Props (właściwości) służą do przekazywania danych z komponentu nadrzędnego do podrzędnego. Komponent otrzymuje je jako pierwszy argument w postaci zwykłego obiektu.
function Greeting({ name, role }: { name: string; role: string }) {
return <p>Hello, {name}! Your role is {role}.</p>;
}
// Usage:
<Greeting name="Alice" role="admin" />Interfejs TypeScript dla propsów
Należy zdefiniować nazwany interfejs dla propsów, aby uzyskać autouzupełnianie, sprawdzanie typów i dokumentację.
interface ButtonProps {
label: string;
onClick: () => void;
disabled?: boolean;
variant?: 'primary' | 'secondary' | 'ghost';
}
function Button({ label, onClick, disabled = false, variant = 'primary' }: ButtonProps) {
return (
<button
onClick={onClick}
disabled={disabled}
className={`btn btn-${variant}`}
>
{label}
</button>
);
}Prop children
Prop children zawiera zawartość między otwierającym i zamykającym tagiem komponentu. Należy określić jego typ jako React.ReactNode, aby akceptować dowolną zawartość możliwą do renderowania.
interface CardProps {
title: string;
children: React.ReactNode;
}
function Card({ title, children }: CardProps) {
return (
<div className="card">
<h2>{title}</h2>
<div className="card-body">{children}</div>
</div>
);
}
// Usage:
<Card title="Hello">
<p>Card content goes here.</p>
</Card>Domyślne propsy z destrukturyzacją
Wartości domyślne należy ustawiać bezpośrednio we wzorcu destrukturyzacji. Jest to współczesne podejście — korzystanie z przestarzałego API defaultProps nie jest już zalecane.
function Alert({ type = 'info', message, onClose }: AlertProps) {
return (
<div className={`alert alert-${type}`}>
<span>{message}</span>
<button onClick={onClose}>×</button>
</div>
);
}Komponowanie komponentów
Komponenty można komponować: komponent Page używa Layout, który używa Nav i Sidebar, a każdy z nich korzysta z mniejszych atomów, takich jak Button i Icon. To drzewo komponentów jest drzewem komponentów React.
Konwencje nazewnictwa
Nazwy komponentów muszą zaczynać się wielką literą. Nazwy pisane małą literą są traktowane jak elementy HTML. <div> to element div HTML, a <Div> to komponent React o nazwie Div.
Czyste komponenty
Komponent jest czysty, jeśli te same propsy zawsze produkują ten sam wynik i podczas renderowania nie występują efekty uboczne. Czyste komponenty łatwiej analizować i optymalizować.
// Pure:
const Greeting = ({ name }: { name: string }) => <h1>Hi, {name}</h1>;
// Impure (side effect in render):
const Bad = ({ id }: { id: string }) => {
localStorage.setItem('id', id); // SIDE EFFECT in render — avoid
return <p>{id}</p>;
};Przekazywanie funkcji jako propsów
Funkcje (callbacki) przekazuje się jako propsy, aby umożliwić komunikację komponentów podrzędnych z nadrzędnymi. Komponent nadrzędny definiuje funkcję, a podrzędny ją wywołuje.
function TodoItem({ text, onDelete }: { text: string; onDelete: () => void }) {
return (
<li>
{text}
<button onClick={onDelete}>Delete</button>
</li>
);
}Rozpraszanie propsów
Operator spread przekazuje wszystkie propsy z obiektu do komponentu. Jest przydatny w komponentach opakowujących lub przekazujących propsy dalej, ale należy używać go ostrożnie — można w ten sposób przekazać nieoczekiwane propsy.
function InputWrapper(props: React.InputHTMLAttributes<HTMLInputElement>) {
return <input {...props} className={`input-base ${props.className || ''}`} />;
}Fragment i klucze w kontekście propsów
Podczas renderowania listy komponentów jako elementów potomnych każdy z nich musi mieć unikatowy prop key. Klucze pomagają React rozpoznać, które elementy się zmieniły, zostały dodane lub usunięte.
Szybkie sprawdzenie
Jak podać wartość domyślną propu we współczesnym funkcyjnym komponencie React?
Podsumowanie: komponenty i propsy
Komponenty funkcyjne to funkcje JavaScriptu zwracające JSX. Props przekazują dane z komponentu nadrzędnego do podrzędnego. Do określania typów propsów należy używać interfejsów TypeScript. children: React.ReactNode służy do zawartości przekazywanej do komponentu. Wartości domyślne należy ustawiać w destrukturyzacji. Callbacki należy przekazywać jako propsy, aby umożliwić komunikację od komponentu podrzędnego do nadrzędnego. Nazwy komponentów zaczynają się wielkimi literami.
Często zadawane pytania
Czy lekcja „Komponenty funkcyjne i props” jest bezpłatna?
Tak — pełny tekst „Komponenty funkcyjne i props” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Frontend Academy, przejdź na CoddyKit PRO. Kurs Frontend Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Komponenty funkcyjne i props”?
Proszę tworzyć komponenty jako funkcje, przyjmować i destrukturyzować props oraz używać PropTypes lub typów TypeScript do dokumentowania oczekiwanego kształtu danych. Ćwiczysz Frontend Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć Frontend Academy?
Nie wymagamy żadnego doświadczenia. Frontend Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 2 z 4.
Ile czasu zajmuje lekcja „Komponenty funkcyjne i props”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji Frontend Academy?
Tak. Każda lekcja Frontend Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- JSX: składnia i transpilacja
- Komponenty funkcyjne i props
- Hook useState: stan i ponowne renderowanie
- Listy, klucze i renderowanie warunkowe