Руслан Куянец | 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
Кастомные React Hooks

Одна из главных концепций React - это хуки. Когда начинающие изучают хуки, у них может возникнуть вопрос: а зачем вообще нужны кастомные хуки? Использовать встроенные хуки, такие как useState или useEffect, действительно удобно и понятно. Но когда дело доходит до создания собственных хуков, может возникнуть некоторая путаница.

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

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

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

#react #обучающийПост #hook
👍8👌4🤝1
Задержка в коде

Иногда в процессе программирования возникает необходимость внести паузу в выполнение кода. Часто для этого используется setTimeout, но при множественном использовании это может стать довольно громоздким и менее удобным. К тому же, оборачивание логики в setTimeout не всегда идеально сочетается с асинхронными операциями и обещаниями (promises).

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

Представим, что у нас есть кнопка, при нажатии на которую текст копируется в буфер обмена. Чтобы явно показать пользователю, что действие выполнено, мы временно меняем текст на кнопке на "Успешно!". Это важно, так как без визуального подтверждения пользователь может не понять, что текст успешно скопирован. Однако, мы также хотим дать понять, что можно совершить действие снова. Для этого через несколько секунд мы возвращаем текст кнопки к исходному состоянию "Копировать".

#react #JavaScript #sleep #setTimeout #code
👍102👨‍💻1
This media is not supported in your browser
VIEW IN TELEGRAM
Уже монтирую видеокурс по html ✌️
Пока что все получается отлично. Очень хорошо проработал сценарий и текст, чтобы новички все поняли, но и ребята по старше не заскучали😅

Самый подробный курс будет, при этом минимум воды, имхо.
🔥17👍42
Тем временем🚀

Видео по TypeScript уже 7300 просмотров

Подписчиков на канале 1664
👏19👍32🔥1
Множественные асинхронные запросы

Бывают случаи когда вам необходимо сделать много разных запросов на сервер и получить данные. Есть разные варианты для реализации этого:

Использование Async/Await:
- Последовательное выполнение запросов.
- Каждый запрос выполняется один за другим.
- Полезно, когда второй запрос зависит от результата первого.

Использование Promise.all:
- Параллельное выполнение всех запросов.
- Оптимально для независимых запросов, когда порядок не важен.
- Если один из промисов отклоняется, весь Promise.all отклоняется.

Использование Promise.allSettled:
-Также выполняет запросы параллельно.
-Возвращает результаты всех запросов, включая успешные и неудачные.
-Полезно для обработки ситуаций, когда нужен результат каждого запроса, независимо от успеха или неудачи.

Использование Цикла For...Of с Async/Await:
-Последовательное выполнение запросов для каждого элемента в массиве.
-Подходит для сценариев, где требуется обрабатывать элементы массива по очереди.

#JavaScript #обучающийПост #promise #async
👍8👨‍💻311
Использование буфера обмена в JavaScript и React

Буфер обмена — это временное хранилище для данных, которые пользователи копируют (Ctrl+C) или вырезают (Ctrl+X), чтобы вставить (Ctrl+V) их в другом месте. JavaScript предоставляет несколько способов взаимодействия с буфером обмена, что особенно полезно в веб-приложениях.

Для доступа к буферу обмена мы используем Clipboard API

#обучающийПост #JavaScript #react #clipboard
👍17👌2👨‍💻2
Вот о чем подумал

Раньше считалось крутым иметь классный сайт, и все соревновались в создании более модного и удобного сайта. Сейчас у каждой более-менее большой компании есть своё приложение. А маленькие компании используют общие приложения, например, для бонусной системы, для товаров, для бронирования и т.д.

Реально, Магнит, Леруа, Хендерсон, Спортмастер, Лента, Метро, О'Кей, Лукойл, Газпром, Пятерочка — все создают приложения для того, чтобы учитывать бонусы, предлагать акции, делать рассылки, организовывать доставку товаров. Даже у различных кофеен и ресторанов есть свои приложения.

