Учебник, чтобы убедиться, что у вас есть инструменты, необходимые для успеха в разработке приложений React.

Цель: запустить простое приложение React после настройки локальной среды разработки.

Эти инструменты вы будете устанавливать на протяжении всего урока:

  • Visual Studio Code (VS Code): это, конечно, не требование для создания приложений React, но я рекомендую это текстовый редактор. Я считаю, что это делает разработку программного обеспечения более приятной и продуктивной.
  • Git Bash: Git - очень популярный инструмент, используемый для управления исходным кодом, особенно если вы работаете в большой команде разработчиков. VS Code позволяет интегрировать терминал Git Bash, и это делает размещение кода в репозиториях Git очень удобным. Кроме того, он позволяет использовать большинство стандартных команд UNIX с эмуляцией среды Bash.
  • Node.js: среда выполнения JavaScript. Facebook предлагает использовать самую последнюю версию Node.js при создании приложений React.
  • npm: менеджер пакетов узла. Это используется вместе с Node, чтобы мы могли легко делиться упакованными модулями кода.

Скачать VS Code

Скачайте стабильную сборку из Visual Studio Code.

Это очень простая загрузка. Microsoft хорошо поработала над упрощением процесса установки этого приложения.

Использование Git Bash в VS Code

Загрузите Git Bash со страницы https://git-scm.com/downloads для вашей конкретной операционной системы.

Когда вы нажимаете на установщик Git, я предлагаю использовать все параметры установки по умолчанию, если вы действительно не знаете, что делаете.

Теперь мы собираемся добавить Git Bash в качестве интегрированного терминала внутри VS Code.

  • Откройте новый терминал в VS Code (Ctrl + Shift + `) или Терминал → Новый терминал.
  • Откройте палитру команд (Ctrl + Shift + P) или View → Command Palette.
  • Введите «Терминал: выберите оболочку по умолчанию».
  • Вы должны увидеть варианты ниже:

  • Выберите Git Bash.
  • Нажмите кнопку + в окне терминала.

Вы должны увидеть что-то подобное.

Контрольная точка : Введите следующую команду, чтобы убедиться, что вы правильно установили Git.

git --version

Оно должно появиться в зависимости от того, какую версию вы установили.

Установка Node.js

Чтобы скачать, перейдите по этой ссылке: Node.js.

Я выбрал вариант «Рекомендуется для большинства пользователей», а затем использовал все настройки по умолчанию в настройке Node.js.

Контрольная точка: После завершения установки введите в командной строке:

node -v && npm -v

И это должно выглядеть так (ваши версии могут быть более свежими, чем мои):

Если вы успешно установили Node и npm, переходите к следующему разделу.

Если он не отображается в вашем Git Bash, не волнуйтесь! Перезагрузите компьютер.

Если это не сработает, введите ту же команду в PowerShell или только в командную строку Windows, и вы должны увидеть ее там.

Чтобы использовать Git Bash, вам нужно добавить его в свой PATH. PATH сообщает вашей операционной системе, где искать исполняемые файлы в ответ на команды пользователя. Вот как это сделать в Windows:

  • Откройте «Просмотр дополнительных настроек системы».
  • Щелкните «Переменные среды».
  • В разделе «Системные переменные» выберите «Путь», а затем нажмите кнопку «Изменить».
  • Добавьте этот C: \ Program Files \ nodejs \.
  • Если указанный выше путь к файлу неверен, вы можете легко найти его, введя эту команду в командной строке Windows:
where node
  • Нажмите OK после получения правильного пути к каталогу узла и добавления его в системную переменную Path.
  • Снова перезагрузите компьютер.

Контрольная точка: теперь попробуйте ввести следующие команды в Git Bash:

node -v && npm -v

Используйте приложение create-response-app, чтобы запустить свой первый проект

Введите следующую команду в командную строку.

npx create-react-app hello-world

Это займет пару минут.

Теперь мы откроем проект в новом окне VS Code.

cd hello-world && code .

Вышеупомянутая команда выполняет две команды. Мы меняем каталоги в вашем новом приложении React, а затем открываем его в VS Code.

Теперь откройте новый терминал (Ctrl + Shift + `) и введите эту команду, чтобы запустить сервер Node и запустить ваше приложение:

npm start

Контрольная точка: вы должны увидеть классический стартовый экран React, когда перейдете на localhost: 3000:

Рассмотрение

Вы только что установили следующие инструменты, чтобы приступить к созданию приложений React.

  • Код VS
  • Git Bash
  • Node.js
  • npm

Вот и все! Ваша среда разработки настроена и готова к работе!