Урок №1

19. Angular 2026: современная точка отсчёта

В актуальном Angular компоненты по умолчанию являются standalone. Официальная документация прямо указывает, что standalone components можно импортировать напрямую в другие standalone components, а старые компоненты могут использовать NgModule-ориентированный подход. Это означает, что новый курс не должен начинаться с обязательного AppModule.

Angular CLI предназначен для создания, разработки, тестирования, сборки и сопровождения приложений. В актуальной команде ng new standalone включён по умолчанию; strict mode также включён по умолчанию. Актуальная CLI-документация показывает Vitest как стандартный test runner для новых проектов.

npm install -g @angular/cli
ng new task-flow-angular
cd task-flow-angular
ng serve --open

Это важное обновление относительно старого учебного материала, который был приложен к курсу: старые подходы можно знать для чтения legacy-проектов, но не стоит делать их стартовой моделью обучения.

20. Angular component: первый взгляд

Официальный Angular описывает component как основной строительный блок приложения. У компонента есть TypeScript-класс, декоратор @Component, template и selector; у standalone-компонента также есть imports, содержащий зависимости шаблона.

import { Component } from '@angular/core'; // декоратор компонента

@Component({
  selector: 'app-task-page', // тег, по которому компонент вставляется в шаблон
  template: `
    <!-- Заголовок страницы -->
    <h1>TaskFlow</h1>
    <!-- Приветственный текст -->
    <p>Мои задачи</p>
  `
})
export class TaskPage {} // класс хранит логику и данные компонента

Здесь класс содержит логику и данные, template описывает представление, selector определяет использование компонента, а decorator сообщает Angular, как этот класс должен обрабатываться.

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

21. Angular template: данные и события

Template связывает HTML-подобную разметку с данными компонента. Интерполяция {{ title }} показывает значение. Property binding задаёт свойства DOM, event binding реагирует на события. Современный Angular также предоставляет новый control flow syntax, например @if и @for.

<!-- Интерполяция: значение переменной title попадает в текст -->
<h1>{{ title }}</h1>

@if (tasks.length === 0) {
  <!-- Новый control flow Angular: условный блок -->
  <p>Задач пока нет.</p>
}

<!-- Event binding: клик вызывает метод компонента -->
<button (click)="addDemoTask()">
  Добавить пример
</button>

Важно понимать направление связи. Template может отображать значение, пользователь может вызвать событие, а обработчик меняет состояние компонента. Это отличается от старой модели, где разработчик вручную искал DOM-элемент и менял его.

22. React 2026: базовая ментальная модель

React строит UI из компонентов. Компонент - JavaScript-функция, которая возвращает JSX. Props передают данные от родителя к ребёнку. State хранит информацию, которую компонент должен помнить между рендерами.

import { useState } from 'react'; // хук состояния

export default function Counter() {
  // count — текущее значение, setCount — функция обновления
  const [count, setCount] = useState(0);

  return (
    <section>
      <p>Создано задач: {count}</p>
      {/* клик увеличивает состояние на 1 */}
      <button onClick={() => setCount(count + 1)}>
        Добавить
      </button>
    </section>
  );
}

Официальная документация React подчёркивает, что state является локальной «памятью» компонента и хранится отдельно для каждой позиции компонента в дереве. Это важная концепция, которая позже станет основой для обсуждения state management.

23. React: props и композиция

Props позволяют сделать компонент переиспользуемым. Вместо жёстко заданной задачи TaskItem получает title и completed от родителя.

// Дочерний компонент получает данные через props
function TaskItem({ title, completed }) {
  return (
    <li>
      {completed ? '✓' : '○'} {title}
    </li>
  );
}

// Родительский компонент: хранит список и композирует детей
export default function TaskList() {
  const tasks = [
    { id: 1, title: 'Изучить HTTP', completed: true },
    { id: 2, title: 'Изучить React', completed: false }
  ];

  return (
    <ul>
      {/* .map превращает данные в компоненты; key нужен React для повторного использования */}
      {tasks.map(task => (
        <TaskItem key={task.id} {...task} />
      ))}
    </ul>
  );
}

