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

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

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

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

Связь:
@ruslan_kuyanets
Download Telegram
Планирую провести стрим с ответами на вопросы. Будет интересно обсудить трудоустройство, работу, обучение, React, собеседования и многое другое. Присоединились бы?
Anonymous Poll
65%
да, посмотреть
6%
нет
5%
да, задать вопрос
24%
нет, но запись глянул бы
😥 Павел Дуров задержан

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

#FreePavel
Сравнение объектов и 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 #javascript #map #object
Please open Telegram to view this post
VIEW IN TELEGRAM
Классические алгоритмы на собеседованиях

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

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

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

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

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

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

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

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


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
📌 Собеседование в Яндекс

Неделю назад ученик проходил собеседование в Яндекс. Сам процесс найма состоит из 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
Последние деньки лета — давайте немного отдохнём и зарядимся на следующий год. Чтобы следующее лето было кайфовым: работали разработчиками на удалёнке, получали хорошие деньги и чилили у бассейна.

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

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

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

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

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

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

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

Место: YouTube

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

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

Так же вопросы можно задавать на стриме.
Please open Telegram to view this post
VIEW IN TELEGRAM
Reactify | Frontend Разработка pinned «Стрим/Ответы на вопросы Дата и время: 4 сентября, Среда, 19:00 мск Место: YouTube Поболтаем с вами, отвечу на вопросы, расскажу про рынок, про собеседования и тд. 📌 Сюда можете отправить вопрос: https://forms.gle/nS3c2cgaV43ssvLE8 Так же вопросы можно…»
🔥 Если не хотите конкуренции, то вам подойдут такие вакансии. Это сообщение уже месяц в группе нашего ЖК, постоянно пишут, что не хватает работников.

✔️ Не важен твой опыт
✔️ Нет собеседований
✔️ Оформление в тот же день
✔️ Не нужно учиться

Кадровый голод, Горящие вакансии
Please open Telegram to view this post
VIEW IN TELEGRAM
Render Props

Render Props в React — это паттерн для повторного использования логики между компонентами. Вместо того чтобы делать компоненты "умными" или использовать HOC (Higher-Order Components), компонент с Render Props использует функцию для рендеринга, передаваемую через проп.

Зачем нужно?

✔️ Повторное использование логики: Логику можно вынести в один компонент и использовать с разным UI.
✔️ Гибкость: Позволяет передавать любую JSX разметку, что делает компонент более универсальным.

#frontend #react
Please open Telegram to view this post
VIEW IN TELEGRAM
Подготовка к собеседованиям

Два канала для подготовки к собеседованиям. Очень полезно окружить себя теорией.

@frontend_questions - канал разработчиков YeaHub. Вопросы собеседований, тесты и задачи с лайвкодинга

@front_questions - канал коллеги. Проходит собеседования и выкладывает вопросы в свой канал.

#frontend #interview
Please open Telegram to view this post
VIEW IN TELEGRAM
Стрим/Ответы на вопросы

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

Место: YouTube

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

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

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

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

💼 Чат с разбором собеседований. В этом чате активные кандидаты делятся записями своих собеседований: скрининги, технические интервью и многое другое. Затем я и другие участники чата разбираем эти записи, даем советы и рекомендации. Уже накопилось много полезных записей, и в чате всегда есть такие же, как вы, кто активно ищет работу. Это отличная возможность получить обратную связь и дополнительную мотивацию для прохождения собеседований. Подробнее читайте в посте.

🤓 Чат для просмотра собеседований. Этот чат не требует вашей активности. Здесь вы можете просто наблюдать за записями собеседований в интересующей вас сфере: уровни зарплат, компании, актуальные интервью и многое другое. Это помогает лучше понять, как проходят собеседования в разных компаниях и более эффективно к ним готовиться. Чат постоянно пополняется новыми материалами. Подробнее в посте.

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

👍 Не реклама, а рекомендация
Please open Telegram to view this post
VIEW IN TELEGRAM
Собеседование на позицию Мидл, вилка 150к-220к

Как же легко искать работу, когда в резюме есть 3 года опыта и отличная подготовка! Мои ученики сейчас активно ищут работу: проходят скрининги, технические собеседования и лайвкодинг. На данный момент несколько из них находятся на финальных этапах — успешно прошли технические интервью и готовятся к встречам с руководителями и командами. Ожидаем предложения до середины сентября.

Вот список вопросов для собеседования:
- Какие существуют типы данных в JavaScript?
- Что такое hoisting и как он влияет на переменные и функции?
- Каковы основные области видимости в JavaScript?
- В чем заключаются особенности работы с комплексными объектами в JavaScript?
- Какие существуют виды функций в JavaScript и их ключевые особенности?
- Что такое Promise в JavaScript и какие методы он предоставляет для работы с асинхронными операциями?
- Как работает event loop в JavaScript и какое влияние он оказывает на выполнение кода?
- Что такое TypeScript и для чего он используется в разработке?
- Что такое React и какие задачи он помогает решать?
- Как работает virtual DOM в React и как это улучшает производительность приложений?
- Что такое Redux и как он помогает управлять состоянием в приложениях на React?
- Реагируют ли все reducers на dispatch action в Redux?
- Каковы ключевые особенности классов в JavaScript и как они используются?

+ лайвкодинг (разберем позже)

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

#frontend #interview
Please open Telegram to view this post
VIEW IN TELEGRAM
Собеседование на 100к: нам нужно построить новую версию байконура, по срокам 2 дня

Собеседование на 300к: расскажи какие знаешь типы данных в js

😅😅😅