Pierwszy komponent w React.js

wp-content/uploads/2017/10/React_logo_wordmark-300x101-1-e1508612391308.png
  1. Wprowadzenie do kursu React.js od podstaw
  2. Poznaj React.js
  3. Pierwszy komponent w React.js
  4. Props czyli atrybuty w React.js
  5. Podział na komponenty w React.js
  6. Klasy jako komponenty React.js
  7. Interakcja z komponentami React.js
  8. Stan komponentów React.js
  9. State w React.js 2
  10. Metody cyklu życia komponentu w React.js
  11. React.js w przykładach: filtrowanie statycznej listy
  12. Tworzenie aplikacji React.js dzięki create-react-app
  13. React.js na GitHub Pages dzięki create-react-app
  14. Testowanie aplikacji React.js — podstawy Enzyme
  15. Testowanie React.js w Enzyme — props, state i interakcje
  16. Poprawne bindowanie funkcji w React.js
  17. Odpowiadam na pytania: Babel, ECMAScript, destrukturyzacja, onClick, className
  18. Komunikacja pomiędzy komponentami w React.js
  19. Komunikacja z API w React.js
  20. Formularze w React.js — kontrolowane komponenty
  21. Formularze w React.js — niekontrolowane komponenty
  22. Odpowiadam na pytania: props, nawiasy klamrowe, funkcje vs klasy, import react
  23. TDD w React.js z pomocą react-testing-library
  24. Flux i Redux
  25. React + Redux — kurs: wprowadzenie i podstawy
  26. React + Redux — filtrowanie listy, proste selektory
  27. Projektowanie komponentów: Presentational & Container Components
  28. Asynchroniczność w Redux: redux-thunk
  29. Kiedy używać state, a kiedy Redux?
  30. Nowe metody cyklu życia: getDerivedStateFromProps i getSnapshotBeforeUpdate
  31. Leniwe ładowanie komponentów w React dzięki import
  32. Higher Order Reducers — Redux i powtarzanie kodu
  33. React Hooks — wprowadzenie i motywacja
  34. React Hooks: useState, czyli stan w komponentach funkcyjnych
  35. React Hooks: useState — wiele stanów, callbacki i inne niuanse
  36. React Hooks: useEffect — efekty uboczne w komponencie
  37. React Hooks a żądania do API
  38. useReducer — przenoszenie logiki poza komponent
  39. useMemo, useCallback, czyli rozwiązanie problemów ze zmieniającymi się propsami

W tym wpisie pokażę prosty komponent React.js, opiszę jego budowę i podstawowe elementy. Napiszemy też (razem) pierwszą pełnoprawną aplikację w React, którą będziesz mogła/mógł uruchomić u siebie na dysku. Będzie to baza do dalszych części kursu React.js.

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')
);

Zauważ, że funkcji MojKomponent używam tutaj tak, jakby była nowym elementem w HTML! Sprawia to, że budowanie aplikacji z komponentów jest bajecznie łatwe i przyjemne. Zobaczmy to na żywo:

Zobacz Pen Pierwszy komponent w React.js by Michał Miszczyszyn (@mmiszy) na CodePen.

W kolejnej części opiszę jak wygląda parametryzowanie komponentów: Nauczysz się wpływać na komponenty dzięki mechanizmowi tzw. props.

Poznaj React na naszym szkoleniu!

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!

Nawigacja po kursie:
  1. Wprowadzenie do kursu React.js od podstaw
  2. Poznaj React.js
  3. Pierwszy komponent w React.js
  4. Props czyli atrybuty w React.js
  5. Podział na komponenty w React.js
  6. Klasy jako komponenty React.js
  7. Interakcja z komponentami React.js
  8. Stan komponentów React.js
  9. State w React.js 2
  10. Metody cyklu życia komponentu w React.js
  11. React.js w przykładach: filtrowanie statycznej listy
  12. Tworzenie aplikacji React.js dzięki create-react-app
  13. React.js na GitHub Pages dzięki create-react-app
  14. Testowanie aplikacji React.js — podstawy Enzyme
  15. Testowanie React.js w Enzyme — props, state i interakcje
  16. Poprawne bindowanie funkcji w React.js
  17. Odpowiadam na pytania: Babel, ECMAScript, destrukturyzacja, onClick, className
  18. Komunikacja pomiędzy komponentami w React.js
  19. Komunikacja z API w React.js
  20. Formularze w React.js — kontrolowane komponenty
  21. Formularze w React.js — niekontrolowane komponenty
  22. Odpowiadam na pytania: props, nawiasy klamrowe, funkcje vs klasy, import react
  23. TDD w React.js z pomocą react-testing-library
  24. Flux i Redux
  25. React + Redux — kurs: wprowadzenie i podstawy
  26. React + Redux — filtrowanie listy, proste selektory
  27. Projektowanie komponentów: Presentational & Container Components
  28. Asynchroniczność w Redux: redux-thunk
  29. Kiedy używać state, a kiedy Redux?
  30. Nowe metody cyklu życia: getDerivedStateFromProps i getSnapshotBeforeUpdate
  31. Leniwe ładowanie komponentów w React dzięki import
  32. Higher Order Reducers — Redux i powtarzanie kodu
  33. React Hooks — wprowadzenie i motywacja
  34. React Hooks: useState, czyli stan w komponentach funkcyjnych
  35. React Hooks: useState — wiele stanów, callbacki i inne niuanse
  36. React Hooks: useEffect — efekty uboczne w komponencie
  37. React Hooks a żądania do API
  38. useReducer — przenoszenie logiki poza komponent
  39. useMemo, useCallback, czyli rozwiązanie problemów ze zmieniającymi się propsami