From f26d9d8512ad57460720c4b9bbaaf076f37397d8 Mon Sep 17 00:00:00 2001 From: RedrockJS Date: Tue, 25 Mar 2025 12:56:44 +0300 Subject: [PATCH] update typescript, update docs --- docs/api/01-http.md | 3 +- docs/api/02-https.md | 4 +- docs/api/03-rest-api.md | 4 +- docs/api/04-graphql.md | 1 + docs/api/05-polling.md | 2 + docs/api/06-long-polling.md | 1 + docs/api/07-server-side-events.md | 2 + docs/api/08-websocket.md | 4 +- .../02-classic-layer-based-arch.md | 5 +- docs/architecture/03-atomic-design.md | 5 +- .../04-ddd-domain-driven-design.md | 5 +- .../05-fsd-feature-slice-design.md | 5 +- docs/architecture/06-micro-frontend.md | 5 +- docs/architecture/07-tdd.md | 2 +- docs/architecture/08-dev-principles.md | 5 +- docs/architecture/09-oop.md | 107 ++++++++++++++++++ docs/browser/01-about-browser.md | 5 +- docs/browser/02-dom.md | 5 +- docs/browser/03-cssom.md | 5 +- docs/browser/04-critical-render-path.md | 3 +- docs/browser/05-dev-tools.md | 5 +- docs/browser/06-cors.md | 4 +- docs/git/01-git.md | 5 +- docs/git/02-ci-cd.md | 5 +- docs/html-css/01-position.md | 5 +- docs/html-css/02-flex-grid.md | 11 +- docs/html-css/03-semantic-tags.md | 4 +- docs/html-css/04-block-model.md | 3 +- docs/html-css/05-selectors.md | 5 +- docs/html-css/06-preprocessors.md | 5 +- docs/html-css/07-size-units.md | 3 +- docs/react/01-intro.md | 5 +- docs/react/02-v-dom.md | 5 +- docs/react/03-lifecycle.md | 5 +- docs/react/04-props-state.md | 3 +- docs/react/05-base-hooks.md | 5 +- docs/react/06-hocs.md | 5 +- docs/react/07-optimization-hooks.md | 7 +- docs/react/08-users-hooks.md | 5 +- docs/react/09-render-portal.md | 5 +- docs/react/10-pure-function.md | 84 ++++++++++++++ docs/state-managers/01-intro.md | 5 +- docs/state-managers/02-redux.md | 4 +- docs/state-managers/03-rtk-query.md | 2 + docs/state-managers/04-zustand.md | 2 + docs/state-managers/05-apollo-graphql.md | 4 +- .../state-managers/06-tenstack-react-query.md | 2 + docs/state-managers/07-mobx.md | 4 +- docs/team/01-methodology.md | 5 +- docs/team/02-processes.md | 3 +- docs/testing/01-testing.md | 2 + docs/testing/02-fronend-test.md | 3 +- docs/typescript/01-intro.md | 4 +- docs/typescript/02-data-types.md | 4 +- docs/typescript/03-types-vs-interface.md | 4 +- docs/typescript/04-utility-types.md | 4 +- docs/typescript/05-generic-types.md | 2 + docs/typescript/06-type-guards.md | 5 +- docs/typescript/07-enums-vs-as-const.md | 4 +- docs/typescript/08-namespaces.md | 33 ++++++ docs/typescript/09-decorators.md | 89 +++++++++++++++ 61 files changed, 467 insertions(+), 80 deletions(-) create mode 100644 docs/architecture/09-oop.md create mode 100644 docs/react/10-pure-function.md create mode 100644 docs/typescript/08-namespaces.md create mode 100644 docs/typescript/09-decorators.md diff --git a/docs/api/01-http.md b/docs/api/01-http.md index f7d58d4..a7a28bb 100644 --- a/docs/api/01-http.md +++ b/docs/api/01-http.md @@ -84,5 +84,4 @@ Content-Length: 1234 HTTP является фундаментальным протоколом для работы в Интернете и используется практически во всех веб-технологиях. - - +🚀 **_Источник: DeepSeek_** \ No newline at end of file diff --git a/docs/api/02-https.md b/docs/api/02-https.md index 09eeca0..87afb9f 100644 --- a/docs/api/02-https.md +++ b/docs/api/02-https.md @@ -36,4 +36,6 @@ sidebar_position: 2 - Банковские приложения. - Социальные сети и почтовые сервисы. -HTTPS стал стандартом для современных веб-сайтов, обеспечивая безопасность и конфиденциальность пользователей. \ No newline at end of file +HTTPS стал стандартом для современных веб-сайтов, обеспечивая безопасность и конфиденциальность пользователей. + +🚀 **_Источник: DeepSeek_** \ No newline at end of file diff --git a/docs/api/03-rest-api.md b/docs/api/03-rest-api.md index f49b6ac..5c5f98d 100644 --- a/docs/api/03-rest-api.md +++ b/docs/api/03-rest-api.md @@ -50,4 +50,6 @@ sidebar_position: 3 ## Разница между REST API и RESTful API: - **REST API** — это общий термин, описывающий API, которое следует принципам REST. -- **RESTful API** — это более строгий термин, подразумевающий, что API полностью соответствует всем принципам REST. \ No newline at end of file +- **RESTful API** — это более строгий термин, подразумевающий, что API полностью соответствует всем принципам REST. + +🚀 **_Источник: DeepSeek_** \ No newline at end of file diff --git a/docs/api/04-graphql.md b/docs/api/04-graphql.md index e5cd72e..8742be5 100644 --- a/docs/api/04-graphql.md +++ b/docs/api/04-graphql.md @@ -54,3 +54,4 @@ mutation { - **Гибкость:** Легко изменять запросы без необходимости изменять API. - **Интеграция с состоянием:** Apollo Client интегрируется с состоянием React, что упрощает управление данными. +🚀 **_Источник: DeepSeek_** \ No newline at end of file diff --git a/docs/api/05-polling.md b/docs/api/05-polling.md index e0883de..28124b1 100644 --- a/docs/api/05-polling.md +++ b/docs/api/05-polling.md @@ -75,3 +75,5 @@ export default PollingExample; 1. **WebSockets:** Для реального времени с двусторонней связью. 2. **Server-Sent Events (SSE):** Для односторонней передачи данных от сервера к клиенту. 3. **Long Polling:** Клиент отправляет запрос и ждет, пока сервер не вернет новые данные. + +🚀 **_Источник: DeepSeek_** \ No newline at end of file diff --git a/docs/api/06-long-polling.md b/docs/api/06-long-polling.md index 16f00f4..17b9426 100644 --- a/docs/api/06-long-polling.md +++ b/docs/api/06-long-polling.md @@ -116,3 +116,4 @@ export default LongPollingWithAxios; 2. Server-Sent Events (SSE): Для односторонней передачи данных от сервера к клиенту. 3. Обычный Polling: Когда данные обновляются часто, и long polling не нужен. +🚀 **_Источник: DeepSeek_** \ No newline at end of file diff --git a/docs/api/07-server-side-events.md b/docs/api/07-server-side-events.md index 749761c..cdb7cfb 100644 --- a/docs/api/07-server-side-events.md +++ b/docs/api/07-server-side-events.md @@ -130,3 +130,5 @@ app.listen(3000, () => { 1. WebSockets: Для двусторонней связи в реальном времени. 2. Long Polling: Когда SSE недоступен. 3. Polling: Для простых сценариев. + +🚀 **_Источник: DeepSeek_** \ No newline at end of file diff --git a/docs/api/08-websocket.md b/docs/api/08-websocket.md index 1c51c79..90897d5 100644 --- a/docs/api/08-websocket.md +++ b/docs/api/08-websocket.md @@ -159,4 +159,6 @@ console.log('WebSocket server is running on ws://localhost:8080'); ## Альтернативы WebSocket: 1. **Server-Sent Events (SSE):** Для односторонней связи (сервер → клиент). 2. **Long Polling:** Когда WebSocket недоступен. -3. **Polling:** Для простых сценариев. \ No newline at end of file +3. **Polling:** Для простых сценариев. + +🚀 **_Источник: DeepSeek_** \ No newline at end of file diff --git a/docs/architecture/02-classic-layer-based-arch.md b/docs/architecture/02-classic-layer-based-arch.md index 2a7aa8d..9513fbc 100644 --- a/docs/architecture/02-classic-layer-based-arch.md +++ b/docs/architecture/02-classic-layer-based-arch.md @@ -3,7 +3,6 @@ sidebar_position: 2 --- # Классическая архитектура -Источник: DeepSeek Layer-based architecture (архитектура на основе слоёв) — это подход к организации кода, при котором приложение разделяется на несколько логических слоёв, каждый из которых отвечает за определённый аспект функциональности. Этот метод широко используется как во фронтенд-, так и в бэкенд-разработке и помогает создавать структурированные, поддерживаемые и масштабируемые приложения. @@ -107,4 +106,6 @@ src/ - Подходит для крупных проектов с множеством фич. 2. **Domain-driven Design (DDD):** - Организация кода вокруг доменных областей (например, `user`, `order`, `product`). - - Часто используется в бэкенд-разработке. \ No newline at end of file + - Часто используется в бэкенд-разработке. + +🚀 **_Источник: DeepSeek_** \ No newline at end of file diff --git a/docs/architecture/03-atomic-design.md b/docs/architecture/03-atomic-design.md index d1c5dcc..fc05e1a 100644 --- a/docs/architecture/03-atomic-design.md +++ b/docs/architecture/03-atomic-design.md @@ -3,7 +3,6 @@ sidebar_position: 3 --- # Atomic design -Источник: DeepSeek Atomic Design — это методология проектирования и организации пользовательских интерфейсов, предложенная Брэдом Фростом (Brad Frost). Она основана на идее разделения интерфейса на небольшие, независимые и переиспользуемые компоненты, которые затем комбинируются для создания более сложных структур. Название методологии вдохновлено химией: так же, как молекулы состоят из атомов, интерфейсы состоят из базовых компонентов. @@ -96,6 +95,4 @@ src/ - Когда требуется высокая согласованность интерфейса. - В командах, где дизайнеры и разработчики тесно взаимодействуют. - - - +🚀 **_Источник: DeepSeek_** \ No newline at end of file diff --git a/docs/architecture/04-ddd-domain-driven-design.md b/docs/architecture/04-ddd-domain-driven-design.md index ea16068..6910e19 100644 --- a/docs/architecture/04-ddd-domain-driven-design.md +++ b/docs/architecture/04-ddd-domain-driven-design.md @@ -3,7 +3,6 @@ sidebar_position: 4 --- # Доменная архитектура -Источник: DeepSeek **Domain-Driven Design (DDD)** — это подход к разработке программного обеспечения, который фокусируется на моделировании бизнес-логики и организации кода вокруг доменных областей (бизнес-контекстов). Хотя DDD изначально был разработан для бэкенд-разработки, его принципы могут быть успешно применены и во фронтенде, особенно в сложных приложениях с богатой бизнес-логикой. @@ -100,4 +99,6 @@ src/ ## Когда использовать DDD во фронтенде В сложных приложениях с богатой бизнес-логикой. В командах, где разработчики и бизнес-эксперты тесно взаимодействуют. -Когда требуется высокая степень модульности и переиспользуемости. \ No newline at end of file +Когда требуется высокая степень модульности и переиспользуемости. + +🚀 **_Источник: DeepSeek_** \ No newline at end of file diff --git a/docs/architecture/05-fsd-feature-slice-design.md b/docs/architecture/05-fsd-feature-slice-design.md index a22c193..001e5aa 100644 --- a/docs/architecture/05-fsd-feature-slice-design.md +++ b/docs/architecture/05-fsd-feature-slice-design.md @@ -3,7 +3,6 @@ sidebar_position: 5 --- # Feature slice design -Источник: DeepSeek **Feature Slice Design (FSD)** — это методология проектирования и организации кода во фронтенд-разработке, которая фокусируется на разделении приложения на независимые, функционально завершённые блоки (срезы), каждый из которых соответствует определённой фиче (функциональности) продукта. Этот подход помогает создавать более структурированные, масштабируемые и поддерживаемые приложения. @@ -113,4 +112,6 @@ src/ ## Альтернативы: - **Layer-based architecture** (разделение на слои, например, components, pages, store). -- **Domain-driven design (DDD)** (организация кода вокруг доменных областей). \ No newline at end of file +- **Domain-driven design (DDD)** (организация кода вокруг доменных областей). + +🚀 **_Источник: DeepSeek_** \ No newline at end of file diff --git a/docs/architecture/06-micro-frontend.md b/docs/architecture/06-micro-frontend.md index f9556fe..c6394e2 100644 --- a/docs/architecture/06-micro-frontend.md +++ b/docs/architecture/06-micro-frontend.md @@ -3,7 +3,6 @@ sidebar_position: 6 --- # Micro frontend -Источник: DeepSeek Микрофронтенды (Micro Frontends) — это архитектурный подход, который позволяет разделить фронтенд-приложение на независимые, слабо связанные части, каждая из которых может разрабатываться, тестироваться и развертываться отдельно. Этот подход вдохновлен микросервисной архитектурой и применяется для создания масштабируемых и поддерживаемых фронтенд-приложений. @@ -114,4 +113,6 @@ sidebar_position: 6 ## Недостатки микрофронтендов: 1. Сложность интеграции: Требуется четкая организация взаимодействия между микрофронтендами. 2. Дублирование кода: Возможно дублирование общих ресурсов, если они не вынесены в отдельные модули. -3. Производительность: Загрузка нескольких микрофронтендов может увеличить время загрузки приложения. \ No newline at end of file +3. Производительность: Загрузка нескольких микрофронтендов может увеличить время загрузки приложения. + +🚀 **_Источник: DeepSeek_** \ No newline at end of file diff --git a/docs/architecture/07-tdd.md b/docs/architecture/07-tdd.md index e0740e1..0cb7c07 100644 --- a/docs/architecture/07-tdd.md +++ b/docs/architecture/07-tdd.md @@ -3,7 +3,6 @@ sidebar_position: 7 --- # Test driven development -Источник: DeepSeek TDD (Test-Driven Development) — это методология разработки программного обеспечения, в которой написание тестов предшествует написанию кода. Основная идея TDD заключается в том, что разработчик сначала пишет тест для новой функциональности, а затем реализует код, который делает этот тест успешным. Этот процесс повторяется для каждой новой функции или улучшения. @@ -66,3 +65,4 @@ TDD основан на нескольких ключевых принципах 3. Не всегда подходит: - TDD может быть избыточным для небольших проектов или прототипов. +🚀 **_Источник: DeepSeek_** \ No newline at end of file diff --git a/docs/architecture/08-dev-principles.md b/docs/architecture/08-dev-principles.md index 75cd8e7..0daeb40 100644 --- a/docs/architecture/08-dev-principles.md +++ b/docs/architecture/08-dev-principles.md @@ -3,8 +3,6 @@ sidebar_position: 8 --- # Принципы разработки -Источник: DeepSeek \ -Дополнительный источник: [https://habr.com/ru/companies/itelma/articles/546372/](https://habr.com/ru/companies/itelma/articles/546372/) ## YAGNI _You Aren’t Gonna Need It / Вам это не понадобится_ @@ -153,3 +151,6 @@ _Keep It Simple, Stupid / Будь проще_ 2. **Поддерживаемость:** Упрощается понимание и исправление ошибок. 3. **Тестируемость:** Код, соответствующий SOLID, легче тестировать. 4. **Масштабируемость:** Система становится более устойчивой к изменениям и росту. + +🚀 **_Источник: DeepSeek_** +dДополнительный источник: [https://habr.com/ru/companies/itelma/articles/546372/](https://habr.com/ru/companies/itelma/articles/546372/) diff --git a/docs/architecture/09-oop.md b/docs/architecture/09-oop.md new file mode 100644 index 0000000..ce8abd9 --- /dev/null +++ b/docs/architecture/09-oop.md @@ -0,0 +1,107 @@ +--- +sidebar_position: 9 +--- + +# ООП +Принципы ООП (Объектно-ориентированного программирования) + +Объектно-ориентированное программирование (ООП) — это парадигма, основанная на концепции объектов, которые объединяют данные и методы для работы с ними. Основные принципы ООП: + +## 1. Инкапсуляция +**Смысл:** Объединение данных (свойств) и методов внутри объекта с контролем доступа. \ +**Зачем?** Защита данных, предотвращение прямого изменения извне. +```ts +class User { + private password: string; + + constructor(public name: string, password: string) { + this.password = password; + } + + checkPassword(input: string): boolean { + return this.password === input; + } +} + +const user = new User("Alice", "secret123"); +console.log(user.checkPassword("wrong")); // false +console.log(user.checkPassword("secret123")); // true +``` +📌 `private` скрывает `password`, и его нельзя изменить напрямую. + +## 2. Наследование +**Смысл:** Позволяет создавать новые классы на основе существующих. \ +**Зачем?** Повторное использование кода и расширение функциональности. +```ts +class Animal { + constructor(public name: string) {} + makeSound() { + console.log("Some sound..."); + } +} + +class Dog extends Animal { + makeSound() { + console.log("Woof!"); + } +} + +const dog = new Dog("Buddy"); +dog.makeSound(); // Woof! +``` + +📌 `Dog` наследует `Animal`, но переопределяет метод `makeSound()`. + +## 3. Полиморфизм +**Смысл:** Разные объекты могут иметь **одинаковый интерфейс**, но разное поведение. \ +**Зачем?** Универсальный код, который работает с разными типами объектов. +```ts +class Animal { + constructor(public name: string) {} + makeSound() { + console.log("Some sound..."); + } +} + +class Dog extends Animal { + makeSound() { + console.log("Woof!"); + } +} + +const dog = new Dog("Buddy"); +dog.makeSound(); // Woof! +``` +📌 `Penguin` изменяет логику `fly()`, но всё ещё является `Bird`. + +## 4. Абстракция +**Смысл:** Выделение **важных деталей**, скрытие реализации. \ +**Зачем?** Упрощение работы с кодом, фокус только на важном. +```ts +abstract class Transport { + constructor(public speed: number) {} + + abstract move(): void; +} + +class Car extends Transport { + move() { + console.log(`Driving at ${this.speed} km/h`); + } +} + +const car = new Car(100); +car.move(); // Driving at 100 km/h +``` +📌 `abstract` запрещает создавать `Transport`, но заставляет `Car` реализовать `move()`. + +## Итог +- ✅ **Инкапсуляция** — скрываем детали и контролируем доступ. +- ✅ **Наследование** — создаём новые классы на основе существующих. +- ✅ **Полиморфизм** — разные классы могут вести себя по-разному. +- ✅ **Абстракция** — скрываем сложные детали, оставляем главное. + +🚀 ООП помогает писать **гибкий, переиспользуемый и читаемый код!** + + +🚀 **_Источник: ChatGPT_** \ No newline at end of file diff --git a/docs/browser/01-about-browser.md b/docs/browser/01-about-browser.md index 933c6f0..781d2c9 100644 --- a/docs/browser/01-about-browser.md +++ b/docs/browser/01-about-browser.md @@ -3,7 +3,6 @@ sidebar_position: 1 --- # Браузер -Источник: DeepSeek Из каких модулей(интерфейс, домпарсер, js-движок, рендер, хранилища) состоит браузер? @@ -70,4 +69,6 @@ sidebar_position: 1 4. JavaScript-движок выполняет JS-код, который может изменять DOM и CSSOM. 5. Движок рендеринга строит дерево рендеринга и рассчитывает компоновку. 6. Модуль отрисовки отображает пиксели на экране. -7. Пользователь видит страницу и взаимодействует с ней через интерфейс. \ No newline at end of file +7. Пользователь видит страницу и взаимодействует с ней через интерфейс. + +🚀 **_Источник: DeepSeek_** \ No newline at end of file diff --git a/docs/browser/02-dom.md b/docs/browser/02-dom.md index a9fa215..1bf70ba 100644 --- a/docs/browser/02-dom.md +++ b/docs/browser/02-dom.md @@ -3,7 +3,6 @@ sidebar_position: 2 --- # DOM -Источник: DeepSeek **DOM (Document Object Model)** — это программный интерфейс для работы с HTML и XML документами. Он представляет структуру документа в виде дерева объектов, где каждый узел соответствует элементу, атрибуту или тексту на странице. DOM позволяет программам (например, JavaScript) динамически изменять содержимое, структуру и стили веб-страницы. @@ -63,4 +62,6 @@ sidebar_position: 2 - `element.remove()` — удаление элемента. 5. Работа с атрибутами: - `element.getAttribute('href')` — получение значения атрибута. - - `element.setAttribute('class', 'new-class')` — установка атрибута. \ No newline at end of file + - `element.setAttribute('class', 'new-class')` — установка атрибута. + +🚀 **_Источник: DeepSeek_** \ No newline at end of file diff --git a/docs/browser/03-cssom.md b/docs/browser/03-cssom.md index 6f45a08..2db52f6 100644 --- a/docs/browser/03-cssom.md +++ b/docs/browser/03-cssom.md @@ -3,7 +3,6 @@ sidebar_position: 3 --- # CSSOM -Источник: DeepSeek CSSOM (CSS Object Model) — это программное представление CSS-стилей в виде иерархической структуры объектов, аналогично тому, как DOM (Document Object Model) представляет HTML-документ. CSSOM позволяет JavaScript и другим программам @@ -95,4 +94,6 @@ JavaScript может взаимодействовать с CSSOM через о | Используется для изменения содержимого страницы. | Используется для изменения стилей. | | Создается из HTML. | Создается из CSS. | -CSSOM — это важная часть процесса рендеринга веб-страниц, которая позволяет браузеру применять стили к элементам и динамически изменять их с помощью JavaScript. \ No newline at end of file +CSSOM — это важная часть процесса рендеринга веб-страниц, которая позволяет браузеру применять стили к элементам и динамически изменять их с помощью JavaScript. + +🚀 **_Источник: DeepSeek_** \ No newline at end of file diff --git a/docs/browser/04-critical-render-path.md b/docs/browser/04-critical-render-path.md index cfc691f..f75daf9 100644 --- a/docs/browser/04-critical-render-path.md +++ b/docs/browser/04-critical-render-path.md @@ -3,7 +3,6 @@ sidebar_position: 4 --- # Critical render path -Источник: DeepSeek Критический путь рендеринга (Critical Rendering Path, CRP) — это последовательность шагов, которые браузер выполняет для преобразования HTML, CSS и JavaScript в пиксели на экране. Оптимизация критического пути рендеринга важна для ускорения загрузки и отображения веб-страниц, что напрямую влияет на пользовательский опыт. @@ -70,3 +69,5 @@ sidebar_position: 4 - **Ускорение загрузки:** Оптимизация CRP уменьшает время до первого отображения контента (First Contentful Paint, FCP). - **Улучшение пользовательского опыта:** Быстрая загрузка страницы повышает удовлетворенность пользователей. - **SEO:** Скорость загрузки страницы влияет на ранжирование в поисковых системах. + +🚀 **_Источник: DeepSeek_** \ No newline at end of file diff --git a/docs/browser/05-dev-tools.md b/docs/browser/05-dev-tools.md index 14ebe7e..08b4339 100644 --- a/docs/browser/05-dev-tools.md +++ b/docs/browser/05-dev-tools.md @@ -3,7 +3,6 @@ sidebar_position: 5 --- # Dev-tools -Источник: DeepSeek DevTools (Инструменты разработчика) — это встроенный в браузер набор инструментов, предназначенный для отладки, анализа и оптимизации веб-страниц. Они предоставляют разработчикам возможность исследовать HTML, CSS, JavaScript, сетевые запросы, производительность и многое другое. @@ -99,4 +98,6 @@ DevTools (Инструменты разработчика) — это встро 2. **Ограниченная поддержка в старых браузерах:** - Некоторые функции могут отсутствовать в устаревших версиях браузеров. -**DevTools** — это незаменимый инструмент для веб-разработчиков, который помогает создавать, отлаживать и оптимизировать веб-страницы. \ No newline at end of file +**DevTools** — это незаменимый инструмент для веб-разработчиков, который помогает создавать, отлаживать и оптимизировать веб-страницы. + +🚀 **_Источник: DeepSeek_** \ No newline at end of file diff --git a/docs/browser/06-cors.md b/docs/browser/06-cors.md index 827c8b1..b982414 100644 --- a/docs/browser/06-cors.md +++ b/docs/browser/06-cors.md @@ -36,4 +36,6 @@ sidebar_position: 6 ## Важно: CORS работает только в браузерах. Серверные приложения (например, на Node.js или Python) не ограничены политикой CORS. -Если сервер не настроен для поддержки CORS, браузер заблокирует запрос, даже если сервер возвращает данные. \ No newline at end of file +Если сервер не настроен для поддержки CORS, браузер заблокирует запрос, даже если сервер возвращает данные. + +🚀 **_Источник: DeepSeek_** \ No newline at end of file diff --git a/docs/git/01-git.md b/docs/git/01-git.md index 9a95833..5117654 100644 --- a/docs/git/01-git.md +++ b/docs/git/01-git.md @@ -3,7 +3,6 @@ sidebar_position: 1 --- # Git -Источник: DeepSeek Git — это распределённая система управления версиями, которая позволяет отслеживать изменения в файлах и проектах. Она широко используется в разработке программного обеспечения для управления исходным кодом, но может применяться и для других типов файлов. @@ -24,4 +23,6 @@ Git — это распределённая система управления - `git branch` — управляет ветками. - `git merge` — объединяет ветки. -Git был создан Линусом Торвальдсом в 2005 году для разработки ядра Linux и с тех пор стал стандартом в индустрии разработки. \ No newline at end of file +Git был создан Линусом Торвальдсом в 2005 году для разработки ядра Linux и с тех пор стал стандартом в индустрии разработки. + +🚀 **_Источник: DeepSeek_** \ No newline at end of file diff --git a/docs/git/02-ci-cd.md b/docs/git/02-ci-cd.md index 9accfee..2bd6740 100644 --- a/docs/git/02-ci-cd.md +++ b/docs/git/02-ci-cd.md @@ -3,7 +3,6 @@ sidebar_position: 2 --- # CI/CD -Источник: DeepSeek CI/CD (Continuous Integration / Continuous Deployment или Continuous Delivery) — это набор практик и инструментов, направленных на автоматизацию процессов разработки, тестирования и развертывания программного обеспечения. CI/CD помогает командам разработчиков быстрее и надежнее выпускать качественные продукты. @@ -52,4 +51,6 @@ Continuous Deployment / Continuous Delivery — Непрерывное разв 3. Если тесты проходят успешно, код автоматически развертывается на staging-сервере. 4. После ручного или автоматического подтверждения код развертывается в production. -**CI/CD** — это ключевая часть современной DevOps-культуры, которая помогает командам быть более эффективными и гибкими. \ No newline at end of file +**CI/CD** — это ключевая часть современной DevOps-культуры, которая помогает командам быть более эффективными и гибкими. + +🚀 **_Источник: DeepSeek_** \ No newline at end of file diff --git a/docs/html-css/01-position.md b/docs/html-css/01-position.md index 7f9c62f..8f151e4 100644 --- a/docs/html-css/01-position.md +++ b/docs/html-css/01-position.md @@ -3,7 +3,6 @@ sidebar_position: 1 --- # Position -Источник: DeepSeek Свойство position в CSS используется для определения способа позиционирования элемента на веб-странице. Оно позволяет управлять расположением элемента относительно его обычного положения в потоке документа или относительно других элементов. @@ -48,4 +47,6 @@ sidebar_position: 1 - `z-index` работает только для элементов с позиционированием, отличным от `static`. - `sticky` работает только если у родительского элемента есть высота, иначе поведение может быть непредсказуемым. -Использование свойства `position` позволяет гибко управлять расположением элементов на странице, создавая сложные макеты и интерактивные интерфейсы. \ No newline at end of file +Использование свойства `position` позволяет гибко управлять расположением элементов на странице, создавая сложные макеты и интерактивные интерфейсы. + +🚀 **_Источник: DeepSeek_** \ No newline at end of file diff --git a/docs/html-css/02-flex-grid.md b/docs/html-css/02-flex-grid.md index d11f0d8..8774573 100644 --- a/docs/html-css/02-flex-grid.md +++ b/docs/html-css/02-flex-grid.md @@ -3,10 +3,11 @@ sidebar_position: 2 --- # Сетка flexbox, grid -Источник: DeepSeek + +Предназначены для создания гибких и адаптивных макетов. ## Flexbox -Flexbox (Flexible Box Layout) — это мощная модульная система CSS, предназначенная для создания гибких и адаптивных макетов. Она позволяет легко выравнивать элементы, распределять пространство и управлять их поведением в контейнере, даже если размеры элементов неизвестны или динамически изменяются. +Flexbox — это одномерная система компоновки, предназначенная для выравнивания элементов по одной оси (горизонтально или вертикально). #### Основные концепции Flexbox @@ -25,7 +26,7 @@ Flexbox работает с двумя основными сущностями: - Для создания адаптивных интерфейсов. ## Grid -**CSS Grid Layout** (или просто **Grid**) — это мощная система для создания двумерных макетов в CSS. В отличие от Flexbox, который работает с одномерными макетами (либо строка, либо столбец), Grid позволяет управлять как строками, так и столбцами одновременно. Это делает Grid идеальным инструментом для создания сложных, адаптивных сеток. +Grid — это двумерная система компоновки, позволяющая работать и с колонками, и со строками одновременно. #### Основные концепции Grid 1. **Grid Container** (контейнер) — элемент, который содержит дочерние элементы (grid items). Чтобы сделать элемент grid-контейнером, нужно задать ему свойство `display: grid` или `display: inline-grid`. @@ -43,4 +44,6 @@ Flexbox работает с двумя основными сущностями: #### Когда использовать Grid: - Для создания двумерных макетов (например, страницы с боковой панелью, заголовком и футером). - Когда нужно точно контролировать расположение элементов. -- Для создания адаптивных интерфейсов с минимальным количеством медиазапросов. \ No newline at end of file +- Для создания адаптивных интерфейсов с минимальным количеством медиазапросов. + +🚀 **_Источник: DeepSeek_** \ No newline at end of file diff --git a/docs/html-css/03-semantic-tags.md b/docs/html-css/03-semantic-tags.md index 0f79d16..608d07c 100644 --- a/docs/html-css/03-semantic-tags.md +++ b/docs/html-css/03-semantic-tags.md @@ -4,8 +4,6 @@ sidebar_position: 3 # Семантические тэги -Источник: DeepSeek - Семантические теги HTML — это теги, которые четко описывают их содержимое и предназначение, делая код более понятным как для разработчиков, так и для поисковых систем. Они помогают улучшить структуру документа, упростить его чтение и повысить доступность для людей с ограниченными возможностями. Основные семантические теги @@ -64,3 +62,5 @@ sidebar_position: 3 - Для создания структурированных и понятных веб-страниц. - Для улучшения доступности и SEO. - Для упрощения работы с кодом в команде. + +🚀 **_Источник: DeepSeek_** \ No newline at end of file diff --git a/docs/html-css/04-block-model.md b/docs/html-css/04-block-model.md index 332947d..5253109 100644 --- a/docs/html-css/04-block-model.md +++ b/docs/html-css/04-block-model.md @@ -3,7 +3,6 @@ sidebar_position: 4 --- # Блочная модель -Источник: DeepSeek **Блочная модель CSS** (или **Box Model**) — это фундаментальная концепция, которая описывает, как элементы HTML отображаются на веб-странице. Каждый элемент на странице рассматривается как прямоугольный блок, который состоит из нескольких частей: содержимого, отступов, границ и внешних отступов. Понимание блочной модели важно для управления размерами, расположением и отступами элементов. @@ -58,3 +57,5 @@ sidebar_position: 4 - Блочная модель CSS состоит из **содержимого**, **внутренних отступов**, **границ** и **внешних отступов**. - Свойство `box-sizing` позволяет управлять тем, как учитываются отступы и границы в размерах элемента. - Понимание блочной модели важно для создания точных и предсказуемых макетов. + +🚀 **_Источник: DeepSeek_** \ No newline at end of file diff --git a/docs/html-css/05-selectors.md b/docs/html-css/05-selectors.md index 5f90057..66ce0ac 100644 --- a/docs/html-css/05-selectors.md +++ b/docs/html-css/05-selectors.md @@ -3,7 +3,6 @@ sidebar_position: 5 --- # Селекторы, специфичность -Источник: DeepSeek **Специфичность селекторов** в CSS — это механизм, который определяет, какие стили будут применены к элементу, если на него влияют несколько конфликтующих правил. Специфичность рассчитывается на основе типа селекторов, и чем выше специфичность, тем выше приоритет стиля. @@ -50,4 +49,6 @@ sidebar_position: 5 ## Вывод - Специфичность определяет приоритет CSS-правил. - Инлайновые стили и !important имеют наивысший приоритет. -- Используйте классы и избегайте избыточной специфичности для поддержания чистоты кода. \ No newline at end of file +- Используйте классы и избегайте избыточной специфичности для поддержания чистоты кода. + +🚀 **_Источник: DeepSeek_** \ No newline at end of file diff --git a/docs/html-css/06-preprocessors.md b/docs/html-css/06-preprocessors.md index f44e051..a0c525c 100644 --- a/docs/html-css/06-preprocessors.md +++ b/docs/html-css/06-preprocessors.md @@ -3,7 +3,6 @@ sidebar_position: 6 --- # Препроцессоры -Источник: DeepSeek **Препроцессоры CSS** — это инструменты, которые расширяют возможности стандартного CSS, добавляя такие функции, как переменные, вложенность, миксины, функции и многое другое. Они позволяют писать более структурированный, поддерживаемый и удобный код, который затем компилируется в стандартный CSS. Если вы работаете над большим проектом, использование препроцессора может сэкономить время и усилия. Наиболее популярные препроцессоры: **Sass**, **Less** и **Stylus**. @@ -72,4 +71,6 @@ sidebar_position: 6 2. **Кривая обучения:** - Необходимо изучить новый синтаксис и возможности. 3. **Сложность отладки:** - - Скомпилированный CSS может быть сложнее отлаживать. \ No newline at end of file + - Скомпилированный CSS может быть сложнее отлаживать. + +🚀 **_Источник: DeepSeek_** \ No newline at end of file diff --git a/docs/html-css/07-size-units.md b/docs/html-css/07-size-units.md index 9e126d6..fdd6171 100644 --- a/docs/html-css/07-size-units.md +++ b/docs/html-css/07-size-units.md @@ -3,7 +3,6 @@ sidebar_position: 7 --- # Единицы измерения в CSS -Источник: DeepSeek В CSS существует множество единиц измерения, которые используются для задания размеров, отступов, шрифтов и других свойств элементов. Эти единицы можно разделить на несколько категорий: **абсолютные**, **относительные** и **специальные**. @@ -112,3 +111,5 @@ sidebar_position: 7 - `vw` и `vh`: Для создания полноэкранных блоков или адаптивных шрифтов. - `ch`: Для работы с текстом (например, ограничение ширины текстового поля). - `deg`, `rad`, `turn`: Для трансформаций и анимаций. + +🚀 **_Источник: DeepSeek_** \ No newline at end of file diff --git a/docs/react/01-intro.md b/docs/react/01-intro.md index 9b3b6df..ff6d4ce 100644 --- a/docs/react/01-intro.md +++ b/docs/react/01-intro.md @@ -3,7 +3,6 @@ sidebar_position: 1 --- # Зачем нужен React -Источник: DeepSeek Библиотека React — это одна из самых популярных библиотек для создания пользовательских интерфейсов (UI) на JavaScript. Она разработана Facebook (ныне Meta) и активно используется для разработки веб-приложений, мобильных приложений (с помощью React Native) и даже десктопных приложений. Вот основные причины, зачем нужна React, её преимущества и недостатки: @@ -57,4 +56,6 @@ sidebar_position: 1 - Кроссплатформенная разработка (веб + мобильные приложения). ## Итог -**React** — это мощная и гибкая библиотека, которая подходит для создания современных веб-приложений. Её компонентный подход, высокая производительность и огромная экосистема делают её одним из лучших инструментов для разработки интерфейсов. Однако для простых проектов или статических сайтов React может быть избыточным, и в таких случаях стоит рассмотреть более легкие решения. \ No newline at end of file +**React** — это мощная и гибкая библиотека, которая подходит для создания современных веб-приложений. Её компонентный подход, высокая производительность и огромная экосистема делают её одним из лучших инструментов для разработки интерфейсов. Однако для простых проектов или статических сайтов React может быть избыточным, и в таких случаях стоит рассмотреть более легкие решения. + +🚀 **_Источник: DeepSeek_** \ No newline at end of file diff --git a/docs/react/02-v-dom.md b/docs/react/02-v-dom.md index 09ebd3a..324ad9e 100644 --- a/docs/react/02-v-dom.md +++ b/docs/react/02-v-dom.md @@ -3,7 +3,6 @@ sidebar_position: 2 --- # Виртуальный DOM -Источник: DeepSeek Механизм работы **Virtual DOM** и **Reconciliation** — это ключевые особенности React, которые делают его быстрым и эффективным для обновления пользовательских интерфейсов. Давайте разберём, как это работает. @@ -59,4 +58,6 @@ Reconciliation — это процесс сравнения старого и н ## Итог - **Virtual DOM** — это оптимизированная копия реального DOM, которая позволяет React быстро обновлять интерфейс. - **Reconciliation** — это процесс сравнения старого и нового Virtual DOM для определения минимального набора изменений. -Вместе эти механизмы делают React быстрым, эффективным и удобным для разработки сложных интерфейсов. \ No newline at end of file +Вместе эти механизмы делают React быстрым, эффективным и удобным для разработки сложных интерфейсов. + +🚀 **_Источник: DeepSeek_** \ No newline at end of file diff --git a/docs/react/03-lifecycle.md b/docs/react/03-lifecycle.md index d21a78a..5c8aed5 100644 --- a/docs/react/03-lifecycle.md +++ b/docs/react/03-lifecycle.md @@ -3,7 +3,6 @@ sidebar_position: 3 --- # Жизненный цикл компонента -Источник: DeepSeek Жизненный цикл компонента в React описывает этапы, через которые проходит компонент от момента его создания до удаления из DOM. Эти этапы включают инициализацию, обновление и удаление компонента. React предоставляет методы жизненного цикла, которые позволяют разработчикам управлять поведением компонента на каждом этапе. @@ -32,4 +31,6 @@ React также предоставляет методы для обработк С появлением React Hooks в версии 16.8, функциональные компоненты также получили возможность использовать аналогичные методы жизненного цикла с помощью хуков, таких как `useEffect`. Это сделало функциональные компоненты более мощными и гибкими. -Таким образом, жизненный цикл компонента в React позволяет разработчикам контролировать поведение компонента на всех этапах его существования, что делает React мощным инструментом для создания динамических и отзывчивых пользовательских интерфейсов. \ No newline at end of file +Таким образом, жизненный цикл компонента в React позволяет разработчикам контролировать поведение компонента на всех этапах его существования, что делает React мощным инструментом для создания динамических и отзывчивых пользовательских интерфейсов. + +🚀 **_Источник: DeepSeek_** \ No newline at end of file diff --git a/docs/react/04-props-state.md b/docs/react/04-props-state.md index 7b5a708..25fd2d6 100644 --- a/docs/react/04-props-state.md +++ b/docs/react/04-props-state.md @@ -3,7 +3,6 @@ sidebar_position: 4 --- # Состояние и пропсы компонентов -Источник: DeepSeek В React состояние (state) и пропсы (props) — это два основных способа управления данными в компонентах. Они позволяют компонентам быть динамичными и реагировать на изменения данных. Однако они используются в разных ситуациях и имеют свои @@ -64,3 +63,5 @@ sidebar_position: 4 Часто состояние родительского компонента передается в дочерний компонент через пропсы. Если дочерний компонент должен изменить эти данные, он может вызвать callback-функцию, переданную через пропсы, которая изменит состояние родительского компонента. + +🚀 **_Источник: DeepSeek_** \ No newline at end of file diff --git a/docs/react/05-base-hooks.md b/docs/react/05-base-hooks.md index 9616625..a59336e 100644 --- a/docs/react/05-base-hooks.md +++ b/docs/react/05-base-hooks.md @@ -3,7 +3,6 @@ sidebar_position: 5 --- # Базовые хуки React -Источник: DeepSeek React предоставляет несколько основных хуков, которые позволяют использовать состояние и другие возможности React в функциональных компонентах. Вот основные хуки: @@ -78,4 +77,6 @@ useLayoutEffect(() => { - Позволяет отображать метку для пользовательских хуков в инструментах разработчика React. ```js useDebugValue(isOnline ? 'Online' : 'Offline'); -``` \ No newline at end of file +``` + +🚀 **_Источник: DeepSeek_** \ No newline at end of file diff --git a/docs/react/06-hocs.md b/docs/react/06-hocs.md index 0e6d8af..a917685 100644 --- a/docs/react/06-hocs.md +++ b/docs/react/06-hocs.md @@ -3,7 +3,6 @@ sidebar_position: 6 --- # Что такое HOC -Источник: DeepSeek Higher-Order Components (HOC) — это продвинутая техника в React для повторного использования логики компонентов. HOC — это функция, которая принимает компонент и возвращает новый компонент с дополнительными свойствами или поведением. Это похоже на паттерн декоратора в программировании. @@ -40,4 +39,6 @@ Higher-Order Components (HOC) — это продвинутая техника - Если вы работаете с классовыми компонентами (хуки доступны только в функциональных компонентах). - Если вы предпочитаете паттерн декоратора. -В остальных случаях, особенно в новых проектах, рекомендуется использовать хуки, так как они проще и удобнее. \ No newline at end of file +В остальных случаях, особенно в новых проектах, рекомендуется использовать хуки, так как они проще и удобнее. + +🚀 **_Источник: DeepSeek_** \ No newline at end of file diff --git a/docs/react/07-optimization-hooks.md b/docs/react/07-optimization-hooks.md index b3a33fc..d7248cc 100644 --- a/docs/react/07-optimization-hooks.md +++ b/docs/react/07-optimization-hooks.md @@ -3,7 +3,8 @@ sidebar_position: 7 --- # Хуки оптимизации и кэширования -Источник: DeepSeek + +useCallback, useMemo, React.Memo (HOC) ## useCallback `useCallback` — это хук в React, который используется для мемоизации функций. Он помогает оптимизировать производительность компонентов, особенно когда речь идет о передаче функций в дочерние компоненты или их использование в зависимостях других хуков, таких как `useEffect`. @@ -109,4 +110,6 @@ const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]); ### Важные моменты: - `useMemo` не гарантирует, что функция не будет выполнена. Она может быть вызвана React для "подстраховки" (например, при изменении приоритетов рендеринга). -- Используйте `useMemo` только там, где это действительно необходимо, чтобы не усложнять код без нужды. \ No newline at end of file +- Используйте `useMemo` только там, где это действительно необходимо, чтобы не усложнять код без нужды. + +🚀 **_Источник: DeepSeek_** \ No newline at end of file diff --git a/docs/react/08-users-hooks.md b/docs/react/08-users-hooks.md index 6ff81c6..8e51eaf 100644 --- a/docs/react/08-users-hooks.md +++ b/docs/react/08-users-hooks.md @@ -3,7 +3,6 @@ sidebar_position: 8 --- # Пользовательские хуки -Источник: DeepSeek Пользовательские хуки в React — это функции, которые позволяют вам использовать состояние и другие возможности React (например, эффекты, контекст и т.д.) в ваших компонентах, но с возможностью повторного использования логики. Пользовательские хуки помогают избежать дублирования кода и делают его более читаемым и поддерживаемым. @@ -64,4 +63,6 @@ function App() { } export default App; -``` \ No newline at end of file +``` + +🚀 **_Источник: DeepSeek_** \ No newline at end of file diff --git a/docs/react/09-render-portal.md b/docs/react/09-render-portal.md index 96f314a..19620ac 100644 --- a/docs/react/09-render-portal.md +++ b/docs/react/09-render-portal.md @@ -3,7 +3,6 @@ sidebar_position: 9 --- # Render portal -Источник: DeepSeek В контексте библиотеки **React**, **Portal (портал)** — это механизм, который позволяет рендерить дочерние элементы @@ -106,4 +105,6 @@ export default App; - Модальные окна. - Всплывающие подсказки (tooltips). - Уведомления. -- Любые элементы, которые должны отображаться поверх основного интерфейса. \ No newline at end of file +- Любые элементы, которые должны отображаться поверх основного интерфейса. + +🚀 **_Источник: DeepSeek_** \ No newline at end of file diff --git a/docs/react/10-pure-function.md b/docs/react/10-pure-function.md new file mode 100644 index 0000000..ae78bf2 --- /dev/null +++ b/docs/react/10-pure-function.md @@ -0,0 +1,84 @@ +--- +sidebar_position: 10 +--- + +# Pure function + +В контексте **React** чистая функция — это **функция, которая**: +1. **Детерминирована** — при одинаковых входных данных всегда возвращает одинаковый результат. +2. **Не изменяет внешнее состояние** — не мутирует `props`, `state` или глобальные переменные. + +## Примеры чистых и нечистых функций в React +✅ Чистая функция (без побочных эффектов): +```tsx +function add(a: number, b: number) { + return a + b; +} + +console.log(add(2, 3)); // 5 +console.log(add(2, 3)); // 5 (всегда один и тот же результат) + +``` + +❌ Нечистая функция (изменяет внешнее состояние): +```tsx +let total = 0; +function addToTotal(value: number) { + total += value; + return total; +} + +console.log(addToTotal(5)); // 5 +console.log(addToTotal(5)); // 10 (изменяется внешнее состояние!) + +``` + +## Чистые функции в React-компонентах +✅ Функциональные компоненты в React должны быть чистыми! +```tsx +function Greeting({ name }: { name: string }) { + return

