Wprowadzenie do komponentów React

Spójrzmy na dowolną stronę internetową. Składa się ona z zestawu niezależnych bloków: nagłówek, paski boczne, stopka, treść. Można powiedzieć, że te bloki są komponentami w znaczeniu, w jakim jest to rozumiane w React.

Jeśli przyjrzymy się temu samemu nagłówkowi, co w nim można wyróżnić blok z logo, blok kontaktów, blok z menu i tak dalej. Czyli komponenty mogą składać się z innych podkomponentów.

W analogiczny sposób sprawa wygląda w React - strona jest budowana z zestawu komponentów, które z kolei mogą zawierać inne komponenty.

W React każdy komponent reprezentuje osobny moduł. Zazwyczaj rozwój zaczyna się od głównego komponentu App, który zawiera w sobie pozostałe.

Poćwiczmy tworzenie nowych komponentów.

Załóżmy dla przykładu, że potrzebujemy komponentu wyświetlającego dane produktu. Aby to zrobić, musimy w folderze roboczym utworzyć plik Product.js i dodać do niego następujący kod:

jsximport React from 'react';

function Product() {
  return <p>
    product
  </p>;
}

export default Product;

Jak widzicie, teraz nasz komponent zwraca akapit z tekstem. W kolejnych lekcjach rozbudujemy ten kod tak, aby zwracane były dane produktu. Ale na razie na początek po prostu zostawmy akapit z pewnym początkowym tekstem.

Wyświetlmy teraz nasz utworzony komponent w komponencie App. Załóżmy, że teraz nasz App ma następujący kod:

jsximport React from 'react';

function App() {
  return <div>
    text
  </div>;
}

export default App;

Na początek musimy zaimportować stworzony przez nas komponent produktu:

jsximport React from 'react';
import Product from './Product'; // importujemy produkt

function App() {
  return <div>
    text
  </div>;
}

export default App;

Po takim imporcie wewnątrz komponentu App można używać komponentu Product.