Установка окружения

1. Что мы устанавливаем и зачем

Перед тем как писать код, нужно подготовить «рабочее место». Представьте, что вы собираетесь строить — сначала нужны не сам кирпичи, а верстак, инструменты и коробка для хранения деталей. В программировании то же самое: сначала ставят программы, которые помогают писать и запускать код.

В этом курсе мы будем создавать приложение TaskFlow — список задач (как заметки «что мне нужно сделать»). Чтобы оно заработало, нам понадобятся современные инструменты: Node.js, Git, редактор кода, Angular CLI, JSON Server и Vite. Давайте сначала разберёмся, что это вообще такое — простыми словами.

Кто есть кто — коротко и по-человечески

Вот более формальная таблица (её можно держать перед глазами как шпаргалку):

2. Node.js и npm

Node.js — это тот самый «двигатель». Аналогия: как машина без двигателя не поедет, так и ваш JavaScript-код без Node.js «не заведётся» и не заработает. npm — это «магазин», откуда мы будем брать готовые детали.

Перейдите на официальный сайт nodejs.org и скачайте LTS-версию (Long Term Support — «долгая поддержка», самая стабильная). Для вашей системы (Windows, macOS или Linux). Установите, нажимая «Далее» в окне установщика.

Зачем мы это проверяем: после установки нужно убедиться, что программа действительно появилась в системе. Мы спросим её: «кто ты?» — и она должна назвать свою версию.

Аналогия: это как включить фонарик и убедиться, что он светит, прежде чем идти в тёмную комнату.

node --version   // спрашиваем у Node.js: "какая у тебя версия?"
npm --version    // то же самое для npm — менеджера пакетов

Разбор по шагам:

• Шаг 1. Слово node — это имя программы, к которой мы обращаемся.
• Шаг 2. Часть --version — это «опросник»: попроси показать версию.
• Шаг 3. Терминал печатает ответ, например v20.x.x и 10.x.x.

Что получите: если видите номера версий — всё работает, можно идти дальше. Если «команда не найдена» — перезапустите терминал (см. раздел 9).

3. Git

Git — это «история изменений» вашего проекта. Аналогия: представьте тетрадь, где вы делаете копию каждой страницы перед тем, как её переписать. Если новая версия неудачная — можно вернуться к старой. Git делает это автоматически для всего кода.

Скачайте установщик с официального сайта git-scm.com. Установите с настройками по умолчанию (на Windows выберите «Git from the command line and also from 3rd-party software» — так Git будет доступен из терминала).

Зачем проверяем: убеждаемся, что Git установился и его можно вызвать отовсюду.

Аналогия: как проверить, что новый ключ подходит к замку — повернули один раз, и он открылся.

git --version   // просим Git назвать свою версию

Разбор по шагам:

• Шаг 1. Пишем имя программы git.
• Шаг 2. Добавляем --version, чтобы увидеть номер.

Что получите: если видите версию (например, git version 2.x.x) — Git готов к работе.

4. VS Code (рекомендуемый редактор)

VS Code — это «умный блокнот» для программиста. Аналогия: обычный Блокнот просто печатает буквы. А VS Code — как блокнот, который подчёркивает ошибки красным, сам дописывает слова и раскрашивает текст, чтобы было понятно, где заголовок, а где команда.

Скачайте VS Code с code.visualstudio.com и установите. Рекомендуется сразу установить расширения (дополнения, как приложения в телефоне):

• ESLint – проверка кода: подсвечивает опечатки и плохие привычки.
• Prettier – автоформатирование: сам расставляет отступы, чтобы код был «причёсан».
• Angular Language Service – помощник именно для Angular.
• TypeScript and JavaScript Language Features – встроено, но убедитесь, что включено.

5. Angular CLI

Angular CLI — это «пульт управления» проектом. Аналогия: чтобы собрать шкаф, можно пользоваться отвёрткой и молотком по отдельности (долго и путанно). А можно взять электрический инструмент с кнопками «собрать», «запустить», «упаковать». Angular CLI — это и есть такой пульт: одна команда делает то, что иначе заняло бы часы.

Устанавливается один раз на весь компьютер («глобально») через npm. Аналогия глобальной установки: вы вешаете пульт на стену кухни, чтобы он был доступен из любой комнаты, а не лежал в одном ящике.

Зачем эта команда: мы говорим npm («курьеру»): «принеси мне Angular CLI и поставь на весь компьютер».

npm install -g @angular/cli   // -g значит "global": доступно отовсюду, а не только в одной папке

Разбор по шагам:

• Шаг 1. npm install — «курьер, принеси пакет».
• Шаг 2. -g — «поставь глобально, видно из любой папки».
• Шаг 3. @angular/cli — имя нужного нам пакета.

После установки проверьте, что пульт в руках:

ng version   // ng — это короткое имя Angular CLI; просим показать версию

Разбор по шагам:

• Шаг 1. ng — команда вызова Angular CLI (ng = a-ng-ular).
• Шаг 2. version — покажи, какая версия установлена.

Что получите: вы должны увидеть информацию о версии Angular CLI и Node.js (например, Angular CLI: 18.x).

6. JSON Server (mock API)

JSON Server — это «фейковый склад». Аналогия: вы учитесь заказывать товары в интернет-магазине. Покупать настоящий магазин необязательно — достаточно игрушечного: вы кладёте в него список товаров (в нашем случае — задач), и он «отвечает» как настоящий. Так вы потренируетесь, не поднимая реальный сервер.

JSON Server не требует глобальной установки — мы будем использовать его локально в каждом проекте. Аналогия локальной установки: вместо того чтобы вешать пульт на стену, вы кладёте его в ящик конкретной комнаты — он работает только там.

