231 lines
14 KiB
Markdown
231 lines
14 KiB
Markdown
# Лабораторная работа №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) следующие команды.
|
||
Вывод должен быть похож на представленный ниже.
|
||
|
||
```bash
|
||
$ 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` и написать туда следующий код:
|
||
|
||
```tsx
|
||
var Counter = () => {
|
||
return (
|
||
<div>Тут будет счётчик.</div>
|
||
);
|
||
};
|
||
export default Counter;
|
||
```
|
||
|
||
На текущий момент весь компонент - это один статический `<div>`-элемент с текстом "Тут будет счётчик" без какой-либо внутренней логики.
|
||
Чтобы добавить только что созданный компонент в приложение, в `App.tsx` в начале добавьте ссылку на компонент (`import Counter from './Counter';`) и добавьте в разметку рендер компонента (`<Counter />`).
|
||
|
||
Теперь поговорим про состояние нашего компонента.
|
||
Так как у нас компонент-счётчик, то значение счётчика и есть наше "состояние".
|
||
|
||
С состоянием можно работать через хук `useState`.
|
||
Чтобы объявить состояние-число, необходимо в начале функции в нашем компоненте (до `return (`) объявить переменную счётчик и функцию по обновлению состояния.
|
||
Также сразу заиспользуем переменную с состоянием в разметке нашего компонента:
|
||
|
||
```tsx
|
||
import { useState } from 'react'; // Подключаем ссылку на useState.
|
||
|
||
var Counter = () => {
|
||
var [ count, setCount ] = useState(0); // И используем. Значение по умолчанию - 0.
|
||
return (
|
||
<div>Значение счётчика: {count}.</div>
|
||
);
|
||
};
|
||
export default Counter;
|
||
```
|
||
|
||
Пока у нас нет логики по изменению состояния, поэтому всегда будет отображаться то число, которое указано в `useState`.
|
||
|
||
Добавим же её!
|
||
|
||
Сперва добавим кнопку в фукнцию рендера.
|
||
Сразу установим событие по клику на кнопку:
|
||
|
||
```tsx
|
||
return (
|
||
<div>
|
||
<div>Значение счётчика: {count}.</div>
|
||
<button onClick={handleIncrease}>Прибавить 1</button>
|
||
</div>
|
||
);
|
||
```
|
||
|
||
Этот код изначально работать не будет, так как не объявлена функция-обработчик `handleIncrease`.
|
||
Добавим её (до `return (`):
|
||
|
||
```tsx
|
||
var handleIncrease = () => {
|
||
setCount(count + 1);
|
||
};
|
||
```
|
||
|
||
Код должен заработать!
|
||
|
||
Как видите, компонент в реакте - это функция, которая обычно выполняет какую-либо логику и возвращает разметку (тот самый HTML внутри JS).
|
||
Сам движок React следит за состояниями компонентов и отрисовку их разметки: элементов.
|
||
Программирование клиентских приложений превращается от манипуляции с DOM-деревом в манипуляцию с состояниями и пропсами компонентов.
|
||
А что же такое пропсы?
|
||
|
||
## Пропсы
|
||
|
||
Давайте изменим пример.
|
||
Пускай мы можем передать в компонент `Counter` начальное значение счётчика и шаг его изменения.
|
||
|
||
Изменим код в `App.tsx`: `<Counter start={10} step={5} />`.
|
||
Приложение пока не будет запускаться, потому что мы объявили значения атрибутов, которые не описали.
|
||
|
||
Опишем же их!
|
||
В `Counter.tsx` добавим перед объявлением блоков интерфейс и заиспользуем его в описании компонента:
|
||
|
||
```tsx
|
||
interface CounterProps {
|
||
start: number;
|
||
step: number;
|
||
}
|
||
|
||
var Counter = (props: CounterProps) => {
|
||
```
|
||
|
||
Теперь код работает, однако значения наших параметров игнорируются, потому что мы их не используем.
|
||
|
||
Добавьте использование параметров самостоятельно.
|
||
|
||
Теперь создадим отдельный компонент под кнопку.
|
||
Это нужно, например, если на сайте все кнопки должны иметь одинаковое поведение и одинаковый внешний вид.
|
||
|
||
Допустим, заглушка для кнопки будет такая:
|
||
|
||
```tsx
|
||
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-приложение необходимо будет продемонстрировать вместе с его кодом.
|