React | Разработка приложений

Освой профессию Frontend-разработчика, чтобы оказаться в нужных рядах Команда энтузиастов создала несколько бесплатных Telegram-каналов, которые помогут тебе прокачать навыки в JavaScript, HTML и CSS. Полезная вËрстка — канал с готовым решением повседневных задач: слайдеры, анимация, навигация и т.д. JavaScript тесты — канал с тестами и задачами, который прокачает твои навыки во Frontend-разработке. CSS доширак — больше не нужно запоминать кучу свойств и их значения — всё собрано в одном канале! JavaScript заметки — образовательный канал с ежедневными практическими заметками по языку. Помощник фронта — здесь собраны полезные ссылки, обзоры и подборки по Frontend-разработке. Подпишись, чтобы претендовать на отсрочку 😉

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

Custom Tooltip Меню при нажатии на которое раскрывается и появляется подсказка. Написано на чистом CSS. #меню #css Такого еще много на Frontend Trends  — это канал с крутыми и полезными фичами для вашего сайта: готовый код на css и javascript, который можно вставить в проект. Подписывайтесь, мы выкладываем свежие исходники каждый день 🔥

Actions — это структуры, которые передают данные из вашего приложения в стор. Они являются единственными источниками информации для стора. Экшены — это обычные JavaScript-объекты. Экшены должны иметь поле type, которое указывает на тип исполняемого экшена.

🔥 Три принципа Redux Redux может быть описан тремя фундаментальными принципами: ✓ Единственный источник правды ✓ Состояние только для чтения ✓ Мутации написаны, как чистые функции

Запомни, есть два типа людей: Одни читают кучу статей, спрашивают опытных разработчиков, смотрят видосики на ютубе, чтоб откапать хорошие плагины для Visual Studio Code. Другие подписываются на VSCoder, где собраны лучшие плагины, которые помогут сдавать проекты раньше дедлайна. Надеюсь, ты относишься ко вторым?) P.S. Прямо сейчас проходит розыгрыш в котором можно за подписку выиграть реальные деньги. Заходи и участвуй!

🚀 Redux — библиотека управления состоянием для приложений, написанных на JavaScript. Когда нужно пользоваться Redux: ✓ если в приложении несколько компонентов, которым необходимо совместно использовать одно и то же состояние, при этом сами компоненты расположены в разных частях приложения. ✓ еще одна мотивация использовать Redux — замена стандартных механизмов локального хранилища. Например, в React хранилище изолировано. Если нужно передавать состояние между компонентами, то приходится использовать пропсы либо поднимать его наверх до ближайшего «родителя». Redux устраняет эту проблему.

Brazzers уходит из России! Но лысого мы уже импортозаместили! Русский Джонни Синс не пинает хуи на работе, он верстает сайты, обучает этому людей и ведет блог о своей работе. Подписывайся на канал Лысого из Браузера, он расскажет все о работе в интернете — не вебкам

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

📗 Хуки useEffect и useLayoutEffect – придание жизни компонентам, а точнее – придание методов жизненного цикла Если вы работали с классовыми компонентами, то знакомы с методами жизненного цикла. Они служат для того, чтобы совершать какие-то операции на разных стадиях жизни компонента. Для этого есть два хука – useEffect и useLayoutEffect. Они похожи между собой, за исключением небольшой разницы в рендеринге. В случае с useLayoutEffect React не запускает рендеринг построенного DOM дерева до тех пор, пока не отработает useLayoutEffect. Если же берём useEffect, то React сразу запускает рендеринг построенного DOM, не дожидаясь запуска useEffect.

Хочешь изучить JavaScript и стать востребованным разработчиком или повысить уровень знаний и ЗП в несколько раз?   Загляни в JSmode и ты найдёшь: ✅ Материал с примерами доступным языком; ✅ Интересные статьи; ✅ Уникальные готовые решения. ✅ Разбор основных техник написания кода; 👉Подпишись и развивай только полезные навыки!

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

JavaScript - всё о JavaScript и frontend-разработке. Подпишись - @js_script

‼️ Хук useRef – прямая связь с узлами и не только Бывают ситуации, когда необходимо обратиться к какому-то DOM-объекту напрямую. Для этого существует хук useRef. Cоздаём объект ref и указываем его в качестве элемента, обозначающего DOM-объект, к которому хотим обратиться, а также прописываем этот объект в качестве параметра. Далее можем взаимодействовать с Dom-объектом напрямую, как если бы мы нашли его с помощью селектора. Для этого используем свойство current у объекта ref.

❗ Хук useMemo – оптимизируй вычисления Этот хук позволяет не производить одни и те же вычисления много раз. Как только меняется какая-то зависимость из массива, запускается callback, который рассчитывает другое значение. Если ни одна зависимость не поменялась, то при рендеринге в переменную будет подставлено предыдущее вычисленное значение.

⚡️Хочешь стать универсальным разработчиком и участвовать во всех этапах разработки? Тогда профессия Fullstack-разработчик на JavaScript для тебя! Такой специалист отвечает как за внешнюю часть сайта: верстку, дизайн, интерфейс, так и внутреннюю часть: сервера и базы данных. Освоить все необходимые навыки для старта в этой профессии можно с помощью специализации «Fullstack Developer» от OTUS. На этом онлайн-курсе предусмотрена серьезная поэтапная подготовка: 3 ступени с живыми вебинарами, практикой и видеокурсом. 📌За 14 месяцев вы соберете 3 проекта в портфолио из и сможете стать Fullstack-разработчиком уровня Middle+, а трудоустроиться можно еще во время обучения. В этом вам поможет центр карьеры OTUS. 👉Успей записаться в группу до конца сентября со скидкой в 20%: https://otus.pw/t4oE/

Data Study - канал с полезными и практическими материалами про аналитику данных, бизнес-анализ и развитие soft-навыков от ведущего BI аналитика. На канале Даниил также организовывает бесплатные вокршопы по обсуждению аналитических тем. Воркшоп по теме создания data-продуктов в компания Статья на habr про оконные функции простым языком Шаблон оформления документации про профайлинге нового data-источника Материалы канала помогут улучшить профессиональные навыки в аналитике. 🎁 Большой бонус: бесплатный гайд по профессии аналитика данных, чтобы еще лучше погрузиться в специализацию аналитика Подписаться 👨‍💻

🔥 Хук useCallback – ещё больше оптимизации Благодаря этому хуку единожды создаётся метод и обновляется только тогда, когда меняется какой-то из параметров, которые поместили в качестве элемента массива и передают вторым аргументом – по аналогии с массивами в других хуках. Так мемоизируется метод, и не происходит лишний рендеринг.

📌 Хук useReducer – снова идём сквозь пространство Этот хук позволяет вынести данные из компонентов. У него есть преимущество: вне зависимости от того, как компоненты приложения будут вложены друг в друга, можно отобразить данные в любом компоненте.

⚡ Хук useContext – сквозь пространство Чтобы передать какие-то данные в компонент, можем использовать props. Но есть и альтернативный способ – context. Контекст позволяет передавать данные от родительского компонента к дочернему, минуя промежуточные.