Jako, że na moim blogu często pojawiają się poradniki traktujące o Single Page Application (obszerny poradnik do Angular JS, niezwykle krótki wstęp do Angular 5), postanowiłem kilka wpisów poświęcić konkurencyjnej technologii – ReactJS.

Osoby, które są chociaż w niminalnym stopniu zaznajomione z ideą tworzenia aplikacji opartej o komponenty (Angular 5, VueJS) będą czuły się w React jak ryba w wodzie. Osobom, którym komponenty nic nie mówią – jest to idea opierająca się zasadzie, iż każdy z elementów strony (wyszukiwarka, panel boczny, menu, formularz, logo) może być osobnym komponentem – czyli porcją kodu, która jest odosobniona, autonomiczna, łączy się z innymi komponentami za pomocą wybranego sposobu komunikacji, a przy tym może być użyta dowoloną ilość razy, w innych miejsach systemu, czy czasem nawet innych projektach.
Co więcej, jednym z pierwszych czynności przy budowaniu projektu opartego na komponentach jest analiza i rozbicie, przyjrzyjmy się temu bliżej na przykładzie pierwszej strony bloga:

Komponenty, które możemy stworzyć:

• nagłówek, a w nim: tytuł, podpis pod tytułem, menu
• panel główny, a w nim: skrót artykułu, a w skrócie – tytuł artykułu, ewentualne zdjęcie, podpis pod tytułem, treść artykułu
• panel boczny, a w nim: kategorie i najnowsze wpisy, a w nich pojedyncze odnośniki

Jak widzimy, komponenty mogą się zagnieżdzać, jedne mogą występować w drugich.

Tyle teorii, czas na zapoznanie się z Reactem. Biblioteka ta wspierana i rozwijana jest przez Facebooka, w tej chwili silnie konkuruje z Angular i Vue o miano króla aplikacji SPA. W dzisiejszym wpisie spróbujemy zainstalować i uruchomić pierwszą aplikację w React. W tym celu użyjemy najprostszego sposobu, czyli narzędzia nazwanego Create React App:
https://github.com/facebook/create-react-app

Najprostszym sposobem jego instalacji, jest użycie Node Package Manager, jego instalację opisałem przy okazji wstępu do Angulara, ale jako, że nie jest tego dużo pozwolę sobie na małe powtórzenie:

