update ts

docs/react/01-intro.md

@@ -3,3 +3,56 @@ sidebar_position: 1
 ---
 
 # Зачем нужен React
+Библиотека React — это одна из самых популярных библиотек для создания пользовательских интерфейсов (UI) на JavaScript. Она разработана Facebook (ныне Meta) и активно используется для разработки веб-приложений, мобильных приложений (с помощью React Native) и даже десктопных приложений. Вот основные причины, зачем нужна React, её преимущества и недостатки:
+
+## Зачем нужна React?
+
+1. **Создание динамических и интерактивных интерфейсов:**
+   - React позволяет легко создавать интерфейсы, которые быстро реагируют на действия пользователя (например, клики, ввод данных и т.д.).
+   - Это особенно полезно для одностраничных приложений (SPA), где интерфейс должен обновляться без перезагрузки страницы.
+2. **Компонентный подход:**
+    - React основан на компонентах, которые можно переиспользовать в разных частях приложения. Это делает код более модульным и поддерживаемым.
+3. **Эффективное обновление интерфейса:**
+   -  React использует виртуальный DOM (Virtual DOM), который позволяет оптимизировать обновление интерфейса и минимизировать количество операций с реальным DOM. Это делает приложения быстрыми даже при большом количестве динамических данных.
+4. **Широкая экосистема:**
+   - React имеет огромное сообщество и множество дополнительных библиотек (например, для маршрутизации, управления состоянием, анимаций и т.д.), что делает его универсальным инструментом для разработки.
+5. **Кроссплатформенность:**
+   - С помощью React Native можно разрабатывать мобильные приложения для iOS и Android, используя те же принципы и подходы, что и в веб-разработке.
+
+## Преимущества React
+1. **Простота изучения:**
+   - React имеет относительно низкий порог входа, особенно для разработчиков, уже знакомых с JavaScript и HTML.
+   - JSX (синтаксис, похожий на HTML) делает код более читаемым и интуитивно понятным.
+2. **Высокая производительность:**
+   - Виртуальный DOM позволяет минимизировать затраты на обновление интерфейса, что делает React быстрым даже для сложных приложений.
+3. **Компонентный подход:**
+   - Возможность разбивать интерфейс на независимые компоненты упрощает разработку, тестирование и поддержку кода.
+4. **Большое сообщество и экосистема:**
+   - React имеет огромное сообщество, множество готовых решений, библиотек и инструментов (например, Redux, React Router, Next.js и т.д.).
+5. **Гибкость:**
+   - React можно использовать как для небольших проектов, так и для крупных приложений. Он легко интегрируется с другими библиотеками и фреймворками.
+6. **Поддержка со стороны Meta:**
+   - React активно развивается и поддерживается компанией Meta, что гарантирует его актуальность и долгосрочную поддержку.
+
+## Недостатки React
+1. **Только для UI:**
+   - React — это библиотека для создания интерфейсов, а не полноценный фреймворк. Для решения задач маршрутизации, управления состоянием и других аспектов разработки приходится использовать сторонние библиотеки.
+2. **Сложность настройки:**
+   - Настройка React-проекта с нуля (например, с использованием Webpack, Babel) может быть сложной для новичков. Хотя инструменты вроде Create React App упрощают этот процесс.
+3. **JSX может быть непривычным:**
+   - Синтаксис JSX, который смешивает HTML и JavaScript, может быть непривычным для некоторых разработчиков, особенно для тех, кто привык к разделению логики и разметки.
+4. **Частые обновления:**
+   - React активно развивается, и иногда это приводит к необходимости переписывать код для поддержки новых версий (хотя это случается редко).
+5. **Избыточность для простых проектов:**
+   - Для небольших проектов или статических сайтов React может быть избыточным, так как добавляет сложность и увеличивает размер бандла.
+6. **Проблемы с SEO:**
+   - По умолчанию React-приложения рендерятся на стороне клиента, что может вызывать проблемы с индексацией поисковыми системами. Однако это решается с помощью SSR (Server-Side Rendering) и фреймворков вроде Next.js.
+
+## Когда использовать React?
+- Одностраничные приложения (SPA).
+- Крупные проекты с динамическим интерфейсом.
+- Проекты, где важна производительность и переиспользуемость компонентов.
+- Кроссплатформенная разработка (веб + мобильные приложения).
+
+## Итог
+**React** — это мощная и гибкая библиотека, которая подходит для создания современных веб-приложений. Её компонентный подход, высокая производительность и огромная экосистема делают её одним из лучших инструментов для разработки интерфейсов. Однако для простых проектов или статических сайтов React может быть избыточным, и в таких случаях стоит рассмотреть более легкие решения.

docs/react/02-v-dom.md

@@ -3,3 +3,58 @@ sidebar_position: 2
 ---
 
 # Виртуальный DOM
