Konfiguracja projektu React przy użyciu Create React App

React to jedna z najpopularniejszych bibliotek JavaScript do tworzenia aplikacji front-endowych. To biblioteka open-source, która została pierwotnie opracowana przez Facebooka. React szybko stał się popularny dzięki tworzeniu szybkich aplikacji za pomocą JSX – paradygmatu programowania, który łączy JavaScript ze składnią przypominającą HTML.

Wcześniej konfiguracja projektu React była skomplikowanym procesem. Wymagała ręcznej konfiguracji następujących komponentów:

• Systemu budowania
• Transpilera kodu (konwertuje nowoczesną składnię na kod czytelny dla przeglądarki)
• Podstawowej struktury katalogów dla projektu

Na szczęście te dni już minęły, a to dzięki Create React App. To wspaniałe narzędzie, które automatyzuje wszystkie te kroki. Create React App dba o transpilację kodu, linting, testowanie i systemy budowania. Ponadto zawiera serwer obsługujący hot reloading, co oznacza odświeżanie stron internetowych w miarę wprowadzania zmian. Oczywiście wszystko to odbywa się w ramach zorganizowanej struktury katalogów.

Krótko mówiąc, nie ma potrzeby ręcznego konfigurowania systemów budowania, takich jak Webpack, ani transpilera, takiego jak Babel. Mając mniej rzeczy na głowie, możesz w pełni skupić się na rozwoju front-endu. Create React App pozwala rozpocząć pracę z React przy minimalnym przygotowaniu.

W tym poradniku pokażemy, jak korzystać z Create React App i uruchomić podstawową aplikację React. Może ona służyć jako fundament dla każdego przyszłego projektu aplikacji.

Wymagania wstępne

Aby wykonać kroki przedstawione w tym samouczku, musisz mieć wcześniej skonfigurowane następujące oprogramowanie.

• • Odpowiednio skonfigurowany serwer Ubuntu. Możesz postępować zgodnie z instrukcjami konfiguracji serwera Ubuntu na CloudSigma.
  • Zainstalowana najnowsza wersja Node.js. Oto przewodnik krok po kroku dotyczący instalacji Node.js na Ubuntu.

Krok 1: Utworzenie dedykowanego katalogu projektu npm

Dla pakietów Node.js domyślnym menedżerem pakietów jest npm. Użyjemy npm do utworzenia dedykowanego katalogu projektu. Będzie on zawierał ważne pliki, takie jak package.json, które przechowują wszystkie metadane o projekcie i dodatkowe moduły zależności Node.js. JSON to standardowy format udostępniania danych oparty na obiektach JavaScript. Zapoznaj się z tym poradnikiem if you want to learn more about JSON.

Najpierw utwórz dedykowany katalog:

Następnie powiemy npm o zainicjowanie środowiska programistycznego wewnątrz pliku. Spowoduje to utworzenie pliku package.json wymaganego dla projektu. Zmień bieżący katalog:

Uruchom polecenie npm init:

Pamiętaj, że jeśli chcesz, aby ten katalog był częścią repozytorium git, zaleca się jego wcześniejsze skonfigurowanie. Skrypt inicjujący automatycznie go wykryje i odpowiednio wszystko skonfiguruje. Po zakończeniu w katalogu powinien znajdować się plik package.json Sprawdź go za pomocą edytora tekstu:

Krok 2: Utworzenie projektu React za pomocą Create React App

W tym kroku wywołamy Create React App, aby utworzyć nasz przykładowy projekt React. Ten skrypt skopiuje wszystko, co niezbędne, do nowego katalogu wraz ze wszystkimi zależnościami. Menedżer pakietów npm zawiera również narzędzie npx. Służy ono do uruchamiania pakietów wykonywalnych. Użyjemy go do uruchomienia skryptu Create React App bez faktycznego pobierania projektu.

Wykonanie spowoduje uruchomienie create-react-app w określonym katalogu. Uruchomi również polecenia npm install w celu zainstalowania zależności. Dla ułatwienia użyjemy nazwy cloudsigma-react-react-tutorial. Uruchom następujące polecenie:

Na koniec procesu zobaczysz następujący komunikat. Jest to komunikat o powodzeniu, jeśli instalacja przebiegła pomyślnie. Informuje on również o lokalizacji, w której projekt został utworzony.

Krok 3: Zastosowanie React-Scripts

Teraz krótko omówimy różne react-skrypty zainstalowane podczas instalacji.

