Reactify | Frontend Разработка
5.41K subscribers
655 photos
52 videos
39 files
254 links
Reactify - это активное Frontend сообщество для бесплатного обучения веб-разработке.

Менторство:
https://reactify.ru

YouTube канал:
https://youtube.com/@reactify-it

Записи занятий менторства:
https://t.me/reactify_community_bot

Связь:
@ruslan_kuyanets
Download Telegram
📖 Modern Full-Stack Development: Using TypeScript, React, Node.js, Webpack, Python, Django, and Docker, 2nd Edition

Автор: Rod Stephens, 2022

Описание:
Изучите, что могут предложить React, Node, Python, Django, TypeScript, Webpack и Docker по отдельности, и как они все вместе подходят для разработки современных приложений.
Вы начнете с создания прочного фундамента знаний и быстро расширите его, создав три различных реальных приложения. Это не просто простые, надуманные примеры, а реальные приложения, которые вы можете установить на свои серверы и использовать в реальных условиях. Вы также поймете, как можно использовать Docker для запуска приложений, которые вы создаете, ясным и четко определенным способом, и все это поможет вам перейти к созданию более продвинутых приложений самостоятельно.

• Скачать книгу из архива
• Стоимость в магазине

📚 Полка Разработчика |#ENG #TypeScript #React #Node
Forwarded from IT Stack | Technologies
Процесс компиляции TypeScript - JavaScript

- Начинаем с написания исходного кода на TypeScript. Это может включать в себя классы, интерфейсы, типы и другие особенности TypeScript.
- Исходный код TypeScript компилируется с помощью компилятора TypeScript (TSC). Этот процесс можно запустить, например, командой tsc filename.ts.
- Компилятор TypeScript преобразует код TypeScript в чистый JavaScript. Все типы и специфические для TypeScript конструкции удаляются, оставляя чистый JS-код, который можно выполнить в браузере или среде выполнения Node.js.
- Полученный JavaScript код можно теперь запустить в любом JS окружении. Он полностью совместим с браузерами и Node.js.

#compile #typescript #javascript
👩‍💻 Type Guards в TypeScript

Type Guards - это выражения, проверяющие тип в runtime. Они позволяют сузить тип переменной в блоке кода.

📌 Оператор typeof:
typeof проверяет тип значения во время выполнения. Если val - строка, выполняется первый блок, где доступны строковые методы. Иначе val считается числом, и доступны числовые методы.

function processValue(val: string | number) {
if (typeof val === "string") {
console.log(val.toUpperCase()); // val имеет тип string
} else {
console.log(val.toFixed(2)); // val имеет тип number
}
}


📌 Оператор instanceof:
instanceof проверяет, является ли объект экземпляром определённого класса. Если animal - экземпляр Dog, вызывается bark(). В противном случае считается, что это Cat, и вызывается meow().

class Dog {
bark() {}
}

class Cat {
meow() {}
}

function makeSound(animal: Dog | Cat) {
if (animal instanceof Dog) {
animal.bark(); // animal имеет тип Dog
} else {
animal.meow(); // animal имеет тип Cat
}
}


📌 Пользовательские Type Guards:
isFish - это пользовательская функция-проверка типа. Она проверяет наличие метода swim. Если метод есть, функция возвращает true, и TypeScript считает pet объектом типа Fish. Иначе pet считается Bird.

interface Fish { swim: () => void; }
interface Bird { fly: () => void; }

function isFish(pet: Fish | Bird): pet is Fish {
return (pet as Fish).swim !== undefined;
}

function move(pet: Fish | Bird) {
if (isFish(pet)) {
pet.swim(); // pet имеет тип Fish
} else {
pet.fly(); // pet имеет тип Bird
}
}


#frontend #react #typescript
Please open Telegram to view this post
VIEW IN TELEGRAM
🖥 Логика Дженериков в TypeScript: Generics, Extends и Conditional Types

В этом видео рассмотрена одна из ключевых тем в TypeScript — Дженерики (Generics). Вы узнаете, как использовать дженерики для создания универсального и переиспользуемого кода.

Мы подробно разберем:
- Примеры работы с дженериками на функциях, классах, интерфейсах, типах, компонентах и хуках.
- Условные типы (conditional types) и ограничения через extends.
- Логику использования дженериков, чтобы вы могли применять их эффективно и уверенно.

Дженерики — это основа современного программирования в TypeScript, позволяющая писать чистый, безопасный и гибкий код. Умение работать с дженериками помогает создавать сложные и масштабируемые проекты.

После просмотра этого видео вы сможете:
- Разрабатывать универсальные функции и компоненты.
- Переиспользовать код без потери строгой типизации.
- Понимать сложные структуры и писать более читаемый и надежный код.

Этот курс подходит для всех, кто хочет углубить свои знания в TypeScript и научиться писать действительно крутой код.

Видео уже на канале!
Я не оставляю ссылку, так как видео лучше продвигается, если заходить на него напрямую с YouTube. Это помогает улучшить его рейтинг и увеличить шансы на органическое продвижение.

