create-react-app – Pierwszy projekt w ReactJS #1

Przygotowywanie środowiska, przed przejściem do właściwej pracy, urosło przez ostatnia kilka lat do statusu takiego wyzwania, że otrzymało niechlubne miano „JavaScript Fatigue”. Niestety, wśród wszystkich frameworków, to właśnie React odpowiadał za największa liczbę konfiguracyjnej gorączki. Chęć wykorzystywania tej technologii wiązała się z koniecznością poznania kilku mniej lub bardziej skomplikowanych narzędzi. Kilka godzin pracy, zanim mogliśmy przejść do tworzenia czegokolwiek. Masakra. Był to zasadniczy powód, przez który początkujący decydowali się na wybór Vue lub Angulara.

Najlepszym podsumowaniem sytuacji był ten tweet.

Zespół tworzący Reacta, z Danem Abramovem na czele, postanowił wziąć sprawy w swoje ręce. Programiści Facebooka musieli odstąpić od założenia, którym kierowali się w projektach open-source. Do tej pory dzielili się wyłącznie kodem wykorzystywanym do rozwiązywania problemów, na które natrafiają w codziennej pracy.

Tym razem przygotowali coś w stu procentach skierowanego do społeczności Reacta.

Tak właśnie powstało create-react-app. Narzędzie, które umożliwia wygenerowanie gotowego szablonu projektu. Wystarczy jedna komenda. Żadnych plików konfiguracyjnych. Brak konieczności wprowadzania jakichkolwiek zmian. Czego chcieć więcej.

create-react-app jest niezbitym dowodem na to, że zespół Reacta dba o satysfakcję użytkowników swojego ekosystemu. Co ważne, Facebook zainwestował dużo zasobów w utworzenie tego narzędzia. Jest duża szansa, że nie zostanie ono porzucone i będzie regularnie aktualizowane.

Jedną z największych zalet create-react-app jest wbudowane zarządzanie zależnościami. Nie musisz bawić się z package.json. Wszystkim zajmuje się pakiet react-scripts.

Skoro poznałeś już backstory create-react-app, to czas przejść od słów do czynów.

Generowanie szablonu

Aby rozpocząć korzystanie z create-react-app, musisz mieć zainstalowane Node.js w wersji 6.0 oraz npm w wersji 5.2 (lub wyższej). Jeżeli nie jesteś przekonany, jakie wersje posiadasz, wystarczy wywołać komendę:

node -v && npm -v
// v8.9.3
// 5.5.1

Teraz przejdźmy do instalacji create-react-app.
npm install -g create-react-app

Dzięki fladze -g, pakiet zostanie zainstalowany globalnie. W prostych słowach: będziesz mógł używać create-react-app niezależnie od aktywnego folderu.

Zweryfikuj, czy wszystko poszło zgodnie z planem za pomocą komendy:

create-react-app --version
// 1.5.1

To wszystko w zakresie przygotowań. Możesz przejść do projektu wygenerowania szablonu trackera kryptowalut.
create-react-app crypto-tracker

Proces tworzenia szablonu może zająć kilka minut.

Po zakończeniu pracy, create-react-app wyświetli Ci listę skryptów domyślnie dodanych do package.json.

Lista skryptów create-react-app wyświetlana po udanym wygenerowaniu szablonu

Skrypty

start

Z niego będziesz korzystał najczęściej. Uruchamia serwer developerski i otwiera kartę przeglądarki z URL aplikacji. Dzięki watcherowi webpacka, każda zmiana w kodzie będzie automatycznie odwzorowywana na serwerze, bez konieczności jej ponownego uruchamiania.

Wykonaj komendę npm run start i zobacz, jak prezentuje się domyślna aplikacja.
Domyślna aplikacja create-react-app

test

Uruchamia testy jednostkowe za pomocą test runnera Jest, który stanowi część create-react-app. Temat testowania komponentów poruszę w przyszłości. Póki co zadowolimy się jednym testem ;).

Testy jednostkowe create-react-app

build

Tworzy paczkę produkcyjną, która trafi do folderu build. Jeżeli chcesz ją uruchomić, wykonaj następujące komendy:

cd build

npm serve

Kod JS i CSS w paczce produkcyjnej jest zminifikowany. Dodatkowo, CSS jest przepuszczony przez Autoprefixer, który zapewnia lepsze wsparcie na rożnych przeglądarkach.

eject

To Twoja możliwość wykatapultowania się z pokładu create-react-app. Skutkuje wyeksportowaniem wszystkich zależności, plików konfiguracyjnych i skryptów poza create-react-app. Otrzymasz pełnoprawny projekt, z dostępem do wszystkich jego zakamarków.

Niestety, nic za darmo. package-json urośnie do znacznie większy rozmiarów, a zarządzanie aktualizacjami zależności spadnie na Twoje barki.

Ważne: Jest to proces nieodwracalny, więc powinieneś do niego podchodzić z należytą ostrożnością. Warto zastanowić się, czy Twoje potrzeby faktycznie uzasadniają wysiłek, związany z samodzielnym zarządzaniem zależnościami.

Zawartość szablonu

Każdy wygenerowany projekt będzie posiadał następującą strukturę:
Domyślna struktura projektu create-react-app

Zróbmy rekonesans i przeanalizujmy, kto jest kim w tym całym towarzystwie ;).

index.js

Pliki wejściowy aplikacji. To właśnie w nim komponent nadrzędny jest dodawany do DOM.

package.json

Plik zarządzający zależnościami projektu.

{
"name": "crypto-tracker",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-scripts": "1.1.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}