+Механизм работы **Virtual DOM** и **Reconciliation** — это ключевые особенности React, которые делают его быстрым и эффективным для обновления пользовательских интерфейсов. Давайте разберём, как это работает.
+ 
+## Virtual DOM (Виртуальный DOM)
+### Что такое Virtual DOM?
+Virtual DOM — это легковесная копия реального DOM (Document Object Model). Это JavaScript-объект, который представляет структуру HTML-документа. В React Virtual DOM используется для оптимизации обновлений интерфейса.
+
+### Как это работает?
+1. **Создание Virtual DOM:**
+   - Когда вы создаёте компоненты в React, они не напрямую взаимодействуют с реальным DOM. Вместо этого React создаёт Virtual DOM — JavaScript-представление структуры вашего интерфейса.
+2. **Рендеринг Virtual DOM:**
+   - При первом рендере React создаёт Virtual DOM на основе JSX и отображает его в реальный DOM.
+3. **Обновление Virtual DOM:**
+   - Когда состояние (state) или пропсы (props) компонента изменяются, React создаёт **новый Virtual DOM** (на основе обновлённых данных).
+4. **Сравнение Virtual DOM:**
+   - React сравнивает новый Virtual DOM с предыдущим (этот процесс называется **Reconciliation** или "согласование").
+   - React определяет, какие части Virtual DOM изменились. 
+5. **Обновление реального DOM:**
+   - React вносит минимально необходимые изменения в реальный DOM, чтобы он соответствовал новому Virtual DOM. Это позволяет избежать полного перерисовывания страницы.
+
+## Reconciliation (Согласование)
+### Что такое Reconciliation?
+Reconciliation — это процесс сравнения старого и нового Virtual DOM для определения минимального набора изменений, которые нужно применить к реальному DOM. Этот процесс делает React эффективным, так как обновляется только то, что действительно изменилось.
+### Как это работает?
+1. **Diff-алгоритм:**
+   - React использует алгоритм сравнения (Diffing Algorithm), чтобы определить различия между старым и новым Virtual DOM.
+   - Алгоритм работает на основе следующих правил:
+     - Элементы разных типов: Если тип элемента изменился (например, **`<div>`** стал **`<span>`**), React удаляет старое дерево и создаёт новое.
+     - Элементы одного типа: Если тип элемента остался прежним, React обновляет только изменённые атрибуты (например, **`className`**, **`style`**).
+     - Дочерние элементы: React рекурсивно сравнивает дочерние элементы. Если порядок дочерних элементов изменился, React может переупорядочить их в реальном DOM.
+2. **Ключи (Keys):**
+   - Чтобы помочь React эффективно обновлять списки, разработчики используют атрибут **`key`**. Ключи позволяют React идентифицировать элементы списка и избежать ненужных перерисовок.
+   - Например, здесь **`key`** помогает React понять, какие элементы были добавлены, удалены или изменены. 
+```jsx
+<ul>
+  {items.map(item => (
+    <li key={item.id}>{item.name}</li>
+  ))}
+</ul>
+```
+3. **Пакетное обновление (Batching):**
+   -React группирует несколько обновлений состояния в один пакет, чтобы минимизировать количество операций с реальным DOM. Это улучшает производительность.
+
+
+### Преимущества Virtual DOM и Reconciliation
+1. **Производительность:**
+   - Операции с реальным DOM медленные, а Virtual DOM позволяет минимизировать количество таких операций.
+2. **Упрощение разработки:**
+   - Разработчики могут сосредоточиться на описании того, как должен выглядеть интерфейс в конкретный момент времени (на основе состояния), а React автоматически обновляет DOM.
+3. **Кроссплатформенность:**
+   - Virtual DOM используется не только в веб-приложениях, но и в React Native для мобильной разработки.
+
+## Итог
+- **Virtual DOM** — это оптимизированная копия реального DOM, которая позволяет React быстро обновлять интерфейс.
+- **Reconciliation** — это процесс сравнения старого и нового Virtual DOM для определения минимального набора изменений.
+- Вместе эти механизмы делают React быстрым, эффективным и удобным для разработки сложных интерфейсов.

docs/typescript/02-data-types.md

