diff --git a/README.md b/README.md index 0047971..23f52e7 100644 --- a/README.md +++ b/README.md @@ -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) diff --git a/lwF1/README.md b/lwF1/README.md new file mode 100644 index 0000000..9065a30 --- /dev/null +++ b/lwF1/README.md @@ -0,0 +1,215 @@ +# Лабораторная работа №F1 - Одностраничное приложение (React) + +## Цель работы + +Освоение среды локальной фронтенд-разработки на базе NodeJS. +Освоение языка программирования TypeScript. +Освоение библиотеки React. + +## Ход работы + +1. Развернуть локальную среду разработки для создания React-приложений. +2. Создать шаблон React-приложения с использованием языка TypeScript. +3. Изменить шаблон, добавив несколько компонентов с пропсами различного типа. + +## Настройка среды разработки + +Необходимо установить следующий софт: + +1. NodeJS: . +2. Visual Studio Code: . +3. Google Chrome с расширением React Developer Tools: . + +Всё представленное ПО является бесплатным и свободным для некоммерческого использования. + +Чтобы проверить установку 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 с типами". + +Чтобы понять, что это такое, можете посетить официальный сайт технологии: . +Можно почитать эту страницу и другие до _Type Manipulation_. + +Также рассмотрите файл `src/App.tsx`. +Благодаря TypeScript среда Visual Studio Code позволяет подсказывать атрибуты у элементов. +Кстати, заметьте, что в tsx-файле (аналог js-файла) прямо внутри JS-кода расположена разметка HTML. +Странно, не так ли? + +## Изучение React + +Для понимания того, что такое React, рекомендуется ознакомиться с официальной документацией: и . +Знакомство с React очень подробное и понятное. +Вам стоит понять, чем разработка на React отличается от той разработки приложений, что была у вас до этого. + +## Создание своих компонентов + +Когда вы разобрались, что такое компоненты, давайте добавим собственный. +Предположим, мы хотим добавить компонент, который будет показывать кнопку со счётчиком нажатия. +Для этого в папке `src` можно добавить файл `Counter.tsx` и написать туда следующий код: + +```tsx +import React from 'react'; // Подключение react. + +var Counter = () => { + return ( +
Тут будет счётчик.
+ ); +}; +export default Counter; +``` + +На текущий момент весь компонент - это один статический `
`-элемент с текстом "Тут будет счётчик" без какой-либо внутренней логики. +Чтобы добавить только что созданный компонент в приложение, в `App.tsx` в начале добавьте ссылку на компонент (`import Counter from './Counter';`) и добавьте в разметку рендер компонента (``). + +Теперь поговорим про состояние нашего компонента. +Так как у нас компонент-счётчик, то значение счётчика и есть наше "состояние". + +С состоянием можно работать через хук `useState`. +Чтобы объявить состояние-число, необходимо в начале функции в нашем компоненте (до `return (`) объявить переменную счётчик и функцию по обновлению состояния. +Также сразу заиспользуем переменную с состоянием в разметке нашего компонента: + +```tsx +import React from 'react'; +import { useState } from 'react'; // Подключаем ссылку на useState. + +var Counter = () => { + var [ count, setCount ] = useState(0); // И используем. Значение по умолчанию - 0. + return ( +
Значение счётчика: {count}.
+ ); +}; +export default Counter; +``` + +Пока у нас нет логики по изменению состояния, поэтому всегда будет отображаться то число, которое указано в `useState`. + +Добавим же её! + +Сперва добавим кнопку в фукнцию рендера. +Сразу установим событие по клику на кнопку: + +```tsx +return ( +
+
Значение счётчика: {count}.
+ +
+); +``` + +Этот код изначально работать не будет, так как не объявлена функция-обработчик `handleIncrease`. +Добавим её (до `return (`): + +```tsx +var handleIncrease = () => { + setCount(count + 1); +}; +``` + +Код должен заработать! + +Как видите, компонент в реакте - это функция, которая обычно выполняет какую-либо логику и возвращает разметку (тот самый HTML внутри JS). +Сам движок React следит за состояниями компонентов и отрисовку их разметки: элементов. +Программирование клиентских приложений превращается от манипуляции с DOM-деревом в манипуляцию с состояниями и пропсами компонентов. +А что же такое пропсы? + +## Пропсы + +Давайте изменим пример. +Пускай мы можем передать в компонент `Counter` начальное значение счётчика и шаг его изменения. + +Изменим код в `App.tsx`: ``. +Приложение пока не будет запускаться, потому что мы объявили значения атрибутов, которые не описали. + +Опишем же их! +В `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 ( + + ); +}; +export default Button; +``` + +Вам необходимо самостоятельно понять, что за `onClick` и что необходимо прописать в разметке, чтобы оно заработало. +Также следует заиспользовать компонент в `Counter.tsx` вместо ``. + +## Демонстрация работы + +Демонстрация работы производится на лабораторном занятии. + +Если у Вас есть навык по работе с git, рекомендуется выложить код в публичный репозиторий и тем самым продемонстрировать навык использования этой технологии. +В этом случае добавьте, пожалуйста, файл `.gitignore`, контент которого можно взять [отсюда](https://github.com/github/gitignore/blob/master/Node.gitignore). + +Если же у Вас нет навыка работы с git, то можете сформировать архив с кодом лабораторной работы или напрямую загрузить исходные тексты в облачное хранилище, чтобы потом перенести их на лабораторные компьютеры. +Однако помните при этом, что **необходимо удалить папку `node_modules`**. +В ней содержатся исходные тексты всех подключённых библиотек (и библиотек, подключённым к библиотекам, и .... и так далее, в общем), которые на проверку отправлять не нужно. + +## Сдача лабораторной работы + +На лабораторных ПК должен быть установлен NodeJS и VS Code. +Поэтому React-приложение необходимо будет продемонстрировать вместе с его кодом.