Co to jest React i create-react-app?

React i create-react-app to dwie odmienne frazy, a o fakcie tym developerzy są świadomi. Używają tych terminów zamiennie. Wyjaśniam z czego to wynika

React, React, wszędzie React. Jako, że sygnuję bloga nazwą tego frameworka (lub też biblioteki) oraz przez wzgląd na to, że znaczna część blog postów będzie właśnie z nim związana, to nie chciałbym zaczynać z wątkiem reactowym od bardzo technicznej strony. Bo pomimo, że prawdopodobnie wszyscy, czytający to developerzy i programiści mają wyobrażenie czym React jest, to jednak chciałbym otworzyć tą właściwą reactową historię na moim blogu jakimś (semi-) formalnym wpisem. Skupię się tu nad rozwinięciem definicji Reacta i całego reactowego ekosystemu, nawiązując do różnych technologi, korzystających z jego dóbr. Zapraszam do lektury.

A little bit of story

React narodził się na potrzeby twórców Facebooka niespełna dziesięć lat temu. Mały, nieznany wówczas framework wewnątrz korporacji Marka Zuckerberga, zaczął zyskiwać potencjał (prototyp Reacta nazywał się wtedy FaxJs), by z czasem zaskarbić sobie przychylność niechętnych do niego programistów, aż w końcu zawładnął światem frontendu. Jednocześnie zagarniając przy tym sporą część branży webdevelpomentu i branży IT w ogóle. Według tego zestawienia stackoverflow z 2020 roku wynika, ze z Reacta korzysta co trzeci developer - 35,9%. Tym samym zajmuje 2. miejsce pod względem popularności wśród twórców stron, ustępując jedynie jQuery, który w 2020 roku, w mojej opinii, nie powinien być traktowany poważnie (dlaczego mam takie zdanie o jQuery, przeczytasz tutaj). Taka liczba naprawdę robi wrażenie, tym bardziej, że React to stosunkowa młoda technologia i w ciągu kilku lat została najpopularniejszym środowiskiem webowym w czasie. Czym i dlaczego React zawdzięcza sobie taką renomę?

zdjęcie tematyczne
StackOverflow 2020 Developer Survey

Reaktywny framework

Problemy jakie stawiał zespół Facebooka tworzący pierwsze koncepcje Reacta, były problemami czysto interfejsowymi. Szukano rozwiązania, które mogłoby zarządzać treścią strony w sposób dynamiczny. Pierwsze wersje wspomnianego wcześniej przeze mnie prototypu Reacta FaxJS, dobrze wpisywały się w te założenia. Zdecydowano się więc na to. Wtedy także powstały koncepcje, które dzisiaj znamy jako propsy, state, czy podstawowy zamysł komponentów. No dobrze, ale gdzie tu jest coś o przydatności? Otóż React, jak sama jego nazwa, jest frameworkiem, który bardzo ułatwia reagowanie w aplikacji na zmiany w skrypcie. Umożliwia łatwe renderowanie treści w sposób dynamiczny na podstawie otrzymanych zmiennych i danych. Chcąc zaprojektować to, co w Reakcie możemy zaimplementować w kilka dłuższych lub krótszych chwil, w vanilla JS zajęłoby nam znacznie więcej czasu. Taka jest rola frameworków - ułatwianie życie programistom. To jest, w mojej opinii, główny powód, dlaczego React zyskał taką popularność - rozwiązanie na problemy, z jakimi mierzyli się programiści w czystym JavaScripcie. Podejrzewam, że z takim właśnie problemem borykali się programiści Facebooka. A dodatkowymi tutaj atutami z pewnością są: przyjazne API Reacta, niski próg wejścia oraz świetny ekosystem. I sukces na rynku gwarantowany.

Create-react-app

Prężnie rozwijający się React, wprowadzenie ES6 (a co za tym idzie Babela), powstanie bundlerów i builderów oraz wysyp wielu przydatnych, javascriptowych bibliotek, sprawiło, że konfiguracja aplikacji reactowej (a raczej projektu) stała się trudna, żmudna i ciężka do zrozumienia dla chcących zacząć przygodę z Reactem. Ogarnięcie całego środowiska projektu (w tym webpacka, dependencji, loaderów) było po prostu niezmiernie trudne i był to obiekt narzekań programistów przez długi czas. A jako, że potrzeba matką wynalazków, powstało rozwiązanie i na ten problem. W 2016 roku Facebook wyszedł na przeciw społeczności IT i wypuścił paczkę nazwaną create-react-app, dzięki której nie musimy już (na szczęście) męczyć się z konfiguracją Reacta i jego narzędzi. Poprzez jedno proste polecenie w konsoli, możemy stworzyć aplikację reactową ze skonfigurowanym bundlerem, loaderami, wczytywaniem assetów i masą modułów oraz dependencji, potrzebnych do poprawnego działania środowiska. Sam React jako framework i narzędzie napisane w javascripcie jest integralną częścią aplikacji create-react-app, lecz do używania samego Reacta, nie potrzebujemy tej paczki. Reacta wciąż możemy dodać do czystego pliku w VanillaJS. Sam próbowałem to tylko raz w 2016 roku, zanim powstał create-react-app. Ruszyłem wtedy Reacta i jakiś podstawowy kurs. Samego procesu dodawania frameworka do JSa nie pamiętam, a jedynie to, że był to proces dość trudny. I dlatego też pewnie szybko się znięchęciłem. Żałuję.

zdjęcie tematyczne
Gotowa aplikacja reactowa, dzięki create-react-app

Nie tylko rozwiązania od Facebooka

Create-react-app to nie wszystko. Oprócz niego powstały inne, świetne technologie oparte na Reakcie. Create-react-app to jedynie narzędzie do utworzenia tzw. aplikacji reactowej, ale nie React w czystej postaci. Sam więc React, może posłużyć innym twórcom w ich rozwiązaniach (tym bardziej, że jest na licencji open-source MIT). Przykładem takiego rozwiązania jest Gatsby.js - generator stron statycznych oparty na Reakcie. Aplikacja w Gatsbym będzie się różniła tym od aplikacji reactowej, że jest ona generowana statycznie.  Innym przykładem jest Next.js - framework oparty również na Reakcie, tym razem służący do generowania stron po stronie serwera, czyli Server Side Rendering. O tych wszystkich zagadnieniach planuję osobny wpis w niedalekiej przyszłości.

React jako krok w przyszłość

Jest więc jasnym, że nie tylko ludzie z Facebooka korzystają z dobrodziejstw tego frameworka. Rozumienie jak działa i jakie problemy rozwiązuje React jest, powiedziałbym, koniecznością u developera chcącego zacząć z nim przygodę. Masa świetnych narzędzi bazujących na Reakcie, obszerna społeczność i rozbudowany ekosystem tego frameworka sprawia, że ludzie po prostu lubią w nim pisać kod. A niski próg wejścia powoduje chęć i przyjazne nastawienie do niego przyszłych juniorów.

Narzędzie jakim jest React, zaczynało od malutkiej bilblioteczki, z której wyrosło coś, co definiuje współczesny webdevelopment jako poważne środowisko do pracy. Co 2. oferta pracy na stanowisko frontend developera wymaga znajomości Reacta. 90% firm o tych ofertach korzysta chociaż z jednej technologi opartej na Reakcie (jest jeszcze React Native służący do tworzenia aplikacji okienkowych i mobilnych). Warto się go więc uczyć, ale myślę, że kwestia pracy jest tu drugorzędna. Przede wszystkim React jest świetnym narzędziem do pisania świetnych stron internetowych. Oprócz tego, jest stosunkowo młody i wciąż prężnie rozwijany. Ponadto rozwiązuje masę problemów, z którymi mierzyli się programiści Facebooka, a dzięki którym, my jako frontend developerzy, nie musimy się już mierzyć.

Źródła

© Damian Kalka 2021
Wszelkie prawa zastrzeżone