Управление состоянием в React с помощью Easy Peasy
В React многое завязано на управлении состоянием компонентов. Поэтому от того насколько эффективно этот процесс происходит зависит производительность всего проекта.
В этой статье вы узнаете, как использовать Easy Peasy для управления состоянием в React, разберёте основные концепции инструмента, а также преимущества перед другими решениями
https://blog.openreplay.com/easy-peasy-state-management-using-react-easy-peasy/
#фронтенд #react
@react_tg
В React многое завязано на управлении состоянием компонентов. Поэтому от того насколько эффективно этот процесс происходит зависит производительность всего проекта.
В этой статье вы узнаете, как использовать Easy Peasy для управления состоянием в React, разберёте основные концепции инструмента, а также преимущества перед другими решениями
https://blog.openreplay.com/easy-peasy-state-management-using-react-easy-peasy/
#фронтенд #react
@react_tg
👍12❤2🔥1🤔1
This media is not supported in your browser
VIEW IN TELEGRAM
В представленном проекте автор реализовал мечту всех блогеров: здесь кнопка для отписки никогда не дастся вам в руки, зато кнопка «подписаться» так и просится, чтоб её нажать.
Посмотреть как это реализовано и попробовать победить кнопки можно тут:
https://codepen.io/jh3y/pen/KKvvPrP
#codepen
@react_tg
Please open Telegram to view this post
VIEW IN TELEGRAM
👍39😁19❤2🔥2🥰1🖕1
Please open Telegram to view this post
VIEW IN TELEGRAM
Prateek Surana
The future of rendering in React — Prateek Surana
Understand what are the problems with current rendering patterns in React, and how the new rendering patterns introduced with React 18 and future versions of React aim to solve them.
👍7❤1🔥1
This media is not supported in your browser
VIEW IN TELEGRAM
🌆 City Illustration — адаптивная SVG-иллюстрация города с параллакс-эффектом, реализованная с помощью React, jQuery.parallax.js и GSAP.
#параллакс #svg #gsap #jquery #react
https://codepen.io/lisilinhart/pen/MoqMQq
@react_tg
#параллакс #svg #gsap #jquery #react
https://codepen.io/lisilinhart/pen/MoqMQq
@react_tg
👍15🔥4❤1
🪝 Разработка пользовательских хуков для React
Тема хуков в React разработке довольно популярна и не единожды разобрана различными специалистами. Цель нашего материала, не столько привнести что-то новое, сколько разобрать достаточно важную и актуальную тему максимально доступным и понятным языком, чтобы она не вызывала сложности даже у новичков в разработке приложений на React.
Впервые появились в React версии 16.8. Структура приложений, построенных на использовании хуков очень понравилась сообществу своей гибкостью и простотой, что позволило ей практически заместить классы.
➡️ Читать дальше
@react_tg
Тема хуков в React разработке довольно популярна и не единожды разобрана различными специалистами. Цель нашего материала, не столько привнести что-то новое, сколько разобрать достаточно важную и актуальную тему максимально доступным и понятным языком, чтобы она не вызывала сложности даже у новичков в разработке приложений на React.
Впервые появились в React версии 16.8. Структура приложений, построенных на использовании хуков очень понравилась сообществу своей гибкостью и простотой, что позволило ей практически заместить классы.
@react_tg
Please open Telegram to view this post
VIEW IN TELEGRAM
👍10🔥2❤1
Media is too big
VIEW IN TELEGRAM
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_tg
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_tg
👍17🔥7❤1
This media is not supported in your browser
VIEW IN TELEGRAM
React Three Fiber упрощает создание 3D-сцен. В этой статье вы узнаете, как создавать захватывающие 3D-анимации с помощью React Three Fiber (R3F).
Вы изучите настройку сцены, создание геометрии, добавление освещения и включение эффектов постобработки:
https://varun.ca/modular-webgl/
@react_tg
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥19👍6❤2
7 способов создать приложение React
Создать приложение React — задача не из простых. Потребуется не только много работать, но и принять несколько ключевых решений, которые влияют на его масштабируемость и совместимость с инструментами и актуальными требованиями.
Способ разработки нужно выбирать, исходя из конечной цели. Вы создаете полноценный веб-продукт или маркетинговый сайт? Будет ли сильная нагрузка на сервер? Сколько разработчиков будут участвовать в создании? Нужно ли использовать компоненты из других приложений? Как приложение будет создано и развернуто?
Чем более масштабируемым и сложным будет приложение с точки зрения технологий, интеграций, функций и людей, работающих над ним, тем важнее выбрать основу, которая не только облегчит разработку, но и способствует дальнейшему развитию.
➡️ Читать дальше
@react_tg
Создать приложение React — задача не из простых. Потребуется не только много работать, но и принять несколько ключевых решений, которые влияют на его масштабируемость и совместимость с инструментами и актуальными требованиями.
Способ разработки нужно выбирать, исходя из конечной цели. Вы создаете полноценный веб-продукт или маркетинговый сайт? Будет ли сильная нагрузка на сервер? Сколько разработчиков будут участвовать в создании? Нужно ли использовать компоненты из других приложений? Как приложение будет создано и развернуто?
Чем более масштабируемым и сложным будет приложение с точки зрения технологий, интеграций, функций и людей, работающих над ним, тем важнее выбрать основу, которая не только облегчит разработку, но и способствует дальнейшему развитию.
@react_tg
Please open Telegram to view this post
VIEW IN TELEGRAM
❤13👍8🔥1
Для создания видео вам больше не нужны сложные видеоредакторы. Достаточно использовать remotion в связке с React. Он позволяет создавать видеоролики в формате MP4. А чтобы посмотреть результат разработки видео, можно воспользоваться браузером — там доступен предварительный просмотр.
Подробнее о библиотеке тут:
#библиотека #react
@react_tg
Please open Telegram to view this post
VIEW IN TELEGRAM
👍15❤2🔥1
This media is not supported in your browser
VIEW IN TELEGRAM
Circle Swap Photo Gallery — фотогалерея с красивой анимацией замены фотографий, реализованная с помощью React и GSAP.
#галерея #анимация #gsap #react
https://codepen.io/ste-vg/pen/WNvYWKr
@react_tg
#галерея #анимация #gsap #react
https://codepen.io/ste-vg/pen/WNvYWKr
@react_tg
👍13🔥8❤3👎2
При создании приложений, требующих серверной части, мы тратим много времени на настройку сервера и базы данных, написание API, с помощью которых интерфейс может отправлять и получать данные на серверную часть и из неё. С помощью RestDB вы можете легко развернуть сервер и создать базу данных.
В этой статье вы узнаете, как работает RestDB, создав приложение для блога с помощью React и используя RestDB для хранения статей:
@react_tg
Please open Telegram to view this post
VIEW IN TELEGRAM
👍10🔥3❤2
react-use - это библиотека с коллекцией различных полезных React хуков.
Например:
useNetworkState — отслеживает состояние сетевого подключения браузера;
useOrientation — отслеживает состояние ориентации экрана устройства;
usePageLeave — срабатывает, когда мышь покидает границы страницы;
Более 100 хуков!
npm i react-use@react_tg
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥38👍11❤3
This media is not supported in your browser
VIEW IN TELEGRAM
#маркер #animation #marker #react #FramerMotion
https://codepen.io/aderaaij/pen/mdyvVwR
@react_tg
Please open Telegram to view this post
VIEW IN TELEGRAM
👍7🔥3❤1
refine бесшовно связывается с UI-фреймворками и поставляется с готовыми интеграциями для Ant Design System, Material UI, Mantine и Chakra UI 🚀
@react_tg
Please open Telegram to view this post
VIEW IN TELEGRAM
👍15🔥3❤1
Framer-motion – это популярная библиотека анимации для React, которая позволяет легко создавать плавные анимации на основе жестов.
#junior #react
@react_tg
Please open Telegram to view this post
VIEW IN TELEGRAM
👍11❤3🔥1
react-compress был создан с Brotli и Gzip для пользователей React, которые хотят повысить производительность веб-сайта и уменьшить количество кода JS бандла без усилий.
npm i react-compress --save-dev
---
yarn add react-compress -D
#react
@react_tg
Please open Telegram to view this post
VIEW IN TELEGRAM
👍10🔥3❤1
Представляем 25 ресурсов, полезных для изучения React.
В сети огромное количество платных курсов для знакомства с библиотекой React, однако при должной целеустремленности все можно освоить и без финансовых вложений. Рассказываем, как именно.
#react
@react_tg
Please open Telegram to view this post
VIEW IN TELEGRAM
👍17🔥4❤2
Хочу поделиться историей создания сайта, работающего на React. К моменту написания этой статьи в плане функциональности было реализовано практически все. До настоящего момента я был сосредоточен в основном на разработке устойчивого каркаса приложения, но планирую развивать его.
Моя сегодняшняя цель — минимальный бюджет в качестве отправной точки с возможностью масштабирования в будущем. Кроме того, хочу иметь полный контроль над инфраструктурой и права на ее использование в качестве коммерческого проекта в будущем, поэтому выбираю собственный сервер, а не SaaS-сервисы и конструкторы сайтов.
@react_tg
Please open Telegram to view this post
VIEW IN TELEGRAM
👍7❤1🔥1
React-mapbox-gl — это библиотека, которая позволяет вам использовать Mapbox GL JS, библиотеку JavaScript для интерактивных, настраиваемых векторных карт, в приложении React. Он предоставляет набор компонентов React, упрощающих работу с Mapbox GL JS декларативным способом, позволяя вам указывать поведение и стиль карты в качестве свойств компонента React.
Чтобы начать работу с react-mapbox-gl, вам понадобится токен доступа Mapbox, который вы можете получить, зарегистрировав учетную запись Mapbox. Получив токен доступа, вы можете установить библиотеку с помощью npm или yarn:
npm install react-mapbox-gl mapbox-gl
или
yarn add react-mapbox-gl mapbox-gl#react
@react_tg
Please open Telegram to view this post
VIEW IN TELEGRAM
👍15❤2🔥2🤨2
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥36👍12❤3😱2