Jak w 5 minut zacząć pisać w React.js?

Przez

Czy przytrafiła Ci się kiedyś sytuacja, że miałeś/aś wielką motywacją do nauki czegoś nowego, ale podczas przechodzenia przez konfigurację, czytanie tutoriali, zaznajomienia się z narzędziami itd. – cały Twój zapał gdzieś zniknął?
Mnie przytrafiło się to przy okazji uczenia frameworków JS-owych. Nagle, poczułem, że jestem w świecie, którego całkowicie nie ogarniam i nie rozumiem. Kanonada nowych pojęć (node, npm, webpack, gulp, grunt, bower i wiele więcej), sprawiła, że skutecznie odechciało mi się uczyć nowej biblioteki. Nie mówię tutaj, że znajomość konfiguracji i narzędzi się nie przydaje, jednak w tym przypadku „próg wejścia” okazał się bardzo wysoki.

Jak skrócić ten proces?

Idealnym rozwiązaniem w takim przypadku okazuje się użycie gotowych skryptów. Bez instalowania node-a, konfiguracji webpacka etc. Jak to zrobić? Wystarczy skorzystać z narzędzia, które nazywa się unpkg.com, gdzie są umieszczone wszystkie biblioteki znajdujące się na npm (node package manager). Na stronie projektu znajdziemy krótki opis:

„unpkg is a fast, global content delivery network for everything on npm. Use it to quickly and easily load any file from any package…”

Czyli mamy dostęp do każdej biblioteki JS znajdującej się na npm za pomocą zwykłego linku. Nie potrzebujemy zaprzęgać całej machinerii w postaci konfiguracji builda, webpacka, pakietów npm et. Więc jak to wygląda w praktyce?

Tworzymy stronę typu hello world

Zacznijmy od utworzenia pliku html i umieszczenia bibliotek reacta:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Hello world</title>
  </head>
  <body>
    <div id="main"></div>

    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
  </body>
</html>

Dwa pierwsze skrypty powinny być oczywiste, ale po co mi ten cały babel.min.js? Babel to świetne narzędzie do utrzymywania kompatybilności wstecznej z poprzednimi wersjami przeglądarek i jednoczesne wykorzystanie najnowszych wersji jeżyka – w tym przypadku JS. Jeśli chcesz sprawdzic czy dana wersja przeglądarki wspiera używany przez Ciebie feature użyj strony: caniuse.com, możesz się mocno zdziwić czego nie można używać w szczególności w przypadku Internet Explorer-a. Dzięki babelowi piszesz kod w najnowszym standardzie np. es2017 i jesteś kompatybilny z es5 (starszą wersją JS).

W przypadku reacta będziemy korzystać z czegoś co nazywa się JSX, będziemy pisać kod JavaScriptowy w React, bardzo podobnie jakbyśmy to robili w zwykłym HTML, a babel ładnie zamieni to na kod bardziej JavaScriptowy.

Dodajemy własne pliki JS

Utwórzmy katalog js, a w nim plik main.js oraz helloWorldComponent.js i wstawmy do naszego pliku index.html:

<script src="js/helloWorldComponent.js" type="text/babel" ></script>
<script src="js/main.js" type="text/babel"></script>

Do pliku main.js dodaj:

ReactDOM.render(
  <HelloWorldIntro/>,
  document.getElementById('main')
)

class HelloWorldIntro extends React.Component {
    render(){
      return (
        <div>
          <h1>Hello World</h1>
          <p>It's my first webpage based on react!</p>
        </div>
      )
    }
}

Co tu się dzieje? To w zasadzie podstawowe operacje w Reacie, tworzymy nowy element i dodajemy go do div-a o identyfikatorze main. Plik main.js to taki inicjalizator, podpina utworzony komponent do naszego tagu div#main. W samym pliku helloWorldComponent tworzymy klasę, której zadaniem jest wyświetlenie prostego komunikatu do użytkownika. Dzięki JSX tworzenie elementów wygląda praktycznie tak jakbyśmy operowali na HTML-u, ale tak naprawdę to JavaScript korzystający pod spodem z metody createElement!

Otwieramy nasz plik index.html w przeglądarce i jest! Gotowy do pracy projekt, który możemy rozszerzać o nowe wymagania. Czyż to nie było szybkie? Warto nadmienić, że produkcyjnie nie jest to najlepsza forma tworzenia oprogramowania, narzędzia takie jak webpack dają nam dużo większą kontrolę nad procesem wytwarzania naszego softu, ale jeśli chcesz po prostu szybko wystartować… to po prostu zacznij to robić 🙂

Co dalej?

Warto dalej kontynuować naszą przygodę z Reactem (lub jakimkolwiek innym frameworkiem). To co polecam to metoda „learning by doing”, co to oznacza?

znajdź projekt, który możesz zrealizować w oparciu o nową technologię
spróbują podzielić swój projekt na jakieś małe kawałki (np. dające się stworzyć w ciągu kilku godzin)
zdobądź wiedzę, niezbędną do wykonania konkretnego zdania
wykonaj konkretną częśc, następnie weź na warsztat kolejny kawałek i spróbuj go zrealizować powiększając tym samym wiedzę z danego zakresu

Gdzie szukać informacji na temat reacta? Na pierwszym miejscu postawiłbym oficjalną dokumentację: reactjs.org, oraz youtube. Jeśli wolisz formy papierowe to najbardziej popularne na polskim rynku są 2 książki:

Jeśli dokonasz zakupy na którymś z powyższych linków do mnie trafi mała częśc, która pomoże mi rozwijać bloga. Ciebie nic to nie kosztuje, a ja będę mógł dalej dzielić się wiedzą 🙂

Dzięki za dziś i udanej przygody z reactem.