W aplikacji React wszystko jest podzielone na komponenty, które można porównać do klocków Lego: z tych „klocków” składa się cała aplikacja. Komponenty w React nie są jednak unikatową koncepcją dla tej biblioteki; nawet zwykłe tagi HTML można traktować jak komponenty.
W React istnieją dwa główne typy komponentów:
- Komponenty Klasowe: Dawniej były standardem, ale stały się mniej popularne po wprowadzeniu hooków React, które są wykorzystywane wyłącznie w komponentach funkcyjnych.
- Komponenty Funkcyjne: To zasadniczo funkcje JavaScript, które zwracają elementy do wyświetlenia, zwykle używając składni JSX. Ważne jest, aby nazwy tych komponentów zaczynały się wielką literą (stosujemy notację PascalCase).
Przykład komponentu funkcyjnego:
function SubmitButton() {
return <button>Wyślij</button>;
}
// Użycie komponentu funkcyjnego w innym komponencie:
import { SubmitButton } from './SubmitButton';
function Form() {
return (
<form>
{/* inne elementy */}
<SubmitButton />
</form>
);
}Jeżeli w komponencie zwracamy html który składa się z wielu linii musimy otoczyć go ().
Wszystkie elementy html używane w komponentach niestandardowych to w zasadzie komponenty React, pełny spis wbudowanych komponentów w react-dom: https://react.dev/reference/react-dom/components