Здравствуйте многоуважаемые читатели моего блога! В этой статье мы разберем тему установки библиотеки JavaScript - React, а также создадим ваше первое приложение на этой библиотеке.
React.js - это библиотека JavaScript с открытым исходным кодом, для создания пользовательских интерфейсов.
Официальный сайт React - https://ru.reactjs.org/
Самый простой и быстрый способ начать пользоваться библиотекой React - это установка React через Create React App.
Чтобы использовать Create React App, необходимо чтобы у вас на компьютере была установлена Node.js, а также пакетный менеджер npm. Для проверки наличия Node.js и пакетного менеджера, можно запросить в терминале или консоле их версию.
Команды:
- проверка версии node.js: node -v
- проверка версии npm: npm -v
Если же у вас не показало версию, как у меня на изображении выше, то в первую очередь установите их. Установить Node.js можно через официальный сайт - https://nodejs.org/en/. Пакетный менеджер npm устанавливается автоматически с Node.js.
Перейдем к следующему этапу, который означается, что у вас уже установлены свежие версии Node и npm и теперь мы можем установить библиотеку React и развернуть свое приложение. Как я уже говорил, мы будем использовать Create React App.
Для установки, перейдите в папку, куда вы хотите установить приложение и откройте в папке терминал или консоль. В linux ubuntu, к примеру, это делается просто:
После того, как вы открыли терминал в нужной вам папке, вы должны ввести следующую команду:
npx create-react-app my-app
где "my-app" - это название вашего приложения, здесь вы можете ввести любое название, к примеру ваша команда может быть такой:
npx create-react-app react-blog
После чего в вашем терминале или консоле начнется установка, выглядеть будет примерно так:
По завершению вот так:
После установки нам желают удачного хаккинга и предлагают нужные нам команды. Для начала вам будет достаточно последних двух команд, объясню, что они значат.
cd my-app - команда, которая переключит терминал в папку с вашим приложением, перед каждым запуском её надо вводить. Кстати опять же, my-app - это название вашего приложения, которое вы сами задавали. Т.е команда может выглядеть, к примеру - cd react-blog. Эту команду можно не вводить, если вы открыли терминал сразу в папке с приложениям.
npm start - команда, которую вы вводите уже в папке приложения для запуска приложения в браузере, т.е после команды cd my-app, вы сразу запускаете npm start и в итоге вас перебросит в браузер и откроется такая страничка:
Структура файлов React приложения выглядит следующим образом:
Вы тоже можете это увидеть, если откроете проект в своем редакторе кода.
- node-modules – это папка, которая содержит зависимости, которые требуются приложению. Все загрузки там производит npm
- public – это папка, в которой находится страница index.html, определяющая HTML шаблон всего приложения; кроме этого она ещё содержит favicon.ico, manifest.json, robots.txt и т.д.
- src – каталог, содержащий исходный код приложения. Практически вся разработка проекта ведется именно в этом каталоге
- .gitignore – нужен для скрытия файлов и папок от системы контроля версий GIT.
- package.json – набор метаданных о вашем приложении
- package-lock.json – создаётся автоматически npm при установке зависимостей. В нем содержится полная информацию обо всех установленных зависимостях.
- README.md - справочное руководство по использованию инструмента create-react-app.
На этом все, поздравляю, вы запустили свое первое приложение на React.js, теперь можно приступить к кодингу.
Подробнее об использовании библиотеки React читайте в следующих статьях.