Zadanie 1: Stworzenie projektu React
Zainicjuj nowy projekt React używając Vite i ustaw podstawową strukturę projektu z TailwindCSS.
Instrukcje:
- Zainstaluj Vite używając Node Version Manager.
- Stwórz nowy projekt w Vite.
- Dodaj TailwindCSS do swojego projektu.
- Ustaw podstawową strukturę plików dla projektu.
- Zweryfikuj, czy projekt działa bez błędów.
Zadanie 2: Praca z Komponentami
Stwórz niestandardowe komponenty React - Text i Button.
Instrukcje:
- Zaimplementuj komponent Text, który wyświetla określony tekst, ale nie za pomocą propsa label, ale children.
- Stwórz komponent Button, który można kliknąć i wywołać akcję. Przygotuj 3 warianty tego przycisku - niebieski, zielony i czerwony.
- Dodaj te komponenty do swojego projektu React.
- Ostylizuj komponenty używając TailwindCSS.
Zadanie 3: Podstawy Reacta
Zapoznaj się z podstawami działania Reacta i propsów.
Instrukcje:
- Opisz, w dwóch-trzech zdaniach jak działa React w projekcie React.js.
- Wyjaśnij cel typu ComponentProps.
- Stwórz komponent, który przyjmuje propsy i wyświetla różną zawartość na podstawie tych propsów (np. komponent Paragraph).
- Wykorzystaj helpery tailwind-merge oraz clsx w tym zadaniu
Zadanie 4: Eksploracja narzędzi programistycznych
Dowiedz się, jak korzystać z Storybooka i rekomendowanych wtyczek do VSCode w projektach React.
Instrukcje:
- Skonfiguruj Storybook dla swojego projektu React.
- Stwórz storki dla komponentów Text i Button.
- Zainstaluj rekomendowane wtyczki do VSCode dla swojego projektu.
- Sprawdź skrypty Storybooka do uruchamiania i budowania.
Zadanie 1: Stworzenie projektu React
Zainicjuj nowy projekt React używając Vite i ustaw podstawową strukturę projektu z TailwindCSS.
Instrukcje:
- Zainstaluj Vite używając Node Version Manager.
- Stwórz nowy projekt w Vite.
- Dodaj TailwindCSS do swojego projektu.
- Ustaw podstawową strukturę plików dla projektu.
- Zweryfikuj, czy projekt działa bez błędów.
Zadanie 2: Praca z Komponentami
Stwórz niestandardowe komponenty React - Text i Button.
Instrukcje:
- Zaimplementuj komponent Text, który wyświetla określony tekst, ale nie za pomocą propsa label, ale children.
- Stwórz komponent Button, który można kliknąć i wywołać akcję. Przygotuj 3 warianty tego przycisku - niebieski, zielony i czerwony.
- Dodaj te komponenty do swojego projektu React.
- Ostylizuj komponenty używając TailwindCSS.
Zadanie 3: Podstawy Reacta
Zapoznaj się z podstawami działania Reacta i propsów.
Instrukcje:
- Opisz, w dwóch-trzech zdaniach jak działa React w projekcie React.js.
- Wyjaśnij cel typu ComponentProps.
- Stwórz komponent, który przyjmuje propsy i wyświetla różną zawartość na podstawie tych propsów (np. komponent Paragraph).
- Wykorzystaj helpery tailwind-merge oraz clsx w tym zadaniu
Zadanie 4: Eksploracja narzędzi programistycznych
Dowiedz się, jak korzystać z Storybooka i rekomendowanych wtyczek do VSCode w projektach React.
Instrukcje:
- Skonfiguruj Storybook dla swojego projektu React.
- Stwórz storki dla komponentów Text i Button.
- Zainstaluj rekomendowane wtyczki do VSCode dla swojego projektu.
- Sprawdź skrypty Storybooka do uruchamiania i budowania.
Zadanie 1: Stworzenie projektu React
Zainicjuj nowy projekt React używając Vite i ustaw podstawową strukturę projektu z TailwindCSS.
Instrukcje:
- Zainstaluj Vite używając Node Version Manager.
- Stwórz nowy projekt w Vite.
- Dodaj TailwindCSS do swojego projektu.
- Ustaw podstawową strukturę plików dla projektu.
- Zweryfikuj, czy projekt działa bez błędów.
Zadanie 2: Praca z Komponentami
Stwórz niestandardowe komponenty React - Text i Button.
Instrukcje:
- Zaimplementuj komponent Text, który wyświetla określony tekst, ale nie za pomocą propsa label, ale children.
- Stwórz komponent Button, który można kliknąć i wywołać akcję. Przygotuj 3 warianty tego przycisku - niebieski, zielony i czerwony.
- Dodaj te komponenty do swojego projektu React.
- Ostylizuj komponenty używając TailwindCSS.
Zadanie 3: Podstawy Reacta
Zapoznaj się z podstawami działania Reacta i propsów.
Instrukcje:
- Opisz, w dwóch-trzech zdaniach jak działa React w projekcie React.js.
- Wyjaśnij cel typu ComponentProps.
- Stwórz komponent, który przyjmuje propsy i wyświetla różną zawartość na podstawie tych propsów (np. komponent Paragraph).
- Wykorzystaj helpery tailwind-merge oraz clsx w tym zadaniu
Zadanie 4: Eksploracja narzędzi programistycznych
Dowiedz się, jak korzystać z Storybooka i rekomendowanych wtyczek do VSCode w projektach React.
Instrukcje:
- Skonfiguruj Storybook dla swojego projektu React.
- Stwórz storki dla komponentów Text i Button.
- Zainstaluj rekomendowane wtyczki do VSCode dla swojego projektu.
- Sprawdź skrypty Storybooka do uruchamiania i budowania.
Szczegóły o kursie oraz programie możesz przeczytać tutaj: https://www.webamigos.pl/szkola-reacta
Szkoła Reacta to program nauki Reacta w formie lekcji wideo, praktycznych ćwiczeń, zadań domowych i konsultacji zgrupowych mentorem. Otrzymujesz również dostęp do społeczności na komunikatorze Discord, aby efektywniej uczyć się w grupie.
.jpg){kind=avatar}
Jestem Senior Fullstack Developerem specjalizującym się w tworzeniu aplikacji internetowych w stacku TypeScript, React, Next.js, NestJS. Realizowałem wiele ciekawych i wymagających projektów m. in. dla znanej akademii filmowej z USA oraz startupów z Doliny Krzemowej.
Od 8 lat dzielę się swoją wiedzą jako ekspert na konferencjach i trener IT. Prowadzę też szkolenia dla programistów w Bottega IT Minds, firmie która zrzesza najlepszych ekspertów IT. Jestem także pomysłodawcą i założycielem Szkoły Reacta oraz kanału Web Amigos na YouTube.
Na codzień oprócz kodowania, zajmuję się weryfikacją IT, czyli w trakcie procesów rekrutacyjnych sprawdza poziom wiedzy kandydatów na stanowiska Junior, Regular, jak i Senior developerów.