Покретање новог Реацт пројекта је веома компликовано, са толико алата за прављење. Користи многе зависности, конфигурационе датотеке и друге захтеве као што су Бабел, Вебпацк, ЕСЛинт пре него што напише један ред Реацт кода. Цреате Реацт Апп ЦЛИ алат уклања сву ту сложеност и чини Реацт апликацију једноставном. За ово морате да инсталирате пакет користећи НПМ, а затим да покренете неколико једноставних команди да бисте добили нови Реацт пројекат.

Тхе цреате-реацт-апп је одличан алат за почетнике, који вам омогућава да креирате и покренете Реацт пројекат веома брзо. Не захтева никакву конфигурацију ручно. Овај алат обмотава све потребне зависности попут Вебпацк , Бабел за сам Реацт пројекат и онда се морате фокусирати само на писање Реацт кода. Овај алат поставља развојно окружење, пружа одлично искуство програмера и оптимизује апликацију за производњу.

Захтеви

Креирај Реацт апликацију одржава Фејсбук и може да ради на било ком платформа , на пример, мацОС, Виндовс, Линук, итд. Да бисте креирали Реацт пројекат користећи цреате-реацт-апп, морате да имате инсталиране следеће ствари у вашем систему.

1. Верзија чвора >= 8.10
2. НПМ верзија >= 5.6

Хајде да проверимо тренутну верзију Чвор и НПМ у систему.

Покрените следећу команду да бисте проверили верзију чвора у командној линији.

 $ node -v 

Покрените следећу команду да бисте проверили верзију НПМ-а у командној линији.

 $ npm -v 

Инсталација

Овде ћемо научити како можемо да инсталирамо Реацт користећи ЦРА оруђе. За ово морамо да следимо доле наведене кораке.

Инсталирајте Реацт

Реацт можемо инсталирати помоћу нпм менаџера пакета помоћу следеће команде. Нема потребе да бринете о сложености Реацт инсталације. Креирај-реаговати-апп нпм менаџер пакета ће управљати свиме што је потребно за Реацт пројекат.

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

Направите нови Реацт пројекат

Када Реацт инсталација буде успешна, можемо да креирамо нови Реацт пројекат користећи команду цреате-реацт-апп. Овде бирам име 'реацтпројецт' за свој пројекат.

 C:Usersjavatpoint> create-react-app reactproject 

БЕЛЕШКА:Можемо комбиновати горња два корака у једној команди користећинпк. нпк је алатка за покретање пакета која долази са нпм 5.2 и новијом верзијом.

 C:Usersjavatpoint> npx create-react-app reactproject 

Горњој команди ће бити потребно неко време да се инсталира Реацт и креира нови пројекат са именом „реацтпројецт“. Сада можемо видети терминал као испод.

Горњи екран говори да је Реацт пројекат успешно креиран на нашем систему. Сада морамо да покренемо сервер да бисмо могли да приступимо апликацији у претраживачу. Унесите следећу команду у прозор терминала.

 $ cd Desktop $ npm start 

НПМ је менаџер пакета који покреће сервер и приступа апликацији на подразумеваном серверу хттп://лоцалхост:3000. Сада ћемо добити следећи екран.

Затим отворите пројекат у уређивачу кода. Овде користим Висуал Студио Цоде. Подразумевана структура нашег пројекта изгледа као на слици испод.

У Реацт апликацији постоји неколико датотека и фасцикли у основном директоријуму. Неки од њих су следећи:

ноде_модулес:Садржи Реацт библиотеку и све друге потребне библиотеке трећих страна.јавно:Он држи јавну имовину апликације. Садржи индек.хтмл где ће Реацт подразумевано монтирати апликацију на елемент.срц:Садржи датотеке Апп.цсс, Апп.јс, Апп.тест.јс, индек.цсс, индек.јс и сервицеВоркер.јс. Овде је датотека Апп.јс увек одговорна за приказивање излазног екрана у Реацт-у.пацкаге-лоцк.јсон:Генерише се аутоматски за све операције где нпм пакет мења или стабло ноде_модулес или пацкаге.јсон. Не може се објавити. Биће занемарен ако пронађе било које друго место уместо пакета највишег нивоа.пацкаге.јсон:Садржи различите метаподатке потребне за пројекат. Он даје информације нпм-у, што омогућава идентификацију пројекта, као и управљање зависностима пројекта.РЕАДМЕ.мд:Пружа документацију за читање о Реацт темама.

Реацт Енвиронмент Сетуп

Сада, отворите срц >> Апп.јс датотеку и направите измене које желите да прикажете на екрану. Након уношења жељених промена, сачувати фајл. Чим сачувамо датотеку, Вебпацк поново компајлира код и страница ће се аутоматски освежити, а промене се одражавају на екрану претраживача. Сада можемо да креирамо онолико компоненти колико желимо, да увеземо новостворену компоненту унутар Апп.јс датотеку и та датотека ће бити укључена у наш главни индек.хтмл датотеку након компајлирања од стране Вебпацк-а.

Затим, ако желимо да направимо пројекат за производни режим, откуцајте следећу команду. Ова команда ће генерисати производну верзију, која је најбоље оптимизована.

 $ npm build