Композиция означает, что большой UI строится из меньших компонентов. React рекомендует разделять компоненты на файлы по мере роста приложения, чтобы код было легче читать и переиспользовать.

24. Общее и различное в Angular и React

На этом этапе полезно сделать паузу и сравнить две технологии без оценки «лучше/хуже». Обе строят UI из компонентов, но дают разные инструменты для представления, state и инфраструктуры.

Мы вернёмся к этой таблице после каждого большого блока курса и будем сравнивать реальные решения на одном TaskFlow.

25. Node.js, npm и package.json

Node.js нужен не потому, что браузер не умеет JavaScript, а потому, что инструменты разработки должны работать за пределами браузера. Angular CLI, тестовые средства, сборщики и множество утилит запускаются в Node.js.

npm управляет пакетами и скриптами проекта. В package.json хранятся scripts и зависимости. package-lock.json фиксирует дерево конкретных версий зависимостей. Для студента важно уметь читать эти файлы, но не нужно заучивать каждое поле.

node --version
npm --version

npm install
npm run build
npm test

26. Git: минимальный рабочий цикл

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

git status
git diff
git add .
git commit -m "Первый экран TaskFlow"
git log --oneline

Хороший commit - это не архив всех действий за неделю, а осмысленная точка. Например, «Добавлен список задач» лучше, чем «fix» или «сделал». В профессиональной разработке Git связан с code review и CI/CD.

27. DevTools: Console и Network как обязательные инструменты

Хороший frontend-разработчик не только пишет код, но и умеет наблюдать за его выполнением. В Console можно увидеть runtime-ошибку и stack trace. В Network можно увидеть запрос, его URL, метод, статус, заголовки, тело и время выполнения.

Если API вернул 404, не нужно начинать менять HTML. Если запрос вернул 500, нужно проверить сервер. Если запрос 200, но интерфейс пустой, вероятны проблемы с форматом ответа, обработкой данных или рендерингом.

Такая классификация ошибок постепенно превращает отладку из угадывания в последовательный процесс.

Проверить DNS-разрешение можно командой:

nslookup taskflow.example

Если команда вернёт IP-адрес — домен разрешается. Если ошибка — проблема в DNS, а не в приложении.

28. Accessibility: интерфейс должен быть понятен не только мыши

Доступность начинается с семантики. Кнопка должна быть button, поле - input с понятной подписью, изображение - с подходящим alt, структура заголовков - логичной. Framework не отменяет эти требования.

Почему это относится к архитектуре? Потому что хороший component должен иметь не только внешний вид, но и правильное поведение. Если компонент использует div вместо кнопки только ради стиля, клавиатурная навигация и доступность могут пострадать.

Неправильно

<div class="btn" onclick="save()">Сохранить</div>

Правильно

<button type="button" (click)="save()">Сохранить</button>

В дальнейших уроках мы будем учитывать accessibility при создании форм, диалогов, таблиц и навигации.

29. Безопасность: границы доверия

Всё, что выполняется в браузере, находится под контролем пользователя. Поэтому frontend не является доверенной зоной. Скрытие кнопки, disabled-состояние или проверка роли в компоненте не являются заменой серверной авторизации.

Например, если пользователь не должен удалять задачи другого пользователя, backend обязан проверить право на DELETE-запрос. Даже если кнопка удаления не отображается в UI, запрос можно сформировать вручную.

Это фундаментальная архитектурная идея: удобство пользователя обеспечивается frontend, а безопасность - сервером и инфраструктурой.

30. Производительность: что влияет на скорость

Производительность frontend зависит не от одного фактора. Важны сетевой RTT, размер JavaScript, изображения, количество запросов, порядок загрузки, серверное время и стратегия рендеринга. Поэтому утверждение «SPA быстрее» слишком общее.