#typescript #frontend #generics #дженерики
Please open Telegram to view this post
VIEW IN TELEGRAM
🖥 Задания для закрепления Дженериков в TypeScript.

Посмотрите видео -> Выполните задания самостоятельно.

Задание 1
Создайте функцию createArray с использованием дженериков. Функция должна принимать два аргумента:
- Тип элемента T,
- Количество элементов length — число, указывающее количество элементов в массиве.

Функция должна возвращать массив из указанного числа элементов типа T. Все элементы массива должны быть равными null.

Напишите тесты для функции:
- Проверьте, что она корректно создаёт массивы для различных типов (`number`, string, `boolean`).
- Проверьте, что длина массива соответствует указанному числу length.

function createArray(length: any): any {
// Реализуйте функцию
}

// Пример теста
const numberArray = createArray(3); // Ожидается: [null, null, null]
const stringArray = createArray(2); // Ожидается: [null, null]


Задание 2
Создайте дженерик Box<T> для упаковки значений. Функция должна принимать значение типа T и возвращать объект с этим значением в свойстве value.

Напишите функцию getBoxValue(box) для извлечения значения из упакованного объекта. Функция должна:
- Возвращать значение из объекта,
- Выбрасывать ошибку, если тип T не соответствует ожидаемому.

Например, если тип в коробке — это строка, функция должна извлечь строку, но выбросить ошибку, если тип окажется другим.

type Box = {
// Реализуйте дженерик
};

function getBoxValue(box: any): any {
// Реализуйте функцию
}

// Пример теста
const stringBox = { value: 'Hello' };
const extractedValue = getBoxValue(stringBox); // Ожидается: 'Hello'


Задание 3
Используйте дженерики для создания функции mergeArrays<T>(arr1, arr2), которая сливает два массива в один.

Функция должна принимать два массива типа T[] и возвращать новый массив, который содержит все элементы из обоих массивов.

Напишите тесты для функции:
- Проверьте, что она корректно сливает массивы для различных типов (`number`, `string`).
- Проверьте, что она сохраняет правильный тип массива.


function mergeArrays(arr1: any, arr2: any): any {
// Реализуйте функцию
}

// Пример теста
const mergedNumbers = mergeArrays([1, 2], [3, 4]); // Ожидается: [1, 2, 3, 4]
const mergedStrings = mergeArrays(['a', 'b'], ['c', 'd']); // Ожидается: ['a', 'b', 'c', 'd']


#typescript #frontend #generics #дженерики
Please open Telegram to view this post
VIEW IN TELEGRAM
🖥 5 типичных задач по TypeScript для Frontend собеседований

В этом видео мы разберем 5 типичных задач по TypeScript, которые могут встретиться на собеседовании на фронтенд-разработчика!

- Типизация функций
- Дженерики (Generics)
- Extends, keyof, typeof
- Утилитарные типы (Utility Types)
- Маппинг типов (Mapped Types)

Видео уже на канале!
Я не оставляю ссылку, так как видео лучше продвигается, если заходить на него напрямую с YouTube. Это помогает улучшить его рейтинг и увеличить шансы на органическое продвижение.

#frontend #typescript
Please open Telegram to view this post
VIEW IN TELEGRAM
🖥 Задачи с собеседований по TypeScript

Напиши нативный Pick<>
Напиши нативный Omit<>
Напишите кастомный Partial<Type>
Напишите кастомный Record<Keys, Type>

🔗 Сборник заданий по TypeScript

🔗 Платформа для решения задач

#typescript #livecoding #interview
Please open Telegram to view this post
VIEW IN TELEGRAM
🖥 Что делает конструкция [K in Status]: \[${K}]``?

Вот код из видео, который вызывает вопросы:


type Status = 'success' | 'error' | 'loading';

type StatusWithBrackets = {
[K in Status]: `[${K}]`
}[Status];


💡 Что здесь происходит?

1️⃣ **[K in Status]: \[${K}]`** Мы создаем объект на уровне типов. Для каждого значения из Status ('success' | 'error' | 'loading'`) генерируются ключи и их значения. Например:

{
success: "[success]",
error: "[error]",
loading: "[loading]"
}


2️⃣ [Status]
Эта часть "вытаскивает" все значения, которые соответствуют ключам Status.
То есть:

"[success]" | "[error]" | "[loading]"


🛠️ Итог: StatusWithBrackets превращается в объединение строк:
"[success]" | "[error]" | "[loading]".


#typescript
Please open Telegram to view this post
VIEW IN TELEGRAM
🎙 Собеседование в компанию Точка

На позицию Middle Frontend Разработчик

Большая часть собеседования состоит из кодинга в перемешку с теоретическими вопросами.

1. В каком порядке будут выведены логи?
console.log('1')
Promise.resolve('2')
.then((res) => {
console.log(res);

Promise.resolve('3')
.then((res) => {
console.log(res);
setTimeout(() => {console.log('4')}, 0);
})
})
.then((res) => console.log(res))
.finally((res) => {
console.log(res);
setTimeout(() => {console.log('5')}, 0);
});
console.log('6');