@@ -0,0 +1,135 @@
+---
+sidebar_position: 2
+---
+
+# Типы данных
+TypeScript — это строго типизированный язык программирования, который расширяет JavaScript, добавляя статическую типизацию. В TypeScript используются как **базовые типы данных** (примитивы), так и **продвинутые типы**, которые позволяют более точно описывать структуру данных. Вот основные типы данных в TypeScript:
+
+## 1. Примитивные типы (Primitive Types)
+1. **`number`** - Числа, включая целые и дробные.
+2. **`string`** - Строки текста.
+3. **`boolean`** - логические значения: true или false.
+4. **`null`** - Значение, представляющее отсутствие значения.
+5. **`undefined`** - Значение, которое присваивается переменной, если она не инициализирована.
+6. **`symbol`** - Уникальные и неизменяемые значения, часто используемые как ключи объектов.
+
+## 2. Специальные типы
+Эти типы используются для описания специфических случаев.
+1. **`any`** - Отключает проверку типов. Переменная может хранить любое значение.
+```ts
+let data: any = "Hello";
+data = 42; // Ошибки не будет
+```
+2. **`unknown`** - Более безопасная альтернатива any. Тип переменной должен быть уточнён перед использованием.
+```ts
+let value: unknown = "Hello";
+if (typeof value === "string") {
+  console.log(value.toUpperCase()); // Безопасно
+}
+```
+3. **`void`** - Используется для функций, которые не возвращают значение.
+```ts
+function logMessage(): void {
+  console.log("Hello");
+}
+```
+4. **`never`** - Используется для функций, которые никогда не завершаются (например, выбрасывают исключение или работают бесконечно).
+```ts
+function throwError(message: string): never {
+  throw new Error(message);
+}
+```
+
+## 3. Объектные типы (Object Types)
+Эти типы используются для описания сложных структур данных.
+1. **`object`** - Общий тип для объектов.
+```ts
+let user: object = { name: "Alice", age: 25 };
+```
+2. **Массивы (Arrays)** - Массивы могут быть описаны двумя способами:
+   - **`тип[]`**
+   - **`Array<тип>`**
+```ts
+let numbers: number[] = [1, 2, 3];
+let names: Array<string> = ["Alice", "Bob"];
+```
+3. **Кортежи (Tuples)** - Массивы фиксированной длины с определёнными типами для каждого элемента.
+```ts
+let user: [string, number] = ["Alice", 25];
+```
+4. **Функции (Functions)** - Типы для аргументов и возвращаемых значений функций.
+```ts
+function add(a: number, b: number): number {
+  return a + b;
+}
+```
+5. **Классы (Classes)** - TypeScript поддерживает ООП, включая классы, наследование и модификаторы доступа.
+```ts
+class User {
+  name: string;
+  constructor(name: string) {
+    this.name = name;
+  }
+}
+```
+## 4. Продвинутые типы
+Эти типы позволяют создавать более гибкие и мощные структуры данных.
+1. **Интерфейсы (Interfaces)** - Используются для описания структуры объектов.
+```ts
+interface User {
+  name: string;
+  age: number;
+}
+let user: User = { name: "Alice", age: 25 };
+```
+2. **Типы-объединения (Union Types)** - Переменная может иметь один из нескольких типов.
+```ts
+let id: string | number = "123";
+id = 123; // Ошибки не будет
+```
+3. **Типы-пересечения (Intersection Types)** - Комбинирует несколько типов в один.
+```ts
+interface Name {
+  name: string;
+}
+interface Age {
+  age: number;
+}
+type User = Name & Age;
+let user: User = { name: "Alice", age: 25 };
+```
+4. **Литеральные типы (Literal Types)** - Переменная может принимать только определённые значения.
+```ts
+let direction: "left" | "right" | "up" | "down" = "left";
+```
+5. **Типы-шаблоны (Generics)** - Позволяют создавать универсальные компоненты, которые работают с разными типами.
+```ts
+function identity<T>(arg: T): T {
+  return arg;
+}
+let output = identity<string>("Hello");
+```
+## 5. Дополнительные типы
+1. **`enum`** - Перечисления, которые позволяют задавать именованные константы.
+```ts
+enum Color {
+  Red,
+  Green,
+  Blue,
+}
+let color: Color = Color.Red;
+```
+2. **Типы для работы с DOM** - TypeScript предоставляет встроенные типы для работы с DOM-элементами, например, **`HTMLElement`**, **`HTMLInputElement`** и т.д.
+```ts
+const element: HTMLElement = document.getElementById("myElement");
+```
+
+## Итог
+TypeScript предоставляет богатую систему типов, которая включает:
+
+- Примитивные типы (**`number`**, **`string`**, **`boolean`** и т.д.).
+- Специальные типы (**`any`**, **`unknown`**, **`void`**, **`never`**).
+- Объектные типы (массивы, кортежи, функции, классы).
+- Продвинутые типы (интерфейсы, объединения, пересечения, дженерики).
+
+Эти типы помогают писать более безопасный и поддерживаемый код, а также улучшают инструменты разработки, такие как автодополнение и проверка ошибок.

docs/typescript/03-types-vs-interface.md

@@ -1,5 +1,5 @@
 ---
-sidebar_position: 2
+sidebar_position: 3
 ---
 
 # Отличие types от interface

docs/typescript/04-utility-types.md

@@ -1,5 +1,5 @@
 ---
-sidebar_position: 3
+sidebar_position: 4
 ---
 
 # Utility types

docs/typescript/05-generic-types.md

@@ -1,5 +1,5 @@
 ---
-sidebar_position: 4
+sidebar_position: 5
 ---
 
 # Generic types

docs/typescript/06-type-guards.md

@@ -1,5 +1,5 @@
 ---
-sidebar_position: 5
+sidebar_position: 6
 ---
 
 # Type guards

docs/typescript/07-enums-vs-as-const.md

@@ -1,5 +1,5 @@
 ---
-sidebar_position: 6
+sidebar_position: 7
 ---
 
 # Enums и as const