На практике разработчик измеряет, а не угадывает. Lighthouse, DevTools Performance, Network и Web Vitals помогают понять, что увидит и почувствует пользователь.

В TaskFlow мы сначала построим правильную архитектуру, а затем научимся измерять. Оптимизация до измерения часто приводит к усложнению кода без реального эффекта.

31. State: минимальное состояние и производные данные

Состояние должно содержать минимальный набор самостоятельных фактов. Если количество завершённых задач можно вычислить из массива tasks, отдельный completedCount обычно не нужен. Иначе два источника истины могут разойтись.

React официально рекомендует избегать redundant state. Та же логика полезна и в Angular: вычисляемое значение лучше получать из источника, чем хранить отдельно без необходимости.

const completedTasks = tasks.filter(task => task.completed);
const completedCount = completedTasks.length;

Этот принцип станет особенно важным при изучении signals, computed, selectors и state management.

32. Local state и server state

Не вся информация в приложении одинаковая. Local state может описывать открытие диалога или выбранную вкладку. Server state - данные, пришедшие от API и потенциально изменяющиеся вне текущего компонента.

Server state сложнее: его нужно загружать, кэшировать, обновлять, инвалидировать и обрабатывать при ошибках. Поэтому библиотеки для запросов и state management решают задачи, которые не сводятся к простому useState или одной переменной.

// Local state — локальное состояние UI
const [isOpen, setIsOpen] = useState(false);
// Оно живёт только в этом компоненте

// Server state — данные с сервера
const [tasks, setTasks] = useState([]);
  useEffect(() => {
    // Загрузка server state при монтировании компонента
    fetch('/api/tasks')
      .then(res => res.json())
      .then(data => setTasks(data)); // кладём ответ в состояние
  }, []); // пустой массив — эффект выполняется один раз
// Эти данные могут измениться на сервере
// независимо от действий пользователя

В Angular и React мы разберём эту границу отдельно, потому что она существенно влияет на архитектуру приложения.

33. Loading, empty, error — четыре состояния UI

Базовых состояния три: loading, success, error. Но success делится на два подтипа: с данными и с пустым списком. Пустой список и незагруженный список - разные состояния. Во время запроса приложение ещё не знает результат. Если запрос завершился и сервер вернул [], это уже успешное, но пустое состояние.

Если эти состояния смешать, пользователь будет видеть «ничего» и не понимать, идёт ли загрузка или система сломалась. Это одна из самых частых ошибок первых frontend-приложений.

34. Как проектировать TaskFlow до кода

Перед написанием компонента полезно описать сценарий пользователя. Например: пользователь открывает /tasks, видит список, нажимает «Добавить», вводит название, сохраняет, получает новую задачу и видит её в списке.

Из сценария выводятся UI-компоненты, состояния и API-вызовы. Не наоборот. Это важный метод проектирования: сначала поведение продукта, затем техническая реализация.

Сценарий: создание задачи

1. Открыть форму
2. Ввести title
3. Нажать «Создать»
4. Показать loading
5. POST /api/tasks
6. Обработать успех или ошибку
7. Обновить список
8. Показать результат

35. Практика: подготовка окружения

Перед практикой проверьте Node.js, npm и Git. Установите VS Code или другой удобный редактор. Angular CLI можно установить глобально через npm согласно официальной документации.

node --version
npm --version
git --version

npm install -g @angular/cli
ng version

На этом шаге не нужно изучать все флаги CLI. Важно увидеть, что команды выполняются, версии выводятся и среда готова.

Если команда не найдена, не перескакивайте сразу к случайным решениям из поисковой выдачи: проверьте PATH, версию Node.js и способ установки. Для учебной группы лучше заранее использовать одну согласованную LTS-версию Node.js.

36. Практика: первый локальный Angular-проект

