React - pierwsze kroki

Stwórz praktyczną aplikację webową wykorzystując możliwości biblioteki React!

3.90 (40 reviews)
Udemy
platform
Polski
language
Mobile Apps
category
React - pierwsze kroki
167
students
4 hours
content
Mar 2019
last update
$19.99
regular price

What you will learn

Jak przygotować środowisko pracy (za pomocą Create React App oraz wiersza poleceń).

Jak tworzyć komponenty aplikacji (komponenty stanu oraz komponenty funkcyjne).

Jak nadać odpowiedni wygląd komponentom (style CSS).

Jak pracować ze stanem aplikacji (dodawać, edytować, zapisywać dane).

Jak pracować z elementami formularzy (dane wpisywane przez użytkownika oraz ich walidacja).

Jak zapisywać dane w pamięci przeglądarki.

Jak używać wersji deweloperskiej projektu.

Jak stworzyć finalną wersję (produkcyjną) aplikacji, którą możesz umieścić na serwerze.

Jak tworzyć funkcje pomocnicze i testy jednostkowe.

Why take this course?

Obierz kurs na... React!

Kiedy programiści firmy Facebook opracowywali bibliotekę React, postawili sobie za cel ułatwienie życia twórcom stron pisanych w języku JavaScript. Framework stał się niezwykle popularny jako doskonałe narzędzie do tworzenia nowoczesnych stron internetowych; korzystają z niego największe marki sieciowego świata, takie jak Netflix czy PayPal. Na rzecz biblioteki React działa prężna społeczność, która tworzy mnóstwo powiązanych komponentów oraz narzędzi.

Stwórz praktyczną aplikację webową wykorzystując możliwości biblioteki React! pozwoli Ci zacząć przygodę z tym znakomitym narzędziem — lub poszerzyć Twoje umiejętności.

Podczas szkolenia obejmującego 79 lekcji poznasz podstawy korzystania z biblioteki React i tworzenia funkcjonalnej aplikacji webowej. Projektowanie interaktywnych serwisów wiąże się z wieloma trudnościami, które można rozwiązać dzięki wykorzystaniu tego narzędzia. Kurs ma na celu przeprowadzenie Cię krok po kroku przez proces powstawania aplikacji — od najprostszych elementów po gotowy, w pełni funkcjonalny program odliczający czas do wybranych wydarzeń dnia. Zobaczysz, jak używać technologii, z której korzystają Facebook, Netflix i Twitter.

Jeśli jesteś początkującym programistą, w efekcie tego szkolenia uda Ci się napisać Twoją pierwszą aplikację webową. Jeśli marzy Ci się praca programisty, możesz poszerzyć swoje umiejętności o możliwości oferowane przez tę wspaniałą bibliotekę. Poznaj potęgę React!

React — jak napisać działającą aplikację?

Stwórz praktyczną aplikację webową wykorzystując możliwości biblioteki React! pozwala prześledzić powstawanie nowej aplikacji i zapanować nad wszystkimi jej etapami. Praca zaczyna się od stworzenia pustego projektu za pomocą Create React App. Następnie musisz dodać podstawowe elementy — tak zwane komponenty. W kolejnym kroku dowiesz, jak używać formularzy oraz jak zapisywać dane. Na koniec stworzysz finalną wersję projektu, którą można umieścić w sieci. Kurs obejmuje omówienie technologii potrzebnych do pracy z React, takich jak node, oraz narzędzi typu terminal.

Same korzyści

Znajomość React zdecydowanie zwiększy Twoje szanse na rynku pracy — nie tylko dlatego, że wzrosną Twoje umiejętności, lecz także z uwagi na możliwość pokazania potencjalnym pracodawcom napisanej samodzielnie aplikacji.

Po ukończeniu szkolenia będziesz w stanie z wykorzystaniem zdobytej wiedzy tworzyć kolejne projekty, o innej tematyce. Przekonasz się, że używanie zewnętrznych bibliotek w Twoich projektach nie sprawia Ci żadnych trudności. Będziesz potrafił używać terminala (wiersza poleceń) do uruchomienia swojej lokalnej aplikacji React. Bez wysiłku stworzysz nowe projekty, gotowe do umieszczenia na serwerze. I — last but not least — poznasz dobre praktyki pisania aplikacji React.

JavaScript w połączeniu z biblioteką React ma potężną moc — wykorzystaj ją już dziś!

Tylko dla wtajemniczonych

Biblioteka React pozwoli Ci zbudować spójną, kompletną i ciekawą aplikację — po prostu podążaj za autorem kursu i zastosuj się do jego wskazówek. W niejednym Cię zaskoczy!

Czy wiesz, że repozytorium React ma ponad 108 000 gwiazdek na GitHubie?

Czy wiesz, że wiele statystyk wskazuje na to, że jest to obecnie najpopularniejszy framework JavaScript na świecie?

Czy wiesz, że odnoga React o nazwie React Native pozwala tworzyć aplikacje mobilne?

O autorze

Jakub Ciosłowski — obecnie pracuje jako software architect w firmie Danfoss. Na co dzień pomaga usprawniać wytwarzanie oprogramowania w kontekście rozwiązań webowych. Profesjonalnie od ponad dekady zajmuje się programowaniem. Internet był jego pasją już w latach dziewięćdziesiątych ubiegłego wieku. W wolnych chwilach interesuje się programowaniem funkcyjnym oraz dźwiękiem. Lubi się uczyć.

Content

Wstęp

