React: Co będziemy tworzyć?

16.8.x

0:00Cześć, w tej lekcji chcę ci pokazać jak wygląda aplikacja, którą przygotowałem

0:04i którą będziemy rozwijać w tym kursie. Tutaj widzisz taki widok

0:08z lotu ptaka. Natomiast teraz odpalimy sobie prototyp i przeklikamy sobie tą

0:12aplikację. To jest program Adobe Xd jeśli cię to ciekawi. Jest o tyle spoko,

0:16że jest za darmo i naprawdę bardzo fajnie można sobie tutaj projektować

0:20layout'y, więc teraz odpalamy prototyp i nasza

0:25aplikacja podobnie jak w poprzednim z resztą kursie, nazywa się favnote

0:29i służy do kolekcjonowania, do agregowania treści znalezionych

0:33w sieci i można w niej zapisywać notatki, ciekawe konta twitter'owe,

0:38a także artykuły, które gdzieś tam znaleźliśmy i chcielibyśmy sobie zapisać. To

0:42jest taki pomysł trochę, który czerpie z takich aplikacji jak na przykład pocket io

0:46innych tego typu, więc teraz sobie do niej przejdziemy i pamiętaj,

0:51że jest to tylko mockup, to nie jest jeszcze prawdziwa aplikacja. To są tylko statyczne

0:55pliki, pierwsze co widzisz to ekran logowania i tak,

0:59nie mylisz się, będziemy mieć podłączone API, do którego będziemy mogli się zalogować,

1:03tworzyć własne konta, a później zapisywać dla tego konta odpowiednie

1:08notatki, które na przykład po zalogowaniu na innym komputerze będziemy mogli sobie z powrotem

1:12odtworzyć, bo przecież tak działają bazy danych. Tego brakowało właśnie w pierwszym kursie, bo

1:16tam nic takiego nie robiliśmy i to jest już taki duży jakby

1:20progres, jeśli chodzi o właśnie rozbudowanie tej aplikacji, więc

1:24mamy ekran logowania, mamy też ekran rejestracji, a po

1:29zarejestrowaniu przechodzimy do właściwego interfejsu, który wygląda tak. Mam

1:34nadzieję, że ci się podoba i pierwsze co tutaj widzisz, to sidebar, który

1:38zawiera właśnie trzy rodzaje notatek. Zauważ, że kolor i też

1:42wyświetlanie tych notatek zmienia się w zależności od typu notatki, który sobie

1:46wybierzemy. Możemy też wejść w notatkę. Możemy

1:51ją edytować, możemy ją usunąć jeśli chcemy. Możemy

1:56ją po prostu zamknąć, możemy dodawać nowe notatki za pomocą tego plusa

2:01po prawej stronie. Wtedy wysyła nam się takie menu z prawej strony. Możemy

2:07się też wylogować, zalogować ponownie. Zobaczmy

2:12jeszcze jak wyglądają notatki związane z twitterem, tutaj avatar twittera zaczytuje

2:16się automatycznie, ponieważ kiedy dodajemy nowego twittera to podajemy account

2:21name i będziemy korzystać ze specjalnego API, które pozwoli nam właśnie zaczytywać

2:25automatycznie avatary. Tak

2:29wygląda podgląd notatki z twitterem, możemy sobie otworzyć tego Twittera, możemy

2:35wrócić i zerknijmy sobie jeszcze na artykuły. Artykuły

2:39działają w taki sposób, że zamiast tego avatara twitter'owego mamy po

2:43prostu link, który możemy sobie otworzyć, ale możemy też wejść do samej notatki, przejrzeć

2:48o czym ona była i dopiero wtedy otworzyć ten artykuł. I

2:54to na tyle jeśli chodzi o taki krótki pogląd na to jak będzie działać nasz

2:58aplikacja. Mamy jeszcze tutaj wyszukiwarkę, która może nam wyszukiwać po treści

3:02odpowiednie notatki. Teraz sobie zamkniemy ten prototyp. Mamy

3:08też przygotowany taki podstawowy design system, który moglibyśmy dostać

3:12od grafika na przykład, mamy wszystkie ikony, mamy logo mamy

3:17stan icon, czyli aktywną ikonę. Mamy dwa rodzaje input'ów, komponent

3:22karty, wszystkie kolory, które będziemy wykorzystywać w naszej aplikacji. Zauważ,

3:27że wykorzystujemy tutaj notację HSL, którą gorąco ci polecam. Jest

3:31to chyba najbardziej racjonalna notacja kolorów, którą możemy wykorzystywać

3:35w CSS'ie. Mamy sidebar i mamy typografie, którą

3:39sobie zaaplikujemy w naszej stronie. Ten

3:44widok szczególnie nam się przyda kiedy będziemy tworzyć tak zwany design system. Jest

3:48to co prawda wielkie słowa, jeśli chodzi o te aplikacje, ale taki system komponentów,

3:52który będziemy później reużywać w naszej aplikacji, a zrobimy to za

3:56pomocą tak zwanego storybook'a, ale o tym już się dowiesz w dalszej części kursu. Jeśli

4:01ciekawi cię dlaczego drugi kurs robię również w oparciu o pomysł tworzenia

4:05tych notatek w aplikacji to głównie przez to, że po

4:09pierwsze chcę pokazać, że aplikacje React'owe mogą być naprawdę bardzo

4:13proste, tak jak właśnie w tym pierwszym kursie. Ona była bardzo banalna. Natomiast

4:18ten sam pomysł można przekształcić w coś dużo większego, dużo

4:22bardziej zaawansowanego co wygląda naprawdę profesjonalnie i można

4:26się gdzieś tam później w tym już pochwalić, a ponadto przygotowałem do tego kursu

4:30taki właśnie specjalny interfejs z tego względu że chciałbym dzielić

4:34się z tobą wiedzą nie tylko na temat jakich wzorców projektowych czy rozwiązań związanych

4:38wyłącznie z React'em, ale też pokazać ci jak podchodzimy jako

4:42deweloperzy do problemów, takich realnych problemów, które napotykamy

4:46na co dzień w naszej pracy, także tych problemów związanych z layout'em z jakimiś

4:51interakcjami, które mają się pojawić w naszych komponentach, to wcale nie

4:55jest łatwe i można się na tym nieźle wyłożyć. Dlatego uważam, że ten kurs

4:59nie byłby kompletny gdyby zabrakło tutaj właśnie takiej wiedzy mocno

5:03praktycznej, która pozwoli ci po prostu łatwiej rozwiązywać tego typu

5:07problemy w przyszłości i to na tyle w tej lekcji zapraszam cię do kolejnej,

5:12gdzie powiem ci trochę szerzej czego dowiesz się dokładnie w tym kursie.