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
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.iss.onemo это вам не 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.iss.onemo это вам не 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
Please open Telegram to view this post
VIEW IN TELEGRAM
👍18🔥7❤2