Руслан Куянец | Reactify – Telegram
Руслан Куянец | Reactify
5.84K subscribers
704 photos
52 videos
39 files
287 links
Я IT-специалист, ментор и основатель проекта YeaHub и сообщества Reactify. Здесь рассказываю про Frontend и IT.

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

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

YeaHub:
https://yeahub.ru/

Связь:
@ruslan_kuyanets
Download Telegram
👩‍💻 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 #typenoscript
Please open Telegram to view this post
VIEW IN TELEGRAM
👍152🔥2
Как правильно учить React. Вся экосистема.

В этом видео я расскажу о том, как стать React разработчиком в 2024 году. Мы разберем, какие технологии и инструменты стоит изучать, чтобы быть востребованным специалистом. Я поделюсь пошаговым планом, начиная с основ и переходя к более сложным темам.

👩‍💻 YouTube видео

🗺 Roadmap React

#roadmap
Please open Telegram to view this post
VIEW IN TELEGRAM
👍22🔥64
Проблема изменения вложенных объектов при использовании map

При использовании метода map для создания нового массива объектов, возникает проблема, если объекты содержат вложенные объекты. Хотя map возвращает новый массив, вложенные объекты внутри элементов массива остаются ссылками на те же объекты, что и в оригинальном массиве.


const persons = [{
name: 'Ivan',
address: {
ul: 1
}
}]

const newPersons = persons.map(person => {
person.address.ul = 2
return {...person}
})

console.log(persons)
console.log(newPersons)


⚠️ Что происходит:
- В исходном массиве persons есть объект с вложенным объектом address.
- Метод map создает новый массив newPersons, в котором каждый элемент копируется с использованием оператора расширения {...person}.
- Однако, несмотря на создание нового объекта верхнего уровня, вложенный объект address в обоих массивах (persons и newPersons) ссылается на один и тот же объект.

📌 Результат
Изменения, внесенные в newPersons, также повлияют на оригинальный массив persons, так как вложенные объекты не были скопированы глубоко.

✔️ Решение
Чтобы избежать этого, нужно использовать глубокое копирование вложенных объектов, например, с использованием JSON.parse(JSON.stringify(person)) или библиотек, которые поддерживают глубокое копирование.

В реальных проектах стараются избегать необходимости глубокого клонирования на каждом шаге. Вместо этого можем частично склонировать


const newPersons = persons.map(person => {
return {
...person,
address: { ...person.address, ul: 2 }
}
})


#frontend #javanoscript
Please open Telegram to view this post
VIEW IN TELEGRAM
👍13🔥3💯1
Разница между Context API и Redux

Context API и Redux решают схожие задачи, но применяются в разных ситуациях. Обе технологии используются для управления состоянием в React-приложениях, но подход к их применению и масштаб использования различен.


Context API в React удобен, когда нужно передать данные на несколько уровней глубже по иерархии компонентов, минуя промежуточные. Например, у вас есть тема оформления (светлая/тёмная), которая должна быть доступна на любом уровне приложения. Использовать props для передачи таких данных на каждом уровне неэффективно и приводит к "props drilling". Context API позволяет создать глобальный контекст для темы, к которому любой компонент может обратиться напрямую, не завися от промежуточных компонентов.


📌 Context API хорош для передачи статичных данных или тех, что редко изменяются. Однако он не рассчитан на сложное управление состоянием, особенно если его много, и если нужно отслеживать изменения.



Redux стоит использовать, когда приложение сложное и нужно централизованное управление состоянием. Представьте крупное приложение с корзиной покупок, аутентификацией, и несколькими взаимодействующими страницами. Каждая часть приложения может нуждаться в доступе к общим данным и реагировать на их изменения. В Redux есть одно глобальное хранилище, где хранится все состояние приложения. Компоненты могут получать данные из этого хранилища и отправлять туда изменения через экшены.


📌 Redux нужен там, где важно чётко отслеживать все изменения состояния, легко тестировать и логировать эти изменения, а также предсказуемо управлять ими. Он даёт больше возможностей и контроля, но требует больше кода и сложнее в настройке по сравнению с Context API.

#redux #frontend #react #context
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👍11🔥3💯2
Задача с собеседования

