Fix lwF1, add lwF2

2025-03-18 23:00:42 +04:00 · 2025-03-18 23:00:42 +04:00 · d96628b943
commit d96628b943
parent 2f6140ac25
3 changed files with 63 additions and 17 deletions
--- a/README.md
+++ b/README.md
@ -18,7 +18,7 @@

 Frontend:

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

 ## Цель работы

--- a/legacy/lwF1/README.md
+++ b/legacy/lwF1/README.md
@ -1,16 +1,16 @@
-# Лабораторная работа №F1 - Одностраничное приложение (TypeScript)
+# Лабораторная работа №F2 - Каркас одностраничного веб-приложения (React)

 ## Цель работы

 Освоение среды локальной фронтенд-разработки на базе NodeJS.
 Освоение языка программирования TypeScript.
-Освоение библиотеки для построения одностраничных приложений: React, Vue или другой.
+Освоение библиотеки для построения одностраничных приложений React.

 ## Ход работы

 1. Развернуть локальную среду разработки для создания одностраничных (SPA) приложений.
-2. Создать шаблон приложения на выбранной технологии с использованием языка TypeScript.
-3. Изменить шаблон, добавив несколько компонентов различного назначения.
+2. Создать шаблон приложения с использованием языка TypeScript и технологии React.
+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-приложения в папке _ip-lw-f01_.
-Для использования React выберите `React` → `TypeScript`.
+Для создания первого SPA-приложения создайте пустую папку, откройте её в VS Code и во встроенном терминале выполните следующую команду: `npm create vite@latest`.
+Она запускает процесс создания простейшего SPA-приложения.
+
+Введите название проекта, например, `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` - описание форм (обычно одна форма).

 ## Демонстрация работы