Fix lwF1, add lwF2

README.md

@@ -18,7 +18,7 @@
 
 Frontend:
 
-- [Лабораторная работа №F1 - Макет одностраничного сайта (Figma)](#)
+- [Лабораторная работа №F1 - Макет одностраничного сайта (Figma)](./lwF1/README.md)
 - [Лабораторная работа №F2 - Каркас одностраничного веб-приложения (React)](#)
 - [Лабораторная работа №F3 - Стилизация веб-приложения (React)](#)
 - [Лабораторная работа №F4 - Взаимодействие с API (Axios)](#)

lwF1/README.md

@@ -1,4 +1,4 @@
-# Лабораторная работа №1 - Макет одностраничного сайта (Figma)
+# Лабораторная работа №F1 - Макет одностраничного сайта (Figma)
 
 ## Цель работы
 

lwF2/README.md

@@ -1,16 +1,16 @@
-# Лабораторная работа №F1 - Одностраничное приложение (TypeScript)
+# Лабораторная работа №F2 - Каркас одностраничного веб-приложения (React)
 
 ## Цель работы
 
 Освоение среды локальной фронтенд-разработки на базе NodeJS.
 Освоение языка программирования TypeScript.
-Освоение библиотеки для построения одностраничных приложений: React, Vue или другой.
+Освоение библиотеки для построения одностраничных приложений React.
 
 ## Ход работы
 
 1. Развернуть локальную среду разработки для создания одностраничных (SPA) приложений.
-2. Создать шаблон приложения на выбранной технологии с использованием языка TypeScript.
+2. Создать шаблон приложения с использованием языка TypeScript и технологии React.
-3. Изменить шаблон, добавив несколько компонентов различного назначения.
+3. Изменить шаблон, добавив компоненты на основании макета из л/р F1.
 
 > Задание описано для React, однако можете исполоьзовать в качестве аналога любую другую похожую технологию.
 
@@ -18,7 +18,7 @@
 
 Необходимо установить следующий софт:
 
-1. NodeJS: <https://nodejs.org/en/download/>.
+1. NodeJS: <https://nodejs.org/en/download/>, версия LTS.
 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>.
 
@@ -29,9 +29,9 @@
 
 ```bash
 $ node --version
-v20.11.0
+v22.14.0
 $ npx --version
-10.2.4
+10.9.2
 ```
 
 > Если при выполнении команды отображается номер версии - всё хорошо.
@@ -39,15 +39,18 @@ $ npx --version
 
 ## Создание первого SPA-приложения
 
-Для создания первого SPA-приложения создайте пустую папку, откройте её в VS Code и во встроенном терминале выполните следующую команду: `npm create vite@latest ip-lw-f01`.
+Для создания первого SPA-приложения создайте пустую папку, откройте её в VS Code и во встроенном терминале выполните следующую команду: `npm create vite@latest`.
-Она запускает процесс создания простейшего SPA-приложения в папке _ip-lw-f01_.
+Она запускает процесс создания простейшего SPA-приложения.
-Для использования React выберите `React` → `TypeScript`.
+
+Введите название проекта, например, `ip-lwf2`.
+
+Для использования React выберите `React` → `TypeScript + SWC`.
 
 В конце должно возникнуть сообщение:
 
 ```
 Done. Now run:
-  cd ip-lw-f01
+  cd ip-lwf2
   npm install
   npm run dev
 ```
@@ -56,7 +59,7 @@ Done. Now run:
 В конце должны получить похожий вывод:
 
 ```
-  VITE v5.2.9  ready in 601 ms
+  VITE v6.2.2  ready in 233 ms
 
   ➜  Local:   http://localhost:5173/
   ➜  Network: use --host to expose
@@ -97,11 +100,11 @@ TypeScript — это диалект ECMAScript, в котором добавл
 
 ## Изучение React
 
-Для понимания того, что такое React, рекомендуется ознакомиться с официальной документацией: <https://ru.reactjs.org/docs/getting-started.html> и <https://ru.reactjs.org/tutorial/tutorial.html>.
+Для понимания того, что такое React, рекомендуется ознакомиться с официальной документацией: <https://ru.react.dev/>.
 Знакомство с React очень подробное и понятное.
 Вам стоит понять, чем разработка на React отличается от той разработки приложений, что была у вас до этого.
 
-## Создание своих компонентов
+## Создание своих компонентов на примере счётчика кликов
 
 Когда вы разобрались, что такое компоненты, давайте добавим собственный.
 Предположим, мы хотим добавить компонент, который будет показывать кнопку со счётчиком нажатия.
@@ -214,7 +217,50 @@ export default Button;
 ```
 
 Вам необходимо самостоятельно понять, что за `onClick` и что необходимо прописать в разметке, чтобы оно заработало.
-Также следует заиспользовать компонент в `Counter.tsx` вместо `<button>...</button>`.
+
+## Декомпозиция комопнентов
+
+Компоненты в React могут включать в себя другие компоненты.
+Таким образом, можно выстроить дерево компонентов от общих к конкретным.
+
+Например, таким образом:
+
+- App
+  - Header
+  - Body
+  - Footer
+
+We need to go deeper:
+
+- App
+  - Header
+    - Title
+      - Logotype
+      - Text
+    - NavBar
+      - Link
+  - Body
+    - Main
+      - Title
+      - Subtitle
+    - Price
+      - PriceAmount
+      - PriceDescription
+    - Feedback
+      - Form
+        - TextBox
+        - Button
+  - Footer
+    - Contacts
+    - Map
+
+Каждый из пунктов выше может быть выделен в отдельный компонент со своим набором пропсов, чтобы из их комбинации можно было собрать наш лендинг из л/р 1.
+
+Предлагается компоненты положить по следующим директориям:
+
+- `src/components` - общие компоненты: ссылки, обёртки блоков, поля ввода, кнопки.
+- `src/blocks` - описание блоков сайта: шапка, цены, отзывы, подвал.
+- `src/forms` - описание форм (обычно одна форма).
 
 ## Демонстрация работы