React от Facebook - одна из самых мощных доступных библиотек Javascript. С помощью React можно создавать масштабируемые и красивые веб-приложения. Также мобильные приложения можно разрабатывать с помощью React Native.
Это руководство поможет настроить среду разработчика и все необходимое для начала разработки приложений React.
Вовлеченные шаги
- Установка Node Package Manager (NPM) с помощью NodeJS.
- Установка пакета Create React App (CRA) из реестра NPM.
- Создание приложения React.
Требуется редактор кода по вашему выбору. В этом руководстве используется Microsoft Visual Studio Code. Sublime Text также предпочтительнее. В редакторах не требуется вносить никаких изменений или каких-либо настроек.
1. Диспетчер пакетов узла
Диспетчер пакетов узлов, широко известный как NPM, как следует из названия, представляет собой диспетчер пакетов для Javascript. Как разработчик, вы не всегда будете строить все с нуля. Для всего, что вы хотите построить, есть библиотека или пакеты, которые уже реализовали эту работу. В этом случае дружелюбные разработчики Javascript со всего мира представили свои работы по NPM.
Вот где пригодится NPM. Используя одну строку команды, мы можем установить любой пакет, который хотим использовать в наших проектах. Установить NPM очень просто. Необходимо выполнить следующие шаги:
- Скачайте установщик NodeJS для своей ОС.
Доступны две версии загрузки: «LTS (Долгосрочная поддержка)», которая также является стабильной и рекомендованной. Кроме того, существует «Текущая» версия, в которой есть последние функции, но она нестабильна. Я также рекомендую перейти к версии LTS.
- Запустите установщик, обратите внимание на путь, по которому он устанавливается, и следуйте инструкциям по установке. Все остальные настройки, оставленные по умолчанию, сделают свою работу.
- После установки NodeJS вы готовы использовать NPM.
Проверка установки
- Откройте терминал или интерфейс командной строки (CLI) по вашему выбору, введите следующие команды по одной и нажмите ввод:
npm -v node -v
- Вы должны получить номер версии установленной на данный момент NodeJS и NPM, как показано на изображении ниже. Это указывает на успешную установку и на то, что путь NodeJS и NPM добавлен в системные переменные среды.
Возможные ошибки
Ошибка: «npm не распознан…» или «узел не распознан…»
Причина: системные переменные не обновляются при установке NodeJS & NPM.
Решение: Windows 10
Панель управления ›Система и безопасность› Расширенная безопасность системы ›Вкладка« Дополнительно »› Переменные среды ›Добавьте путь, указанный во время установки.
Windows 7: следуйте этому ответу от Stackoverflow.
- Вот список типичных ошибок, с которыми вы можете столкнуться после установки или при использовании NPM.
2. Установка приложения Create React (CRA)
Это очень удобный и мощный пакет для начала работы с приложениями React. Установка довольно проста. Просто запустите следующую команду в интерфейсе командной строки.
npm install -g create-react-app
Проверка установки
Чтобы проверить успешность установки, при вводе следующей команды в CLI вы должны получить номер версии в качестве вывода.
create-react-app --version or create-react-app -V # Uppercase V
Возможные ошибки
Ошибка: ошибка разрешения на установку npm
Причина: NPM требует прав администратора для установки пакетов.
Решение:
- Windows: откройте интерфейс командной строки с помощью «Запуск от имени администратора», а затем выполните команду npm install.
- MacOS или Linux: используйте sudo в качестве префикса к команде. sudo npm install
3. Создание приложения React
При наличии подходящего редактора кода и правильной настройки среды мы можем приступить к созданию приложений React.
Перейдите в каталог вашего проекта, откройте интерфейс командной строки, введите следующую команду и нажмите клавишу ВВОД.
create-react-app new-app
По завершении этого процесса будет создана папка с именем, указанным вами в команде, в нашем случае new-app. В папке несколько файлов.
Откройте интерфейс командной строки в каталоге проекта и введите следующую команду:
npm start
При этом в вашем браузере по умолчанию должно открыться веб-приложение React, которое будет выглядеть примерно так:
Это приложение размещено в вашей локальной сети, что означает, что вы можете открыть приложение в своем мобильном браузере и наблюдать за его изменением в режиме реального времени по мере внесения любых изменений.
Среда для разработки приложений React готова, и вы можете создавать потрясающе выглядящие веб-приложения с мощью, исходящей от React.
В качестве бонуса вот несколько ресурсов, из которых вы можете изучить React.
