intprog/lwF1

Лабораторная работа №F1 - Одностраничное приложение (TypeScript)

Цель работы

Освоение среды локальной фронтенд-разработки на базе NodeJS. Освоение языка программирования TypeScript. Освоение библиотеки для построения одностраничных приложений: React, Vue или другой.

Ход работы

1. Развернуть локальную среду разработки для создания одностраничных (SPA) приложений.
2. Создать шаблон приложения на выбранной технологии с использованием языка TypeScript.
3. Изменить шаблон, добавив несколько компонентов различного назначения.

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

Настройка среды разработки

Необходимо установить следующий софт:

1. NodeJS: https://nodejs.org/en/download/.
2. Visual Studio Code: https://code.visualstudio.com/download.
3. Google Chrome с расширением React Developer Tools: https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=ru.

Всё представленное ПО является бесплатным и свободным для некоммерческого использования.

Чтобы проверить установку NodeJS, выполните в терминале (можно в VS Code) следующие команды. Вывод должен быть похож на представленный ниже.

$ node --version
v20.11.0
$ npx --version
10.2.4

Если при выполнении команды отображается номер версии - всё хорошо. Если нет, то, возможно, необходимо перезагрузить ПК и попробовать ещё раз.

Создание первого SPA-приложения

Для создания первого SPA-приложения создайте пустую папку, откройте её в VS Code и во встроенном терминале выполните следующую команду: npm create vite@latest ip-lw-f01. Она запускает процесс создания простейшего SPA-приложения в папке ip-lw-f01. Для использования React выберите React → TypeScript.

В конце должно возникнуть сообщение:

Done. Now run:
  cd ip-lw-f01
  npm install
  npm run dev

Выполните указанные команды во встроенном терминале. В конце должны получить похожий вывод:

  VITE v5.2.9  ready in 601 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

Для отображения сайте перейдите по ссылке, которая указана в выводе. Для остановки отладки нажмите Ctrl+C.

Если более подробно рассматривать созданный шаблон, то можно выделить следующие файлы и каталоги:

• node_modules - огромный каталог, где содержатся исходные тексты подключаемых библиотек.
• public - изображения, манифесты и прочие статические файлы, которые необходимо для отображения нашего веб-приложения.
• src - весь наш исходных код, в т.ч. подключаемые динамически стили и изображения, связанные с нашим React-приложением.
• index.html - основной файл для внедрения нашего одностраничного приложения.
• package.json - конфигурация приложения.
• package-lock.json - связь библиотек из node_modules с нашим приложением.
• tsconfig.json - конфигурация компилятора TypeScript.
• vite.config.ts - конфигурация нашего прилжения, основанного на vite.

Для запуска приложения необходимо в терминале (возможно запустить его прямо внутри VS Code) команду npm run start. Должен открыться браузер с анимированным логотипом реакта.

Не завершая приложения, измените какой-нибудь текст в файле src/App.tsx, сохраните файл и убедитесь, что сайт автоматически изменился в браузере без необходимости перезагрузки страницы.

Изучение TypeScript

TypeScript — это диалект ECMAScript, в котором добавлена строгая (насколько это возможно) типизация. Другими словами, это "JavaScript с типами".

Чтобы понять, что это такое, можете посетить официальный сайт технологии: https://www.typescriptlang.org/docs/handbook/intro.html. Можно почитать эту страницу и другие до Type Manipulation.

Также рассмотрите файл src/App.tsx. Благодаря TypeScript среда Visual Studio Code позволяет подсказывать атрибуты у элементов. Кстати, заметьте, что в tsx-файле (аналог js-файла) прямо внутри JS-кода расположена разметка HTML. Странно, не так ли?

Изучение React

Для понимания того, что такое React, рекомендуется ознакомиться с официальной документацией: https://ru.reactjs.org/docs/getting-started.html и https://ru.reactjs.org/tutorial/tutorial.html. Знакомство с React очень подробное и понятное. Вам стоит понять, чем разработка на React отличается от той разработки приложений, что была у вас до этого.

Создание своих компонентов

