Pierwszy komponent w React.js

wp-content/uploads/2017/10/React_logo_wordmark-300x101-1-e1508612391308.png
  1. React.js: Wprowadzenie do kursu 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: globalny store i jednokierunkowy przepływ danych
  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.

Naucz się React na szkoleniu Type of Web!

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. React.js: Wprowadzenie do kursu 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: globalny store i jednokierunkowy przepływ danych
  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