This commit is contained in:
Vladislav Moiseev 2023-04-04 09:08:49 +04:00
parent bc3f075c51
commit b2fa8d2552
2 changed files with 216 additions and 1 deletions

View File

@ -24,7 +24,7 @@
Лабораторные работы на выбор:
* [Лабораторная работа №F1 - Одностраничное приложение (React)](/TODO/README.md)
* [Лабораторная работа №F1 - Одностраничное приложение (React)](/lwF1/README.md)
* [Лабораторная работа №F2 - Получение данных через API (Fetch)](/TODO/README.md)
* [Лабораторная работа №B1 - Изучение шаблона проектирования MVC](/TODO/README.md)
* [Лабораторная работа №B2 - Разработка чат-бота для Telegram](/lwB2/README.md)

215
lwF1/README.md Normal file
View File

@ -0,0 +1,215 @@
# Лабораторная работа №F1 - Одностраничное приложение (React)
## Цель работы
Освоение среды локальной фронтенд-разработки на базе NodeJS.
Освоение языка программирования TypeScript.
Освоение библиотеки React.
## Ход работы
1. Развернуть локальную среду разработки для создания React-приложений.
2. Создать шаблон React-приложения с использованием языка TypeScript.
3. Изменить шаблон, добавив несколько компонентов с пропсами различного типа.
## Настройка среды разработки
Необходимо установить следующий софт:
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, выполните в терминале следующие команды.
Вывод должен быть похож на представленный ниже.
```bash
$ node --version
v16.13.2
$ npx --version
8.1.2
```
> Если при выполнении команды отображается номер версии - всё хорошо.
> Если нет, то, возможно, необходимо перезагрузить ПК и попробовать ещё раз.
## Создание первого React-приложения
Для создания первого React-приложения выполните следующую команду: `npx create-react-app lwF1 --template=typescript`.
Она запускает создание простейшего React-приложения с использованием TypeScript в папке lwF1.
Собственно, приложение также будет называться lwF1.
В конце должно возникнуть сообщение `Happy hacking!`.
Для выполнения данного желания необходимо перейти в созданный каталог (`cd lwF1`) и запустить VS Code в этой папке (`code .`).
Если более подробно рассматривать CRA-шаблон, то можно выделить следующие файлы и каталоги:
- `node_modules` - огромный каталог, где содержатся исходные тексты подключаемых библиотек.
- `public` - изображения, манифесты и прочие статические файлы, которые необходимо для отображения нашего веб-приложения. Также содержит основной документ, куда будет внедряться наше React-приложение: `index.html`.
- `src` - таблицы стилей и компоненты, связанные с нашим React-приложением.
- `package-lock.json` - связь библиотек из `node_modules` с нашим приложением.
- `package.json` - конфигурация приложения.
- `tsconfig.json` - конфигурация компилятора TypeScript.
Для запуска приложения необходимо в терминале (возможно запустить его прямо внутри 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
import React from 'react'; // Подключение react.
var Counter = () => {
return (
<div>Тут будет счётчик.</div>
);
};
export default Counter;
```
На текущий момент весь компонент - это один статический `<div>`-элемент с текстом "Тут будет счётчик" без какой-либо внутренней логики.
Чтобы добавить только что созданный компонент в приложение, в `App.tsx` в начале добавьте ссылку на компонент (`import Counter from './Counter';`) и добавьте в разметку рендер компонента (`<Counter />`).
Теперь поговорим про состояние нашего компонента.
Так как у нас компонент-счётчик, то значение счётчика и есть наше "состояние".
С состоянием можно работать через хук `useState`.
Чтобы объявить состояние-число, необходимо в начале функции в нашем компоненте (до `return (`) объявить переменную счётчик и функцию по обновлению состояния.
Также сразу заиспользуем переменную с состоянием в разметке нашего компонента:
```tsx
import React from 'react';
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
import React from 'react';
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>`.
## Демонстрация работы
Демонстрация работы производится на лабораторном занятии.
Если у Вас есть навык по работе с git, рекомендуется выложить код в публичный репозиторий и тем самым продемонстрировать навык использования этой технологии.
В этом случае добавьте, пожалуйста, файл `.gitignore`, контент которого можно взять [отсюда](https://github.com/github/gitignore/blob/master/Node.gitignore).
Если же у Вас нет навыка работы с git, то можете сформировать архив с кодом лабораторной работы или напрямую загрузить исходные тексты в облачное хранилище, чтобы потом перенести их на лабораторные компьютеры.
Однако помните при этом, что **необходимо удалить папку `node_modules`**.
В ней содержатся исходные тексты всех подключённых библиотек (и библиотек, подключённым к библиотекам, и .... и так далее, в общем), которые на проверку отправлять не нужно.
## Сдача лабораторной работы
На лабораторных ПК должен быть установлен NodeJS и VS Code.
Поэтому React-приложение необходимо будет продемонстрировать вместе с его кодом.