5. Język JavaScript

5.2. React

React to popularna biblioteka JavaScript stworzona przez Facebook (obecnie Meta) w 2013 roku. Jest przeznaczona do budowania interfejsów użytkownika, w szczególności w aplikacjach jednostronicowych (ang. Single Page Applications, SPA). React pozwala budować dynamiczne i interaktywne interfejsy użytkownika na bazie komponenty, które mogą być zaprojektowane samodzielnie lub pochodzić z szerokiej bazy rozszerzeń.

React używa deklaratywnego stylu programowania, co oznacza, że deweloperzy opisują, jak interfejs użytkownika ma wyglądać, a React sam zarządza aktualizacjami w przeglądarce, minimalizując bezpośrednią manipulację DOM.

Jak zacząć?
Aby rozpocząć swoją przygodę z Reactem proponuję przerobić sobie następujące tutoriale:
  1. Using React in Visual Studio Code
    • Edytor Visual Studio Code jest współcześnie zalecany jako podstawowe narzędzie deweloperskie. 
    • Niniejszy tutorial pokazuje, w jaki sposób zacząć korzystać ze środowiska VSC na przykładzie prostego projektu startowego create-react-app.
    • Pamiętaj, że na samym początku potrzebujesz mieć zainstalowane środowisko NodeJS oraz menedżer pakietów npm w najnowszych stabilnych wersjach. 
    • Czytelnik tutoriala prowadzony jest kolejno przez:
      • utworzenie nowego projektu,
      • podstawowe operacje w edytorze VSC,
      • skonfigurowanie debuggera oraz lintera.
    • Tyle na dobry początek. Następnie wypadałoby zacząć zgłębiać tajniki samego Reacta...
  2. Tutorial: Tic-Tac-Toe
    • Ten tutorial prowadzi Czytelnika przez proces stopniowego budowania prostej gry typu "kółko i krzyżyk" działającej wyłącznie po stronie klienta.
    • W kolejnych krokach wprowadzany jest deklaratywny sposób opisu komponentów, elementy składni JSX, zarządzanie stanem itd.
    • Choć opisane w tutorialu kroki można ćwiczyć w dostępnym na stronie działającym online sandboksie, gorąco zachęcam Ciebie do pobrania sobie początkowych plików projektu i stopniowe rozwijanie go w lokalnie skonfigurowanym środowisku.
    • Pamiętaj, aby nie przeklejać (Ctrl+C / Ctrl+V) fragmentów kodu z tutoriala, ale samodzielnie wpisywać go w edytorze - to ułatwia zapamiętanie.
  3. Thinking in React
    • Kolejny tutorial prowadzi do zbudowania złożonego interfejsu użytkownika aplikacji webowej i jest trampoliną do realizacji własnych projektów w kolejnych krokach.
Popularne rozszerzenia do Reacta
  • React Router
    Umożliwia dodanie routingu do aplikacji React.

  • Redux
    Biblioteka do zarządzania stanem aplikacji.

  • React Query
    Obsługa zapytań do API i zarządzanie danymi asynchronicznymi.

  • Formik
    Ułatwia obsługę i walidację formularzy.

  • React Testing Library
    Narzędzie do testowania komponentów React.