Add lwF1

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)

lwF1/README.md

@@ -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-приложение необходимо будет продемонстрировать вместе с его кодом.