Интересная задача попалась на позицию Middle.


// Что выведет этот код?

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(); // ...


Какой ответ будет?
6👍6🔥3💯1
Отличие useMemo от useCallback

📌 useMemo():
- Кэширует результат выполнения функции между рендерами компонента.
- Возвращает закэшированное значение.
- Полезен для оптимизации вычислений и предотвращения ненужных перерасчётов.

📌 useCallback():
- Кэширует саму функцию между рендерами компонента.
- Возвращает мемоизированную версию функции.
- Полезен для предотвращения лишних ререндеров компонентов, когда функция используется в зависимостях других хуков.

Вкратце, useMemo кэширует вычисленное значение, а useCallback — кэширует функцию.

#react #memo #useMemo #useCallback
Please open Telegram to view this post
VIEW IN TELEGRAM
👍18💯63🔥1🤝1
Типы и структуры данных

Типы данных и структуры данных часто путают, но это две разные концепции, которые играют важную роль в программировании.

📌 Типы данных — это категории, в которые классифицируются данные. Они определяют, какие операции можно выполнять с этими данными и как они хранятся в памяти. В JavaScript есть примитивные и ссылочные типы данных:

Примитивные типы данных: Number, String, Boolean, Null, Undefined, Symbol, BigInt.

Ссылочные типы данных: Object (включая массивы, функции и даты).


📌 Структуры данных — это способы организации и хранения данных в памяти таким образом, чтобы к ним было удобно обращаться и эффективно работать. В JavaScript структуры данных включают:

Массивы (Array): Упорядоченные списки элементов, доступ к которым осуществляется по индексу.

Объекты (Object): Коллекции пар "ключ-значение", где ключи — это строки (или символы), а значения могут быть любыми типами данных.

Наборы (Set): Коллекции уникальных значений, где каждое значение может появляться только один раз.

Карты (Map): Коллекции пар "ключ-значение", где ключи могут быть любого типа, не только строками.


В чем разница?
Типы данных — это отдельные значения (например, число или строка), тогда как структуры данных — это контейнеры, организующие и хранящие эти значения для более сложных операций (например, массив или объект).
Тип данных определяет, что это за значение, а структура данных — как эти значения организованы.

#frontend #javanoscript

👍 Менторство | 🔝 Сообщество
Please open Telegram to view this post
VIEW IN TELEGRAM
👍15🔥3💯1
Менторство — самый эффективный способ обучения. В отличие от многих менторов, которые ограничиваются перепиской и предоставлением материалов, я глубоко вовлечен в процесс. Мой подход — развитие сообщества и постоянное улучшение обучения.

В IT нет такой конкуренции, как это часто изображают. Один из моих учеников за неделю прошел 5 скринингов, 3 из них привели к приглашению на технические собеседования, сейчас ожидаем фидбек от двух компаний. Диапазон зарплат — от 150 до 250 тысяч рублей. Он практикуется в Ехабе уже 1.5 месяца и посещает каждый день созвоны.

Моя программа охватывает 90% вопросов, которые могут задать на собеседовании. Ученики уверенно рассказывают о своем опыте и процессах, как отче наш. Зачем начинать с позиции джуна за 40 тысяч, если можно претендовать на мидл-уровень с зарплатой 200 тысяч? Это не фантазии — это реальность, которую я наблюдаю ежедневно, когда ребята получают офферы на 150к+.

Мой подход позволяет новичкам без опыта быть сильнее специалистов с 1-3 годами стажа. Мы изучаем полный стек, архитектуру, рабочие кейсы, а также прокачиваемся в Ехабе, работая в команде из 30 человек с ежедневными дейликами, канбан доской, планированием и ретроспективой.

К концу года каждый из вас, кто имеет базу, может найти работу с зарплатой от 150 тысяч. А новички смогут освоить стек, чтобы после Нового года приступить к поиску работы. Просто представьте, что вы работаете в сфере, которая вам нравится и получаете 150к. Это может стать правдой, если взять все в свои руки.

До конца августа сделаю скидку 10% на обучение. Это отличный шанс для тех, кто сомневался.

Сайт с ценами:
https://reactify.ru

