Руслан Куянец | Reactify – Telegram
Руслан Куянец | Reactify
5.83K 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
#javanoscript #function #arrow
Расскажите о стрелочных функциях (arrow function). В чем заключаются отличия стрелочных функций от обычных?

Уровень: 3️⃣

Стрелочные функции (arrow functions) в JavaScript — это компактный способ написания функций. Они не имеют собственного контекста this, что означает, что this внутри стрелочной функции ссылается на this из внешнего контекста. Стрелочные функции не могут быть использованы в качестве конструкторов, и у них также нет доступа к arguments. Они чаще всего используются для коротких функций и колбеков.

Ресурсы для изучения:
📔 Дока
📄
Статья
📹 YouTube
Please open Telegram to view this post
VIEW IN TELEGRAM
👍16🔥3💯21
Такие посты у нас в новом канале для подготовки к собеседованиям. Мы ведем его всей командой YeaHub
Формируем базу вопросов для нашей платформы 🤩

Мы не только вопросы разбираем, но и предоставляем ресурсы, где это изучить

Еще будем проводить публичные собеседования, с подписчиками канала и выставлять в YouTube. Так что у вас много возможностей прокачаться🫡

Как вам? Подпишетесь на наш новый канал? 🤝
💯16🔥41
Реализация метода filter()

Метод filter() создаёт новый массив со всеми элементами исходного массива, которые удовлетворяют условию, заданному в функции обратного вызова.

#javanoscript #array #filter #methods
👍153🤝2🔥1
Frontend Сообщество

Я стараюсь собрать вокруг себя единомышленников, с которыми мы будем улучшать сферу. Планы у нас грандиозные: если все получится, то мы изменим всё.

Мы победим платные курсы. Мы победим галеры. Мы победим студии и фриланс. Мы предложим сфере альтернативу на нашей платформе.

У нас грандиозные планы, и мы их обязательно выполним. На платформе будет всё необходимое для обучения, общения, развития, нетворкинга, карьеры и заработка. Вы свидетели зарождения большого и значимого проекта.

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

Что вы получаете от того, что подписаны на этот канал?

- Как и на любом канале, много полезных постов, мои мысли и рекомендации.
- Розыгрыши обучения, собеседований.
- Планируется много активностей.
- Много полезных ресурсов на моем канале, видео, roadmap, курсы.
- Есть возможность присоединиться к проектам для практики и опыта.
- Возможность быть в числе первых пользователей YeaHub.

YeaHub feat Reactify
Выберите, каким будет IT завтра, вместе с нами.
🔥16👍6🫡5
Frontend | Собеседования - Лучший канал для подготовки к собеседованиям в любую компанию. Его ведет сообщество опытных разработчиков.

💡 Актуальные вопросы и понятные объяснения
🥇 Ссылки на ресурсы для изучения темы

А так же вас ждут публичные собеседования, которые еженедельно будут разыгрываться среди подписчиков.

@frontend_questions
🔥12👍3💯2
Руслан Куянец | Reactify pinned «Frontend | Собеседования - Лучший канал для подготовки к собеседованиям в любую компанию. Его ведет сообщество опытных разработчиков. 💡 Актуальные вопросы и понятные объяснения 🥇 Ссылки на ресурсы для изучения темы А так же вас ждут публичные собеседования…»
Проверка строки на палиндром

Для определения, является ли заданная строка палиндромом, можно использовать следующий фрагмент кода на JavaScript. Этот метод особенно актуален при:

- разработке логических игр или головоломок,
- выполнении текстовых анализов и обработок,
- создании валидаций для пользовательских вводов.

#Palindrome #JavaScript #string
👍17🔥2💯1
This media is not supported in your browser
VIEW IN TELEGRAM
Какой визуально красивый, а главное полезный канал. Я прям в восторге. Ребята с YeaHub ежедневно постят вопросы с ответами. Я каждый день прохожу их🤩
🔥12👍21🤝1
Привет всем! Ваше мнение очень важно для развития нашего Телеграм-канала.

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

Кроме того, здесь вы можете следить за анонсами новых видео, различных активностей и проектов. Мы немного поменяли вектор развития YeaHub, и летом презентуем вам супер платформу, которая заменит курсы (постараемся)

Что бы вы хотели видеть на канале ещё? Поделитесь вашими идеями и предпочтениями, мне важно знать ваше мнение!
5👍5🔥2
Кстати, мы же все дружное Frontend сообщество, будем вместе строить YeaHub, поэтому первые доступы будут именно у вас. Будем тестировать и развивать.

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

У каждого из вас будет возможность проявить активность и стать автором контента для Ехаб💪

Идей много, нужны активные и идейные люди для осуществления этих целей. Всем сообществом мы сможем улучшить сферу💪
🔥134👍3
Дебаунсинг в React

Несмотря на полезность хука useDebounce, есть аргументы в пользу использования стандартной функции debounce.

Проблемы useDebounce:
- Использование useEffect увеличивает сложность кода из-за необходимости контроля за зависимостями хука.
- Неоптимальное использование useEffect может привести к лишним перерисовкам и перерасходу памяти.
- Хуки с побочными эффектами увеличивают зависимости от состояния компонента, что усложняет поддержку кода.

