Изменил(а) на 'README.md'

Reviewed-on: #1

README.md

@@ -25,7 +25,7 @@
 
 Лабораторные работы на выбор:
 
-- [Лабораторная работа №F1 - Одностраничное приложение (React)](./lwF1/README.md)
+- [Лабораторная работа №F1 - Одностраничное приложение (TypeScript)](./lwF1/README.md)
 - [Лабораторная работа №F2 - Получение данных через API (Fetch)](./lwF2/README.md)
 - [Лабораторная работа №B1 - Создание онлайн-чата при помощи WebSocket](./lwB1/README.md)
 - [Лабораторная работа №B2 - Разработка чат-бота для Telegram](./lwB2/README.md)
@@ -35,5 +35,6 @@
 Так как у ИСЭ дисциплина идёт всего 1 семестр, то в нём есть элементы как frontend, так и backend.
 Соответственно, и экзамен один, в котором два вопроса: на каждый раздел по одному.
 
-Для допуска к экзамену надо защитить все обязательные работы и две их необязательных на выбор.
+Для допуска к экзамену надо защитить все обязательные работы и любые две из необязательных на выбор.
+Например, из дополнительных можно взять B1 и B2, F1 и B1 или _любые другие комбинации_.
 В сумме 8, что соответствует учебному плану.

lwF1/README.md

@@ -1,16 +1,18 @@
-# Лабораторная работа №F1 - Одностраничное приложение (React)
+# Лабораторная работа №F1 - Одностраничное приложение (TypeScript)
 
 ## Цель работы
 
 Освоение среды локальной фронтенд-разработки на базе NodeJS.
 Освоение языка программирования TypeScript.
-Освоение библиотеки React.
+Освоение библиотеки для построения одностраничных приложений: React, Vue или другой.
 
 ## Ход работы
 
-1. Развернуть локальную среду разработки для создания React-приложений.
+1. Развернуть локальную среду разработки для создания одностраничных (SPA) приложений.
-2. Создать шаблон React-приложения с использованием языка TypeScript.
+2. Создать шаблон приложения на выбранной технологии с использованием языка TypeScript.
-3. Изменить шаблон, добавив несколько компонентов с пропсами различного типа.
+3. Изменить шаблон, добавив несколько компонентов различного назначения.
+
+> Задание описано для React, однако можете исполоьзовать в качестве аналога любую другую похожую технологию.
 
 ## Настройка среды разработки
 
@@ -22,46 +24,67 @@
 
 Всё представленное ПО является бесплатным и свободным для некоммерческого использования.
 
-Чтобы проверить установку NodeJS, выполните в терминале следующие команды.
+Чтобы проверить установку NodeJS, выполните в терминале (можно в VS Code) следующие команды.
 Вывод должен быть похож на представленный ниже.
 
 ```bash
 $ node --version
-v16.13.2
+v20.11.0
 $ npx --version
-8.1.2
+10.2.4
 ```
 
 > Если при выполнении команды отображается номер версии - всё хорошо.
 > Если нет, то, возможно, необходимо перезагрузить ПК и попробовать ещё раз.
 
-## Создание первого React-приложения
+## Создание первого SPA-приложения
 
-Для создания первого React-приложения выполните следующую команду: `npx create-react-app lwF1 --template=typescript`.
+Для создания первого SPA-приложения создайте пустую папку, откройте её в VS Code и во встроенном терминале выполните следующую команду: `npm create vite@latest ip-lw-f01`.
-Она запускает создание простейшего React-приложения с использованием TypeScript в папке lwF1.
+Она запускает процесс создания простейшего SPA-приложения в папке _ip-lw-f01_.
-Собственно, приложение также будет называться lwF1. 
+Для использования React выберите `React` → `TypeScript`.
 
-В конце должно возникнуть сообщение `Happy hacking!`.
+В конце должно возникнуть сообщение:
 
-Для выполнения данного желания необходимо перейти в созданный каталог (`cd lwF1`) и запустить VS Code в этой папке (`code .`).
+```
+Done. Now run:
+  cd ip-lw-f01
+  npm install
+  npm run dev
+```
 
