Najlepszym podsumowaniem sytuacji był ten tweet.
Marc was almost ready to implement his „hello world” React app pic.twitter.com/ptdg4yteF1
— Thomas Fuchs ?♂️ (@thomasfuchs) March 12, 2016
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.
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.
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 ;).
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ę:
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.
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.
