Komponenty w react

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:

1. 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.
2. 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