ReactJS Wprowadzenie

Praktyczne wprowadzenie do ReactJS 2020 | #1

React jest jedną z najpopularniejszych bibliotek języka Javascript, służącą do tworzenia interfejsów użytkownika, a konkretniej tych webowych, czyli stron internetowych. Został on stworzony  w podziemiach tajnej fabryki Facebooka ;), inne duże korporacje, jakie z niego korzystają to PayPal czy Netflix. Na chwilę obecną można śmiało powiedzieć, ze React stał się dominującą biblioteką w ekosystemie JS. Wprowadzenie React JS utworzymy, krok po kroku, pierwszą, pełnoprawną aplikację internetową.

Najważniejsza, dla mnie, cecha Reacta

Jestem programistą wychowanym na Javie i rzeczą, która przekonała mnie do Reacta jest podział aplikacji Javascriptowej na komponenty, czyli odizolowane od siebie fragmenty kodu, gdzie każdy odpowiada za inny kawałek strony, dzięki czemu źródła programu stają się o wiele bardziej czytelne i uporządkowane.

Czyli jeden wielki plik index.html w pseudokodowej postaci dla galerii obrazków:

<body>
    <!-- Header starts -->
    <div>
      <div>
        <h2><center>...</h2></center>
      </div>
    <div>
    <!-- Header ends -->
    <!-- Images -->
    <div>
      <!-- Image -->
      <div>
        <img>...</img>
      <div>
      <!-- Image -->
      <div>
        <img>...</img>
      <div>
     ....
</body>

Rozbija nam się, w przybliżeniu, na:

<body>
   <Header/>
   <Image/>
   <Image/>
</body>

Ów Header i Image to właśnie komponenty. Prawda, że wygląda to obiecująco?

Wprowadzenie React na przykładzie prostej aplikacji

Głównym czynnikiem hamulcowym na początku istnienia Reacta był poziom komplikacji jego konfiguracji. Trzeba było odpowiednio zestawić Webpack, Babel, NPM. Nawet doświadczonemu programiście Javascript potrafiło to zająć trochę czasu… a wszystkich pozostałych po prostu odrzucało.

Następnie pojawił się create-react-app, czyli starter projektów Rectowych, który zestawia to wszystko za nas, schowane, ukryte. Nawet nie musimy wiedzieć czym Babel czy Webpack jest. Szczerze? Ja nie wiedziałem, dzięki czemu mogłem szybko zabrać się za samego Reacta bez babrania się w konfiguracji środowiska, a braki uzupełniać później, w miarę potrzeb.

CRA używany był w oryginalnym poście, teraz, przy okazji aktualizacji zmienimy nieco taktykę. Postawimy projekt sami, zainstalujemy tylko niezbędne biblioteki, a tylko część odpowiedzialną za “złożenie” projektu w plik wynikowy oddelegujemy do Parcela. Parcel jest to bundler projektów JS – w dużym uproszczeniu bierze wszystkie pliki naszego projektu i klei je w jeden plik wynikowy, który umieszczamy na serwerze. Te samą funkcję pełni Webpack. Różnica jest taka, że Webpack jest świetny do niestandardowych zadań, wymaga odrobinę (albo gigantyczną ilość, w zależności od zadania) konfiguracji, natomiast Parcel doskonale sprawdza się do standardowych projektów i wskazuję się mu tylko plik wejściowy naszego projektu (np. index.html) i odpala. Cała reszta dzieje się automagicznie. Więc wciąż trochę magii jest jak w create-react-app ale jest jej zdecydowanie mniej.

Szkielet projektu

Zacznijmy od utworzenia folderu mygallery i odpaleniu komendy npm init. Acha, zakładam, że masz zainstalowanego NodeJS i jakiś edytor, na przykład Visual Studio Code. Jeśli nie – zrób to teraz, następnie otwórz ten katalog w Visual Studio Code, wybierz z górnego menu Terminal -> New i dopiero potem odpal npm init w folderze mygallery. Zapyta nas o parę rzeczy. Wybieramy wszędzie domyślne wartości używając entera.

Zostanie stworzony plik package.json, zawierający m.in. listę zewnętrznych zależności naszego projektu czy skrypty pomocnicze.

Wraz z Node instaluje nam się npm, czyli manager zewnętrznych zależności naszego projektu. Użyjemy go do zainstalowania React i wspomnianego parcel. Odpalamy w terminalu