Если раньше для создания и поддержки сайта/приложения требовалось, например, шесть программистов, то сейчас с этим справятся, например, трое-четверо. Разработка упрощается, появляются различные инструменты и технологии, в том числе и искусственный интеллект.

А ещё сейчас почти все новые жилые комплексы имеют системы 'умного жилого комплекса'. Часто вижу вакансии в строительные компании для разработки таких систем.

У меня у самого куча разных приложений уже😅 просто реально стал замечать, что все больше компаний создают свои приложения)
👍7🤪3🤔1
Подборка библиотек для вашего приложения

1️⃣ react-advanced-cropper: Инструмент для обрезки изображений с настраиваемыми параметрами и интерактивным интерфейсом.

2️⃣ react-calendar: Компонент календаря для выбора дат, предоставляющий легкую интеграцию в формы и интерфейсы.

3️⃣ dayjs: Легковесная библиотека для обработки и форматирования дат, предлагающая простой и интуитивно понятный API.

4️⃣ three: Библиотека для создания 3D-графики, используемая с React через обертки, такие как react-three-fiber, для визуализации 3D-сцен.

5️⃣ swiper: Слайдер с широким спектром настроек для создания динамических и адаптивных слайд-шоу.

#libs
👍71🔥1
Хук useToggle

Хук useToggle в React — это удобный инструмент для управления состояниями, такими как открытие/закрытие, включение/выключение. Это простой способ переключения между двумя состояниями (обычно true и false) в компонентах. Особенно полезен для интерактивных элементов UI, таких как кнопки переключения, скрытие и отображение элементов и т.д. useToggle повышает читаемость кода и упрощает управление состоянием.

#react #code #useToggle #hook
👏8👍4
Недавно наткнулся на статью, что Google экспериментирует с использованием элемента <canvas> для рендеринга полных веб-страниц. Это подразумевает отрисовку всех элементов страницы, включая текст, кнопки, хедер и футер, через <canvas>.

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

Но тут, конечно, возникает вопрос - а как же быть с СЕО, ведь роботы не смогут увидеть, что у вас на <canvas>😅

Прикол конечно, вы заходите на страницу и там в <body> сразу идет <canvas>, а все блоки нарисованы.
😁7😱3
Мой первый поиск работы

Все мое обучение заняло около года. Из этого времени на изучение Frontend я потратил всего 7 месяцев. Остальные 5 месяцев были посвящены поиску себя, так как я не знал, что учить и каким программистом стать. Не имея четкого плана, я провел 5 месяцев в никуда.

Когда я освоил React, Redux, Router, пришло время искать работу, но я сомневался в себе. Боялся, что недостаточно хорош и что мне нужно еще немного поучиться. Ведь в Roadmap было столько всего - Next.js, Node.js, ESLint, Webpack, TypeScript и т.д.

Я очень боялся проходить собеседования. Первый отклик я отправлял около 30 минут, весь вспотел и перенервничал, прежде чем нажал одну кнопку. Как я себя переборол? Просто нажал кнопку, ведь отклик - это не приглашение. 😅

С каждым днем я все активнее откликался, улучшал резюме, смотрел множество видео с прохождением собеседований и разбором заданий. Я постоянно читал гайды о том, как улучшить резюме. Ежедневно я писал конспекты, решал задачи, учил алгоритмы, работал над проектом для портфолио, изучал TypeScript и другие технологии, просто чтобы сказать: "Я знаком с этим, но не работал".😁

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

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

Спустя 2 недели я нашел свою первую работу.🎉

Продолжение следует... Если поддержите Лукасами, то завтра напишу о своей первой работе

#story_1
👍31🔥31👏1
Вообще думаю создать фейковое резюме и попробовать получить приглашение на Junior позицию без опыта.

Поэкспериментировать с фрилансом, сопроводительными письмами.

Возможно даже создать гитхаб профиль и добавить туда разные проекты. И весь процесс вам показывать

Как идея? 💡
👍47🔥12🤝21
Моя первая работа