• • Uruchomimy test skrypt, aby wykonać kod testowy.
  • Skrypt build utworzy zminimalizowaną wersję naszego projektu (dla środowiska produkcyjnego).
  • Na koniec skrypt eject oferuje pełną kontrolę nad dostosowywaniem.

Najpierw sprawdź zawartość katalogu projektu React:

Oto opis każdego pliku:

• • node_modules/: Ten katalog zawiera wszystkie zewnętrzne biblioteki JavaScript, które będą używane przez aplikację. Rzadko zachodzi potrzeba, aby tu zaglądać.
  • public/: Zawiera podstawowe pliki HTML, JSON i obrazy. Służy jako katalog główny projektu.
  • src/: Ten katalog zawiera kody JavaScript React dla naszego projektu. To tutaj spędzimy większość czasu. Przyjrzymy się temu katalogowi bliżej w kolejnej części poradnika.
  • .gitignore: Jest to plik, który opisuje, jakie katalogi git będzie ignorować, na przykład katalog node_modules. Ogólnie lepiej jest wykluczyć katalogi zawierające duże pliki lub pliki dziennika (logi), których nie trzeba dołączać do systemu kontroli wersji. W tym przypadku będzie on również zawierał pewne katalogi specyficzne dla Reacta.
  • README.md: Jest to plik markdown zawierający wiele przydatnych informacji o Create React App. Zawiera na przykład podsumowanie poleceń i linki do zaawansowanej konfiguracji. Na razie nie mamy z nim nic do roboty. Jednak w miarę rozwoju projektu będziesz dodawać więcej dokumentacji na jego temat.

Pliki package.json oraz package-lock.json są używane przez npm. Podczas uruchamiania początkowego polecenia npx, utworzyło ono podstawowy projekt. Po zainstalowaniu dodatkowych zależności utworzyło ono package-lock.json. npm używa package-lock.json, aby upewnić się, że pakiety pasują do dokładnych wersji. W ten sposób, jeśli ktoś inny zainstaluje Twój projekt, również otrzyma identyczne zależności. Ponieważ jest on tworzony i zarządzany automatycznie, rzadko musisz go modyfikować.

Ostatnim plikiem, o którym musimy porozmawiać, jest package.json. Zawiera on metadane dotyczące projektu. Metadane te mogą obejmować na przykład tytuł projektu, numer wersji i zależności. Zawiera również skrypty, których można użyć do uruchomienia projektu. Sprawdź zawartość pliku package.json:

Jest to plik JSON z różnymi obiektami. Spójrz na obiekt scripts. Zawiera on cztery różne skrypty:

• • start
  • build
  • test
  • eject

Skrypty te są wymienione według ich ważności. Skrypt start uruchamia lokalny serwer deweloperski. Następnie szczegółowo omówimy, jak można korzystać z pozostałych skryptów.

• • Skrypt Build

Aby uruchomić skrypt npm, struktura polecenia jest następująca:

Aby uruchomić skrypt build, użyj następującego polecenia:

Rozpocznie to proces kompilacji kodów do użytecznego pakietu. Po zakończeniu sprawdź katalog wyjściowy:

Zauważ, że dostępny jest nowy katalog build/. Zawiera on zminimalizowaną i zoptymalizowaną wersję pozostałych plików. Zaleca się umieszczenie go w pliku .gitignore, ponieważ zawsze możemy go wygenerować za pomocą skryptu build.

• • Skrypt Test

Skrypt test jest jednym z tych skryptów, które nie wymagają parametru run, aby npm go uruchomił. Jednak z nim również będzie działać poprawnie. Po uruchomieniu ten skrypt uruchomi narzędzie do testowania o nazwie Jest. Tester wyszukuje dowolny plik projektu z rozszerzeniami plików .spec.js lub test.js i uruchamia te pliki.

Następujące polecenie npm uruchomi skrypt test:

W danych wyjściowych należy zwrócić uwagę na kilka rzeczy. Pamiętasz, że narzędzie testowe szuka tylko plików z określonymi rozszerzeniami? W tym przypadku istnieje tylko jeden zestaw testów (tylko jeden plik z .test.js rozszerzenie). Zawiera tylko pojedynczy test. Jest potrafi automatycznie wykrywać testy w hierarchii kodu, więc możesz swobodnie zagnieżdżać testy w katalogu.

