Pierwszy komponent w React.js • Type of Web • Blog o programowaniu

Wróćmy do poprzedniego przykładu, tak zwanego Hello World, w React.js. Oto on, tym razem w pełnej okazałości:

<!DOCTYPE html>
<html lang="pl">

<head>
  <meta charset="UTF-8">
  <title>Pierwszy komponent w React.js</title>
  <script src="https://unpkg.com/react/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/babel-standalone/babel.js"></script>
</head>

<body>
  <div id="app"></div>
  <script type="text/babel">
    ReactDOM.render(
      <h1>Witaj, świecie!</h1>,
      document.getElementById('app')
    );
  </script>
</body>

</html>

Jeśli teraz skopiujesz ten kod i zapiszesz pod nazwą index.html , a następnie otworzysz w przeglądarce to zobaczysz napis „Witaj, świecie!”. Ale jak to działa?

Hello, world React.js

Biblioteki react.js, react-dom.js

Do działania Reacta w przeglądarce potrzebujesz przynajmniej dwóch bibliotek: react.js oraz react-dom.js. Ta pierwsze to wszystkie koncepty i funkcje React, natomiast ta druga odpowiada konkretnie za renderowanie efektów w przeglądarce.

Skąd ten podział? Wynika on z tego, że aplikacje napisane w React możemy renderować nie tylko w przeglądarkach internetowych, ale też np. na okularach VR (react-vr), natywnie na urządzeniach mobilnych (react-native) albo po stronie serwera w node.js (react-dom/server).

Wracając do kodu — chcesz renderować w przeglądarce, więc dodajesz te dwa pliki. To tyle.

Babel.js

Linijkę poniżej widzisz też dodany plik babel.js. Ale co to w ogóle jest Babel? Wspominałem już, że będę korzystał ze składni JSX, czyli takiego HTML-a wewnątrz JavaScript. Składnia ta nie jest wspierana bezpośrednio przez przeglądarki (jeszcze?), więc potrzebuję narzędzia, które tę składnię „przetłumaczy” na coś dla przeglądarek zrozumiałego. Więcej dokładnie o tym jak wygląda kod bez JSX powiem później, tutaj tylko krótko: Chcę używać JSX, więc dodaję Babela. I tyle :)

Babel dodatkowo też zamienia kod napisany w ES2017 na kod zrozumiały również dla starszych przeglądarek — np. ES5. Dzięki temu ten komponent zadziała nawet pod Internet Explorer ;)

script type="text/babel"

Babel jednak automatycznie nie działa na wszystkich skryptach na stronie. Kod, który ma być przez niego obsługiwany wymaga oznaczenia przy pomocy atrybutu type. Możemy użyć wartości text/babel lub text/jsx. Dzięki temu Babel bierze kod, transpiluje i przekazuje do przeglądarki :) I tak działa ta prosta aplikacja. Na potrzeby prostych przykładów możesz z tego korzystać. Później dowiesz się, jak przygotować swój kod tak, aby działał jak najlepiej i najwydajniej na produkcji dzięki webpack.

ReactDOM.render(…)

W kodzie, który widzisz powyżej, używam tylko jednej funkcji: ReactDOM.render Co ta funkcja robi? Bierze kod napisany w JSX, w którym zdefiniowano co ma być wyświetlone oraz element gdzie ma być wyświetlona wyrenderowana aplikacja.

W tym przypadku renderujemy tylko napis „Witaj, świecie!” wewnątrz elementu o id="app". Bez problemu możemy ten przykład pozmieniać. Wystarczy tylko znajomość HTML:

ReactDOM.render(
  <div>
    <h1>Witaj, świecie!</h1>
    <h2>Jestem ambitna/y, więc przerabiam kurs React.js!</h2>
  </div>,
  document.getElementById('app')
);

Ale ten przykład również nie jest zbyt ciekawy, prawda? Przecież aplikacje mają być interaktywne i „żywe”. Do tego będziesz musiał(a) zbudować komponent w React.js.

Komponenty

Wiele razy padło już słowo „komponent”, ale nie napisaliśmy jeszcze żadnego. Czas to zmienić! Najprostszy komponent to po prostu funkcja:

function MojKomponent() {
  return (
    <div>
      <h1>Witaj, świecie!</h1>
      <h2>Jestem ambitna/y, więc przerabiam kurs React.js!</h2>
    </div>
  );
}

To naprawdę tak proste :) Tworzysz funkcję i w środku niej zwracasz JSX. Następnie tej funkcji możesz użyć w znanym już kodzie:

ReactDOM.render(
  <MojKomponent />,
  document.getElementById('app')
);

Zobacz Codepen Wstęp do React. Zobacz Codepen Wstęp do React. Zobacz Codepen Wstęp do React.

zapisz się na szkolenie z React.

Jeśli chcesz na bieżąco śledzić kolejne części kursu React.js to koniecznie zapisz się na newsletter i śledź mnie na Facebooku.

Ćwiczenie

Ćwiczenie: Weź przykład powyżej i stwórz kolejne komponenty i spróbuj je wyświetlić obok siebie. Opisz w komentarzach jeśli jest z tym jakiś problem!