Канал с полным обзором обучения:
@mentor_reactify

На канале также есть гайд — заходите и забирайте себе!

#mentor #react #frontend
8👍4🔥1
Новая ссылка, прошу прощения, намудрил с каналом. Записи были скрыты от всех

Вот тут подробно про обучение, двух минутные отрывки из каждой активности. Так же гайд

@mentor_reactify
🔥4👍2🤝1
Планирую провести стрим с ответами на вопросы. Будет интересно обсудить трудоустройство, работу, обучение, React, собеседования и многое другое. Присоединились бы?
Anonymous Poll
65%
да, посмотреть
6%
нет
5%
да, задать вопрос
24%
нет, но запись глянул бы
👍6💯1
😥 Павел Дуров задержан

Основателя Telegram «приняли» прямо на выходе из его частного джета в парижском аэропорту Ле Бурже.

#FreePavel
😢29👍1
Сравнение объектов и Map в JavaScript

📌 Тип ключей:
Объект: Ключи приводятся к строкам. Любой нестроковый ключ, например объект, будет преобразован в строку.

Map: Ключи могут быть любого типа, включая объекты, функции и числа.


const obj = {};
const map = new Map();

const keyObj = {};
obj[keyObj] = 'value'; // Ключ преобразуется в "[object Object]"
map.set(keyObj, 'value'); // Ключ остается объектом

console.log(obj[keyObj]); // 'value'
console.log(map.get(keyObj)); // 'value'


📌 Порядок ключей:
Объект: Порядок ключей не гарантирован.

Map: Порядок ключей сохраняется в том порядке, в котором они были добавлены.


const obj = { b: 2, a: 1 };
const map = new Map([['b', 2], ['a', 1]]);

console.log(Object.keys(obj)); // ['b', 'a'] (порядок не гарантирован)
console.log([...map.keys()]); // ['b', 'a'] (порядок гарантирован)


📌 Итерация:
Объект: Нужно использовать Object.keys(), Object.values(), или Object.entries() для итерации.

Map: Поддерживает методы для итерации по умолчанию, включая map.keys(), map.values(), и map.entries().


const obj = { a: 1, b: 2 };
const map = new Map([['a', 1], ['b', 2]]);

for (const key in obj) {
console.log(key, obj[key]);
}

for (const [key, value] of map) {
console.log(key, value);
}


📌 Дополнительные методы:
Объект: Ограниченные возможности, требует использования Object.keys(), Object.values(), и других вспомогательных функций для работы с данными. Для очистки свойств нужно явно удалять каждое свойство.

Map: Обладает множеством удобных методов:
set(key, value): Добавляет элемент.
get(key): Получает значение по ключу.
has(key): Проверяет наличие ключа.
delete(key): Удаляет элемент.
clear(): Удаляет все элементы.

#frontend #javanoscript #map #object
Please open Telegram to view this post
VIEW IN TELEGRAM
1👍16💯2🔥1
Классические алгоритмы на собеседованиях

Многие считают, что для успешного трудоустройства в IT необходимо знать сложные алгоритмы и структуры данных. Однако на практике часто оказывается, что собеседования включают в себя задачи, которые гораздо проще, чем вы могли бы ожидать.

Вот что обычно спрашивают на собеседованиях:

✔️ Палиндромы: Проверка, является ли строка палиндромом, — это классическая задача, которая помогает понять, как вы работаете с строками и массивами. Например, задача на LeetCode: определить, является ли данная строка палиндромом.

✔️ Уникальные значения: Проверка, содержит ли массив только уникальные значения, — это ещё одна распространённая задача. Она показывает, как вы можете эффективно использовать структуры данных для решения проблем.

✔️ Замена подстроки: Задача на замену одной подстроки в строке на другую. Это может включать простую замену или более сложные случаи, требующие умения работать со строками и регулярными выражениями.

✔️ Задачи по React и TypeScript: Часто собеседования могут включать задачи, связанные с React и TypeScript. Это могут быть простые задачи на компоненты, управление состоянием или типизацию.

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

#frontend #work
Please open Telegram to view this post
VIEW IN TELEGRAM
👍21🔥41
Какой будет порядок логов? И Что будет в этих логах?


