REACT CREATE-REACT-APP

Стартирането на нов React проект е много сложно, с толкова много инструменти за изграждане. Той използва много зависимости, конфигурационни файлове и други изисквания като Babel, Webpack, ESLint, преди да напише един ред код на React. CLI инструментът Create React App премахва всички тези сложности и прави приложението React просто. За целта трябва да инсталирате пакета с помощта на NPM и след това да изпълните няколко прости команди, за да получите нов проект на React.

The create-react-app е отличен инструмент за начинаещи, който ви позволява да създавате и стартирате React проект много бързо. Не изисква ръчна конфигурация. Този инструмент обгръща всички необходими зависимости като Webpack , Бабел за самия проект на React и тогава трябва да се съсредоточите върху писането само на код на React. Този инструмент настройва средата за разработка, осигурява отлично изживяване на разработчиците и оптимизира приложението за производство.

Изисквания

Приложението Create React се поддържа от Facebook и може да работи на всеки платформа , например macOS, Windows, Linux и т.н. За да създадете React проект с помощта на create-react-app, трябва да сте инсталирали следните неща във вашата система.

Версия на възел >= 8.10
NPM версия >= 5.6

Нека проверим текущата версия на Възел и НПМ в системата.

Изпълнете следната команда, за да проверите версията на Node в командния ред.

 $ node -v

Изпълнете следната команда, за да проверите версията на NPM в командния ред.

 $ npm -v

Инсталация

Тук ще научим как можем да инсталираме React с помощта на CRA инструмент. За целта трябва да следваме стъпките, дадени по-долу.

Инсталирайте React

Можем да инсталираме React с помощта на мениджъра на пакети npm, като използваме следната команда. Няма нужда да се притеснявате за сложността на инсталацията на React. Мениджърът на пакети create-react-app npm ще управлява всичко, което е необходимо за проекта React.

 C:Usersjavatpoint&gt; npm install -g create-react-app

Създайте нов React проект

След като инсталацията на React е успешна, можем да създадем нов проект на React с помощта на командата create-react-app. Тук избирам име „reactproject“ за моя проект.

 C:Usersjavatpoint&gt; create-react-app reactproject

ЗАБЕЛЕЖКА:Можем да комбинираме горните две стъпки в една команда, използвайкиnpx. Npx е инструмент за стартиране на пакети, който идва с npm 5.2 и по-нова версия.

 C:Usersjavatpoint&gt; npx create-react-app reactproject

Горната команда ще отнеме известно време за инсталиране на React и създаване на нов проект с името „reactproject“. Сега можем да видим терминала както е показано по-долу.

Горният екран показва, че проектът React е създаден успешно в нашата система. Сега трябва да стартираме сървъра, за да имаме достъп до приложението в браузъра. Въведете следната команда в прозореца на терминала.

 $ cd Desktop $ npm start

NPM е мениджър на пакети, който стартира сървъра и осъществява достъп до приложението на сървъра по подразбиране http://localhost:3000. Сега ще получим следния екран.

След това отворете проекта в редактора на код. Тук използвам Visual Studio Code. Структурата по подразбиране на нашия проект изглежда като изображението по-долу.

В приложението React има няколко файла и папки в основната директория. Някои от тях са както следва:

node_modules:Той съдържа React библиотеката и всички други необходими библиотеки на трети страни.публичен:Той съхранява публичните активи на приложението. Той съдържа index.html, където React ще монтира приложението по подразбиране на елемента.src:Той съдържа файловете App.css, App.js, App.test.js, index.css, index.js и serviceWorker.js. Тук файлът App.js винаги отговаря за показването на изходния екран в React.package-lock.json:Той се генерира автоматично за всички операции, при които пакетът npm модифицира дървото node_modules или package.json. Не може да се публикува. Той ще бъде игнориран, ако намери друго място, а не пакета от най-високо ниво.package.json:Той съдържа различни метаданни, необходими за проекта. Той дава информация на npm, която позволява да се идентифицира проекта, както и да се справят с зависимостите на проекта.README.md:Той предоставя документацията за четене относно темите на React.

Настройка на React среда

Сега отворете src >> App.js файл и направете промени, които искате да се покажат на екрана. След извършване на желаните промени, спаси файлът. Веднага след като запазим файла, Webpack прекомпилира кода и страницата ще се обнови автоматично, а промените се отразяват на екрана на браузъра. Сега можем да създадем толкова компоненти, колкото искаме, да импортираме новосъздадения компонент вътре в App.js файл и този файл ще бъде включен в нашия main index.html файл след компилиране от Webpack.

След това, ако искаме да направим проекта за режим на производство, въведете следната команда. Тази команда ще генерира производствена компилация, която е най-добре оптимизирана.

 $ npm build

TechCodeview