diff --git a/README.md b/README.md
index 433469e..9187cfd 100644
--- a/README.md
+++ b/README.md
@@ -1 +1,3 @@
-# jfdzr12-project-react
\ No newline at end of file
+# Projekt: React
+
+- [ ] [JSX, podstawy budowania komponentów](docs/01-podstawy/README.md)
diff --git a/docs/01-podstawy/README.md b/docs/01-podstawy/README.md
new file mode 100644
index 0000000..9c379b9
--- /dev/null
+++ b/docs/01-podstawy/README.md
@@ -0,0 +1,48 @@
+# Projekt: React – podstawy
+
+Cel: rozpoczęcie migracji aplikacji rozwijanej podczas projektów HTML, CSS i JavaScript do React.
+
+Wszelkie style powinny zostać zdefiniowane w modułach CSS.
+
+## Tworzenie nowego projektu
+
+Utwórz nowy projekt w tym repozytorium przy użyciu [Vite](https://vitejs.dev/guide/#scaffolding-your-first-vite-project) i schematu `react`.
+Dla uproszczenia nadaj mu nazwę `app`.
+
+## Landing page
+
+Pamiętasz [projekt HTML i CSS](https://github.com/infoshareacademy/jfdzr12-project-html-css#landing-page)?
+Stwórz komponent odpowiedzialny za wyświetlenie sekcji ze sloganem firmy. Na razie pomiń nagłówek, wrócimy do niego później.
+
+![](assets/01-greeting-view.png)
+
+## Cennik
+
+Zdefiniuj komponent pojedynczej pozycji w cenniku.
+
+Tak jak poprzednio, zawrzyj nazwę pozycji, cenę oraz krótki opis.
+
+![](assets/02-pricing-card.png)
+
+Następnie spraw by można było go [ponownie użyć](https://react.dev/learn/passing-props-to-a-component#passing-props-to-a-component) do wyświetlenia różnych pozycji z cennika.
+
+Na koniec przygotuj komponent zawierający cały cennik.
+
+![](assets/03-pricing-view.png)
+
+## Galeria
+
+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`).
+
+![](assets/04-gallery.png)
+
+## Okienko modalne
+
+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.
+
+![](assets/05-modals.png)
diff --git a/docs/01-podstawy/assets/01-greeting-view.png b/docs/01-podstawy/assets/01-greeting-view.png
new file mode 100644
index 0000000..35ee694
Binary files /dev/null and b/docs/01-podstawy/assets/01-greeting-view.png differ
diff --git a/docs/01-podstawy/assets/02-pricing-card.png b/docs/01-podstawy/assets/02-pricing-card.png
new file mode 100644
index 0000000..5e08665
Binary files /dev/null and b/docs/01-podstawy/assets/02-pricing-card.png differ
diff --git a/docs/01-podstawy/assets/03-pricing-view.png b/docs/01-podstawy/assets/03-pricing-view.png
new file mode 100644
index 0000000..6178de5
Binary files /dev/null and b/docs/01-podstawy/assets/03-pricing-view.png differ
diff --git a/docs/01-podstawy/assets/04-gallery.png b/docs/01-podstawy/assets/04-gallery.png
new file mode 100644
index 0000000..e182f15
Binary files /dev/null and b/docs/01-podstawy/assets/04-gallery.png differ
diff --git a/docs/01-podstawy/assets/05-modals.png b/docs/01-podstawy/assets/05-modals.png
new file mode 100644
index 0000000..d19cbe2
Binary files /dev/null and b/docs/01-podstawy/assets/05-modals.png differ