2. А если изменив первый Promise?
console.log('1')
Promise.reject('2')
.then((res) => {
console.log(res);

Promise.resolve('3')
.then((res) => {
console.log(res);
setTimeout(() => {console.log('4')}, 0);
})
})
.catch((res) => console.log(res))
.then((res) => console.log(res))
.finally((res) => {
console.log(res);
setTimeout(() => {console.log('5')}, 0);
});
console.log('6');


3. Что выведет этот код?
function foo() {
const x = 10;

return {
x: 20,
bar: () => {
console.log(this.x)
},
baz: function() {
console.log(this.x)
}
};
}

const obj1 = foo();

obj1.bar(); // ...
obj1.baz(); // ...

const obj2 = foo.call({ x: 30 });
obj2.bar(); // ..
obj2.baz(); // ...


4. Напиши и типизируй функцию для определения типа фигуры
type Rectangle = {
width: number ;
height: number ;
};

type Circle = {
radius: number;
};

type AvailableFigure = Rectangle | Circle;

function isCircle(figure) {
...
}

function getCircleArea(figure: Circle): number {
return Math.pow(figure.radius, 2) * Math.PI
}

function getRectangleArea(figure: Rectangle): number {
return figure.width * figure.height
}

function getArea(figure: AvailableFigure): number {
return isCircle(figure)
? getCircleArea(figure)
: getRectangleArea(figure);
}


5. Напиши нативный Pick<>
type MyPick<T, U extends keyof T> = {
[key in U]: T[key]
}


Все эти задачи мы разбирали в видео:
- 5 типичных задач по TypeScript для Frontend собеседований
- Разбор задач по Event Loop с собеседований
- 5 типичных задач по JavaScript на собеседовании

#interview
Please open Telegram to view this post
VIEW IN TELEGRAM
🤯 Подборка сложных вопросов с собеседований

1. Какая разница в tree-shaking у CJS и ESM?
ESM (ECMAScript Modules):
- Статический анализ на этапе сборки → можно точно определить неиспользуемый код.
- Импорты (import/export) фиксированы, что позволяет оптимизировать бандл.

CJS (CommonJS):
- Динамические require() → сборщик не может заранее знать, какие части модуля будут использоваться.
- Загружает модуль целиком, что мешает tree-shaking.

2. Какую часть спецификации ES нельзя реализовать через полифиллы и транспиляцию?
Proxy – требует нативной поддержки браузера, так как работает на низком уровне (перехват операций с объектами). Vue 2 для старых браузеров использовал Object.defineProperty вместо Proxy.

3. Для чего используется <picture>, кроме выбора формата изображения?
Адаптивные изображения:
- Разные версии картинки под разные размеры экрана (media-атрибуты).
- Оптимизация под ретину (srcset).
- Fallback для старых браузеров (<img> внутри).
- Разгрузка мобильных сетей (легкие версии).

4. Зачем нужен тег <base>?
Задает базовый URL для всех относительных ссылок на странице.

<base href="https://example.com/assets/">
<img src="logo.png"> <!-- Загрузится https://example.com/assets/logo.png -->


5. Как в runtime проверить поддержку CSS-свойства?
if (CSS.supports('display', 'grid')) {  
console.log('Grid поддерживается!');
}

Альтернатива: @supports в CSS.

6. Как называется реактивность в React?
Не настоящая реактивность (как в Svelte/Solid/Vue). React использует "pull-based" модель (перерисовка по изменению состояния). Гранулярная реактивность (сигналы, Proxy) – когда обновляются только зависимые части.

7. Как определить системную тему (dark/light)?
В JS:

const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;

// Следить за изменением темы
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
console.log(e.matches ? 'Тёмная тема' : 'Светлая тема');
});

В CSS:

@media (prefers-color-scheme: dark) {
body { background: #000; color: #fff; }
}


8. Что такое CSS Container Query?
Аналог @media, но зависящий от размера контейнера, а не viewport. Позволяет адаптировать стили для компонентов (например, карточка меняет layout в узком контейнере).

.container { container-type: inline-size; }

@container (max-width: 500px) {
.card { flex-direction: column; }
}


9. Что будет с padding: 1,5px?
Непредсказуемо! Это синтаксическая ошибка (запятая вместо точки), но браузер попытается "починить". Может интерпретироваться как 1px, 15px или проигнорироваться.

Вывод: так писать нельзя, только padding: 1.5px.

10. Как из массива [1, 2, 3] получить тип 1 | 2 | 3?
const arr = [1, 2, 3] as const;  // Делаем кортеж  
type T = typeof arr[number]; // 1 | 2 | 3

Без as const тип будет number[].

11. Разница между import { ReactNode } и import { type ReactNode }?
Обычный импорт:

import { ReactNode } from 'react'; // Может попасть в бандл.

Импорт типа (TypeScript 4.5+):

import { type ReactNode } from 'react'; // Удаляется при компиляции.

Полезно для оптимизации бандла (импорты только для типов не включаются в JS-код).

#собеседования #react #javascript #typescript