Cel: rozpoczęcie migracji aplikacji rozwijanej podczas projektów HTML, CSS i JavaScript do React.
Wszelkie style powinny zostać zdefiniowane w modułach CSS.
Utwórz nowy projekt w tym repozytorium przy użyciu Vite i schematu react
.
Dla uproszczenia nadaj mu nazwę app
.
Pamiętasz projekt HTML i CSS? Stwórz komponent odpowiedzialny za wyświetlenie sekcji ze sloganem firmy. Na razie pomiń nagłówek, wrócimy do niego później.
Zdefiniuj komponent pojedynczej pozycji w cenniku.
Tak jak poprzednio, zawrzyj nazwę pozycji, cenę oraz krótki opis.
Następnie spraw by można było go ponownie użyć do wyświetlenia różnych pozycji z cennika.
Na koniec przygotuj komponent zawierający cały cennik.
Przygotuj komponent, który zwróci listę zdjęć z portfolio.
Zdefiniuj adresy obrazków poza komponentem jako tablicę napisów, następnie użyj jej jako źródła do wygenerowania listy zdjęć.
Pamiętaj, by zachować pożądaną strukturę DOM – obrazki nie powinny zostać zawarte w żadnym elemencie (np. div
).
Zostało ci trochę czasu? Przygotuj się na kolejne zajęcia i stwórz komponent odpowiedzialny za wyświetlanie okienka modalnego. Nie przejmuj się interaktywnością ani dokładną. To, co ważne, to powinno być możliwe zawarcie w nim dowolnej treści. Poniżej to jedynie przykład użycia.