Ponadto Jest nie tylko uruchamia test raz i kończy działanie. Działa on nadal w terminalu. Jeśli w kodzie źródłowym zostaną wprowadzone jakiekolwiek zmiany, uruchomi testy ponownie. Jest pozwala również na ograniczenie uruchamianych testów. Na przykład, naciskając 0, możesz nakazać Jest przetestowanie tylko tych plików, które uległy zmianie. W miarę jak zestawy testów rosną, ta opcja pozwala zaoszczędzić mnóstwo czasu. Aby wyjść z programu uruchamiającego testy Jest, naciśnij q.

• • Skrypt Eject

Skrypt eject kopiuje wszystkie zależności i pliki konfiguracyjne do projektu, oferując pełną kontrolę nad kodem. Robiąc to, usuwasz jednak projekt ze zintegrowanego łańcucha narzędzi Create React App. Po uruchomieniu nie ma możliwości cofnięcia tej operacji.

Zaletą Create React App jest to, że zdejmuje z Ciebie ciężar licznych konfiguracji. Budowanie jakiejkolwiek nowoczesnej aplikacji JavaScript wymaga współpracy wielu narzędzi. Create React App obsługuje wszystkie konfiguracje za Ciebie, więc ejectowanie projektu oznacza, że od tej pory musisz robić to wszystko ręcznie.

Jedną z zauważalnych wad Create React App jest to, że ponieważ samodzielnie zarządza wszystkimi konfiguracjami, nie oferuje pełnej możliwości dostosowania projektu. Dla większości projektów nie stanowi to problemu. Jeśli jednak chcesz przejąć pełną kontrolę nad projektem, będziesz musiał wykonać eject kodu. Po wykonaniu eject nie będziesz mógł aktualizować projektu do nowych wersji Create React App. Musisz ręcznie zarządzać wszystkimi ulepszeniami.

Krok 4: Uruchomienie serwera

Teraz zainicjujemy lokalny serwer i uruchomimy projekt w przeglądarce internetowej. Aby uruchomić serwer, mamy pod ręką kolejny skrypt. Jego wykonanie nie wymaga polecenia npm run . Po uruchomieniu skrypt startuje lokalny serwer, uruchamia kod projektu, włącza proces obserwatora (watcher) i nasłuchuje zmian w kodzie. Zmiany są bezpośrednio widoczne w przeglądarce. Poniższe polecenie uruchomi serwer:

Dane wyjściowe pokażą adres URL, pod którym można wyświetlić projekt w przeglądarce. Wyświetlą również różne informacje o uruchomionym projekcie. Otwórz ten adres URL w przeglądarce:

Jak pokazują dane wyjściowe, Create React App używa portu 3000 do obsługi projektu. Jeśli port był już zajęty, Create React App użyje kolejnego dostępnego portu. Jeśli masz skonfigurowaną zaporę sieciową (firewall), musi ona zezwalać na ruch do portu 3000 (lub portu, który zgłasza Create React App). Możesz dowiedzieć się więcej o zarządzaniu zaporą sieciową UFW tutaj.

Aby wyłączyć serwer, naciśnij Ctrl+C w oknie terminala. Spowoduje to zakończenie działającego procesu (instancji serwera).

Krok 5: Modyfikacja strony głównej

Następnie dowiemy się, jak modyfikować kod przechowywany w katalogu public/. Zawiera on bazową stronę HTML i służy jako katalog główny projektu. Choć w przyszłości możesz nie potrzebować go edytować, stanowi on podstawę projektu.

Najpierw uruchom serwer za pomocą npm, a następnie przejdź do katalogu public/:

Katalog będzie zawierał pliki takie jak favicon.ico, logo192.png, logo512.png, itp. Są to ikony, które użytkownik odwiedzający stronę zobaczy na swojej karcie, w przeglądarce lub na telefonie. Przeglądarka automatycznie wybierze ikonę o odpowiednim rozmiarze. Docelowo zastąpisz je ikonami odpowiednimi dla Twojego projektu. Na razie zostawimy je bez zmian.

Plik manifest.json zawiera ustrukturyzowany zestaw metadanych. Opisuje on projekt, zawiera listę dostępnych ikon i nie tylko.

Plik robots.txt zawiera informacje dla robotów indeksujących. Roboty te “przeszukują” sieć World Wide Web, indeksując strony dla wyszukiwarek. Nie ma potrzeby modyfikowania tego pliku, chyba że masz ku temu konkretny powód. Na przykład możesz chcieć sprawić, aby określone adresy URL prowadzące do konkretnych treści nie były łatwo dostępne. Dodaj tę lokalizację do robots.txt, a nie zostanie ona zaindeksowana przez wyszukiwarki.

