Глава 2. Установка и настройка окружения разработки
Прежде чем начать разрабатывать приложения с использованием React и TypeScript, вам потребуется настроить ваше рабочее окружение. В этой главе рассмотрим шаги установки и настройки необходимых инструментов и библиотек для разработки веб-приложений.
2.1 Установка Node. js и npm
Node. js – это среда выполнения JavaScript, которая позволяет выполнять JavaScript на стороне сервера. Она также включает в себя пакетный менеджер npm (Node Package Manager), который используется для установки и управления сторонними пакетами и зависимостями проекта. При установке Node. js в комплекте с ним автоматически устанавливается и npm (Node Package Manager).
Шаги для установки Node. js и npm:
– Перейдите на официальный сайт Node. js (https://nodejs.org/) и загрузите установщик для вашей операционной системы (Windows, macOS, Linux).
– Запустите установщик и следуйте инструкциям на экране.
– После завершения установки, откройте терминал (командную строку) и выполните команду node -v, чтобы проверить версию Node. js, и npm -v, чтобы проверить версию npm. Если обе команды вернули версии, значит, установка прошла успешно.
– Добавьте полный путь к исполняемому файлу Node. js в переменную PATH вашей системы.
2.2 Настройка редактора кода
Для комфортной разработки с React и TypeScript, наилучшим выбором будет использование редактора кода, поддерживающего TypeScript. В этой книге мы будем использовать бесплатный редактор кода – Visual Studio Code, и все примеры будут представлены именно в нем.
Установите его, если у вас его еще нет, скачав с официального сайта.
Затем установите следующие его расширения:
– ESLint: Для проверки и форматирования кода.
– Prettier: Для автоматического форматирования кода.
– Reactjs code snippets: Для быстрого создания React-компонентов.
– Auto Complete Tag: Для автозакрытия HTML/XML тегов в процессе набора кода.
– Code Runner: Позволяет запускать код (в том числе, скрипты) прямо из редактора без переключения в терминал.
Для установки расширений откройте Visual Studio Code. Перейдите во вкладку «Extensions» (или нажмите Ctrl+Shift+X). В поисковой строке введите название и найдите соответствующий плагин. Нажмите кнопку «Install» (Установить) рядом с расширением.
После установки, убедитесь, что установленные вами плагины активированы.
2.3 Создание проекта с использованием Create React App
Create React App – это инструмент, который позволяет быстро создать новый проект React с предустановленной конфигурацией и набором инструментов для разработки. Это отличное решение, как для начинающих, так и для опытных разработчиков, позволяя сэкономить время и значительно упростить рабочий процесс.
Удобство использования Create React App:
– Быстрый старт. Разработка нового приложения на React занимает всего несколько минут. CRA создает стандартную структуру проекта и настраивает сборку.
– Готовая конфигурация. CRA предоставляет настройку для Webpack, Babel и других инструментов, сэкономив ваше время на ручной настройке.
– Автоматическое обновление зависимостей. CRA следит за обновлениями зависимостей и предупреждает о несовместимостях. Это позволяет легко поддерживать приложение в актуальном состоянии.