Создайте проект TaskFlow. Современный Angular CLI использует standalone API по умолчанию. Это важно: проект, который вы увидите, будет отличаться от приложенного старого материала, где центральное место занимает AppModule.

ng new task-flow-angular
cd task-flow-angular
ng serve --open

После запуска измените главный шаблон так, чтобы на странице появились заголовок TaskFlow и короткое описание. Затем перезапустите или дождитесь автоматической пересборки и убедитесь, что браузер показывает изменения.

<h1>TaskFlow</h1>
<p>Приложение для управления задачами</p>

Сохраните файл. Angular CLI отслеживает изменения и автоматически пересобирает приложение. Обновление страницы в браузере не требуется — hot reload подставит новый контент.

37. Практика: первый компонент списка задач

Создайте отдельный компонент для списка задач. В современном Angular standalone component можно использовать напрямую из другого standalone component. CLI создаёт его как самостоятельную единицу.

ng generate component task-list

Добавьте в шаблон три задачи. Не усложняйте упражнение API, сервисами и маршрутизацией. Цель - почувствовать компонентную границу и увидеть, что экран можно собирать из нескольких частей.

<h2>Мои задачи</h2>
<ul>
  <li>Изучить HTTP</li>
  <li>Создать компонент</li>
  <li>Подготовить TaskFlow</li>
</ul>

37.1. Практика: подключение компонента к корню

Компонент TaskList создан, но он существует отдельно — его никто не использует. Чтобы он появился на экране, нужно подключить его к корневому компоненту App. В Angular 22 это делается за три шага.

Шаг 1. Импорт в классе компонента

Откройте src/app/app.ts. В Angular 22 standalone-компоненты подключаются через массив imports в декораторе @Component — точно так же, как подключается RouterOutlet. Добавьте импорт класса TaskList и укажите его в массиве:

import { Component, signal } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { TaskList } from './task-list/task-list';

@Component({
  selector: 'app-root',
  imports: [RouterOutlet, TaskList],
  templateUrl: './app.html',
  styleUrl: './app.css'
})
export class App {
  protected readonly title = signal('task-flow-angular');
}

Обратите внимание: путь './task-list/task-list' указывает на файл task-list.ts внутри папки task-list/. Расширение .ts указывать не нужно — TypeScript разберётся сам.

Шаг 2. Использование селектора в шаблоне

Теперь, когда TaskList импортирован, его селектор <app-task-list> становится доступен в шаблоне. Откройте src/app/app.html и полностью замените его содержимое на:

<div class="app-container">
  <h1>TaskFlow</h1>
  <app-task-list />
</div>

<router-outlet />

Строка <app-task-list /> — это само-закрывающийся тег. Angular видит его, находит соответствующий компонент в imports и вставляет шаблон task-list.html прямо в это место. На экране вы увидите заголовок «TaskFlow» и список задач.

Шаг 3. Базовые стили

Откройте src/app/app.css и добавьте стили:

:host {
  display: block;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;
}

.app-container {
  max-width: 600px;
  margin: 0 auto;
  padding: 2rem 1rem;
}

h1 {
  text-align: center;
  color: #333;
  margin-bottom: 2rem;
}

Свойство :host стилизует сам корневой элемент <app-root>. Без него display: block не сработает, потому что по умолчанию Angular-компонент — инлайновый.

Итог: что изменилось и зачем

Почему это работает

В Angular standalone-компоненты — это автономные единицы. Каждый имеет свой селектор, шаблон и стили. Чтобы использовать один компонент внутри другого, достаточно:

1. Импортировать класс компонента в imports массив
2. Использовать его селектор в шаблоне как обычный HTML-тег

Не нужен NgModule, не нужно регистрировать компоненты в модулях — всё работает напрямую. Это одно из ключевых отличий Angular 22 от предыдущих версий.

Проверка

Запустите приложение и убедитесь, что всё работает:

npm start