• Dla Windows najprościej bedzie zainstalować całe środowisko NodeJS (które zawiera NPM) – https://nodejs.org/en/download/
• Dla MacOSX możemy użyć HomeBrew (brew install node w terminalu) lub podobnie jak w przypadku Windowsa zainstalować cały NodeJS z linka z góry
• W przypadku Linuxa najlepiej użyć oficjalnej dokumentacji, tam znajdziemy odpowiedni poradnik dla większości dystrybucji (https://nodejs.org/en/download/package-manager/#debian-and-ubuntu-based-linux-distributions)

Poprawność instalacji NPM można potwierdzić poprzez wywołanie polecenia npm w linii poleceń (terminalu).

Gdy mamy już zainstalowane NPM, możemy przejść do samego Create React App:

(przełącznik -g oznacza, iż bibliotekę instalujemy globalnie), po czym przechodzimy do wybranego przez siebie katalogu, gdzie będziemy trzymać naszą aplikację i wybieramy:

Po krótkiej chwili z instalatorem w tle:

proces powinien się zakończyć, a my będziemy mogli uruchomić nasz projekt wpisując:

Powinno to zaowocować otwarciem domyślnej przeglądarki i uruchomieniem adresu localhost:3000: 

Projekt działa, udało się go uruchomić, podejrzyjmy więc szybko co zostało utworzone:

Po kolei omówmy pliki:

• katalog nod_modules przechowuje wszystkie zależności naszego projektu, wszystkie dodatkowe pakiety i biblioteki niezbędne do działania naszej aplikacji, a podane w pliku:
• package.json – kod JSON, w którym zapisana jest informacja na temat wymaganych pakietów, w naszym przykładzie widzimy, iż są to: react, react-dom i react-scripts – czyli minimalny zbiór bibliotek Reacta
• katalog public z plikem index.html, który to zawiera korzeń, miejsce startowe naszej aplikacji SPA (dokładnie miejscem tym jest:
  <div id=”root”></div>
  w środku pliku.
• Katalog src to oczywiście nasz katalog z źródłami aplikacji, na razie domyślnie zawiera on plik App.js, App.css i App.test.js jako nasz główny komponent. Jak same nazwy wskazują, plik css to arkusze stylów komponentu, kod JS to kod komponentu, natomiast test.js oznacza miejsce do testów. Warto zauważyć, iż tak właśnie będzie wyglądał nasz pojedynczy komponent.
• Ostatnie warte uwagi pliki to index.js, plik główny JS i registerServiceWorker – ale o nich za chwilę.

Mając opisaną podstawową strukturę projektu Reacta, spróbujmy teraz przyjrzeć się samej zawartości plików, a w tej chwili najbardziej interesować nas powinien plik główny jedynego dostępnego komponentu, App.js:

• Na samej górze widzimy deklaracje import, czyli dołączenia do naszej programu. W tej chwili dołączony został główny element React. Oprócz tego dołączono wektorowe logo, a także kod css.
• Dalej, w piątej linijce widzimy deklaracje nowej klasy App, która to rozszerza klasę Componentu. Warto zauważyć, iż w tej chwili korzystamy z dobrodziejstw ECMAscript 6, czyli obiektowej nadbudowy języka JavaScript. Szerzej o tym traktować będzie inny wpis na blogu, warto jednak już wiedzieć, iż własnie jednym z nowych elementów względem czystego JavaScript jest możliwość deklarowania klas.
• Co więc zawiera nasza klasa App? Widzimy, że tylko jedną metodę o nazwie render(). Jak się nietrudno domyśleć, metoda ta będzie miała za zadanie wyświetlenie (wyrenderowanie) czegoś na ekranie przeglądarki. Widzimy również, że element do wyświetlenia zwracany jest przez samą funkcję, a przy tym przypomina kod HTML – zawiera znaczniki, atrybuty itp. Nie jest to do końca prawdą, gdyż React korzysta z własnego systemu o nazwie JSX, który w pewnym stopniu przypomina czysty HTML, jednak tu również możemy mówić o pewnych rozszerzeniach. Efektem tego jest fakt, iż w przypadku nadawania znacznikom nazw klas, nie możemy użyc atrybutu ‘class’, gdyż jest on w pełni zarezerwowany dla czystego HTMLa, a w jego miejsce używamy ‘className’. W oczy rzuca się również odwołanie klamrowe – oznacza ono tyle, iż ów element ma być wyrenderowany dynamicznie, a nie statycznym napisem. Trzeba również zaznaczyć, iż metoda return zwraca kod JSX, który musi zawierać jeden korzeń – znacznik, w naszym wypadku będzie to <div> (cały wygenerowany kod mieści się w zakresie tego znacznika).
• ostatnim elementem pliku jest instrukcja export, oznacza ona tyle, iż nasz nowostworzony koponent App ma być widoczny i dostępny spoza tego pliku.

No dobrze, udało nam się przeanalizować deklarację głównego komponentu, jak go natomiast użyć? Z pomocą zbliża się nam tu plik index.js, którego budowa wygląda następująco:

Oprócz znanych nam wcześniej instrukcji importu, widzimy instrukcję ReactDOM.render. Instrukcja ta jako pierwszy argument przyjmuje komponent, który chcemy użyć. W naszym wypadku używamy komponent App określając go za pomocą znacznika <App />.
Jako drugi argument, podajemy element DOMu, czyli w tym konkretnym przypadku znacznik od ID = ‘root’. Znacznik ten znajdujący się w pliku index.html jednoznacznie identyfikuje miejsce, gdzie będzie wyświetlony nasz komponent.

W tym miejscu warto również powiedzieć jak działa sam React, aplikacja SPA, w swojej definicji działa bez klasycznego przeładowywania witryny. W takim wypadku musi istnieć jakiś sposób na aktualizowanie elementów interfejsu (dodanie elementu do listy, wybranie formularza, przycisku itp). React realizuje to w sprytny sposób – sam w sobie posiada tzw. wirtualny dom, czyli stucznie utworzony byt, który następnie przy wybranych zmianach porównuje ów wirutalny dom z tym rzeczywistym i oczywiście nanosi poprawki.

Tak oto dobrnęliśmy do końca pierwszego wpisu. Już wkrótce kolejny – a w nim napiszemy prosty program oparty na komponentach – przelicznik temperator w skali Celsjusza i Fahrenheita. Do przeczytania!