React: Czym jest React

0:00Cześć, pewnie już nie możesz się doczekać, aż odpalimy edytor kodu i zaczniemy pisać coś

0:04w React'cie, ale zanim to zrobimy, chciałbym zrobić takie krótkie wprowadzenie i

0:08odpowiedzieć na jedno podstawowe pytanie. Czym jest React? W najprostszych

0:13słowach React jest biblioteką do tworzenia interfejsów, ale jest to dość

0:17ogólny termin i tak naprawdę ciężko to zrozumieć, jeśli nie wejdziemy trochę w głąb i

0:21nie dowiemy, co tworzy w React'cie te interfejsy, bo Jeśli spojrzymy

0:26sobie taki interfejs, ale na razie pomówmy o tym klasycznym, napisanym w

0:30HTML'u, to mamy tutaj takie elementy, jak header, jak H1, jak p,

0:34jak button i zawsze tego typu elementy tworzyły taką

0:38jedną indywidualność, czyli nie był to button, który

0:42na przykład wykorzystujemy w wielu miejscach, no chyba że nadawaliśmy mu jakąś klasę, ale

0:46wtedy jego wygląd był tylko ograniczony właśnie jakiejś klasy. Natomiast samo

0:51działanie i tak musiało aplikowane do każdego button'a osobno. Nawet

0:55jeśli wykorzystywały tę samą funkcję. Mam nadzieję rozumiesz o co mi chodzi,

0:59że ta logika stosowana była tylko i wyłącznie do jednej

1:03instancji jakiegoś button'a. jakiegoś header'a, jakieś karty

1:07czy div'a. Wszystko traktować można było jako taką odrębną, jedną

1:11rzecz. Natomiast w React'cie to się zmieniło i nastała taka prawdziwa rewolucja,

1:16ponieważ powstały tak zwane komponenty i jak widzisz, w tych znacznikach nie mamy już

1:20czegoś takiego jak H1, H2, p, div i tak dalej. Mamy

1:25nazwy własne, tak jak Hero jak, Heading, jak Card i te

1:29komponenty faktycznie zawierają dalej takie rzeczy, jak buttton'y, jak H1.

1:33Niemniej, można je reużywać, czyli można stosować

1:38jeden komponent w wielu miejscach naszej aplikacji i to jest tak naprawdę podstawowe

1:43działanie React'a. To w taki właśnie sposób tworzymy interfejsy w React'cie. Tworząc

1:48komponenty, które następnie możemy reużywać w wielu miejscach naszej

1:52aplikacji. Jeśli spojrzymy sobie, na przykład, na taki button, to

1:57tak jak mówiłem wcześniej, w HTML'u ten button mógł mieć klasę, która odnosiła

2:01się do jego indywidualnego stylu. Mógł mieć jakąś logikę, która była zaaplikowana,

2:06ale już tak bezpośrednio przez JavaScript. Po prostu nawiązywał

2:10ten button, powiedzmy, do jakiejś funkcji. Natomiast w komponencie React'owym,

2:14takim jak na przykład button. Zauważ, że jest on pisany wielką literą. Wszystko,

2:18co odnosi się do tego button'a możemy zamknąć właśnie wewnątrz tego komponentu, czyli

2:22może mieć on własny HTML. Tutaj w cudzysłowie, ponieważ tak na prawdę w React'cie używamy

2:27JSX, ale tym opowiem ci już w samym kursie. Ten button może mieć

2:31też własną logikę. On się może zachowywać w jakiś odpowiedni sposób, wyłącznie

2:35dla niego. Nie mniej możemy później ten button właśnie użyć w kilku miejscach aplikacji

2:39i każdy tych button'ów będzie zachowywał się tak samo. To jest bardzo przydatne i

2:43to też zobaczysz podczas trwania kursu. No i oczywiście może mieć też

2:47własny indywidualny styl, ale to było osiągalne również poprzez nadawanie odpowiednich

2:52klas. Zresztą w React'cie działa to bardzo podobnie. To, co jest charakterystyczne

2:56dla takiej biblioteki jak jak React to to, że mamy jakiś jeden główny komponent, root'owy

3:01komponent jak nazywamy i wewnątrz tego komponentu, mamy inne komponenty.

3:05Rendereujemy je w taki sposób, że wpisujemy je wewnątrz tego komponentu. Na

3:10przykład mamy Header, który zawiera takie rzeczy jak Button, czy Title. Mamy

3:14też Card, który może zawierać również instancje własnego button'a i w ten sposób

3:18powstaje tak zwane drzewo komponentów, które następnie renderujemy do

3:22naszego pliku html i tak powstaje aplikacja React'owa. W  tej chwili może

3:26to wydawać się dość enigmatyczne i skomplikowane. Natomiast zobaczysz, że

3:30tworzenie tego typu struktur wcale nie jest tak skomplikowane i można tego

3:34się dość szybko nauczyć. Zresztą zrobię wszystko, żeby ci w tym pomóc, ale odpowiedzmy

3:39sobie na jeszcze jedno dość ważne pytanie, ponieważ ono często pada gdzieś w dyskusjach w

3:43internecie, czyli jak to framework JavaScript'u? Znamy

3:48takie framework'i jak Angular, jak Vue, a React często nazywany jest nazywany jest

3:52biblioteką. Zresztą sam go tak nazwałem na początku tej lekcji. Wynika

3:56to przede wszystkim z tego, że sam React, w sobie, nie zawiera takich

4:00narzędzi jak narzędzie do tworzenia routing'u, czyli różnych ścieżek,

4:04którymi możemy podążać sobie w naszej aplikacji tworzenia podstron i tak

4:09dalej, nie zawiera też, na przykład, wbudowanych narzędzi do walidacji formularzy.Nie

4:14zawiera na przykład store'u, czyli takiej ogólnej pamięci aplikacji, w której możemy

4:18trzymać różne przydatne rzeczy. Tych umiejętności React

4:22nie posiada, ale jeśli przyjrzymy się ekosystemowi React'a, który tej chwili jest największym

4:27ekosystemem, jeśli chodzi o społeczność zgromadzoną wokół jakiegoś framework'a,

4:31to zobaczymy, że istnieje mnóstwo narzędzi, które łatają te dziury. Mamy

4:36takie narzędzia jak React Router, czy Reach Router do tworzenia właśnie

4:40ranking'u. Mamy React Final Form albo Formik do tworzenia formularzy i validate'owania

4:45tych formularzy. Mamy na przykład Redux albo MobX do tworzenia store'u, więc

4:49jak widzisz, React sam w sobie może nie jest framework'iem, a zaledwie

4:53biblioteką do tworzenia interfejsów. Natomiast w połączeniu z

4:57całym ekosystemem, który istnieje w internecie, ze wszystkimi narzędziami,

5:01które możemy podpiąć do tej biblioteki, on staje się pełnoprawnym framework'iem

5:05i z zasady, nie ma różnicy, co do tego czy wybieramy

5:09do naszego projektu React'a, Angular'a, czy Vue. Większość rzeczy można osiągnąć

5:14w podobny sposób w tych framework'ach. One mają podobne predyspozycje i tak

5:18naprawdę wybór framework'a do projektu często zależy od upodobań i

5:22wiedzy programisty. Jednak od wielu lat niepodzielnie React rządzi, jeśli chodzi framework'i i

5:26tutaj już celowo używam słowa framework, ponieważ wiesz już że istnieje cały

5:30ekosystem, który tworzy właśnie ten framework i jest to bardzo przyjazna i bardzo fajna technologia

5:35dająca bardzo dużą swobodę deweloperowi. Można zrobić tutaj mnóstwo rzeczy w

5:39bardzo ciekawy sposób i w tym kursie o podstawach React powiem ci jak

5:43można wykorzystać najlepiej potencjał, który kryje się za tą technologią.