React JS

⚡️Как разработчику стать более востребованным на рынке, апнуться в деньгах и начать решать более широкие и сложные задачи? 🚀Узнайте больше о высокооплачиваемой, статусной работе тимлида на бесплатных вебинарах онлайн-курса «Team Lead разработки» от OTUS: — «Роли в команде»: https://otus.pw/HWpv/ — «Как работать с трудными сотрудниками»: https://otus.pw/Zrh4/ — «Подходы к управлению в удаленной команде»: https://otus.pw/09Ls/ 👉Регистрируйтесь сегодня — напомним перед вебинаром!

Создаём крутые 3D-сцены с помощью React Three Fiber React Three Fiber упрощает создание 3D-сцен. В этой статье вы узнаете, как создавать захватывающие 3D-анимации с помощью React Three Fiber (R3F). Вы изучите настройку сцены, создание геометрии, добавление освещения и включение эффектов постобработки: https://varun.ca/modular-webgl/ #фронтенд #react #r3f

ReactJS под капотом React Reconciliation Все ли вы знаете о React key? Что вы знаете о useCallback? какая разница между useLayoutEffect, componentDidMount и useEffect? Best Practices for useEffect by React Documentation Первое погружение в исходники хуков (задел на будущее) createRef, setRef, useRef и зачем нужен current в ref Что выбрать: глобальные переменные или useThis()? Какая настоящая цена useMemo? useMemo - исходники, альтернативное использование и мемоизация ссылки React.memo это вам не useMemo || разница между HOC и hook на примере исходников Чем отличается SimpleMemoComponent от MemoComponent? Улучшаем перфоманс без memo() || Советы от Дэна Абрамова Станет ли memo() дэфолтным поведением реакт компонента? Блок схема по использованию memo() && Боевые примеры Трюк с useMemo от React разработчиков Новый хук в 18-ой версии React - useSyncExternalStore Исходники Context API + Redux vs Context [Эксперимент] useContext + useReducer вместо Redux Лучшие примеры использования Context API Новый хук useEvent решит наши проблемы! Все видео доступны на youtube ✍️ @React_lib

🌆 City Illustration — адаптивная SVG-иллюстрация города с параллакс-эффектом, реализованная с помощью React, jQuery.parallax.js и GSAP. #параллакс #svg #gsap #jquery #react https://codepen.io/lisilinhart/pen/MoqMQq @react_tg

​Управление состоянием в React с помощью Easy Peasy В React многое завязано на управлении состоянием компонентов. Поэтому от того насколько эффективно этот процесс происходит зависит производительность всего проекта. В этой статье вы узнаете, как использовать Easy Peasy для управления состоянием в React, разберёте основные концепции инструмента, а также преимущества перед другими решениями https://blog.openreplay.com/easy-peasy-state-management-using-react-easy-peasy/ #фронтенд #react

💾 React Slider – слайдер в темных тонах, который переключается с помощью стрелок внизу. Кнопки при нажатии показывают синюю подсветку. Сайтодел | #сниппет #css

From button to dialog Кнопка, переходящая в окно, сделанная с помощью Pug, SCSS и библиотеки React. #css #js

​Обнаружение долгого нажатия в событиях JavaScript в React Разбираем, как реализовать взаимодействие с долгим нажатием в React-приложении без использования нативных инструментов мобильной разработки. #react #en https://spacejelly.dev/posts/how-to-detect-long-press-gestures-in-javascript-events-in-react/

useSuncExternalStore — недооценённый хук React Этот хук используется внутри библиотек управления состоянием, таких как Redux, для подписки на внешние источники данных. Но вы также можете применять его в собственных проектах. В этой статье автор поделился несколькими моментами, где этот хук может пригодиться и значительно облегчить вашу жизнь: https://thisweekinreact.com/articles/useSyncExternalStore-the-underrated-react-api #react @react_tg

Как создать многоуровневое выпадающее меню в React Многоуровневое меню предоставляет несколько вариантов выбора, делая панель навигации динамичным и организованным. В этом руководстве вы пошагово рассмотрите процесс реализации функции раскрывающегося списка в React: https://blog.logrocket.com/how-create-multilevel-dropdown-menu-react/ #фронтенд #react

Event Cards — карточки с информацией о событий, реализованные с помощью React. #карточки #card #react

Создаём собственный текстовый редактор на React Если вам не подходят уже существующие решения для текстовых редакторов, то можно создать своё. Оно будет: — иметь предустановленные стили элементов; — настраивать стили текста — курсив, жирность и так далее; — поддерживать интерактивный элементы, например, ссылки; — поддерживать хоткеи; — и импортировать/экспортировать контент в HTML. Всё это можно реализовать с использованием React, а вернее фреймворка на его основе Draft.js, который специально создан для работы с текстом. Как? Узнаете здесь: https://habr.com/ru/company/kts/blog/576682/ #react #draftjs #фронтенд @react_tg

50 Shades of Hue - CPC Monochromatic — генератор монохромной цветовой палитры, который генерирует до 50 оттенков. Реализован с помощью React и Prism.js. #цвет #react #prismjs

React Cool Inview Если вы искали способ определять, что за элемент сейчас находится на экране, то библиотека React Cool Inview как раз то, что вам нужно. Это простой в использовании React-хук, который позволяет легко узнать какой сейчас элемент отображается на экране, чтобы затем взаимодействовать с ним. Подробнее: https://www.npmjs.com/package/react-cool-inview #фронтенд #react