Зачем эти команды: создаём отдельную папку для «склада», говорим npm завести там проект и поставить JSON Server.

mkdir taskflow-api        // создаём папку taskflow-api (api = "интерфейс склада")
cd taskflow-api           // заходим внутрь этой папки
npm init -y               // создаём файл настроек проекта автоматически (флаг -y = "да на всё")
npm install json-server   // ставим сам JSON Server в эту папку

Разбор по шагам:

• Шаг 1. mkdir («make directory») создаёт папку.
• Шаг 2. cd («change directory») входит в неё — дальше все команды работают внутри.
• Шаг 3. npm init -y создаёт файл package.json — «паспорт» проекта.
• Шаг 4. npm install json-server скачивает и ставит сервер в эту папку.

Создайте файл db.json с начальными данными (это и есть наш «список товаров»):

{
  "tasks": [                                  // ключ "tasks" — список задач
    { "id": 1, "title": "Изучить HTTP", "completed": false },        // задача №1, не выполнена
    { "id": 2, "title": "Создать Angular-проект", "completed": false } // задача №2, не выполнена
  ]
}

Разбор по шагам:

• Шаг 1. Весь файл — это одна «коробка» данных в формате JSON (текстовый формат обмена).
• Шаг 2. Внутри — список tasks из двух задач.
• Шаг 3. У каждой задачи есть номер (id), название (title) и флажок готовности (completed).

Запустите сервер:

npx json-server db.json --port 3000   // npx запускает сервер; --port 3000 = "слушай на двери №3000"

Разбор по шагам:

• Шаг 1. npx запускает программу, не устанавливая её навсегда.
• Шаг 2. db.json — откуда брать данные.
• Шаг 3. --port 3000 — на каком «номере двери» отвечать (адрес в браузере).

Что получите: теперь по адресу http://localhost:3000/tasks доступен ваш API. Аналогия: localhost — это «мой собственный компьютер», а 3000 — номер двери, в которую вы стучитесь. Оставьте сервер работать в отдельном окне терминала (не закрывайте его).

7. React + Vite проект

Для React мы используем Vite как инструмент сборки. Аналогия: представьте кухню. Вы пишете рецепт (код) на разных листочках. Vite — это повар, который быстро собирает всё в одно блюдо (готовую страницу) и тут же подаёт его, стоит вам что-то изменить в рецепте.

Зачем эта команда: создаём заготовку React-проекта с готовой структурой, чтобы не строить её вручную.

npm create vite@latest taskflow-react -- --template react-ts   // создаём проект taskflow-react на TypeScript

Разбор по шагам:

• Шаг 1. npm create vite@latest — «сделай новый проект через самый свежий Vite».
• Шаг 2. taskflow-react — имя нашей папки/проекта.
• Шаг 3. -- --template react-ts — берём шаблон React на языке TypeScript (ts = «типизированный», с проверкой ошибок).

Перейдите в папку проекта, установите зависимости и запустите dev-сервер:

cd taskflow-react   // входим в папку проекта
npm install         // ставим все нужные детали проекта (загружает из npm)
npm run dev         // запускаем "повара" Vite — он открывает живую страницу

Разбор по шагам:

• Шаг 1. cd taskflow-react — переходим в папку проекта.
• Шаг 2. npm install — загружает всё, что перечислено в «паспорте» проекта.
• Шаг 3. npm run dev — запускает локальный сервер разработки.

Что получите: откройте в браузере адрес, который вывел Vite (обычно http://localhost:5173). Вы увидите работающее React-приложение (стартовую страницу). Поздравляем — оно живёт!

8. Проверка установки

Теперь сведём всё вместе. Эти команды — как «перекличка»: мы опрашиваем каждый инструмент, и все должны ответить своей версией.

node --version                 // Node.js — двигатель
npm --version                  // npm — курьер пакетов
git --version                  // Git — история изменений
ng version                     // Angular CLI — пульт управления
npx json-server --version      // JSON Server — фейковый склад (проверим, что он доступен)

Разбор по шагам: каждая строка опрашивает свой инструмент, как в разделах выше. Если хотя бы одна отвечает «команда не найдена» — вернитесь к нужному разделу и повторите установку.

Убедитесь, что:

• Angular CLI показывает версию (например, 18.x).
• Mock API запускается без ошибок (окно с json-server работает, адрес localhost:3000/tasks открывается).
• Vite dev-сервер React открывается в браузере (адрес localhost:5173).

9. Частые проблемы и их решение

Не паникуйте, если что-то пошло не так — почти все ошибки решаются парой действий. Ниже «болезнь → лекарство».

10. Чек-лист студента

Отметьте каждый пункт, когда он выполнен. Это ваш «путевой лист» — если всё отмечено, можно стартовать.

• Node.js установлен (проверено node --version)
• npm установлен (проверено npm --version)
• Git установлен (проверено git --version)
• VS Code установлен и настроены расширения
• Angular CLI установлен глобально (проверено ng version)
• Создана папка taskflow-api и установлен JSON Server
• Mock API запущен и работает (http://localhost:3000/tasks возвращает JSON)
• Создан React-проект через Vite (taskflow-react)
• React-проект запускается без ошибок
• Я могу переключаться между терминалами (API, Angular, React) и знаю, как их остановить (Ctrl+C)

Полезные ссылки

• Скачать Node.js
• Скачать Git
• Скачать VS Code
• Официальная документация Angular CLI
• JSON Server на GitHub
• Vite официальный сайт

Актуальность инструкций проверена на август 2026 года. Версии инструментов могут меняться, но общий порядок остаётся тем же.