Откройте http://localhost:4200. На экране вы должны увидеть заголовок TaskFlow и список из трёх задач под ним. Если компонент не появился — проверьте консоль браузера на наличие ошибок компиляции.

38. Практика: первый React-компонент

В отличие от предыдущего фрагмента, здесь мы не предполагаем, что React уже установлен. Сначала создадим полноценный проект. Для учебного курса используем Vite и шаблон React + TypeScript.

Шаг 1. Создаём проект

npm create vite@latest taskflow-react -- --template react-ts
cd taskflow-react
npm install
npm run dev

После npm run dev Vite покажет локальный адрес, обычно вида http://localhost:5173. Откройте его в браузере. Теперь у нас есть настоящий React-проект, а не изолированный пример кода.

Шаг 2. Где находится наш код

В типичном проекте Vite основная точка приложения находится в src. Файл App.tsx содержит корневой компонент, а main.tsx запускает React-приложение в браузере.

Шаг 3. Создаём компонент TaskList

Замените содержимое src/App.tsx на:

type Task = {
  id: number;
  title: string;
  completed: boolean;
};

const tasks: Task[] = [
  { id: 1, title: 'Изучить HTTP', completed: false },
  { id: 2, title: 'Создать UI', completed: false },
  { id: 3, title: 'Изучить React', completed: false }
];

function TaskList() {
  return (
    <ul>
      {tasks.map(task => (
        <li key={task.id}>
          {task.title}
        </li>
      ))}
    </ul>
  );
}

export default function App() {
  return (
    <main>
      <h1>TaskFlow</h1>
      <TaskList />
    </main>
  );
}

Здесь студент видит несколько важных идей одновременно: React-компонент является функцией, JSX находится внутри TypeScript-кода, массив можно обрабатывать обычным JavaScript методом map(), а key нужен для стабильной идентификации элементов списка.

39. Практика: сравнить одну и ту же задачу

Возьмём простой сценарий: отобразить название задачи и кнопку. В Angular шаблон использует Angular syntax, а в React JSX использует JavaScript-выражения и props.

Angular
<h3>{{ task.title }}</h3>
<button (click)="toggleTask()">
  Изменить статус
</button>

React
<h3>{task.title}</h3>
<button onClick={toggleTask}>
  Изменить статус
  </button>

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

40. Практика: сделать состояние видимым

Теперь переведём идею состояния из теории в работающий код. Сначала сделаем это в React, потому что здесь хорошо видно разделение между текущим значением и функцией его изменения.

import { useState } from 'react';

export default function TaskStatus() {
  const [completed, setCompleted] = useState(false);

  return (
    <section>
      <p>
        Статус: {completed ? 'Готово' : 'В работе'}
      </p>

      <button onClick={() => setCompleted(!completed)}>
        Изменить статус
      </button>
    </section>
  );
}

После клика setCompleted изменяет состояние, React выполняет новый рендер компонента, и текст на странице меняется. Это простой пример state-driven UI: интерфейс зависит от состояния.

Та же идея в Angular

В современном Angular для реактивного локального значения можно использовать signal:

import { Component, signal } from '@angular/core';

@Component({
  selector: 'app-task-status',
  template: `
    <p>Статус: {{ completed() ? 'Готово' : 'В работе' }}</p>

    <button (click)="toggle()">
      Изменить статус
    </button>
  `
})
export class TaskStatusComponent {
  completed = signal(false);

  toggle() {
    this.completed.update(value => !value);
  }
}

Здесь completed() читает значение signal, а update() изменяет его. В следующем Angular-блоке курса мы разберём signals подробнее, включая computed() и связь с template.

41. Как пользоваться самостоятельной работой и подсказками

Самостоятельная работа в этом пособии построена по принципу «сначала попытка, затем проверка». Не открывайте ответы сразу: сначала попробуйте решить задачу самостоятельно, используя код и схемы из урока.

Если задача не решается, используйте подсказку. Подсказка должна помочь выбрать направление, но не обязательно выдавать готовый код целиком.