Когда вы разобрались, что такое компоненты, давайте добавим собственный. Предположим, мы хотим добавить компонент, который будет показывать кнопку со счётчиком нажатия. Для этого в папке src можно добавить файл Counter.tsx и написать туда следующий код:

var Counter = () => {
    return (
        <div>Тут будет счётчик.</div>
    );
};
export default Counter;

На текущий момент весь компонент - это один статический <div>-элемент с текстом "Тут будет счётчик" без какой-либо внутренней логики. Чтобы добавить только что созданный компонент в приложение, в App.tsx в начале добавьте ссылку на компонент (import Counter from './Counter';) и добавьте в разметку рендер компонента (<Counter />).

Теперь поговорим про состояние нашего компонента. Так как у нас компонент-счётчик, то значение счётчика и есть наше "состояние".

С состоянием можно работать через хук useState. Чтобы объявить состояние-число, необходимо в начале функции в нашем компоненте (до return () объявить переменную счётчик и функцию по обновлению состояния. Также сразу заиспользуем переменную с состоянием в разметке нашего компонента:

import { useState } from 'react'; // Подключаем ссылку на useState.

var Counter = () => {
    var [ count, setCount ] = useState(0); // И используем. Значение по умолчанию - 0.
    return (
        <div>Значение счётчика: {count}.</div>
    );
};
export default Counter;

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

Добавим же её!

Сперва добавим кнопку в фукнцию рендера. Сразу установим событие по клику на кнопку:

return (
    <div>
        <div>Значение счётчика: {count}.</div>
        <button onClick={handleIncrease}>Прибавить 1</button>
    </div>
);

Этот код изначально работать не будет, так как не объявлена функция-обработчик handleIncrease. Добавим её (до return ():

var handleIncrease = () => {
    setCount(count + 1);
};

Код должен заработать!

Как видите, компонент в реакте - это функция, которая обычно выполняет какую-либо логику и возвращает разметку (тот самый HTML внутри JS). Сам движок React следит за состояниями компонентов и отрисовку их разметки: элементов. Программирование клиентских приложений превращается от манипуляции с DOM-деревом в манипуляцию с состояниями и пропсами компонентов. А что же такое пропсы?

Пропсы

Давайте изменим пример. Пускай мы можем передать в компонент Counter начальное значение счётчика и шаг его изменения.

Изменим код в App.tsx: <Counter start={10} step={5} />. Приложение пока не будет запускаться, потому что мы объявили значения атрибутов, которые не описали.

Опишем же их! В Counter.tsx добавим перед объявлением блоков интерфейс и заиспользуем его в описании компонента:

interface CounterProps {
    start: number;
    step: number;
}

var Counter = (props: CounterProps) => {

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

Добавьте использование параметров самостоятельно.

Теперь создадим отдельный компонент под кнопку. Это нужно, например, если на сайте все кнопки должны иметь одинаковое поведение и одинаковый внешний вид.

Допустим, заглушка для кнопки будет такая:

interface ButtonProps {
    text: string;
    onClick: () => any; // TODO: Что это за пропс?
}

var Button = (props: ButtonProps) => {
    return (
        <button onClick={/* ??? */}>{props.text}</button>
    );
};
export default Button;

Вам необходимо самостоятельно понять, что за onClick и что необходимо прописать в разметке, чтобы оно заработало. Также следует заиспользовать компонент в Counter.tsx вместо <button>...</button>.

Демонстрация работы

Демонстрация работы производится на лабораторном занятии.

Для того, чтобы запустить код на лабораторных компьютерах, можете сформировать архив с кодом лабораторной работы или напрямую загрузить исходные тексты в облачное хранилище. Однако помните при этом, что необходимо удалить папку node_modules. В ней содержатся исходные тексты всех подключённых библиотек (и библиотек, подключённым к библиотекам, и .... и так далее, в общем), которые можно восстановить в любой момент командой npm install.

Сдача лабораторной работы

На лабораторных ПК должен быть установлен NodeJS и VS Code. Поэтому SPA-приложение необходимо будет продемонстрировать вместе с его кодом.