npm install react, react-dom –save

oraz

npm install parcel-bundler –save-dev

Gdy po zakończeniu pracy tych komend otworzymy plik package.json ujrzymy tam dwa nowe wpisy – dependencies i devDependencies.

{
  "name": "mygallery",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^16.12.0",
    "react-dom": "^16.12.0"
  },
  "devDependencies": {
    "parcel-bundler": "^1.12.4"
  }

Pierwsze z nich są to zależności naszego programu, drugie natomiast to zależności deweloperskie – czyli takie, które są przydatne podczas tworzenia programu, natomiast klient w zupełności ich nie potrzebuje.

Następnie tworzymy katalog src, a w nim plik index.html. Jeśli używamy Visual Studio Code to możemy użyć skrótu html:5 by stworzyć szkielet html. Od razu zmieńmy title naszej strony na bardziej stosowny i dodajmy sekcję main o id “root” w body.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Moja Galeria</title>
  </head>
  <body>
    <main id="root"></main>
  </body>
</html>

Pierwszy komponent React

Stwórzmy teraz plik App.js w katalogu src, a w nim kawałek skryptu

import React from "react";
import ReactDOM from "react-dom";

export const Comp = () => React.createElement("h1", {}, "Hello!");

ReactDOM.render(React.createElement(Comp), document.getElementById("root"));

A na końcu index.html dodajemy ładowanie skryptów

<body>
    <main id="root"></main>
    <script src="./App.js"></script>
</body>

Teraz komendą npx parcel .\src\index.html odpalamy nasz projekt w trybie deweloperskim.

Otwieramy adres, który podpowiedział nam Parcel w konsoli (localhost:1234, zazwyczaj) i powinniśmy zobaczyć na stronie radosne “Hello!”, nasz pierwszy Reactowy komponent.

Ale.. co tak w ogóle się podziało w tych dwóch linijkach?

W pierwszej stworzyliśmy komponent Reactowy, odbicie klasycznego taga h1 po stronie React. Drugi parametr metody, pusty obiekt, to atrybuty dla taga, i narazie tyle w temacie. Ostatni parametr to zawartość nowo utworzonego komponentu. W naszym wypadku jest to prosta wartość tekstowa “Hello!”.

Druga linijka, tam, gdzie używamy ReactDOM, służy do tego, by Reactowy komponent podpiąć (i przetłumaczyć po drodze) na klasyczny element drzewa DOM naszej strony internetowej. Powoduje to, że na naszej stronie mamy div o id root, pod który został podpięty tag h1 z naszego komponentu Reactowego.

Wprowadzenie React – JSX

W praktyce nikt nie piszę komponentów Reactowych z użyciem React.createElement. Zamiast tego stosuję się JSX (JavaScript eXtended). Jest to format zbliżony do HTML, który następnie jest tłumaczony (przez narzędzie o nazwie Babel, które jest zawarte w Parcelu) na React.createElement.

Po przetlumaczeniu na JSX nasz komponent będzie wyglądał tak:

import React from "react";
import ReactDOM from "react-dom";

export const Comp = () => <h1>Hello!</h1>

ReactDOM.render(<Comp />, document.getElementById("root"));

Wygląda to teraz jakby funkcja Comp zwracała tag HTML. Jednak pamiętajmy, że JSX NIE jest to HTML pisany w pliku .js. Jest to semantyczny dodatek, który potem jest TŁUMACZONY na czysty javascript, a konkretnie na React.createElement.

Komponent dla obrazów

Zamieńmy nasz komponent na taki, który wyświetli obraz na podstawie adresu URL

import React from "react";
import ReactDOM from "react-dom";

export const Image = () => (
  <img src="https://images.unsplash.com/photo-1508138221679-760a23a2285b"></img>
);

ReactDOM.render(<Image />, document.getElementById("root"));

Powinniśmy otrzymać śliczny (i zarazem gigantyczny) obraz samolotu w środku lasu 😉

Szał, prawda? 🙂

W następnej części cyklu dowiemy się o co chodzi z reużywalnością komponentów i pokażemy parę obrazków więcej, a i przy okazji dostosujemy rozmiar.

Tradycyjnie zapraszam do dołączenia do newslettera, gdzie materiały odnośnie React również mają swoje miejsce.

2 myśli w temacie “Praktyczne wprowadzenie do ReactJS 2020 | #1”

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *