Przyjrzyjmy się popularnemu frameworkowi. Czym jest React?

Spis treści

• Czym jest React
• Dlaczego jest potrzebny
• Jak to wyglądało
• Jak to działa
• Zalety i wady korzystania
• Porównanie React z innymi frameworkami. Który lepiej wybrać
• Przydatne materiały od redaktorów Skillbox.by

Co to jest?

React to framework dla języka programowania JavaScript. Został stworzony przez Facebooka do tworzenia stron internetowych.

Dlaczego jest potrzebny?

• Uproszcza tworzenie interfejsów. Dzięki React programiści mogą łatwo dzielić strony na małe elementy – komponenty. To one tworzą całą stronę.
• Pomaga tworzyć złożone projekty. Programiści opisują złożone procesy w kodzie za pomocą zestawu narzędzi React.
• Przyspiesza rozwój.Struktura zapewnia szybką i łatwą implementację oraz ponowne wykorzystanie poszczególnych komponentów i stron internetowych. Oszczędza to czas programistów podczas tworzenia.

Jak to się stało

W 2012 roku Jordan Walke i jego zespół rozpoczęli pracę nad React. Chcieli rozwiązać problemy, na które napotykali podczas projektowania wyglądu stron. Na przykład, po wielu latach pracy nad projektem, nowicjusze nie byli już w stanie zrozumieć kodu. Wtedy z pomocą przyszedł React. Technologia dostosowała wszystko do standardu, który każdy może zrozumieć.

Dzięki wsparciu Facebooka i innych dużych firm, framework szybko zyskał popularność. W 2016 roku React zajął wiodącą pozycję wśród bibliotek front-endowych ze względu na swoją lekkość i wydajność.

Jak to działa

Każdy framework i technologia mają koncepcje i zasady działania. Programista musi je znać, aby móc z nich korzystać w procesie tworzenia.

Podstawowe koncepcje i zasady działania React

• Komponenty. Komponenty w React to podstawowe elementy interfejsu użytkownika. Każdy komponent można wstawić na stronę wielokrotnie.
• Wirtualny DOM.DOM to struktura dokumentu HTML, reprezentowana przez drzewo. Wirtualny DOM to kopia rzeczywistego DOM przechowywana w pamięci. To tak, jakbyś najpierw napisał coś w wersji roboczej, a następnie przeniósł swoją pracę do wersji finalnej.
• Właściwości i stan.Są to sposoby zarządzania danymi w React. Właściwości to właściwości przekazywane do komponentów z innych komponentów. Stan to ich dane wewnętrzne. Rekwizyty można porównać do ludzkich genów. Stan to na przykład wiedza, którą otrzymujemy w szkole.
• Haki. To mechanizm, który pozwala pisać kod bez użycia klas – modeli do tworzenia obiektów określonego typu.
• Jednokierunkowy przepływ danych. Dane w React są przekazywane tylko w jednym kierunku – z góry na dół, od komponentu nadrzędnego do komponentów potomnych. Upraszcza to debugowanie, ponieważ zawsze wiadomo, skąd pochodzą dane.

• Narzędzia dla programistów React.Istnieją specjalne narzędzia do pracy z React — rozszerzenia przeglądarki, które pomagają sprawdzać kod pod kątem błędów.
• JSX. JSX to rozszerzenie JavaScript stworzone przez Facebooka do użytku z React. JSX wykorzystuje składnię HTML do tworzenia obiektów.

Zalety i wady korzystania

Zalety