После выполнения задания сравните своё решение с кратким ответом в конце. Совпадение строк кода не является целью. Важно, чтобы совпадала логика и результат.

Императивный подход

// Находим элемент и меняем вручную
const li = document.querySelector('#task-1');
li.style.textDecoration = 'line-through';
li.classList.add('completed');
document.querySelector('#counter').textContent = count;

Декларативный подход

<!-- Описываем результат при данном состоянии -->
<li [class.completed]="task.completed">
  {{ task.title }}
</li>
  <span>Выполнено: {{ completedCount() }}</span>

Во втором случае мы описываем что должно быть, а Framework применяет изменения к DOM самостоятельно.

42. Самопроверка: связать всё в одну систему

Попробуйте устно объяснить следующую историю. Пользователь вводит адрес TaskFlow. Браузер разбирает URL, получает сетевую информацию, устанавливает HTTPS-соединение и делает HTTP-запрос. Сервер отвечает HTML и/или данными. JavaScript/TypeScript формирует интерактивный UI. Пользователь нажимает «Создать». Frontend формирует запрос к API. Backend проверяет данные и права, сохраняет новую запись и возвращает ответ. UI обновляет state и показывает новую задачу.

Если вы можете объяснить эту цепочку без подсказок, то основная цель занятия достигнута. Angular и React на следующем уровне помогут организовать клиентскую часть этой цепочки.

43. Что будет на следующих занятиях Angular

После этой базы мы перейдём к Angular практически. Сначала - компоненты и templates. Затем - data binding (связь данных с шаблоном), события, conditional rendering (условный рендеринг), списки, inputs/outputs (передача данных между компонентами), lifecycle (этапы жизни компонента от создания до уничтожения), services (сервисы для бизнес-логики) и dependency injection (механизм предоставления зависимостей компоненту). После этого появятся forms, HTTP, routing, signals и state.

Каждая тема будет привязана к TaskFlow. Например, forms - это создание задачи, HTTP - получение и сохранение задач, routing - экран списка и экран отдельной задачи, signals - реактивное состояние фильтров и списка.

Такой порядок позволяет не изучать API изолированно. Каждый новый механизм появляется как решение конкретной задачи продукта.

44. Что будет на следующих занятиях React

После Angular мы построим React-версию TaskFlow. Сначала компоненты и JSX, затем props, state, события, списки и формы. Затем Hooks (механизмы React для state и побочных эффектов), Context (— способ передачи данных компонентам без props), производительность и тестирование, производительность и тестирование.

Особое внимание будет уделено не копированию Angular-модели, а пониманию React mental model. Например, state в React локален компоненту, а его организация зависит от места компонента в дереве. Официальная документация отдельно подчёркивает принципы выбора структуры state и избегания избыточных данных.

В конце мы сможем реализовать одинаковые сценарии TaskFlow двумя подходами и предметно сравнить решения.

45. Домашнее задание

Задание 1. Нарисуйте архитектуру TaskFlow от пользователя до базы данных и подпишите ответственность каждого уровня.

Задание 2. Создайте JSON с пятью задачами. Для каждой используйте id, title, completed и createdAt.

Задание 3. Создайте небольшой HTML/JS-прототип списка задач с добавлением новой записи.

Задание 4. Создайте и запустите Angular-проект task-flow-angular.

Задание 5. Сравните Angular и React в восьми предложениях: что общего, а что различается по архитектуре.

46. Контрольные вопросы

