Poznaj React.js

Ten wpis jest 2 częścią z 39 w kursie 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

React jest biblioteką do budowania interfejsów w JavaScript, stworzoną przez Facebooka. React zdobył ogromną popularność wśród programistów i jest jedną z tych bibliotek, w których pisze się całkiem przyjemnie. Koncept Reacta opiera się o znane od dawna wzorce, które zostały tutaj odświeżone i zunifikowane: Jednokierunkowy przepływ danych i budowanie aplikacji w oparciu o komponenty.

Co to jest React.js?

Kurs React.js

React nie jest kompletnym frameworkiem — jest raczej biblioteką. Choć w Internecie nadal trwa święty spór na ten temat, to my po prostu umówmy się, że tak jest, okej? Przykładowo, żeby stworzyć routing lub aby wykonać zapytanie AJAX, musisz skorzystać z zewnętrznej paczki. Nie jest to jednak żadną przeszkodą w tworzeniu rozbudowanych aplikacji! Istnieje szereg dobrych praktyk, a ogromne community Reacta na całym świecie na pewno pomoże wybrać Ci prawidłowe rozwiązania. Na przykład: React nie sugeruje żadnego rozwiązania dla przechowywania stanu aplikacji – ale jest kilka popularnych i sprawdzonych bibliotek, które świetnie współgrają z Reactem — np. flux czy redux, o których możesz przeczytać w jednym z moich wcześniejszych artykułów (na pewno jeszcze wrócę do tego tematu):

Flux i Redux

Przykładowy komponent

Wracając do komponentów: Tworzenie aplikacji w React.js polega tak naprawdę na budowaniu i komponowaniu kolejnych komponentów. Trochę tak, jakbyśmy składali klocki (tylko, że te klocki najpierw sami tworzymy 😉 ).

Przykładowa aplikacja w Reakcie może wyglądać tak:

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);

Zobacz Pen Wstęp do React by Michał Miszczyszyn (@mmiszy) na CodePen.

Użyłem tutaj mieszanki JavaScript i JSX — czyli czegoś w rodzaju HTML-a wbudowanego w JS. Wygląda ciekawie? Później przestudiujemy to dogłębnie!

Dlaczego React?

Na czym polega jego przewaga, w stosunku do innych bibliotek i frameworków? Myślę, że mogę szybko wypunktować najważniejsze rzeczy:

  • Deklaratywny kod. Jeśli raz napiszesz komponent, dajmy na to Accordion, następnym razem by z niego skorzystać, wystarczy, że go zaimportujesz i wpiszesz w kodzie <MyAccordion />. Kod tworzony w Reakcie jest bardzo „reużywalny”, także pomiędzy różnymi aplikacjami.
  • Virtual DOM. Deklaratywny kod jest szybki, ponieważ aktualizacje drzewa DOM wspomaga Virtual DOM. Jest to technika, dzięki której renderowanie w przeglądarce jest dużo szybsze niż zwykle. Krótko mówiąc polega to na tym, aby aktualizować tylko te fragmenty drzewa, które uległy zmianie. Brzmi prosto? Koncepcyjnie wydaje się oczywiste, ale wcale nie jest takie łatwe 🙂
  • Bogate community, dużo gotowych rozwiązań. Ostatnio chciałem skorzystać z Filestack.io. I wiesz co? Udostępniają gotowy komponent dla Reacta! Obsługa formularzy, routing, komponenty z Bootstrapa czy inne elementy UI — to wszystko jest dla Ciebie, wysokiej jakości i wygodniejsze niż przysłowiowe wtyczki do jQuery. Dodajesz plik i już możesz napisać <BootstrapModal /> — boom! to jest aż tak proste.
  • Frajda z kodowania. Czynnik psychologiczny jest niesamowicie ważny. Jeśli już złapiesz Reactowy flow to na pewno zgodzisz się ze mną, że jest to jedna z najsympatyczniejszych bibliotek JS w dziejach ludzkości.

Co dalej?

To tylko lekkie wprowadzenie i jednocześnie początek zupełnie nowej formuły. W kolejnym artykule stworzysz swój pierwszy komponent! Oswoisz się z podstawami React.js i JSX bez konieczności konfigurowania czegokolwiek. Konkretnie, bez owijania w bawełnę 🙂 Poznaj React z naszymi szkoleniami!

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: Spróbuj edytować przykład wyżej (kliknij w guzik edit on CodePen) i spraw, aby komponent wyświetlał inny tekst. Podejrzyj źródła — jak wygląda wygenerowany przez React.js kod? Czy dostrzegasz coś szczególnego? Napisz o tym w komentarzu.

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