• Wysoka wydajność. React jest szybki dzięki wirtualnemu DOM. Wyobraź sobie, że masz książkę, którą trzeba zaktualizować. Zamiast przepisywać każdą stronę, zmieniasz tylko potrzebne wiersze. W ten sposób React radzi sobie ze zmianami na stronie.
• Skalowalność.React ułatwia dodawanie nowych funkcji do strony lub aplikacji. To jak budowanie domu i dodawanie nowych pomieszczeń w razie potrzeby, bez burzenia starych.
• Ekosystem.React stworzył cały ekosystem narzędzi i bibliotek, które pomagają programistom rozwiązywać różne problemy. Upraszcza to proces rozwoju i przyspiesza wdrażanie nowych rozwiązań.
• Duża społeczność.Wielu programistów korzysta z React i go wspiera. Oznacza to, że łatwo znaleźć pomoc lub gotowe rozwiązania.

Wady

• Niejasna składnia.Ze względu na rozszerzenie JSX, które wykorzystuje składnię HTML, kod React może być niezrozumiały dla początkującego.
• Szybka ewolucja.Biblioteki i narzędzia używane w React są często aktualizowane. Programiści muszą stale się uczyć, aby być na bieżąco.

Porównanie React z innymi frameworkami. Który lepiej wybrać?

Jakość narzędzia można ocenić, porównując je z konkurencyjnymi rozwiązaniami. Analogami Reacta są Angular i Vue.

Zalety i wady Reacta

✅ Łatwość użycia z innymi projektami i bibliotekami;

✅ Duża społeczność i wiele gotowych rozwiązań;

✅ Możliwość korzystania z JSX w celu uproszczenia pracy z interfejsami.

❌ Wysoki próg wejścia dla początkujących;

❌ Konieczność dodatkowej konfiguracji do pracy z projekty.

Zalety i wady Angulara

Angularto framework opracowany przez zespół Google. Służy do tworzenia aplikacji internetowych na dużą skalę.

✅ Deweloper od razu otrzymuje pełen zestaw narzędzi;

✅ Obsługa języka TypeScript;

✅ Dobra dokumentacja i wsparcie Google.

❌ Duża ilość kodu w porównaniu z innymi rozwiązaniami;

❌ Trudny do opanowania dla początkujących ze względu na mnogość wbudowanych funkcji.

Zalety i wady Vue

Vue to framework do tworzenia interfejsów użytkownika. Jest często wybierany ze względu na swoją prostotę i elastyczność. Technologia została opracowana przez Evana Yu.

✅ Łatwa do nauczenia i użycia;

✅ Elastyczna.

❌ Mała społeczność w porównaniu z React i Angular.

❌ Ograniczenia w skalowaniu dużych projektów.

Przydatne materiały od redaktorów Skillbox.by

React to narzędzie, które pomaga tworzyć interaktywne strony internetowe. Z jego pomocą programiści mogą łatwo zmieniać zawartość witryn.

Technologie internetowe rozwijają się dynamicznie, a użytkownicy stają się coraz bardziej wymagający w kwestii jakości i szybkości ładowania stron internetowych. React to świetne narzędzie do tworzenia złożonych i bogatych w funkcje aplikacji internetowych, które mogą sprostać tym potrzebom.

Zespół redakcyjny Skillbox.by zebrał przydatne zasoby, które wprowadzą początkujących do Reacta i jego możliwości.

Dokumenty:

• Oficjalna dokumentacja Reacta — dobre miejsce na początek nauki.

Źródła:

• «React Fast. Aplikacje internetowe z React, JSX, Redux i GraphQL» autorstwa Azata Mardana — przewodnik dla tych, którzy chcą szybko nauczyć się tej technologii;
• «React. Szybki start» autorstwa Stoyana Stefanova — opisuje tworzenie komponentów i ich implementację w projekcie;
• «React in Action» Thomasa Marka Thielensa — uczy, jak tworzyć praktyczne i angażujące interfejsy użytkownika.

Kanały i czaty Telegramu: 

• React: Społeczność rosyjskojęzyczna — niezależna społeczność programistów React;
• Notatki o React — krótkie notatki na temat pracy z biblioteką;
• Wywiad frontendowy — rozmowy kwalifikacyjne na temat Javascript / Html / CSS — pytania na rozmowie kwalifikacyjnej na stanowisko front-end developera.