1. Что делает браузер? (раздел 3) 2. Что такое URL? (раздел 4) 3. Зачем нужен DNS? (раздел 5) 4. Что содержит HTTP-запрос? (раздел 6) 5. Что означает статус 404? (раздел 6) 6. Что такое API? (раздел 7) 7. Чем JSON отличается от базы данных? (раздел 8) 8. Для чего нужен TypeScript? (раздел 13) 9. Почему компонент является удобной единицей архитектуры? (разделы 20, 22) 10. Что такое state? (разделы 31, 32) 11. Что такое SPA? (раздел 16) 12. Чем CSR отличается от SSR? (раздел 17) 13. Почему frontend не является доверенной зоной? (разделы 15, 29) 14. Зачем нужен Node.js? (раздел 25) 15. Для чего нужен npm? (раздел 25) 16. Почему нужен Git? (раздел 26) 17. Что общего у Angular и React? (разделы 18, 24) 18. Чем отличается их экосистемный подход? (раздел 18) 19. Почему не стоит дублировать derived state? (раздел 31) 20. Что нужно проверить в Network при ошибке API? (раздел 27)

Ответы и подсказки к заданиям

Этот раздел нужен для самостоятельной сверки. Сначала выполните работу без подсказок. Затем проверьте идею решения.

Пользователь
  ↓
Браузер / Angular / React
  ↓
HTTP API
  ↓
Backend
  ↓
Database

{
  "id": 1,
  "title": "Изучить HTTP",
  "completed": false,
  "createdAt": "2026-08-17"
}

47. Мини-словарь

48. Источники и актуализация материала

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

Angular. Для создания проекта используйте официальную документацию Installation и ng new. В актуальном CLI standalone API включён по умолчанию, а ng serve --open запускает локальный development server.

Angular standalone. Angular рекомендует использовать standalone components вместо NgModule для нового кода. Это особенно важно как противопоставление старому приложенному учебному материалу, где центральное место занимал AppModule.

React и Vite. Для React в этом курсе используется шаблон react-ts через Vite. Официальный Vite предоставляет шаблоны react и react-ts.

Примечание о версиях. Команды CLI и tooling развиваются. Если студент проходит курс спустя значительное время после его публикации, сначала нужно сверить команды с официальной документацией, а уже затем сравнивать результат с текстом пособия.

48A. Если что-то не запускается: алгоритм диагностики

Новичку особенно трудно понять, где искать проблему. Используйте одинаковый порядок проверки.

1. Команда не найдена. Проверьте, установлен ли Node.js и попал ли путь к программе в PATH.
2. Angular не запускается. Выполните ng version и затем ng serve без дополнительных флагов, чтобы увидеть полное сообщение.
3. React/Vite не запускается. Проверьте npm install, затем npm run dev.
4. fetch возвращает Failed to fetch. Проверьте, запущен ли mock API и доступен ли http://localhost:3000/tasks.
5. 404. Проверьте URL и существование endpoint.
6. 500. Проверьте серверную часть или mock API; frontend может быть исправен.
7. В Console ошибка TypeScript/JavaScript. Читайте первую полезную строку stack trace и смотрите файл/строку.

49. Практическая лаборатория: от клика до HTTP

Выполните упражнение без framework. Создайте кнопку «Загрузить задачи». При нажатии выведите в Console сообщение, затем выполните GET-запрос к тестовому endpoint. Проследите запрос во вкладке Network и сравните данные в Response с тем, что выводится в Console.

async function load() {
  console.log('Начинаем загрузку');
  const response = await fetch('/api/tasks');
  const data = await response.json();
  console.log('Получено:', data);
}

Главная цель лаборатории - увидеть полный цикл: событие пользователя → JavaScript → HTTP → response → данные. Если backend ещё не подготовлен, используйте локальный mock или любой согласованный учебный endpoint.

50. Практическая лаборатория: три состояния UI

Создайте простой компонент, который различает loading, success и error. На старте покажите кнопку. После нажатия установите loading. Если запрос успешен, покажите список. Если произошла ошибка, покажите сообщение и кнопку повторной попытки.

Это упражнение кажется простым, но оно вводит важную идею state machine. Интерфейс не просто «есть» или «нет». Он находится в одном из нескольких состояний, а переходы между ними вызываются событиями и результатами операций.

idle -> loading -> success
                 -> error -> loading

Стартовый код (React)