Преимущества стандартной функции debounce:
- Функция debounce не зависит от жизненного цикла компонента, что упрощает её использование и тестирование.
- Отсутствие привязки к состоянию компонента снижает риск возникновения ошибок.
- Функция легко переиспользуется в разных частях приложения без дополнительной интеграции.

#react #debounce #hook
🔥10👍6💯2
Рекурсия

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

Вычисление факториала числа — это классическая задача, которую можно решить с помощью рекурсии. Факториал числа n, обозначаемый как n!, это произведение всех положительных целых чисел до n включительно. Например, 3! = 3 × 2 × 1 = 6.

Как понять?
1. factorial(3) вызывает factorial(2), а factorial(3) ожидает его результат.

2. factorial(2) вызывает factorial(1), а factorial(2) ожидает его результат.

3. factorial(1) достигает базового случая и возвращает 1.

4. factorial(2) получает 1, возвращает 2 × 1 = 2.
factorial(3) получает 2, возвращает 3 × 2 = 6.

#javanoscript #recursion #factorial
👍153🔥3
Для того чтобы понять рекурсию, надо сначала понять рекурсию


Вот ссылки на ресурсы:
📔 Дока
📄
Статья
📹 YouTube
Please open Telegram to view this post
VIEW IN TELEGRAM
👍8🔥2😁1🤔1💯1
Тинькофф Круглый стол по Frontend

Вчера был на крутом мероприятии в офисе Тинькофф в Краснодаре. Всего было за всю историю 3 круглых стола, я был на каждом из них😁

Люблю такие мероприятия, там нет спикера, есть просто темы и мы по очереди обсуждаем каждую из них в неформальной обстановке. Кушаем пиццу, кто-то пьет пивко (все за счет Тинькофф).

Вчера была тема паттернов. Обсудили Solid, Поведенческие, структурные, порождающие паттерны. Оказалось, я достаточно много знаю про них😁

В общем холиварили как обычно, а потом просто болтали после основной части мероприятия.

В очередной раз убедился, что ведение блога повышает скилл и знания😎

Почти все паттерны я объяснял тут на канале. Найти можно по тегам #patterns или #solid
А главное, что я приводил понятные примеры из React. Планирую продолжить эту рубрику
🔥13👍31
Контент план

Постепенно разрулил дела свои. Наконец-то (надеюсь) перехожу к YouTube. Вот видео которые я хотел бы записывать:

1. YouTube JavaScript (Promise, Функции, Event Loop ...)
2. YouTube Паттерны (Объяснять паттерны в контексте React)
3. YouTube Болтовня (трудоустройство, собесы, обучение)
4. YouTube Собеседования (видео собесов, разбор вопросов)

У меня всегда много дел, постоянно мои планы рушатся😁🙃

Но понимаю, что YouTube дает много возможностей, надо больше записывать видео, для того чтобы потом продвигать платформу YeaHub

Как вам темы? И продвинуты и для новичков. На любой вкус и цвет. Пожелайте удачи мне и побольше времени🫡🤝
👍27🔥6💯3
Методы жизненного цикла React

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

Монтаж (Mounting):
constructor(): метод, вызываемый при создании компонента, используется для инициализации состояния.

static getDerivedStateFromProps(props, state): вызывается непосредственно перед рендерингом компонента, как при первом монтаже, так и при последующих обновлениях.

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

componentDidMount(): вызывается сразу после монтажа компонента в DOM. Здесь можно выполнять запросы к серверу, подписки и другие эффекты.

Обновление (Updating):
static getDerivedStateFromProps(props, state): вызывается при обновлении компонента в результате изменения

props.shouldComponentUpdate(nextProps, nextState): позволяет оптимизировать производительность, предотвращая рендеринг компонента.

render(): вызывается для ре-рендеринга компонента.

getSnapshotBeforeUpdate(prevProps, prevState): вызывается перед применением результатов последнего рендеринга в DOM.

componentDidUpdate(prevProps, prevState, snapshot): вызывается сразу после обновления компонента. Используется для выполнения действий после обновления DOM.

Размонтирование (Unmounting):
componentWillUnmount(): вызывается перед удалением компонента из DOM. Здесь следует освобождать ресурсы и отменять все подписки.

Обработка ошибок (Error handling):
static getDerivedStateFromError(error): вызывается после возникновения ошибки в компоненте или в любом из его дочерних компонентов.

componentDidCatch(error, info): вызывается после возникновения ошибки в любом компоненте в пределах дерева компонентов.

#react #lifecicle
🔥19👍63
Век живи - век учись. Не часто используешь данный хук, а когда надо забываешь о нем) Недавно была необходимость корректировки размера блока в зависимости от длинны текста. Хук пригодился 👍
Forwarded from React Frontend | YeaHub
#react #hook
Какие особенности имеют хуки useEffect и useLayoutEffect?

Уровень: 4️⃣

useEffect выполняется асинхронно после рендеринга и "покраски" DOM, подходит для большинства побочных эффектов, включая API запросы и асинхронные операции, не требующие моментального отображения в DOM.

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


Ресурсы для изучения:
📔Дока
📄Статья
📹YouTube
Please open Telegram to view this post
VIEW IN TELEGRAM
9👍7🔥2