Rozpoczęcie nowego projektu React jest bardzo skomplikowane ze względu na dużą liczbę narzędzi do kompilacji. Wykorzystuje wiele zależności, plików konfiguracyjnych i innych wymagań, takich jak Babel, Webpack, ESLint przed napisaniem pojedynczej linii kodu React. Narzędzie Create React App CLI usuwa wszystkie te zawiłości i sprawia, że ​​aplikacja React jest prosta. W tym celu należy zainstalować pakiet za pomocą NPM, a następnie uruchomić kilka prostych poleceń, aby uzyskać nowy projekt React.

The utwórz-reaguj-aplikację to doskonałe narzędzie dla początkujących, które pozwala na bardzo szybkie utworzenie i uruchomienie projektu React. Nie wymaga ręcznej konfiguracji. To narzędzie otacza wszystkie wymagane zależności, takie jak Pakiet internetowy , Babel dla samego projektu React, a następnie musisz skupić się na pisaniu tylko kodu React. To narzędzie konfiguruje środowisko programistyczne, zapewnia doskonałe środowisko programistyczne i optymalizuje aplikację pod kątem produkcji.

Wymagania

Aplikacja Create React jest prowadzona przez Facebook i może działać na każdym platforma , na przykład macOS, Windows, Linux itp. Aby utworzyć projekt React za pomocą aplikacji create-react-app, musisz mieć zainstalowane w swoim systemie następujące rzeczy.

1. Wersja węzła >= 8.10
2. Wersja NPM >= 5.6

Sprawdźmy aktualną wersję Węzeł I NPM w systemie.

Uruchom następujące polecenie, aby sprawdzić wersję węzła w wierszu poleceń.

 $ node -v 

Uruchom następujące polecenie, aby sprawdzić wersję NPM w wierszu poleceń.

 $ npm -v 

Instalacja

Tutaj dowiemy się, jak zainstalować React za pomocą Agencja ratingowa narzędzie. W tym celu musimy wykonać kroki podane poniżej.

Zainstaluj Reaguj

Możemy zainstalować Reacta za pomocą menedżera pakietów npm, używając następującego polecenia. Nie musisz martwić się o złożoność instalacji React. Menedżer pakietów create-react-app npm będzie zarządzał wszystkim, co jest potrzebne do projektu React.

 C:Usersjavatpoint> npm install -g create-react-app 

Utwórz nowy projekt React

Po pomyślnej instalacji Reacta możemy utworzyć nowy projekt Reacta za pomocą polecenia create-react-app. Tutaj wybieram nazwę „reactproject” dla mojego projektu.

 C:Usersjavatpoint> create-react-app reactproject 

NOTATKA:Możemy połączyć powyższe dwa kroki w jednym poleceniu za pomocąnp. Npx to narzędzie do uruchamiania pakietów dostępne w wersji npm 5.2 i nowszych.

 C:Usersjavatpoint> npx create-react-app reactproject 

Powyższe polecenie zajmie trochę czasu, aby zainstalować React i utworzyć nowy projekt o nazwie „reactproject”. Teraz możemy zobaczyć terminal jak poniżej.

Powyższy ekran informuje, że projekt React został pomyślnie utworzony w naszym systemie. Teraz musimy uruchomić serwer, abyśmy mogli uzyskać dostęp do aplikacji w przeglądarce. Wpisz następujące polecenie w oknie terminala.

 $ cd Desktop $ npm start 

NPM to menedżer pakietów, który uruchamia serwer i uzyskuje dostęp do aplikacji na domyślnym serwerze http://localhost:3000 . Teraz otrzymamy następujący ekran.

Następnie otwórz projekt w edytorze kodu. Tutaj używam kodu Visual Studio. Domyślna struktura naszego projektu wygląda jak na obrazku poniżej.

W aplikacji React w katalogu głównym znajduje się kilka plików i folderów. Niektóre z nich są następujące:

moduły_węzłów:Zawiera bibliotekę React i wszelkie inne potrzebne biblioteki stron trzecich.publiczny:Zawiera aktywa publiczne aplikacji. Zawiera plik Index.html, w którym React domyślnie zamontuje aplikację na elemencie.źródło:Zawiera pliki App.css, App.js, App.test.js, indeks.css, indeks.js i serviceWorker.js. Tutaj plik App.js zawsze odpowiada za wyświetlenie ekranu wyjściowego w React.pakiet-lock.json:Jest generowany automatycznie dla wszelkich operacji, w których pakiet npm modyfikuje drzewo node_modules lub pakiet.json. Nie można go opublikować. Zostanie zignorowany, jeśli znajdzie inne miejsce niż pakiet najwyższego poziomu.pakiet.json:Zawiera różne metadane wymagane dla projektu. Dostarcza informacji do npm, co pozwala na identyfikację projektu i obsługę zależności projektu.PRZECZYTAJ.md:Zawiera dokumentację do przeczytania na temat tematów React.

Konfiguracja środowiska reakcji

Teraz otwórz src >> Aplikacja.js i dokonaj zmian, które chcesz wyświetlić na ekranie. Po dokonaniu żądanych zmian, ratować plik. Gdy tylko zapiszemy plik, Webpack przekompiluje kod, a strona automatycznie się odświeży, a zmiany zostaną odzwierciedlone na ekranie przeglądarki. Teraz możemy utworzyć dowolną liczbę komponentów, zaimportować nowo utworzony komponent do pliku Aplikacja.js plik i ten plik zostanie uwzględniony w naszym pliku main indeks.html plik po skompilowaniu przez Webpack.

Następnie jeżeli chcemy wykonać projekt na tryb produkcyjny wpisujemy poniższą komendę. To polecenie wygeneruje kompilację produkcyjną, która jest najlepiej zoptymalizowana.

 $ npm build