Tworzenie aplikacji React.js dzięki create-react-app

Ten wpis jest 12 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

Do tej pory pokazałem kilka przykładów z React.js, a wszystkie wrzuciłem na codepen. Jak się pewnie domyślasz, tworzenie rozbudowanych aplikacji wygląda nieco inaczej. Dzielisz je na wiele plików, chcesz odpalać testy jednostkowe, a ostatecznie chciałabyś kod zminifikować.  create-react-app to paczka pozwalająca na łatwe stworzenie projektu opartego o React.js. Tworzy dla Ciebie strukturę katalogów i plików, zawiera wszystkie potrzebne na początek narzędzia i pozwala na odpalanie, testowanie i budowanie aplikacji. Czego chcieć więcej?

Początek z create-react-app

Zakładam, że znasz podstawy pracy z node i masz zainstalowany npm przynajmniej 5.2 lub nowszy.

Tego wszystkiego i znacznie więcej nauczymy Cię na szkoleniu: Poznaj React z naszymi szkoleniami!

Pracę z create-react-app zaczynamy od wrzucenia na głęboką wodę. Hop, robimy od razu projekt w React:

npx create-react-app react-test-create-react-app
Creating a new React app in /Users/michal/htdocs/react-test-create-react-app.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts...

Jak widzisz — instalują się paczki, których nazwy brzmią znajomo — react i react-dom. Dalej jest trochę więcej logów… i wreszcie instalacja zakończona, projekt stworzony! Gotowe. To już.

Narzędzia

Po zakończeniu instalacji, Twoim oczom ukazuje się instrukcja z komendami, z których możesz korzystać. Wejdź do folderu react-test-create-react-app i wtedy możesz korzystać z takich poleceń:

  • npm start — uruchamia serwer deweloperski — będziemy z tego polecenia korzystać najczęściej
  • npm run build — buduje wersję produkcyjną gotowej aplikacji — ten kod wrzucasz na serwer
  • npm test — odpala testy
  • npm run eject — usuwa create-react-app i kopiuje wszystkie pliki konfiguracyjne do projektu. Dzięki temu możesz je dowolnie zmodyfikować, ale nie będziesz już mógł korzystać z aktualizacji do create-react-app. Na razie tego nie używaj 🙂

Hej, to nie było takie straszne, prawda? Wydaje się nawet całkiem… proste? Tak!

Odpalamy

Wpisz więc npm start. Uruchamia się serwer i automatycznie otwiera się http://localhost:3000 w przeglądarce. Powinnaś/powinieneś widzieć taki ekran:

create-react-app starter

Jeśli to widzisz — wszystko poszło zgodnie z planem 🙂

Spójrz na widoczny komunikat — możesz już zacząć edytować plik src/App.js, a gdy go zapiszesz, przeglądarka automatycznie się odświeży i zmiany będą od razu widoczne. Bardzo wygodne 🙂 Zajrzyj do środka tego pliku, jest tam gotowy jeden komponent App.

Błędy

Spróbuj edytować App.js i zrób jakiś błąd. Nie wiem, jakikolwiek, np. zamiast <div napisz <<div i zapisz plik. Spójrz do przeglądarki:

create-react-app error

A teraz spójrz do konsoli:

create-react-app error

create-react-app automatycznie informuje Cię o wszystkich błędach składniowych — zarówno w przeglądarce, jak i w konsoli. Błędy są bardzo czytelnie oznaczone i konkretnie widać co jest do poprawy.

Testy

Uruchom npm test. Zobaczysz taki rezultat:

create-react-app test

W folderze z aplikacją jest plik App.test.js. Zawiera jeden test. Ten test sprawdza czy komponent renderuje się prawidłowo — i jak widzisz, działa 🙂 W jednym z kolejnych wpisów przyjrzę się bliżej testowaniu komponentów Reactowych z użyciem enzyme, którego na razie tutaj brakuje.

Build

A teraz spróbuj npm run build. Po chwili zobaczysz komunikat informujący, że wszystko przebiegło pomyślnie oraz rozmiary i nazwy wygenerowanych plików. Nazwy zawierają pewien trochę losowy ciąg (hasz), np. w moim przypadku jest to main.35d639b7.js i main.c17080f1.css. Jeśli zmienisz coś w tych plikach, nazwy również się zmienią — dzięki czemu nie masz problemów z cachem przeglądarek (tzw. cache busting).

W folderze build znajdziesz gotowy projekt, który możesz wrzucić na serwer i przetestować (albo po prostu odpalić lokalnie).

Co dalej?

W zasadzie to już wszystko co jest Ci potrzebne do pracy! Oczywiście create-react-app ma mnóstwo innych opcji, ale tutaj nie będę wszystkich opisywał 🙂 Jeśli będą Ci potrzebne — wspomnę o nich w kolejnych wpisach!

FAQ

Skąd się wzięły importexport w tym kodzie i dlaczego działają?
Moduły ECMAScript są teraz wygodnym i preferowanym sposobem pracy z React. Działają w create-react-app dlatego, że pod maską zaprzęgnięty do pracy jest babel. Nie myśl o tym na razie. Po prostu działa 🙂
Czy zapis import React from 'react' jest poprawny?
Nie. Pisałem o tym już w jednym z komentarzy: Taki zapis jest możliwy i działa tylko z Babelem i tylko przy włączonym odpowiednim presecie! Wynika to z tego, że React nie jest napisany z użyciem modułów ES i nie ma export default. Prawidłowy import, biorąc pod uwagę istniejący kod reacta, wygląda tak: import * as React from 'react'
Co robi i jak działa import './App.css';?
To jeden ze sposobów łączenia CSS z Reactem. Jest ich jeszcze kilka i omówię wszystkie w jednym z kolejnych wpisów. Na razie musisz tylko wiedzieć, że ten zapis powoduje, że style są tak jakby dodawane do jednego arkusza styli.
Czemu po zbudowaniu plik main.js waży więcej od moich plików z kodem?
Pamiętaj, że dołączone są do niego React i React-Dom (a także inne paczki, z których korzystasz).
Stworzyłem aplikację i chciałbym ją wrzucić na jakiś serwer. Jak mogę to zrobić?
Najłatwiej będzie Ci użyć GitHub Pages (bo korzystasz z GitHuba, prawda?). Przejrzyj ten fragment dokumentacji: create-react-app/README.md#github-pages
Co jeśli wyjdzie jakaś łatka / zmiana w create-react-app?
Zastosuj się do instrukcji pod konkretną wersją w create-react-app/CHANGELOG.md. Najczęściej wystarczy tylko zaktualizować react-scripts i już 🙂

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

Ćwiczenie

Ćwiczenie: Stwórz nowy projekt z użyciem create-react-app. Spróbuj zaimplementować filtrowanie, które pokazywałem w poprzednim odcinku kursu.

Ćwiczenie*: Zrób build i wrzuć projekt na GitHub Pages. Pochwal się 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