diff --git a/docs/react/01-intro.md b/docs/react/01-intro.md index 57b7e8e..6bc2418 100644 --- a/docs/react/01-intro.md +++ b/docs/react/01-intro.md @@ -2,4 +2,57 @@ sidebar_position: 1 --- -# Зачем нужен React \ No newline at end of file +# Зачем нужен 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 может быть избыточным, и в таких случаях стоит рассмотреть более легкие решения. \ No newline at end of file diff --git a/docs/react/02-v-dom.md b/docs/react/02-v-dom.md index cbacf8c..3ab32ea 100644 --- a/docs/react/02-v-dom.md +++ b/docs/react/02-v-dom.md @@ -2,4 +2,59 @@ sidebar_position: 2 --- -# Виртуальный DOM \ No newline at end of file +# Виртуальный 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. + - Алгоритм работает на основе следующих правил: + - Элементы разных типов: Если тип элемента изменился (например, **`
`** стал **``**), React удаляет старое дерево и создаёт новое. + - Элементы одного типа: Если тип элемента остался прежним, React обновляет только изменённые атрибуты (например, **`className`**, **`style`**). + - Дочерние элементы: React рекурсивно сравнивает дочерние элементы. Если порядок дочерних элементов изменился, React может переупорядочить их в реальном DOM. +2. **Ключи (Keys):** + - Чтобы помочь React эффективно обновлять списки, разработчики используют атрибут **`key`**. Ключи позволяют React идентифицировать элементы списка и избежать ненужных перерисовок. + - Например, здесь **`key`** помогает React понять, какие элементы были добавлены, удалены или изменены. +```jsx + +``` +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 быстрым, эффективным и удобным для разработки сложных интерфейсов. \ No newline at end of file diff --git a/docs/react/03-lifecycle.md b/docs/react/03-lifecycle.md index fff3f01..652ae42 100644 --- a/docs/react/03-lifecycle.md +++ b/docs/react/03-lifecycle.md @@ -2,4 +2,4 @@ sidebar_position: 3 --- -# Жизненный цикл компонента \ No newline at end of file +# Жизненный цикл компонента diff --git a/docs/typescript/02-data-types.md b/docs/typescript/02-data-types.md new file mode 100644 index 0000000..ed23300 --- /dev/null +++ b/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 = ["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(arg: T): T { + return arg; +} +let output = identity("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`**). +- Объектные типы (массивы, кортежи, функции, классы). +- Продвинутые типы (интерфейсы, объединения, пересечения, дженерики). + +Эти типы помогают писать более безопасный и поддерживаемый код, а также улучшают инструменты разработки, такие как автодополнение и проверка ошибок. \ No newline at end of file diff --git a/docs/typescript/02-types-vs-interface.md b/docs/typescript/03-types-vs-interface.md similarity index 99% rename from docs/typescript/02-types-vs-interface.md rename to docs/typescript/03-types-vs-interface.md index fb36abd..a84f55c 100644 --- a/docs/typescript/02-types-vs-interface.md +++ b/docs/typescript/03-types-vs-interface.md @@ -1,5 +1,5 @@ --- -sidebar_position: 2 +sidebar_position: 3 --- # Отличие types от interface diff --git a/docs/typescript/03-utility-types.md b/docs/typescript/04-utility-types.md similarity index 99% rename from docs/typescript/03-utility-types.md rename to docs/typescript/04-utility-types.md index b9f663a..ba5d70a 100644 --- a/docs/typescript/03-utility-types.md +++ b/docs/typescript/04-utility-types.md @@ -1,5 +1,5 @@ --- -sidebar_position: 3 +sidebar_position: 4 --- # Utility types diff --git a/docs/typescript/04-generic-types.md b/docs/typescript/05-generic-types.md similarity index 99% rename from docs/typescript/04-generic-types.md rename to docs/typescript/05-generic-types.md index edcaab9..2c132f3 100644 --- a/docs/typescript/04-generic-types.md +++ b/docs/typescript/05-generic-types.md @@ -1,5 +1,5 @@ --- -sidebar_position: 4 +sidebar_position: 5 --- # Generic types diff --git a/docs/typescript/05-type-guards.md b/docs/typescript/06-type-guards.md similarity index 99% rename from docs/typescript/05-type-guards.md rename to docs/typescript/06-type-guards.md index e63a8e1..85f9523 100644 --- a/docs/typescript/05-type-guards.md +++ b/docs/typescript/06-type-guards.md @@ -1,5 +1,5 @@ --- -sidebar_position: 5 +sidebar_position: 6 --- # Type guards diff --git a/docs/typescript/06-enums-vs-as-const.md b/docs/typescript/07-enums-vs-as-const.md similarity index 99% rename from docs/typescript/06-enums-vs-as-const.md rename to docs/typescript/07-enums-vs-as-const.md index ea56092..d877655 100644 --- a/docs/typescript/06-enums-vs-as-const.md +++ b/docs/typescript/07-enums-vs-as-const.md @@ -1,5 +1,5 @@ --- -sidebar_position: 6 +sidebar_position: 7 --- # Enums и as const