import React, { useEffect, useState } from 'react'
import ReactDOM from 'react-dom'

function App() {
const [state, setState] = useState(0)
console.log(state)

useEffect(() => {
setState(state => state + 1)
}, [])

useEffect(() => {
console.log(state)
setTimeout(() => {
console.log(state)
}, 100)
}, [])

return null
}

ReactDOM.render(<App/>, document.getElementById('root'))


#frontend #react
👍103🔥3💯1🫡1
📌 Собеседование в Яндекс

Неделю назад ученик проходил собеседование в Яндекс. Сам процесс найма состоит из 5 этапов. Один из этапов это алгоритмическое интервью. Вот какие задачи он решал. Фидбек от интервьюера был положительный, ученик прошел в следующий этап.

Задача №1:
Сложность: Easy
Написать функцию sleep, которая принимает продолжительность в миллисекундах и возвращает Promise, который разрешается после указанной задержки.

function sleep(duration) {
// ваш код здесь
}


Задача №2:
Сложность: Easy

Написать функцию myJoin, которая имитирует работу метода Array.prototype.join. Функция принимает разделитель и любое количество аргументов, а затем соединяет их в строку.

const myJoin = (separator, ...args) => {
// ваш код здесь
}

myJoin('.', 'a', 'b', 'c'); // 'a.b.c'
myJoin('-', 'a', 'b', 'c', 'd'); // 'a-b-c-d'


Задача №3:
Сложность: Medium

Написать имплементацию Promise.any. Функция должна принимать массив промисов и возвращать новый промис, который разрешается, если хотя бы один из переданных промисов разрешен. В случае, если все промисы отклонены, должен быть вызван reject с ошибкой AggregateError.

function any(promises) {
// ваш код здесь
}


Задача №4:
Сложность: Hard

Написать функцию-декоратор, которая ограничивает число вызовов исходной функции. Декоратор принимает три аргумента:
- Исходную функцию
- Лимит вызовов
- Callback, который должен быть вызван при достижении лимита.
У возвращаемой функции должен быть метод reset, который сбрасывает счетчик вызовов.

function limitedCalls(fn, limit, callback) {
// ваш код здесь
}

// Примеры использования:
function log(name) {
return `Hello, ${name}!`;
}

function limitReached(name) {
return `Sorry, ${name}, the function can no longer be called.`;
}

const limitedLog1 = limitedCalls(log, 2, limitReached);
limitedLog1('Alice'); // "Hello, Alice!"
limitedLog1('Alice'); // "Sorry, Alice, the function can no longer be called."

limitedLog1.reset();


#frontend #algo
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥184👍4
Последние деньки лета — давайте немного отдохнём и зарядимся на следующий год. Чтобы следующее лето было кайфовым: работали разработчиками на удалёнке, получали хорошие деньги и чилили у бассейна.

Если нужна помощь, обращайтесь ко мне😎 Я уже стал профи в этом деле: столько собеседований пройдено, столько скринингов завершено. Написано множество гайдов и собрано море материалов для учеников.

Многие ученики приходили и говорили: «Да хотя бы 100 тысяч зарплату, чтобы не выделяться». А спустя время уже отказываются от предложений в 150 тысяч, им подавай 200+! Очень круто наблюдать, как люди растут как специалисты. Сколько сил вложено в любимое дело, сколько созвонов пройдено. Каждый заслуживает лучшего 👍

Не забудьте про 10% скидку на менторство до конца августа

Сайт с ценами:
https://reactify.ru

Канал с полным обзором обучения:
@mentor_reactify

На канале также есть гайд — заходите и забирайте себе!
Please open Telegram to view this post
VIEW IN TELEGRAM
👍83🔥1😁1
Стрим/Ответы на вопросы

Дата и время: 4 сентября, Среда, 19:00 мск

Место: YouTube

Поболтаем с вами, отвечу на вопросы, расскажу про рынок, про собеседования и тд.

📌 Сюда можете отправить вопрос: https://forms.gle/nS3c2cgaV43ssvLE8

Так же вопросы можно задавать на стриме.
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥3👍1🤝1