Hello, {name}!

; +} +``` +📌 Этот компонент: +- Всегда рендерит один и тот же вывод для одного name. +- Не изменяет props и state. + +❌ Нечистая компонента (мутирует пропсы!): +```tsx +function BadComponent(props: { user: { name: string } }) { + props.user.name = "Hacked!"; // ❌ Изменяем пропсы — это плохо! + return

Hello, {props.user.name}!

; +} +``` +📌 Почему плохо? +- Нарушает принципы React. +- Может вызвать неожиданные баги. + +## Где React использует чистые функции? + +✔️ useReducer + +```tsx +function reducer(state: number, action: { type: string }) { + switch (action.type) { + case "increment": + return state + 1; + case "decrement": + return state - 1; + default: + return state; + } +} +``` +📌 reducer — чистая функция: всегда возвращает новый state, не мутируя старый. +✔️ useMemo и useCallback +Используются для оптимизации **чистых функций** и предотвращения лишних ререндеров. + +## Итог +- ✅ Чистые функции не мутируют props и state, не создают побочные эффекты. +- ✅ Функциональные компоненты должны быть чистыми. +- ✅ useReducer, useMemo, useCallback — инструменты для работы с чистыми функциями. +- ❌ Нечистые функции могут вызывать баги и ухудшать производительность. + +🚀 **_Источник: ChatGPT_** \ No newline at end of file diff --git a/docs/state-managers/01-intro.md b/docs/state-managers/01-intro.md index a291249..dc13bf0 100644 --- a/docs/state-managers/01-intro.md +++ b/docs/state-managers/01-intro.md @@ -3,7 +3,6 @@ sidebar_position: 1 --- # Зачем нужны state менеджеры -Источник: DeepSeek **State Managers** (менеджеры состояния) в контексте React — это инструменты или библиотеки, которые помогают управлять состоянием приложения. В React состояние (state) — это данные, которые определяют, как компонент должен отображаться и вести себя. Однако, когда приложение становится сложным, управление состоянием только с помощью встроенного `useState` или `useReducer` может стать трудным. Здесь на помощь приходят **state managers**. @@ -33,4 +32,6 @@ sidebar_position: 1 - Если приложение большое и сложное, с множеством компонентов, которые зависят от общего состояния, лучше использовать специализированные state managers (Redux, MobX, Recoil и т.д.). ## Выбор state manager -Выбор зависит от сложности приложения, предпочтений команды и необходимости в дополнительных функциях (например, middleware в Redux). Для небольших проектов часто достаточно Context API или Zustand, а для крупных — Redux или Recoil. \ No newline at end of file +Выбор зависит от сложности приложения, предпочтений команды и необходимости в дополнительных функциях (например, middleware в Redux). Для небольших проектов часто достаточно Context API или Zustand, а для крупных — Redux или Recoil. + +🚀 **_Источник: DeepSeek_** \ No newline at end of file diff --git a/docs/state-managers/02-redux.md b/docs/state-managers/02-redux.md index 6334aaa..ff09f5d 100644 --- a/docs/state-managers/02-redux.md +++ b/docs/state-managers/02-redux.md @@ -150,4 +150,6 @@ export default store; - Когда требуется централизованное управление состоянием. - Когда нужно отслеживать и отлаживать изменения состояния (например, с помощью Redux DevTools). -Для небольших приложений **Redux** может быть избыточным, и в таких случаях лучше использовать **Context API** или другие более простые решения. \ No newline at end of file +Для небольших приложений **Redux** может быть избыточным, и в таких случаях лучше использовать **Context API** или другие более простые решения. + +🚀 **_Источник: DeepSeek_** \ No newline at end of file diff --git a/docs/state-managers/03-rtk-query.md b/docs/state-managers/03-rtk-query.md index 164dbf5..bcf3134 100644 --- a/docs/state-managers/03-rtk-query.md +++ b/docs/state-managers/03-rtk-query.md @@ -56,3 +56,5 @@ sidebar_position: 3 - Если в приложении много запросов к API и нужно управлять кэшированием. - Если уже используется Redux Toolkit и нужно упростить работу с API. - Для приложений, где требуется минимум boilerplate-кода. + +🚀 **_Источник: DeepSeek_** \ No newline at end of file diff --git a/docs/state-managers/04-zustand.md b/docs/state-managers/04-zustand.md index 855bfbf..668834d 100644 --- a/docs/state-managers/04-zustand.md +++ b/docs/state-managers/04-zustand.md @@ -61,3 +61,5 @@ Zustand — это минималистичная и современная би | Производительность | Оптимизирован для минимизации ререндеров | Может требовать дополнительной оптимизации | | Инструменты отладки | Ограниченные | Redux DevTools | | Сообщество | Меньше | Огромное сообщество | + +🚀 **_Источник: DeepSeek_** \ No newline at end of file diff --git a/docs/state-managers/05-apollo-graphql.md b/docs/state-managers/05-apollo-graphql.md index 21124b0..cc5fb67 100644 --- a/docs/state-managers/05-apollo-graphql.md +++ b/docs/state-managers/05-apollo-graphql.md @@ -41,4 +41,6 @@ sidebar_position: 5 ## Когда использовать Apollo Client? - Если ваше приложение использует GraphQL API. - Если требуется кэширование данных и автоматическое обновление UI. -- Для сложных приложений с множеством запросов и мутаций. \ No newline at end of file +- Для сложных приложений с множеством запросов и мутаций. + +🚀 **_Источник: DeepSeek_** \ No newline at end of file diff --git a/docs/state-managers/06-tenstack-react-query.md b/docs/state-managers/06-tenstack-react-query.md index 54c77f3..0ed66f3 100644 --- a/docs/state-managers/06-tenstack-react-query.md +++ b/docs/state-managers/06-tenstack-react-query.md @@ -43,3 +43,5 @@ sidebar_position: 6 - Если ваше приложение активно взаимодействует с API. - Если требуется кэширование данных и автоматическое обновление UI. - Для приложений с большим количеством асинхронных запросов. + +🚀 **_Источник: DeepSeek_** \ No newline at end of file diff --git a/docs/state-managers/07-mobx.md b/docs/state-managers/07-mobx.md index 206a615..97743a2 100644 --- a/docs/state-managers/07-mobx.md +++ b/docs/state-managers/07-mobx.md @@ -53,4 +53,6 @@ MobX легко работает с асинхронными операциям ## Когда использовать MobX? - Для небольших и средних приложений, где требуется простое и эффективное управление состоянием. - Если вы хотите избежать boilerplate-кода, характерного для Redux. -- Для приложений с большим количеством реактивных данных. \ No newline at end of file +- Для приложений с большим количеством реактивных данных. + +🚀 **_Источник: DeepSeek_** \ No newline at end of file diff --git a/docs/team/01-methodology.md b/docs/team/01-methodology.md index a9bda08..03179cd 100644 --- a/docs/team/01-methodology.md +++ b/docs/team/01-methodology.md @@ -3,7 +3,6 @@ sidebar_position: 1 --- # Методологии разработки -Источник: DeepSeek ## Waterfall @@ -161,4 +160,6 @@ Kanban часто сравнивают с Scrum, но в отличие от Scr ### Когда использовать Kanban: - Для проектов с постоянно меняющимися требованиями. - Для поддержки и улучшения существующих процессов. -- Для команд, которые хотят улучшить прозрачность и управление workflow. \ No newline at end of file +- Для команд, которые хотят улучшить прозрачность и управление workflow. + +🚀 **_Источник: DeepSeek_** \ No newline at end of file diff --git a/docs/team/02-processes.md b/docs/team/02-processes.md index b431369..8ce5615 100644 --- a/docs/team/02-processes.md +++ b/docs/team/02-processes.md @@ -3,7 +3,6 @@ sidebar_position: 2 --- # Процессы в команде -Источник: https://www.youtube.com/watch?v=zCamBnDSbxs 01:52 Методологии работы В канбан-методологии нет четкого планирования на следующий день. @@ -184,3 +183,5 @@ sidebar_position: 2 Срез – это актуальная версия кода для тестировщиков. Срез может называться по-разному, но суть остается той же. Важно понимать, что это просто актуальная версия приложения. + +🚀 **Источник: https://www.youtube.com/watch?v=zCamBnDSbxs** \ No newline at end of file diff --git a/docs/testing/01-testing.md b/docs/testing/01-testing.md index 0772ef5..7e70f8f 100644 --- a/docs/testing/01-testing.md +++ b/docs/testing/01-testing.md @@ -60,3 +60,5 @@ sidebar_position: 1 - Тестирование отдельных компонентов или функций приложения (например, тестирование отдельной функции JavaScript). 5. Интеграционное тестирование - Проверка взаимодействия между различными модулями или компонентами приложения. + +🚀 **_Источник: DeepSeek_** \ No newline at end of file diff --git a/docs/testing/02-fronend-test.md b/docs/testing/02-fronend-test.md index 6208c05..1b71ae6 100644 --- a/docs/testing/02-fronend-test.md +++ b/docs/testing/02-fronend-test.md @@ -4,7 +4,6 @@ sidebar_position: 2 # Типы тестов в приложениях React -Источник: [https://open.zeba.academy/testirovanie-prilozheniy-react-luchshie-praktiki-instrumenty/](https://open.zeba.academy/testirovanie-prilozheniy-react-luchshie-praktiki-instrumenty/) Тестирование в приложениях React можно разделить на три основных типа: **модульные тесты**, **интеграционные тесты** и **комплексные (E2E) тесты**. Модульные тесты фокусируются на отдельных компонентах, обеспечивая их корректную работу в изоляции, проверяя такие аспекты, как рендеринг, изменения состояния и обработка событий. Интеграционные тесты проверяют, как компоненты взаимодействуют друг с другом, проверяя поток данных и взаимодействие между различными частями приложения. С другой стороны, тесты E2E моделируют реальные пользовательские сценарии для тестирования всего стека приложений, от пользовательского интерфейса до внутренних служб, гарантируя, что приложение работает так, как задумано с точки зрения пользователя. Каждый тип тестирования играет решающую роль в поддержании надежности приложений React. ## Модульное тестирование @@ -340,3 +339,5 @@ test('My first test', async t => { .expect(Selector('#article-header').innerText).eql('Thank you, John Doe!'); }); ``` + +🚀 **Источник: [https://open.zeba.academy/testirovanie-prilozheniy-react-luchshie-praktiki-instrumenty/](https://open.zeba.academy/testirovanie-prilozheniy-react-luchshie-praktiki-instrumenty/)** \ No newline at end of file diff --git a/docs/typescript/01-intro.md b/docs/typescript/01-intro.md index c50d99b..e70ad53 100644 --- a/docs/typescript/01-intro.md +++ b/docs/typescript/01-intro.md @@ -57,4 +57,6 @@ Babel и TypeScript могут использоваться вместе. Нап - TypeScript используется только для проверки типов, а транспиляцию выполняет Babel. - Это позволяет использовать все возможности Babel (например, экспериментальные функции JavaScript). 2. **Babel для транспиляции:** - - Babel может транспилировать TypeScript-код с помощью плагина `@babel/preset-typescripts`. Этот плагин удаляет типы и преобразует код в JavaScript. \ No newline at end of file + - Babel может транспилировать TypeScript-код с помощью плагина `@babel/preset-typescripts`. Этот плагин удаляет типы и преобразует код в JavaScript. + +🚀 **_Источник: DeepSeek_** \ No newline at end of file diff --git a/docs/typescript/02-data-types.md b/docs/typescript/02-data-types.md index ed23300..1803b2d 100644 --- a/docs/typescript/02-data-types.md +++ b/docs/typescript/02-data-types.md @@ -132,4 +132,6 @@ TypeScript предоставляет богатую систему типов, - Объектные типы (массивы, кортежи, функции, классы). - Продвинутые типы (интерфейсы, объединения, пересечения, дженерики). -Эти типы помогают писать более безопасный и поддерживаемый код, а также улучшают инструменты разработки, такие как автодополнение и проверка ошибок. \ No newline at end of file +Эти типы помогают писать более безопасный и поддерживаемый код, а также улучшают инструменты разработки, такие как автодополнение и проверка ошибок. + +🚀 **_Источник: DeepSeek_** \ No newline at end of file diff --git a/docs/typescript/03-types-vs-interface.md b/docs/typescript/03-types-vs-interface.md index a84f55c..0650804 100644 --- a/docs/typescript/03-types-vs-interface.md +++ b/docs/typescript/03-types-vs-interface.md @@ -154,4 +154,6 @@ class User implements Person { - `type` и `interface` во многом похожи, но имеют свои уникальные особенности. - `type` более гибок и подходит для сложных типов. - `interface` лучше подходит для объектов и классов, а также поддерживает слияние. -- В большинстве случаев выбор между ними зависит от предпочтений разработчика и конкретной задачи. \ No newline at end of file +- В большинстве случаев выбор между ними зависит от предпочтений разработчика и конкретной задачи. + +🚀 **_Источник: DeepSeek_** \ No newline at end of file diff --git a/docs/typescript/04-utility-types.md b/docs/typescript/04-utility-types.md index ba5d70a..7c061b3 100644 --- a/docs/typescript/04-utility-types.md +++ b/docs/typescript/04-utility-types.md @@ -219,4 +219,6 @@ type UserWithoutEmail = Omit; - Уменьшать дублирование кода. - Повышать читаемость и поддерживаемость кода. -Использование **Utility Types** делает TypeScript более гибким и выразительным, особенно в больших проектах. \ No newline at end of file +Использование **Utility Types** делает TypeScript более гибким и выразительным, особенно в больших проектах. + +🚀 **_Источник: DeepSeek_** \ No newline at end of file diff --git a/docs/typescript/05-generic-types.md b/docs/typescript/05-generic-types.md index 2c132f3..4279645 100644 --- a/docs/typescript/05-generic-types.md +++ b/docs/typescript/05-generic-types.md @@ -84,3 +84,5 @@ let numbers = createArray(3, 42); // number[] - **Универсальность:** Generics позволяют писать код, который работает с разными типами. - **Безопасность типов:** TypeScript проверяет типы на этапе компиляции, что помогает избежать ошибок. - **Читаемость:** Generics делают код более выразительным и понятным. + +🚀 **_Источник: DeepSeek_** \ No newline at end of file diff --git a/docs/typescript/06-type-guards.md b/docs/typescript/06-type-guards.md index 85f9523..f784a6d 100644 --- a/docs/typescript/06-type-guards.md +++ b/docs/typescript/06-type-guards.md @@ -3,6 +3,7 @@ sidebar_position: 6 --- # Type guards + **Type Guards (защитники типов)** в TypeScript — это механизм, который позволяет сужать тип переменной внутри блока кода на основе проверки условий. Это помогает TypeScript лучше понимать, с каким типом данных он работает, и обеспечивает безопасность типов. ## Зачем нужны Type Guards? @@ -110,4 +111,6 @@ function move(vehicle: Car | Boat) { - Повышать безопасность кода. - Делать код более читаемым и выразительным. -Используйте **Type Guards**, чтобы TypeScript лучше понимал ваши намерения и помогал избегать ошибок. \ No newline at end of file +Используйте **Type Guards**, чтобы TypeScript лучше понимал ваши намерения и помогал избегать ошибок. + +🚀 **_Источник: DeepSeek_** \ No newline at end of file diff --git a/docs/typescript/07-enums-vs-as-const.md b/docs/typescript/07-enums-vs-as-const.md index d877655..10f3691 100644 --- a/docs/typescript/07-enums-vs-as-const.md +++ b/docs/typescript/07-enums-vs-as-const.md @@ -94,4 +94,6 @@ console.log(currentStatus); // 1 - **Enum** — это классический способ определения набора констант, но он имеет недостатки. - **`as const`** — это современная альтернатива, которая более гибкая и эффективная. -Используйте **`as const`**, если хотите избежать недостатков Enum и сделать код более легковесным и оптимизированным. \ No newline at end of file +Используйте **`as const`**, если хотите избежать недостатков Enum и сделать код более легковесным и оптимизированным. + +🚀 **_Источник: DeepSeek_** \ No newline at end of file diff --git a/docs/typescript/08-namespaces.md b/docs/typescript/08-namespaces.md new file mode 100644 index 0000000..4fda518 --- /dev/null +++ b/docs/typescript/08-namespaces.md @@ -0,0 +1,33 @@ +--- +sidebar_position: 8 +--- + +# Namespaces + +В TypeScript **namespace** (пространство имён) — это способ группировки логически связанных объектов, функций и интерфейсов. Они помогают избежать конфликтов имён в больших кодовых базах, инкапсулируя объявления внутри единого блока. + +Основные особенности: +- Определяются с помощью ключевого слова `namespace`. +- Внутри можно объявлять переменные, функции, интерфейсы, классы и другие элементы. +- Для экспорта элементов используется `export`, иначе они остаются приватными. +- Для доступа к элементам снаружи используется `namespaceName.elementName`. + + +```ts +namespace MyNamespace { + export class Person { + constructor(public name: string) {} + greet() { + return `Hello, ${this.name}!`; + } + } +} + +// Использование +const user = new MyNamespace.Person("Alice"); +console.log(user.greet()); // Hello, Alice! +``` + +**Важно: В современных проектах вместо `namespace` чаще используют модули (ES6 modules), так как они поддерживаются нативно и лучше интегрируются с инструментами сборки.** + +🚀 **_Источник: ChatGPT_** \ No newline at end of file diff --git a/docs/typescript/09-decorators.md b/docs/typescript/09-decorators.md new file mode 100644 index 0000000..04c2e0f --- /dev/null +++ b/docs/typescript/09-decorators.md @@ -0,0 +1,89 @@ +--- +sidebar_position: 9 +--- + +# Декораторы + +Декораторы — это специальный вид функций, которые позволяют изменять или дополнять поведение классов, их методов, свойств и параметров. Они используются для метапрограммирования и широко применяются, например, в Angular. + +Особенности: +- Включаются флагом experimentalDecorators в tsconfig.json. +- Представляют собой функции, принимающие конструктор или описание метода/свойства. +- Применяются с @ перед именем. + +Типы декораторов: +1. Класс (@ClassDecorator) +2. Метод (@MethodDecorator) +3. Свойство (@PropertyDecorator) +4. Аксессор (@AccessorDecorator) +5. Параметр (@ParameterDecorator) + +## Примеры использования +1. **Декоратор класса** - Добавляет новое свойство или изменяет поведение класса. +```ts +function WithTimestamp(constructor: Function) { + constructor.prototype.timestamp = new Date(); +} + +@WithTimestamp +class MyClass {} + +const obj = new MyClass(); +console.log((obj as any).timestamp); // Выведет текущую дату +``` + +2. **Декоратор метода** - Логирует вызов метода. +```ts +function Log(target: any, methodName: string, descriptor: PropertyDescriptor) { + const original = descriptor.value; + descriptor.value = function (...args: any[]) { + console.log(`Вызван метод: ${methodName}, аргументы: ${args}`); + return original.apply(this, args); + }; +} + +class MyClass { + @Log + sayHello(name: string) { + console.log(`Привет, ${name}!`); + } +} + +new MyClass().sayHello("Алиса"); +// В консоли: +// Вызван метод: sayHello, аргументы: Алиса +// Привет, Алиса! +``` + +3. **Декоратор свойства** - Изменяет значение свойства при создании объекта. +```ts +function DefaultValue(value: any) { + return function (target: any, propertyKey: string) { + let _val = value; + Object.defineProperty(target, propertyKey, { + get: () => _val, + set: (newVal) => _val = newVal, + enumerable: true, + configurable: true + }); + }; +} + +class User { + @DefaultValue("Гость") + name: string; +} + +const user = new User(); +console.log(user.name); // "Гость" +``` + +## Итог +- Декораторы позволяют изменять классы и их члены. +- Их часто используют **в фреймворках (например, Angular)**. +- Требуют включения `experimentalDecorators`. +- Альтернативой являются **метапрограммирование и DI (dependency injection)**. + +❗ Важно: В JavaScript декораторы пока находятся в стадии разработки (TC39 Stage 3). + +🚀 **_Источник: ChatGPT_** \ No newline at end of file