Proces budowania

Będziemy używać sporo magii. React nie jest jak JQuery że wpinasz do aplikacji dokumentu i działa.

Build step - przerobienie kodu źródłowego na używalny dla przeglądarki:

przerobienie JSX na React.createElement()
dostosowanie javascriptu do starszych przeglądarek
minifikacja i treeshaking
przekopiowanie obrazków i innych

Tradycyjnie by pracować z Reactem potrzebujemy

bundlera, który połączy nam poszczególne pliki w całość (webpack)
transpilatora, który przerobi nasz jsx oraz nowoczesny javascript na zrozumiały dla przeglądarki (babel)

Poza minimum przydałby się jeszcze:

lokalny serwer, na którym będziemy mogli pracować
hot reloading
optymalizacje pod budowe

Create React App

Na szczęście nie będziemy musieli tego robić bo załatwi to za nas Create React App.

Repozytorium które ściągnęliście to poukładane Create React App (wywaliłem parę rzeczy i coś dodałem by było prościej).

Składa się z następujących części:

.
├── node_modules - zależności i skrypty
├── public - pliki bezpośrednio kopiowane do /
├── src - pliki źródłowie
│   ├── App.css
│   ├── App.js - strona główna
│   ├── index.js - root aplikacji
├── package.json - plik konfiguracyjny z zależnościami i skryptami
├── .gitignore - lista folderów których zmiany nie kontroluje git
├── .prettierrc - konfiguracja dla prettiera
├── README.md
└── yarn.lock

package.json - tutaj zdefiniowane są nasze skrypty i zależności. Zależności instalowane są do folderu node_modules

Co dodałem:

prettier.rc jako konfiguracja dla prettier (formatowanie kodu)

Co wyrzuciłem:

W trakcie developmentu będziemy korzystać z komendy

npm run start

Dzięki niej przy każdej zmianie kodu odświeży się nam na stronie.

Gotową stronę zbudujemy później przy użyciu

npm run build

Więcej szczegółów na temat CRA znajdziecie we wpisie na blogu