Моя первая работа была в аутстаффинговой компании. Компании сдают своих работников в аренду в другие компании/проекты и за это получают деньги. В Аутстаф набирают много джунов. Джунов нет смысла сдавать в аренду, но зачем их тогда набирают? Чтобы выдать за Мидл+/Сеньора.

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

В итоге Джуна с 2-3 месяцами опыта продают на Сеньорскую позицию в европейскую компанию с окладом 4-5к долларов месяц. Разумеется Джуну достается 20к рублей, остальное идет в компанию.

Большинство задач однотипные в любой работе. 70% ты делаешь интерфейсы без сложной логики. А когда проступает сложная задача то тебе помогает ментор. Без ментора ты не должен общаться с командой в которую тебя закинули, не можешь отвечать на сообщения и участвовать в созвонах. Прежде чем запушить код, его проверяет твой ментор.

Я работал на таком проекте 4 месяца, к тому времени мой коммерческий опыт был всего 6 месяцев. Я Джун с 6 месяцами опыта, успешно работаю Сеньором уже 4 месяца. Я выполнял почти все задачи, которые мне давали. Я был довольно самостоятельным, решал что писать, как отвечать, проверял код других разрабов с проекта. Единственное, сначала ментор должен был дать добро. Мой ментор меня постоянно хвалил, и мой код уже не требовал исправлений.

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

Продолжение следует… Если поддержите Лукасами, то завтра напишу почему уволился спустя 6 месяцев

#story_1
👍51😱3🔥2👏2
Промисификации в JavaScript

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

Самый простой пример это setTimeout(callback, delay). Как раз таки тут мы передаем колбек который должен выполнится по истечении какой то задержки.
Так же fs.readFile(filePath, 'utf8', callback) функции чтения файла в Node.js

Как работает промисификация:

- promisify принимает функцию func, основанную на колбеках.
- Возвращает новую функцию, которая, когда вызывается, возвращает промис.
- Внутри промиса вызывается исходная функция func с переданными аргументами и дополнительным колбеком.
- Этот колбек (callback) обрабатывает результат или ошибку и вызывает resolve или reject соответственно.

#promisify #JavaScript #promise
👍62🤓2
Мое увольнение

Это была моя первая официальная работа. Классный офис, зона отдыха с большой плазмой, YouTube, PS4. Чай, кофе, снеки, фрукты, конфеты, печенье - всё, как на картинках из крутых офисов Яндекса и Google.

Мы отмечали каждый праздник: компания дарила нам подарки, заказывала доставку еды. По пятницам мы оставались в офисе, играли в настольные игры или смотрели фильмы. Для нас заказывали кучу пицц и роллов. Каждый четверг проводились мероприятия - викторины, командные игры, а также "технические четверги", где кто-то выступал с презентацией на техническую тему. Я выступил с темой ООП.

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

Мой первый корпоратив в этой компании прошёл в прикольном кафе с банкетом, ведущим, танцами и конкурсами.

Но был и обратный момент: первый месяц я работал без зарплаты. Второй месяц моя зарплата составила 10 тысяч рублей, третий - 15 тысяч, а последующие месяцы - 25 тысяч. Я быстро рос профессионально, выполнял все задачи и даже работал дома. В пути на работу и обратно я читал книги и документацию.

Когда я попросил о повышении зарплаты, мне отказали, обещая повышение на 10 тысяч только через месяц. Я сказал, что подумаю. Конечно, я мог согласится и пока не нашел новую работу получать зарплату. Но я так не мог. В четверг я сказал что увольняюсь и начал искать работу. Мне нужно было доработать до понедельника. За выходные я сделал 4 технических задания и меня пригласили на 4 собеседования. В понедельник после последнего дня я прошел 2 собеседования и получил два оффера. Остальные проходить не стал. Выбрал компанию где больше понравилось. Работаю в ней до сих пор. Зарплату предложили почти в 3 раза больше чем было.

Продолжение следует...

#story_1
👍17🔥32