Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Code
  2. React
Code

Korzystanie z Create React App

by
Length:ShortLanguages:

Polish (Polski) translation by Mateusz Kurlit (you can also view the original English article)

Final product image
What You'll Be Creating

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.

The command-line

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ć. 

The available tools

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.

The basic React homepage

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.

When you run the watch feature

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

An example of failing to compile

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!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.