Plik index.html jest korzeniem naszej aplikacji. Przy każdym dostępie do aplikacji, to jest plik, który jest serwowany. To jest plik, który widzisz na ekranie. Przyjrzyjmy mu się szybko. Otwórz go w edytorze tekstu:

To całkiem krótki plik. Zauważ, że nie ma żadnego obrazu ani słów w <body>. React buduje tę zawartość przy użyciu własnego silnika i wstrzykuje ją za pomocą JavaScriptu. Jednak React musi wiedzieć, gdzie wstrzyknąć kod. Plik index.html służy do tego celu.

Zmieńmy <title> na Moja React Aplikacja:

Następnie zapisz plik i zamknij edytor. Teraz sprawdź stronę internetową w przeglądarce:

Jak widzisz, tytuł karty zmienił się na Moja React Aplikacja. Jeśli nie zmienił się automatycznie, odśwież stronę, naciskając F5 lub Ctrl+R.

Wróćmy do edytora tekstu. Wszystkie projekty React muszą zaczynać się od elementu głównego. Na jednej stronie może być ich więcej niż jeden. Jednak co najmniej jeden jest obowiązkowy. Informuje on React, gdzie umieścić wszystkie wygenerowane kody HTML. W naszym index.html, znajdź lokalizację elementu <div id="root">. To jest <div>, którego React będzie używać do przyszłych zmian. Spróbuj zmienić wartość id z root na base:

 

 

Następnie odśwież stronę w przeglądarce. Nie wyświetli ona żadnej zawartości. Jak pokazują Narzędzia deweloperskie przeglądarki Firefox, zgłaszany jest błąd:

Wróć do edytora tekstu i zmień wartość id z powrotem na root:

Krok 6: Znacznik nagłówka i zmiany stylów

Do tej pory uruchomiliśmy lokalny serwer i wprowadziliśmy drobne zmiany w głównym pliku HTML. Teraz będziemy pracować z komponentami React znajdującymi się w katalogu src/ katalogu. Wprowadzimy zmiany w kodzie CSS i JavaScript. Zmiany zostaną automatycznie zastosowane przy użyciu mechanizmu hot reloading.

Jeśli serwer został zatrzymany, uruchom go za pomocą npm. Następnie przyjrzyj się zawartości src/ katalogu:

Znajduje się tu wiele plików JavaScript i CSS. Omówimy je jeden po drugim.

• ServiceWorker.js

To ważny plik, jeśli chcesz tworzyć progresywne aplikacje internetowe. Ten service worker oferuje różne funkcjonalności, takie jak powiadomienia push, buforowanie offline itp. Na razie zostawimy go w spokoju.

• SetupTests.js i App.test.js

Jak sugerują nazwy tych plików, służą one do testowania plików. Za każdym razem, gdy uruchamialiśmy skrypt test za pomocą npm, uruchamiał on te pliki. Plik setupTests.js zawiera kilka niestandardowych metod expect.

Przyjrzyjmy się App.test.js. Otwórz go w edytorze tekstu:

Zawiera on podstawowy test, który szuka frazy learn react w dokumencie. Jeśli masz otwartą kartę przeglądarki, możesz zobaczyć tę frazę na stronie. W przeciwieństwie do innych testów jednostkowych, testy React są inne. Ponieważ komponenty mogą zawierać informacje wizualne, takie jak znacznik (oraz logikę manipulacji danymi), tradycyjne testy jednostkowe nie sprawdzają się łatwo. Pod tym względem testowanie React lepiej opisać jako formę testowania funkcjonalnego lub integracyjnego.

• Pliki CSS

Dostępne są różne pliki stylów: App.css, index.css oraz logo.svg. W React możesz stosować wiele metod stylizowania. Najprostszym sposobem jest pisanie zwykłego CSS, ponieważ nie wymaga to żadnej dodatkowej konfiguracji.

Możesz bezpośrednio importować CSS do komponentu. Pozwala to na podział plików CSS tak, aby miały zastosowanie tylko do poszczególnych komponentów. W rzeczywistości nie oddzielasz CSS od JavaScriptu. Raczej grupujesz wszystkie powiązane elementy (CSS, JavaScript, obrazy i znaczniki) razem.