-Если более подробно рассматривать CRA-шаблон, то можно выделить следующие файлы и каталоги:
+Выполните указанные команды во встроенном терминале.
+В конце должны получить похожий вывод:
+
+```
+  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` - изображения, манифесты и прочие статические файлы, которые необходимо для отображения нашего веб-приложения. Также содержит основной документ, куда будет внедряться наше React-приложение: `index.html`.
+- `public` - изображения, манифесты и прочие статические файлы, которые необходимо для отображения нашего веб-приложения.
-- `src` - таблицы стилей и компоненты, связанные с нашим React-приложением.
+- `src` - весь наш исходных код, в т.ч. подключаемые динамически стили и изображения, связанные с нашим React-приложением.
-- `package-lock.json` - связь библиотек из `node_modules` с нашим приложением.
+- `index.html` - основной файл для внедрения нашего одностраничного приложения.
 - `package.json` - конфигурация приложения.
+- `package-lock.json` - связь библиотек из `node_modules` с нашим приложением.
 - `tsconfig.json` - конфигурация компилятора TypeScript.
+- `vite.config.ts` - конфигурация нашего прилжения, основанного на vite.
 
 Для запуска приложения необходимо в терминале (возможно запустить его прямо внутри VS Code) команду `npm run start`.
 Должен открыться браузер с анимированным логотипом реакта.
 
-Не завершая приложения, измените какой-нибудь текст в файле `src/App.tsx`, сохраните файл и убедитесь, что в браузере сайт автоматически изменился.
+Не завершая приложения, измените какой-нибудь текст в файле `src/App.tsx`, сохраните файл и убедитесь, что сайт автоматически изменился в браузере без необходимости перезагрузки страницы.
 
 ## Изучение TypeScript
 
-TypeScript -- это диалект ECMAScript, в котором добавлена строгая (насколько это возможно) типизация.
+TypeScript — это диалект ECMAScript, в котором добавлена строгая (насколько это возможно) типизация.
 Другими словами, это "JavaScript с типами".
 
 Чтобы понять, что это такое, можете посетить официальный сайт технологии: <https://www.typescriptlang.org/docs/handbook/intro.html>.
@@ -85,8 +108,6 @@ TypeScript -- это диалект ECMAScript, в котором добавле
 Для этого в папке `src` можно добавить файл `Counter.tsx` и написать туда следующий код:
 
 ```tsx
-import React from 'react'; // Подключение react.
-
 var Counter = () => {
     return (
         <div>Тут будет счётчик.</div>
@@ -106,7 +127,6 @@ export default Counter;
 Также сразу заиспользуем переменную с состоянием в разметке нашего компонента:
 
 ```tsx
-import React from 'react';
 import { useState } from 'react'; // Подключаем ссылку на useState.
 
 var Counter = () => {
@@ -180,8 +200,6 @@ var Counter = (props: CounterProps) => {
 Допустим, заглушка для кнопки будет такая:
 
 ```tsx
-import React from 'react';
-
 interface ButtonProps {
     text: string;
     onClick: () => any; // TODO: Что это за пропс?
@@ -202,14 +220,11 @@ export default Button;
 
 Демонстрация работы производится на лабораторном занятии.
 
-Если у Вас есть навык по работе с git, рекомендуется выложить код в публичный репозиторий и тем самым продемонстрировать навык использования этой технологии.
+Для того, чтобы запустить код на лабораторных компьютерах, можете сформировать архив с кодом лабораторной работы или напрямую загрузить исходные тексты в облачное хранилище.
-В этом случае добавьте, пожалуйста, файл `.gitignore`, контент которого можно взять [отсюда](https://github.com/github/gitignore/blob/master/Node.gitignore).
-
-Если же у Вас нет навыка работы с git, то можете сформировать архив с кодом лабораторной работы или напрямую загрузить исходные тексты в облачное хранилище, чтобы потом перенести их на лабораторные компьютеры.
 Однако помните при этом, что **необходимо удалить папку `node_modules`**.
-В ней содержатся исходные тексты всех подключённых библиотек (и библиотек, подключённым к библиотекам, и .... и так далее, в общем), которые на проверку отправлять не нужно.
+В ней содержатся исходные тексты всех подключённых библиотек (и библиотек, подключённым к библиотекам, и .... и так далее, в общем), которые можно восстановить в любой момент командой `npm install`.
 
 ## Сдача лабораторной работы
 
 На лабораторных ПК должен быть установлен NodeJS и VS Code.
-Поэтому React-приложение необходимо будет продемонстрировать вместе с его кодом.
+Поэтому SPA-приложение необходимо будет продемонстрировать вместе с его кодом.