1.1. Wprowadzenie
1.2. Demo
1.3. O mnie
1.4. Pobieranie projektu

Przygotowanie środowiska pracy

2.1. Przygotowanie środowiska
2.2. Przygotowanie środowiska terminal
2.3. Create React App, cz. 1.
2.4. Create React App, cz. 2.
2.5. Serwer lokalny
2.6. ES6

Poznaj zawartość folderu projektu

3.1. Co znajdziemy w src?
3.2. JSX - co to jest?
3.3. Tworzenie pierwszego komponentu
3.4. Upraszczanie struktury

Tworzymy podstawowe komponenty

4.1. Statyczny komponent aplikacji
4.2. Zagnieżdżanie komponentów
4.3. Props - wysyłamy dane do komponentów
4.4. PropTypes, czyli typy danych
4.5. Komponenty stanu
4.6. Generowanie komponentów, cz. 1.
4.7. Generowanie komponentów, cz. 2.
4.8. React DevTools
4.9. CSS aplikacji

Komponent edycji i dodawania wydarzenia

5.1. Komponent edycji wydarzenia HTML, cz. 1.
5.2. Komponent edycji wydarzenia HTML, cz. 2.
5.3. Przesyłanie funkcji do komponentów
5.4. Dodawanie wydarzenia - wprowadzenie
5.5. Dodawanie wydarzenia - odczytywanie wartości input
5.6. Dodawanie wydarzenia - wysyłanie obiektu
5.7. Dodawanie wydarzenia - proste nadpisanie stanu
5.8. Dodawanie wydarzenia - Object.assign
5.9. Dodawanie wydarzenia - Object.assign - implementacja
5.10. Dodawanie wydarzenia - uaktualniamy strukturę danych
5.11. Dodawanie wydarzenia - zapisywanie
5.12. Dodawanie wydarzenia - reset formularza
5.13. Dodawanie wydarzenia - unikatowe wartości key

Usuwanie wydarzenia

6.1. Usuwanie wydarzenia filter HTML
6.2. Usuwanie wydarzenia filter
6.3. Usuwanie wydarzenia filter - jak działa?

Walidacja

7.1. Walidacja hour-minute - wstęp
7.2. Walidacja hour-minute - pusta funkcja
7.3. Walidacja hour-minute - zasada działania walidacji
7.4. Walidacja hour-minute - implementacja funkcji

Edycja istniejącego wydarzenia

8.1. Edycja istniejącego wydarzenia - wstęp i HTML
8.2. Implementacja edycji wydarzenia
8.3. Edycja istniejącego wydarzenia - JS
8.4. Edycja istniejącego wydarzenia - klonowanie obiektów
8.5. Ulepszamy edycję - wstęp
8.6. Ulepszamy edycję - implementacja find i map
8.7. Ulepszamy edycję - dodawanie nowego wydarzenia

Ulepszanie formularza

9.1. Ulepszanie formularza - typ number
9.2. Ulepszanie formularza - PropTypes
9.3. Ulepszanie formularza - przesyłanie typu number z pola tekstowego
9.4. Ulepszanie formularza - walidacja nazwy
9.5. Ulepszanie formularza - walidacja godziny-minuty
9.6. Ulepszanie formularza - blokowanie przycisku OK
9.7. Ulepszanie formularza - CSS zablokowanego przycisku
9.8. Ulepszanie formularza - przycisk Cancel
9.9. Test usuwanie buga.mp4

Odliczanie czasu

10.1. Odliczanie czasu
10.2. Dodajemy obecny czas do stanu
10.3. Wysyłamy i walidujemy dane w komponencie
10.4. Konwersja czasu do sekund
10.5. Różnica czasu
10.6. Wyświetlamy różnicę czasu
10.7. Różnica czasu do formatu godzina-minuta-sekunda, cz. 1.
10.8. Różnica czasu do formatu godzina-minuta-sekunda, cz. 2.
10.9. Testowanie funkcji
10.10. Odliczanie czasu setInterval

Zapisywanie stanu w przeglądarce

11.1. Zapisywanie danych
11.2. Odczytywanie danych

Komponent overlay

12.1. Overlay - HTML
12.2. Overlay - CSS
12.3. Overlay - JS
12.4. Overlay - Children

Zakończenie

13.1. Build projektu
13.2. Podsumowanie
13.3. Perspektywy
13.4. Kolejne kroki

Test sprawdzający wiedzę

Test

Reviews

Marcin
August 27, 2022
Prowadzący za szybko przeskakuje z tematu na temat. Nie skończy tłumaczyć jednego i pokazuje co można jeszcze dalej zrobić. Dla mnie było to skakanie z kwiatka na kwiatek bez tłumaczenia dlaczego tak aktualnie się dzieje i jakie są inne możliwości danego elementu.
Bartosz
April 2, 2022
Jeden z lepszych kursów jakie do tej pory przeszedłem. Super że na koniec autor podpowiada z jakimi narzędziami warto się zapoznać po tym kursie
Sebastian12345
October 21, 2021
Kurs świetnie przygotowany pod względem merytorycznym i naukowym. Nie ma zbędnego opowiadania, wszystko robione sprawnie, bez marnowania naszego czasu.

Charts

Price

React - pierwsze kroki - Price chart

Rating

React - pierwsze kroki - Ratings chart

Enrollment distribution

React - pierwsze kroki - Distribution chart

Related Topics

2259202
udemy ID
3/7/2019
course created date
10/29/2019
course indexed date
Bot
course submited by