React błyskawicznie stał się popularną platformą programistyczną do tworzenia widoków po stronie klienta i serwera. Istniało pewne utrudnienie dotyczące narzędzi oraz pewna frustracja społeczności związana z uciążliwością Javascript. Create-react-app została stworzona w celu rozwiązania tych problemów.

Pierwsze kroki

Najpierw upewnij się, że Node jest zainstalowany w systemie. Node musi być przynajmniej w wersji 4, ale zalecana jest wersja 6, która szybciej pobiera dane i lepiej zarządza dyskiem. Możesz również użyć nvm, aby z łatwością przełączać między wersjami Node.

Po zainstalowaniu Node, otwórz swoje ulubione narzędzie wiersza poleceń i zainstaluj create-react-app globalnie, aby można było ją uruchamiać gdziekolwiek w systemie.

npm install -g create-react-app

Jak stworzyć swoją pierwszą aplikację

Najpierw otwórz wiersz poleceń i utwórz lub przejdź do katalogu, w którym będziesz programował. Następnie stwórz aplikację uruchamiając create-react-app tuts-plus-react-app. W ten sposób otworzysz narzędzie CLI, które stworzy naszą aplikację tuts-plus-react-app.

Po zakończeniu pracy narzędzia CLI, przeniesiesz się do ekranu, który poinformuje cię, gdzie znajduje się aplikacja oraz wyświetli listę poleceń, z których możesz skorzystać. 

Następnie przejdź do naszej nowej aplikacji wykonując cd tuts-plus-react-app.

Uruchamianie aplikacji

Możesz uruchomić aplikację lokalnie wykonując npm start. Po uruchomieniu aplikacji, przeniesiesz się do http://localhost:3000/ w przeglądarce i zobaczysz swoją nową aplikację React.

Do uruchamiania lokalnego serwera aplikacja używa webpack, który zawiera funkcję obserwacji. Po edycji kodu React, zmiany zostaną automatycznie wyświetlone w przeglądarce.

Jeśli będą jakieś problemy z kodem, zobaczysz błędy lub ostrzeżenia w przeglądarce.

Style kodu i testowanie

W pakiecie znajduje się ESLint, który zapewnia, że kod jest zgodny ze stylami kodu. W ten sposób nasz kod będzie spójny, co jest szczególnie przydatne, gdy w projekcie bierze udział wiele osób. Proponuję skorzystać z niego, jeśli jesteś początkujący oraz chcesz nauczyć się poprawnych stylów kodowania React i JavaScript.

Jeśli wiesz jak pisać testy dla kodu, uruchamianie testów odbywa się za pomocą Jest, platformy testowej, która jest tworzona i zarządzania przez firmę Facebook, twórcę React. Aby przeprowadzić testy, wykonaj polecenie npm test w wierszu poleceń, które je uruchomi. Następnie uruchom obserwatora, aby przeprowadzić testy po modyfikacji kodu. src/App.test.js to plik testowy, w którym możesz wprowadzać zmiany.

Wydanie aplikacji

Po zakończeniu edycji, przyszedł czas na wydanie aplikacji. Wszystko co musisz zrobić to wykonać npm run build w katalogu aplikacji. Narzędzia Babel używa się do transformacji kodu React w kod rozumiany dla przeglądarki. Kod zostanie również zminimalizowany, gwarantując najlepszą wydajność działania w przeglądarce.

Instrukcja obsługi

Jeśli zdecydujesz się na dalsze korzystanie z create-react-app, proponuję poświęcenie czasu na przeczytanie instrukcji obsługi. Zawiera ona wiele przydatnych informacji na temat innych zagadnień, takich jak dodawanie arkuszy stylów CSS, importowanie innych komponentów oraz importowanie obrazów i czcionek. Posiada również informacje o dobrych praktykach tworzenia stron internetowych, takich jak korzystanie z HTTPS, łączenie się z konsolą Node oraz tworzenie progresywnych aplikacji sieciowych.

Istnieje również obszerna dokumentacja na temat testowania i wydawania aplikacji.

Wesołego programowania

Mam nadzieję, że teraz już wiesz jak łatwo stworzyć aplikację React za pomocą projektu create-react-app. Mam nadzieję, że ten poradnik pomógł ci postawić pierwsze kroki z React. Wiem, że będziesz z niego zadowolony!