Жизненные циклы компонентов в React
Это последовательность этапов, через которые проходит компонент в течение своего существования.
В функциональных компонентах React, которые стали более популярны после введения хуков в версии 16.8, управление жизненными циклами осуществляется по-разному по сравнению с классовыми компонентами.
1️⃣ Монтирование (componentDidMount):
useEffect с пустым массивом зависимостей [] как вторым аргументом запускается один раз после первого рендеринга компонента.
2️⃣ Обновление (componentDidUpdate):
Если массив зависимостей содержит переменные, useEffect будет запускаться при изменении этих переменных.
3️⃣ Размонтирование (componentWillUnmount):
Возврат функции из useEffect будет выполнен перед удалением компонента из DOM, что можно использовать для очистки (например, отмены подписки).
#react #useEffect
Это последовательность этапов, через которые проходит компонент в течение своего существования.
В функциональных компонентах React, которые стали более популярны после введения хуков в версии 16.8, управление жизненными циклами осуществляется по-разному по сравнению с классовыми компонентами.
useEffect: Это ключевой хук для управления побочными эффектами в функциональных компонентах. Он объединяет возможности методов жизненного цикла componentDidMount, componentDidUpdate, и componentWillUnmount.1️⃣ Монтирование (componentDidMount):
useEffect с пустым массивом зависимостей [] как вторым аргументом запускается один раз после первого рендеринга компонента.
2️⃣ Обновление (componentDidUpdate):
Если массив зависимостей содержит переменные, useEffect будет запускаться при изменении этих переменных.
3️⃣ Размонтирование (componentWillUnmount):
Возврат функции из useEffect будет выполнен перед удалением компонента из DOM, что можно использовать для очистки (например, отмены подписки).
#react #useEffect
🔥11👍4🤝1
Сегодня добавил уже первых участников в чат проекта.
1. Завтра проводим собеседования у Бекендеров.
2. Начал писать ТЗ для дизайнеров.
3. На следующей неделе уже будем отбирать Фронтендеров. Все собеседования провели, будем говорить кто прошёл💪
Подготовка идет полным ходом. Название проекта и логотип будем выбирать всем сообществом👌
Скоро вас буду знакомить с участниками😎🚀
1. Завтра проводим собеседования у Бекендеров.
2. Начал писать ТЗ для дизайнеров.
3. На следующей неделе уже будем отбирать Фронтендеров. Все собеседования провели, будем говорить кто прошёл💪
Подготовка идет полным ходом. Название проекта и логотип будем выбирать всем сообществом👌
Скоро вас буду знакомить с участниками😎🚀
🔥13👍4❤1🎉1
Сегодня впервые писал Техническое задание проекта для дизайнеров. Сложное однако дело. Оказывается если у тебя в голове есть идея и план, то этого недостаточно(очевидно).
Продолжаем набирать команду. В чате уже 7 человек, потихоньку продвигаемся вперед.
В понедельник уже отберем всех Frontend Разработчиков и начнем обсуждать архитектуру, правила внутри команды, стиль кода и тд. Ждите результатов💪
За следующую неделю планирую сформировать полную команду дизайнеров и бекендеров.
Приступим к написанию кода либо 5 февраля, либо 12 февраля. Организационные моменты конечно затягивают все😁. Но собесы закончились и свое свободное время теперь буду тратить на проект.
#teams
Продолжаем набирать команду. В чате уже 7 человек, потихоньку продвигаемся вперед.
В понедельник уже отберем всех Frontend Разработчиков и начнем обсуждать архитектуру, правила внутри команды, стиль кода и тд. Ждите результатов💪
За следующую неделю планирую сформировать полную команду дизайнеров и бекендеров.
Приступим к написанию кода либо 5 февраля, либо 12 февраля. Организационные моменты конечно затягивают все😁. Но собесы закончились и свое свободное время теперь буду тратить на проект.
#teams
👍6🔥5🤝1
Знакомлю вас с участниками проекта.
Дизайн важная часть любого приложения. Над дизайном у нас работают @bubuzlya и @brandonbetterdays
Как нам делать платформу для HR без HR. Консультировать и помогать нам будет HR специалист @HR_Zalifa
Опытные люди нам нужны, особенно если умеют тестировать и работали в больших компаниях @r0mavin
Опытный Frontend Разработчик с почти 10-летним опытом, работал в Ozon, Ростелеком, Сбер, будет помогать в организации @gzennurov
Универсальный солдат, DevOps, Frontend, Backend, который будет на подхвате @rofflion
Рад, что эти люди с нами, проявляют свою активность, готовы к новым вызовам. Каждый в проекте найдет пользу для себя: от получения опыта и укрепления портфолио до опыта управления и проведения экспериментов.
#teams
Дизайн важная часть любого приложения. Над дизайном у нас работают @bubuzlya и @brandonbetterdays
Как нам делать платформу для HR без HR. Консультировать и помогать нам будет HR специалист @HR_Zalifa
Опытные люди нам нужны, особенно если умеют тестировать и работали в больших компаниях @r0mavin
Опытный Frontend Разработчик с почти 10-летним опытом, работал в Ozon, Ростелеком, Сбер, будет помогать в организации @gzennurov
Универсальный солдат, DevOps, Frontend, Backend, который будет на подхвате @rofflion
Рад, что эти люди с нами, проявляют свою активность, готовы к новым вызовам. Каждый в проекте найдет пользу для себя: от получения опыта и укрепления портфолио до опыта управления и проведения экспериментов.
#teams
🔥21❤6👍2🎉2
Всем привет! Понедельник день тяжелый.
Сегодня добавил всех Фронтенд Разработчиков в чат проекта. Решил для начала взять 10 человек. Через месяц думаю нужно будет набирать еще. Но главное начать разработку.
Наша команда фронтендров 🎉🎉🎉
@denispereloma @AleksanderIazev @SSA146 @A_Kaz @crypto_bubblezz @perfect1onnnn @Ykant @maxkpacific @buffik_1989 @ShaArtur
Долго решали кого выбрать, ведь было много крутых ребят. В итоге сошлись на таком выборе. Все кто проходил собеседования молодцы! Спасибо, за ваше время, я постараюсь на неделе каждому написать и дать обратную связь.
ВСЕ КТО ПРОХОДИЛ СОБЕСЕДОВАНИЯ БУДУТ В ПРИОРИТЕТЕ В СЛЕДУЮЩЕМ НАБОРЕ
Постараемся быстрее начать разработку, чтобы у других ребят тоже была возможность практиковаться.
#teams
Сегодня добавил всех Фронтенд Разработчиков в чат проекта. Решил для начала взять 10 человек. Через месяц думаю нужно будет набирать еще. Но главное начать разработку.
Наша команда фронтендров 🎉🎉🎉
@denispereloma @AleksanderIazev @SSA146 @A_Kaz @crypto_bubblezz @perfect1onnnn @Ykant @maxkpacific @buffik_1989 @ShaArtur
Долго решали кого выбрать, ведь было много крутых ребят. В итоге сошлись на таком выборе. Все кто проходил собеседования молодцы! Спасибо, за ваше время, я постараюсь на неделе каждому написать и дать обратную связь.
ВСЕ КТО ПРОХОДИЛ СОБЕСЕДОВАНИЯ БУДУТ В ПРИОРИТЕТЕ В СЛЕДУЮЩЕМ НАБОРЕ
Постараемся быстрее начать разработку, чтобы у других ребят тоже была возможность практиковаться.
#teams
👍17🔥4🎉3
Мост
Мост (Bridge Pattern) - это структурный дизайн паттерн, который разделяет один или несколько классов на две отдельные иерархии — абстракцию и реализацию, позволяя им развиваться независимо друг от друга. Это достигается за счет создания композиционной связи между абстракцией (чаще всего интерфейсом пользователя) и её реализацией (конкретной платформой или технологией). Такой подход позволяет избежать постоянной привязки абстракции к одной реализации, облегчая тем самым масштабирование и адаптацию к новым требованиям.
Вот когда стоит использовать паттерн Мост:
1️⃣ Когда нужно избежать "жесткого" связывания абстракции и её реализации: Это особенно важно в ситуациях, где абстракция и реализация могут развиваться независимо друг от друга, или когда реализация должна быть выбираема или переключаема во время выполнения программы.
2️⃣ Когда изменения в реализации не должны влиять на клиентов: Использование паттерна Мост позволяет изолировать изменения в реализации от кода клиента, который использует абстракцию.
3️⃣ Когда необходимо разделять и управлять большим набором классов: В случаях, когда существует множество классов, образующих иерархии абстракций и реализаций, паттерн "Мост" помогает упорядочить и упростить структуру.
Примером реализации паттерна Мост в контексте React и функционального программирования может служить ситуация, где компонент React (абстракция) делегирует некоторые из своих задач другому JavaScript объекту (реализация). Это может быть, например, компонент интерфейса, который взаимодействует с разными источниками данных. Вместо того, чтобы интегрировать логику работы с данными напрямую в компонент, можно использовать паттерн Мост, чтобы отделить эту логику.
#patterns #bridge
Мост (Bridge Pattern) - это структурный дизайн паттерн, который разделяет один или несколько классов на две отдельные иерархии — абстракцию и реализацию, позволяя им развиваться независимо друг от друга. Это достигается за счет создания композиционной связи между абстракцией (чаще всего интерфейсом пользователя) и её реализацией (конкретной платформой или технологией). Такой подход позволяет избежать постоянной привязки абстракции к одной реализации, облегчая тем самым масштабирование и адаптацию к новым требованиям.
Вот когда стоит использовать паттерн Мост:
1️⃣ Когда нужно избежать "жесткого" связывания абстракции и её реализации: Это особенно важно в ситуациях, где абстракция и реализация могут развиваться независимо друг от друга, или когда реализация должна быть выбираема или переключаема во время выполнения программы.
2️⃣ Когда изменения в реализации не должны влиять на клиентов: Использование паттерна Мост позволяет изолировать изменения в реализации от кода клиента, который использует абстракцию.
3️⃣ Когда необходимо разделять и управлять большим набором классов: В случаях, когда существует множество классов, образующих иерархии абстракций и реализаций, паттерн "Мост" помогает упорядочить и упростить структуру.
Примером реализации паттерна Мост в контексте React и функционального программирования может служить ситуация, где компонент React (абстракция) делегирует некоторые из своих задач другому JavaScript объекту (реализация). Это может быть, например, компонент интерфейса, который взаимодействует с разными источниками данных. Вместо того, чтобы интегрировать логику работы с данными напрямую в компонент, можно использовать паттерн Мост, чтобы отделить эту логику.
#patterns #bridge
👍3🆒3🔥2
Фидбек
Сегодня всем оставил обратную связь. Старался все персонализировано сделать. Все, что было во время собеса, помечал в заметках.
Все большие молодцы, много всего знают. Хочу в дальнейшем записать видео, поделится ошибками и советами.
- Нужно практиковаться и изучать актуальный Стек технологий.
- Нужно обучаться по плану.
- Не нужно учить в глубину на начальном этапе
Я много раз говорил, что проект не для обучения стека, а для практики. Поэтому, почти все кандидаты были высокого уровня. Выбирали долго, после каждого собеса переделывали рейтинг.
Изначально я хотел собрать команду 10-12 человек вместе с бекендерами и дизайнерами. Для Фронтов я выделял 6 мест примерно. Но так как были ребята с опытом, то я поступил следующим путем: 5 человек с опытом и 5 человек без опыта. В нашей команде 10 Фронтов.
Ребята с опытом усилят наш проект и подготовят почву к следующему набору. Чтобы мы могли брать менее опытных ребят. У нас грандиозные планы!
Всем спасибо! Если кому то не написал фидбек, напишите мне плиз, мог пропустить, столько людей.
#teams
Сегодня всем оставил обратную связь. Старался все персонализировано сделать. Все, что было во время собеса, помечал в заметках.
Все большие молодцы, много всего знают. Хочу в дальнейшем записать видео, поделится ошибками и советами.
- Нужно практиковаться и изучать актуальный Стек технологий.
- Нужно обучаться по плану.
- Не нужно учить в глубину на начальном этапе
Я много раз говорил, что проект не для обучения стека, а для практики. Поэтому, почти все кандидаты были высокого уровня. Выбирали долго, после каждого собеса переделывали рейтинг.
Изначально я хотел собрать команду 10-12 человек вместе с бекендерами и дизайнерами. Для Фронтов я выделял 6 мест примерно. Но так как были ребята с опытом, то я поступил следующим путем: 5 человек с опытом и 5 человек без опыта. В нашей команде 10 Фронтов.
Ребята с опытом усилят наш проект и подготовят почву к следующему набору. Чтобы мы могли брать менее опытных ребят. У нас грандиозные планы!
Всем спасибо! Если кому то не написал фидбек, напишите мне плиз, мог пропустить, столько людей.
#teams
👍15🔥4🤝1
YeaHub
Сегодня мы придумали название для нашей платформы YeaHub. Я уже купил домен💪
Yea: Это слово ассоциируется с утверждением, согласием и позитивом. Оно звучит энергично и оптимистично, что может привлечь внимание и создать позитивное первое впечатление.
Hub: "hub" означает центральное место для соединений и взаимодействий. Это подчеркивает, что наша платформа является ключевой точкой сбора для IT-сообщества.
А ты зареган на ехаб? Кинь ссылку на ехаб! Я сижу на ехабе!
По мне так оригинально. Приедается. Запоминается.
Наша платформа только в начале пути будет для поиска специалистов. В дальнейшем - это центр IT сообщества, где есть все для обучения, работы, общения.
Как вам? А какое название вы бы придумали?
#teams #yeahub
Сегодня мы придумали название для нашей платформы YeaHub. Я уже купил домен💪
Yea: Это слово ассоциируется с утверждением, согласием и позитивом. Оно звучит энергично и оптимистично, что может привлечь внимание и создать позитивное первое впечатление.
Hub: "hub" означает центральное место для соединений и взаимодействий. Это подчеркивает, что наша платформа является ключевой точкой сбора для IT-сообщества.
А ты зареган на ехаб? Кинь ссылку на ехаб! Я сижу на ехабе!
По мне так оригинально. Приедается. Запоминается.
Наша платформа только в начале пути будет для поиска специалистов. В дальнейшем - это центр IT сообщества, где есть все для обучения, работы, общения.
Как вам? А какое название вы бы придумали?
#teams #yeahub
🔥40👍8❤3🤣1
React Новости и FSD (Архитектура Frontend)
Всю эту неделю готовил видео о FSD😱 Такого видео в YouTube точно нет. Все примеры обычно легкие, а у нас уже большое приложение. Было сложно, но я сделал это! Если хотите прокачаться в FSD (самая популярная архитектура на данный момент) то точно стоит посмотреть видео. Буду пару дней монтировать.
В этом видео мои мысли и рассуждения. Логика FSD как ее вижу я (не побоюсь сказать САМАЯ ПРАВИЛЬНАЯ).
Видео подойдет и для опытных и для новичков. Длится будет 1,5 часа.
Всю эту неделю готовил видео о FSD😱 Такого видео в YouTube точно нет. Все примеры обычно легкие, а у нас уже большое приложение. Было сложно, но я сделал это! Если хотите прокачаться в FSD (самая популярная архитектура на данный момент) то точно стоит посмотреть видео. Буду пару дней монтировать.
В этом видео мои мысли и рассуждения. Логика FSD как ее вижу я (не побоюсь сказать САМАЯ ПРАВИЛЬНАЯ).
Видео подойдет и для опытных и для новичков. Длится будет 1,5 часа.
👍16🔥10🥰1💯1
YeaHub Новости
В нашей команде теперь 5 дизайнеров! Наш проект растет.
Еще определились с дизайном, какой стиль и цвета хотим видеть на нашей платформе.
Как будут первые наброски покажу вам. Активно продумываем идеи, что будет на нашей платформе. Уже хочется начать разработку.
Еще мы в поиске опытного бекендера. Который будет TeamLead для разработчиков. Чтобы участвовал в продумывании архитектуры. Я думаю мы легко найдет. Ведь наш проект как магнит!
#teams #yeahub
В нашей команде теперь 5 дизайнеров! Наш проект растет.
Еще определились с дизайном, какой стиль и цвета хотим видеть на нашей платформе.
Как будут первые наброски покажу вам. Активно продумываем идеи, что будет на нашей платформе. Уже хочется начать разработку.
Еще мы в поиске опытного бекендера. Который будет TeamLead для разработчиков. Чтобы участвовал в продумывании архитектуры. Я думаю мы легко найдет. Ведь наш проект как магнит!
#teams #yeahub
👌9🔥3❤1👍1
Димыч по нашим стопам решил пойти😄
Он дает возможность для новичков учавствовать в разработке, получать опыт. Это прям коммерческая разработка, стартап.
Только он берет за это деньги с новичков. Вообще это круто, Димыч много годного делает. Многие платят за Буткемпы и тд, а тут прям реальный стартап. Хороший опыт.
Только у нас это бесплатно. Вы можете пройти отбор и практиковаться👌
Этот проект будет жить в любом случае. Хотя бы просто как место для практики. Но мы нацелены на результат.🏆
#teams #yeahub
Он дает возможность для новичков учавствовать в разработке, получать опыт. Это прям коммерческая разработка, стартап.
Только он берет за это деньги с новичков. Вообще это круто, Димыч много годного делает. Многие платят за Буткемпы и тд, а тут прям реальный стартап. Хороший опыт.
Только у нас это бесплатно. Вы можете пройти отбор и практиковаться👌
Этот проект будет жить в любом случае. Хотя бы просто как место для практики. Но мы нацелены на результат.🏆
#teams #yeahub
😁13👍5🔥2👏1
Распространение события
Распространение события (Event Propagation) – это механизм в веб-разработке, описывающий порядок, в котором события обрабатываются в DOM (Document Object Model). Когда событие возникает на элементе, оно проходит через три стадии: погружение, целевую фазу и всплытие.
Этот процесс позволяет определить, как и в каком порядке элементы DOM реагируют на различные события (например, клики или нажатия клавиш). Понимание этого механизма важно для правильной организации обработки событий в приложениях.
Фаза Погружения (Захвата): Событие начинается от Window и движется вниз к целевому элементу, проходя через всех его предков.
Целевая Фаза: Событие достигает целевого элемента.
Фаза Всплытия: Событие возвращается к Window, всплывая через всех предков целевого элемента.
Управление распространением событий:
event.stopPropagation(): Вызов этого метода в обработчике событий предотвращает дальнейшее распространение события. Это означает, что событие не будет продолжать всплывать или погружаться.
#event #stopPropagation #dom
Распространение события (Event Propagation) – это механизм в веб-разработке, описывающий порядок, в котором события обрабатываются в DOM (Document Object Model). Когда событие возникает на элементе, оно проходит через три стадии: погружение, целевую фазу и всплытие.
Этот процесс позволяет определить, как и в каком порядке элементы DOM реагируют на различные события (например, клики или нажатия клавиш). Понимание этого механизма важно для правильной организации обработки событий в приложениях.
Фаза Погружения (Захвата): Событие начинается от Window и движется вниз к целевому элементу, проходя через всех его предков.
Целевая Фаза: Событие достигает целевого элемента.
Фаза Всплытия: Событие возвращается к Window, всплывая через всех предков целевого элемента.
Управление распространением событий:
event.stopPropagation(): Вызов этого метода в обработчике событий предотвращает дальнейшее распространение события. Это означает, что событие не будет продолжать всплывать или погружаться.
#event #stopPropagation #dom
👍16❤2🔥1👌1
Feature-Sliced Design - Лучшая Frontend архитектура
Вышло новое видео на канале! Давайте обсуждать, как вы используете FSD.
Писать с нуля, учитывая особенности архитектуры, легче чем переписывать готовый проект. FSD развивает правильно мышление сущностями, заставляет более тщательно продумывать компоненты. В дальнейшем мы отрефакторим код и сформируем правильный подход.
Вот самый ближайший по духу пример из документации:
https://github.com/noveogroup-amorgunov/nukeapp/tree/main/src
Вышло новое видео на канале! Давайте обсуждать, как вы используете FSD.
Писать с нуля, учитывая особенности архитектуры, легче чем переписывать готовый проект. FSD развивает правильно мышление сущностями, заставляет более тщательно продумывать компоненты. В дальнейшем мы отрефакторим код и сформируем правильный подход.
Вот самый ближайший по духу пример из документации:
https://github.com/noveogroup-amorgunov/nukeapp/tree/main/src
👍13🔥5❤4💯1🫡1
Наблюдатель
Наблюдатель (Observer) — это поведенческий паттерн проектирования, который обеспечивает создание механизма подписки, благодаря которому объекты могут получать уведомления о событиях, происходящих в других объектах. Этот механизм улучшает взаимодействие между компонентами системы, делая их взаимосвязь гибкой и минимизируя их зависимость друг от друга.
В архитектуре паттерна "Наблюдатель" выделяют два основных типа участников: "субъект" и "наблюдатели". Субъект — это объект, за состоянием которого следят наблюдатели. Когда состояние субъекта меняется, он автоматически оповещает об этом все подписанные на него объекты-наблюдатели. Наблюдатели, в свою очередь, реагируют на эти изменения, выполняя определенные действия.
Примером реализации паттерна Наблюдатель может служить Стейт менеджер. Когда при изменении какого-то значения, наш интерфейс должен отреагировать.
#patterns #observer
Наблюдатель (Observer) — это поведенческий паттерн проектирования, который обеспечивает создание механизма подписки, благодаря которому объекты могут получать уведомления о событиях, происходящих в других объектах. Этот механизм улучшает взаимодействие между компонентами системы, делая их взаимосвязь гибкой и минимизируя их зависимость друг от друга.
В архитектуре паттерна "Наблюдатель" выделяют два основных типа участников: "субъект" и "наблюдатели". Субъект — это объект, за состоянием которого следят наблюдатели. Когда состояние субъекта меняется, он автоматически оповещает об этом все подписанные на него объекты-наблюдатели. Наблюдатели, в свою очередь, реагируют на эти изменения, выполняя определенные действия.
Примером реализации паттерна Наблюдатель может служить Стейт менеджер. Когда при изменении какого-то значения, наш интерфейс должен отреагировать.
#patterns #observer
👍6❤4✍1🔥1🆒1
Что добавим в приложение React Новости?
Anonymous Poll
30%
Router, Страница новости
10%
Сохранение новостей, Local Storage
20%
Добавим другую АПИ (погода, курс валют, крипта)
23%
UI Kit, Внесем UI элементы
17%
Поиск новостей по дате, календарь
YeaHub Новости
Прошли первые созвоны с командами Frontend, Backend, Design. Обсудили важные вопросы по поводу архитектуры, стека, идей. В скором времени приступаем к написанию сервера для нашей платформы.
На самом деле наш курс немного изменился, добавилось много новых идей. Об этом расскажу позже, когда разработка начнется. Идея более глобальная и полезная.
Еще решили провести исследования. Задать IT специалистам и рекрутерам вопросы, узнать их мнение по поводу идеи. Что они ожидают от платформы, какой функционал, дизайн и тд. Так что в скором времени попрошу вас пройти опрос👌
На данный момент нас 25 человек в команде. Все замотивированны и хотят поскорее начать. Хотим внести свой вклад в развитие всего IT сообщества!
#teams #yeahub
Прошли первые созвоны с командами Frontend, Backend, Design. Обсудили важные вопросы по поводу архитектуры, стека, идей. В скором времени приступаем к написанию сервера для нашей платформы.
На самом деле наш курс немного изменился, добавилось много новых идей. Об этом расскажу позже, когда разработка начнется. Идея более глобальная и полезная.
Еще решили провести исследования. Задать IT специалистам и рекрутерам вопросы, узнать их мнение по поводу идеи. Что они ожидают от платформы, какой функционал, дизайн и тд. Так что в скором времени попрошу вас пройти опрос👌
На данный момент нас 25 человек в команде. Все замотивированны и хотят поскорее начать. Хотим внести свой вклад в развитие всего IT сообщества!
#teams #yeahub
🔥16👍2🥴1🤝1
FSD
Хочу в будущем отрефакторить React Новости настолько хорошо, что его добавят в примеры на официальном сайте FSD. Было бы приятно. Поэтому начинаю углубляться в FSD)
Еще хотим чтобы YeaHub так же добавили на сайт FSD. Это помогло бы в продвижении и привлечении внимания сообщества. Будем трудиться и создадим формулу написания хорошего кода.
Хочу в будущем отрефакторить React Новости настолько хорошо, что его добавят в примеры на официальном сайте FSD. Было бы приятно. Поэтому начинаю углубляться в FSD)
Еще хотим чтобы YeaHub так же добавили на сайт FSD. Это помогло бы в продвижении и привлечении внимания сообщества. Будем трудиться и создадим формулу написания хорошего кода.
🎉8👍5💯5❤2