Otwórz App.css za pomocą edytora tekstu:

To standardowy plik CSS bez żadnych specjalnych preprocesorów CSS. Możesz je dodać później, jeśli chcesz. Create React App dąży do zachowania neutralności, oferując jednocześnie solidne, gotowe do użycia środowisko.

Wprowadźmy zmianę i zobaczmy ją w działaniu. Zmień wartość background-color na blue:

Sprawdź zmianę w przeglądarce:

• • Index.js

Teraz czas na wprowadzenie zmian w kodzie JavaScript React. Otwórz index.js za pomocą edytora tekstu:

Na samej górze importowane są React, ReactDOM, index.css, App, oraz serviceWorker. Poprzez zaimportowanie React, pobieramy kod potrzebny do konwersji JSX na JavaScript. ReactDOM to kod, który łączy nasz kod React z elementem bazowym ( index.html, na przykład). Spójrz na poniższą linię:

Instruuje to React, aby znalazł id o nazwie root i wstrzyknął tam kod React. <App/> jest elementem głównym, od którego wszystko się rozgałęzia.

Zauważ, że zaimportowaliśmy również pliki CSS (takie jak index.css) ale tak naprawdę nic z nimi nie zrobiliśmy. Poprzez importowanie faktycznie informujemy Webpack poprzez skrypty React, aby dołączył kody CSS do ostatecznego skompilowanego pakietu. W przeciwnym razie style CSS się nie pojawią.

• App.js

Następnie przyjrzymy się App.js. Otwórz go w edytorze tekstu:

 

Zobaczmy, jak zmiana jego zawartości wpływa na nasz projekt. Zmień zawartość znacznika <p>:

Następnie zapisz plik i sprawdź zmiany w przeglądarce:

Voila! Dokonałeś pierwszych poprawek w komponencie React!

Jest jeszcze jedna rzecz, na którą warto zwrócić uwagę. Spójrz na element <img>:

Zauważ, że logo jest przekazywane w nawiasach klamrowych. Przy przekazywaniu atrybutów (które nie są ciągami znaków ani liczbami), muszą one być przekazywane w nawiasach klamrowych. Wtedy React potraktuje je jako obiekty JavaScript, a nie ciągi znaków.

W tym przypadku aplikacja tak naprawdę nie importuje obrazu. Zamiast tego jest to odniesienie do obrazu. Gdy Webpack buduje projekt, umieszcza obraz w odpowiednim miejscu. Możemy to zweryfikować w przeglądarce. Otwórz Narzędzia deweloperskie w przeglądarce Firefox:

Webpack chce przypisać unikalne ścieżki plików dla wszystkich obrazów. Dlatego nawet jeśli obrazy zostały zaimportowane pod tą samą nazwą, będą miały różne ścieżki.

Step 7: Project Building

W tym kroku dowiemy się, jak skompilować projekt do pakietu gotowego do wdrożenia. Uruchom terminal i wykonaj skrypt build projektu:

Kompilator utworzy dedykowany katalog build/w którym umieści dane wyjściowe. Aby zobaczyć, co robi proces kompilacji, otwórz plik index.html z katalogu build/:

Jak widać, cały kod jest skompilowany i zminifikowany do najmniejszego użytecznego stanu. Czytelność nie jest problemem, ponieważ nie jest to kod widoczny dla użytkownika końcowego. Zminifikowany kod zajmuje mniej miejsca, zachowując jednocześnie wszystkie swoje funkcjonalności. W przeciwnym razie niż w językach, w których białe znaki są bardzo ważne (na przykład Python), języki internetowe (HTML, CSS i JavaScript) nie wymagają odpowiednich odstępów, aby przeglądarka mogła je zinterpretować.

Podsumowanie

W tym poradniku pomyślnie zademonstrowaliśmy, jak utworzyć aplikację React. Pokazaliśmy również podstawowe konfiguracje przy użyciu narzędzi do budowania JavaScript bez skomplikowanych szczegółów technicznych. To kluczowa wartość, jaką oferuje Create React App. Nie musisz wiedzieć wszystkiego, aby zacząć korzystać z Reacta. Możesz pominąć naukę skomplikowanych kroków budowania i skupić się wyłącznie na kodzie React.

Zademonstrowaliśmy tutaj również, jak uruchomić, przetestować i zbudować projekt React. Te polecenia są kluczowe dla projektów każdej wielkości.

Miłego kodowania!