Nie daj się zwieść jego skromnym rozmiarom. Całą reszta zależności jest skrzętnie ukryta pod płaszczem react-scripts. A jest co ukrywać. Niedowiarki mogą zajrzeć do folderu node_modules.

App.js

Nadrzędny komponent aplikacji. To w nim znajduje się kod bezpośrednio importowany do index.js i wyświetlany w przeglądarce.

registerServiceWorker.js

Plik zarządzający API, które pozwala na cache’owanie zasobów. Stworzone z myślą o użytkownikach korzystających z aplikacji w trybie offline lub z słabym łączem. ServiceWorker działa tylko w wersji produkcyjnej aplikacji. Ta funkcjonalność wykracza poza zagadnienia, które będę poruszał w tej serii.

Struktura projektu

Zapoznałeś się z domyślną zawartością projektu. Teraz wypadałoby pozbyć się tego, co nie będzie Ci potrzebne.

Możesz śmiało usunąć plik logo.svg oraz jego import w App.js. Ponadto, pozbądź się całego kodu zagnieżdżonego w nadrzędnym div’ie zwracanym przez metodę render().

// App.js - wersja fit
import React, { Component } from 'react';
import './App.css';

class App extends Component {
render() {
return (
<div></div>
);
}
}

export default App;

Aby wynagrodzić sobie tę bezlitosną czystkę, wypadałoby wprowadzić do projektu nowe foldery i pliki.

Zanim się za to zabierzesz, wybierzmy strategię, która pozwoli na utrzymanie odpowiedniego porządku.

Tracker kryptowalut będzie zorganizowany zgodnie z wzorcem Single Component Folder. W dużym skrócie: na każdy komponent przeznaczymy oddzielny folder. Folder będzie nosił taką samą nazwę co zawarty w nim komponent. Będziemy w nim przechowywali kod komponentu, jego arkusze stylów oraz foldery jego bezpośrednich dzieci.

Więcej informacji na temat Single Component Folder znajdziesz w tym świetnym artykule.

Zdecydowałem się wprowadzić dwa dodatkowe foldery, które umieściłem bezpośrednio w src. Są to src/containers oraz src/components.

Jedynym komponentem kontenerowym w trackerze kryptowalut będzie App.js.

Komponent kontenerowy to centrum zarządzania danymi. Zapewnia ich sprawny przepływ do zagnieżdżonych w nim komponentów prezentacyjnych.

Komponenty prezentacyjne, zajmujące się wyświetlaniem otrzymanych danych, zgromadzimy w src/components.

To wszystko. Jesteś gotowy do działania. Jak widzisz, przygotowanie całego środowiska za pomocą create-react-app zajęło mniej niż kwadrans. To dużo lepszy wynik od tego, czym mogli pochwalić się początkujący przed powstaniem tego narzędzia.

Dodatkowe informacje

Projekt jest analizowany przez ESLint, który pomoże Ci wychwycić błędy składniowe. Zobacz, jak to wygląda w praktyce. Wystarczy, że dodasz do App.js niedomknięty tag HTML.

Przykładowy błąd wykryty przez ESLint

create-react-app, dzięki odpowiedniej konfiguracji Babel, pozwala na korzystanie z funkcjonalności ES6 i ES7. Masz dostęp do tak nowoczesnych funkcjonalności jak async/await oraz object spread.

Aktualizowanie aplikacji ogranicza się do zmieniania wersji react-scripts w package.json. Jeżeli chcesz się upewnić, czy jesteś na bieżąco, sprawdź change-log projektu na GitHubie.

Zadanie domowe

Utwórz foldery dla wszystkich komponentów w src/components. Pomoże Ci w tym screen, w którym wydzieliłem je bezpośrednio z CoinMarketCap.com oraz ich struktura hierarchiczna zaprezentowana w tym prostym drzewie.

Rozwiązanie znajdziesz tutaj.

Podsumowanie

Liczę, że wszystko przebiegło bez najmniejszych problemów i jesteś gotowy do zapoznania się z JSX w kolejnym wpisie. Przygotuję dla Ciebie krótki wstęp teoretyczny, część praktyczną, w której zabierzemy się za tworzeniu pierwszego komponentu. Nie obejdzie się bez zadania domowego, które pozwoli Ci przećwiczyć nowe umiejętności.

Bardzo cieszy mnie rosnąca ilość wyświetleń bloga oraz liczba polubień fanpage’a AlgoSmart na facebooku. Jest to niesamowicie motywujące.

Podobał Ci się dzisiejszy artykuł? Udostępnij go w Twoich ulubionych mediach społecznościowych. Może znajdzie się ktoś, dla kogo również będzie wartościowy.

Bądź na bieżąco z serią Pierwszy projekt w ReactJS. Wystarczy polubić fanpage AlgoSmart na fejsie, obserwować mój profil na Twitterze i regularnie odwiedzać portal Polski Front-end.

Do zobaczenia w przyszły weekend.

unsplash-logoTim Gouw

Marcin Czarkowski

Cześć! Ja nazywam się Marcin Czarkowski, a to jest AlgoSmart - blog, na którym dzielę się wiedzą o ReactJS, JavaScript oraz CSS. Od niedawna tworzę materiały na YouTube, warto rzucić okiem :).

  • Powroźnik Kamil

    Rzeczowo wyjaśnione, co prawda ten temat już znam, ale bardzo dobrze, że pojawił się wątek na temat struktury katalogów.

  • Marcin Witek

    Również dziękuje za wątek struktury katalogu w projekcie 😉