import { useState } from 'react';

export default function TaskLoader() {
  const [status, setStatus] = useState('idle');
  const [tasks, setTasks] = useState([]);
  const [error, setError] = useState(null);

  // TODO: реализуйте handleLoad
  // 1) setStatus('loading')
  // 2) fetch tasks
  // 3) setStatus('success') или setStatus('error')

  return (
    <div>
      {status === 'idle' && <button onClick={handleLoad}>Загрузить</button>}
      {status === 'loading' && <p>Загрузка...</p>}
      {status === 'error' && <p>Ошибка: {error}</p>}
      {status === 'success' && (
        <ul>{tasks.map(t => <li key={t.id}>{t.title}</li>)}</ul>
      )}
    </div>
  );
}

51. Практическая лаборатория: минимальная модель Task

Опишите Task так, чтобы модель была достаточна для первого прототипа, но не содержала лишней информации. Затем придумайте, какие поля нужны только UI, а какие приходят от сервера.

interface Task {
  id: number;
  title: string;
  completed: boolean;
  createdAt: string;
}

interface TaskForm {
  title: string;
}

Разделение Task и TaskForm полезно: форма создания не обязана знать id и createdAt до отправки на сервер. Такой маленький пример показывает, почему типы помогают моделировать границы данных.

52. Практическая лаборатория: компонентное дерево

Нарисуйте дерево TaskFlow и распределите ответственность: AppShell, Header, Sidebar, TaskPage, TaskList, TaskItem, TaskForm, FilterBar. Для каждого компонента запишите две вещи: какие данные ему нужны и какие события он может инициировать.

AppShell:  данные=__, события=__
Header:    данные=__, события=__
Sidebar:   данные=__, события=__
TaskPage:  данные=__, события=__
TaskList:  данные=__, события=__
TaskItem:  данные=__, события=__
TaskForm:  данные=__, события=__
FilterBar: данные=__, события=__

Заполните шаблон, опираясь на код из предыдущих разделов. Не существует единственного правильного ответа — важно уметь обосновать свой выбор.

Если два компонента начинают постоянно обмениваться большим числом данных, подумайте, не находится ли их общее состояние слишком низко или слишком высоко. Это станет центральной темой при изучении state architecture.

53. Практическая лаборатория: сравнение Angular и React без копирования кода

Возьмите одну задачу: «Показать список задач и кнопку изменения статуса». Сначала опишите поведение словами: данные приходят в компонент; UI показывает title и completed; click вызывает действие; state меняется; UI обновляется.

После этого отдельно реализуйте её на Angular и React. Не переносите синтаксис напрямую. Сначала сформулируйте архитектуру, затем выберите соответствующий механизм каждой технологии.

54. Финальная страница урока: что должно остаться в голове

После первого занятия у вас должна появиться не коллекция команд, а рабочая ментальная модель.

• Браузер выполняет frontend-код и управляет DOM.
• HTTP связывает клиент и сервер.
• API является контрактом обмена.
• JSON представляет данные.
• Frontend отвечает за UI и клиентское взаимодействие.
• Backend отвечает за серверные правила и безопасность.
• Компоненты позволяют собирать интерфейс из самостоятельных частей.
• State описывает то, что приложение должно помнить.
• Angular и React решают общую задачу компонентного UI, но делают это по-разному.
• TaskFlow станет нашей практической площадкой на всём курсе.

На следующем занятии мы перестанем говорить о framework в общих терминах и начнём строить Angular-приложение как систему компонентов. С этого момента каждая теория будет сразу превращаться в код и часть TaskFlow.

Источники

Angular — Components

Angular CLI

Angular ng new

React — State

React — Managing State

React — Components

Node.js Downloads

Актуальность технических сведений проверена 17 августа 2026 года. При выпуске нового учебного потока версии Node.js, Angular CLI и другого tooling следует сверить с официальной документацией.

📖 Глоссарий

🧠 Самопроверка