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

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!
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Update me weeklyEnvato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!
Translate this post