Pierwsza aplikacja React – Kurs React – cz. 1

W pierwszej części kursu przedstawiam jak stworzyć pierwszą aplikację React oraz opisuję podstawowe pojęcia z tym związane.

Potrzebne narzędzia

Przed stworzeniem pierwszej aplikacji w React należy przygotować stanowisko pracy. W tym celu będzie potrzebne kilka narzędzi, które są niezbędne do jej uruchomienia.

Konsola

Konsola w tym przypadku będzie odpowiadać m.in. za proces budowania aplikacji, instalacji zależności czy obserwowania zmian wprowadzanych w kodzie.

Na Macu domyślna konsola jest wystarczająca do postawienia aplikacji React. W Windowsie natomiast instalacja wszystkich potrzebnych narzędzi może być problematyczna, dlatego zalecam skorzystanie z Cmdera czyli emulatora konsoli.

Cmder – emulator konsoli w Windowsie

Node.js

Node to środowisko uruchomieniowe czyli w skrócie serwer, który uruchomi aplikację Reactową. Warto wspomnieć, że zbudowany jest na silniku JavaScriptowym.

npm – node package manager

Npm instaluje wszystkie zależności w projekcie. Dzięki niemu można skorzystać z dużej bazy paczek, które ułatwiają pisanie aplikacji.

Create React App

To narzędzie pozwoli na przygotowanie podstawowego szkieletu aplikacji Reactowej. Dzięki jednej komendzie powstanie działająca prosta aplikacja.

Edytor kodu

Najważniejszym narzędziem podczas pracy nad aplikacją jest edytor kodu. Istnieje bardzo wiele dobrych edytorów. Ja natomiast polecam program Visual Studio Code. Jest bardzo intuicyjny i posiada wiele rozszerzeń, które zwiększą wydajność i komfort pracy

Tworzenie pierwszej aplikacji React

Tworzenie pierwszej aplikacji React jest bardzo proste, dzięki tym wszystkim narzędziom. Poniżej lista kroków, które pozwolą na uruchomienie pierwszej aplikacji Reactowej.

Instalacja konsoli

W przypadku Windowsa polecam instalację Cmdera. Instalacja polega na pobraniu pliku i uruchomieniu. Pliki można pobrać z oficjalnej strony, a więcej informacji na temat emulatora można znaleźć w artykule o Cmder.

Instalacja Node.js

Instalacja tego narzędzia jest również bardzo trywialna. Wystarczy pobrać pliki i uruchomić. Pliki można znaleźć na oficjalnej stronie Node.js w dziale Download.

Instalacja npm

NPM jest dołączany do Node.js. Oznacza to, że po instalacji Node.js nie jest wymagana żadna dodatkowa akcja. Wersję można sprawdzić, dzięki komendzie:

npm -v

Wybór edytora kodu

Na początek polecam instalację Visual Studio Code. Oczywiście polecam przetestowanie innych edytorów, a następnie wybrać ten, który najbardziej odpowiada.

Tworzenie aplikacji z Create React App

Stworzenie szkieletu aplikacji React odbędzie się za pomocą komendy:

npx create-react-app my-react-app

Tworzenie szkieletu chwilę potrwa.

Tworzenie aplikacji – create-react-app

Instalacja zależności

Kolejnym krokiem po utworzeniu szkieletu aplikacji będzie instalacja zależności. Jest to wymagane do uruchomienia aplikacji, ponieważ potrzebujemy wszystkich paczek do skompilowania kodu.

Najpierw należy wejść do katalogu z aplikacją. W tym przypadku będzie to C:\Development\my-react-app.

cd \Development\my-react-app\

Instalacja zależności wykonywana jest przed pierwszym uruchomieniem lub jeśli do pliku package.json zostaną dodane nowe paczki.

npm install

Paczki zostaną zainstalowane i aplikacja będzie gotowa do uruchomienia. Do tego służy komenda:

npm start

Po odpaleniu aplikacji konsola będzie wyglądać następująco.

Uruchomienie aplikacji react – npm start

Dodatkowo powinna uruchomić się przeglądarka z takim samym adresem jak w konsoli tj. http://localhost:3000/ wraz z aplikacją Reactową.

Pierwsza aplikacja w React – create-react-app

Struktura folderów

Struktura plików i folderów w szkielecie aplikacji prezentuje się następująco:

Struktura folderów w aplikacji React

node_modules – w tym katalogu instalowane są wszystkie zależności. W codziennej pracy nie będzie do niczego potrzebny. Może się przydać, jeśli zajdzie potrzeba podejrzeć kod źródłowy konkretnej paczki.

public – jak sama nazwa wskazuje to folder, który będzie dostępny publicznie. Znajduje się tutaj plik startowy index.html, który jest początkiem podczas uruchomienia aplikacji Reactowej. W tym pliku zdefiniowany jest tag html do którego ma zostać podpięta aplikacja.

src – tutaj znajduje się aplikacja Reactowa

package.json – w tym pliku znajdują się podstawowe informacje dotyczące projektu, konfiguracja oraz zależności.

Zawartość pliku package.json

package-lock.json – jest to plik, którego celem jest uniknięcie problemów z instalowaniem zależności np. wielu wersji tej samej paczki. Więcej na temat tego pliku można znaleźć w artykule na medium.com dot. package-lock.json

.gitignore – lista ignorowanych plików w GIT.

README.md – opis, który pomoże zrozumieć czym zajmuje się dana aplikacja oraz pokaże jak ją uruchomić (pomocna dla innych użytkowników).

Edytowanie kodu

Domyślny komponent, który widać po raz pierwszy po uruchomieniu aplikacji znajduje się w pliku src/App.js.

Komponent „App” w aplikacji React

Edytowanie treści i HTMLa odbywa się poprzez zmianę widocznego kodu znajdującego się w funkcji render().

Usunąłem domyślną treść i wstawiłem krótki tekst. Zmiany zostały już skompilowane i widok w przeglądarce został już automatycznie odświeżony. Efekt wprowadzonych zmian poniżej.

Nowa treść w aplikacji React

Podsumowanie

Przedstawiłem jak stworzyć aplikację Reactową, dzięki create-react-app i opisałem co się dzieje wokół niej. W następnych częściach kursu pojawi się znacznie więcej (na pewno kodu). Poniżej proste ćwiczenie.

Ćwiczenie

Stwórz swoją aplikację React według instrukcji i edytuj kod HTML. Zwróć uwagę na przeglądarkę po wprowadzeniu zmian i zapisaniu pliku.

---

Tworzenie komponentów React – Kurs React – cz. 2