ReactJS *

Допустим, у вас есть тестовое задание.

В статье мы обсудим, как это тестовое выполнить аккуратно, пошагово. Ну и - побочный эффект - сравнительно быстро.

Стейт-менеджеры уже давно стали своеобразным мемом среди разработчиков. Бытует мнение, что фронтедеры только тем и занимаются, что вместо решения действительно важных и актуальных проблем постоянно переписывают проект с одного стейт-менеджера на другой. Благо их количество и поток новых, выходящих в open source, позволяют. 

Выход есть — Signals. Решение, по словам создателей, сочетает оптимальную производительность для разработчиков и легкое внедрение во фреймворк. Под катом — подробный разбор библиотеки. 

Меня зовут Женя, я все еще фронтенд-разработчик в команде Quick Experiments inDrive. И я тоже не люблю выделяться из толпы, поэтому предлагаю обратить внимание на новое решение от команды Preact — Signals. Во вступительной статье создатели библиотеки заявляют о том, что сегодня создано огромное количество решений по управлению состоянием приложения, но они требуют сложной и долгой интеграции с фреймворком. Это усложняет проектирование, так как нужно постоянно держать в уме особенности стейт-менеджера. Усложняется и разработка, так как нужно тратить много времени и сил на интеграцию стейт-менеджера и библиотеки рендеринга. 

Привет, друзья!

Представляю вашему вниманию перевод этой замечательной статьи, в которой рассказывается о разработке приложения с помощью React Query.

Репозиторий с кодом проекта

Прим. пер.: автор рассказывает лишь о ключевых особенностях приложения, поэтому я рекомендую клонировать репозиторий, установить зависимости и запустить сервер для разработки, чтобы иметь возможность выполнять необходимые операции при чтении статьи. Обратите внимание: если у вас возникнут проблемы при запуске сервера для разработки с помощью команды npm start, перенесите переменные, определенные в этой команде в файле package.json, в файл .env:

SKIP_PREFLIGHT_CHECK=true
TSC_COMPILE_ON_ERROR=true
ESLINT_NO_DEV_ERRORS=true

И отредактируйте команду start следующим образом:

"start": "react-scripts start"

Руководство по React Query

Настроим Push уведомления при использования EAS.

Факт отсутствия в русскоязычном сегменте интрнета и какого либо примера по настройке пуш уведомлений с использованием лишь инструментов которые предоставляет Expo Go очень расстраивает, поэтому вы сейчас видите сие творение.

Отвечая на вопросы в треде по React Native на StackOverflow я заметил что в той или иной форме люди очень часто интересуются производительностью компонентов списков и в частности FlatList. В этой гайде я решил рассмотреть способы оптимизации производительности на примере приложения для отображения списка вопросов с StackOverflow а во второй части статья я расскажу о новом компоненте FlashList который драматически ускорит работу ваших списков.

Привет, друзья!

В данном туториале я хочу поделиться с вами опытом решения одной интересной практической задачи.

Предположим, что у нас имеется страница сравнения товаров. На этой странице отображается слайдер с карточками товаров и таблица с их характеристиками. Задача состоит в том, чтобы синхронизировать переключение слайдов и прокрутку таблицы. Условия следующие:

• ширина таблицы должна соответствовать ширине слайдера;
• ширина колонки таблицы должна соответствовать ширине слайда;
• слайды можно переключать с помощью перетаскивания, нажатия на кнопки управления и элементы пагинации;
• таблицу можно прокручивать с помощью колесика мыши (на десктопе) и перемещения указателя (на телефоне);
• при взаимодействии пользователя с одним компонентом второй должен реагировать соответствующим образом: при переключении слайда должна выполняться прокрутка таблицы, при прокрутке таблицы — переключение слайдов.

Репозиторий с кодом проекта.

Если вам это интересно, прошу под кат.

Всем привет! Меня зовут Никита Русанов, я лид команды фронтенда в компании, где мы создаем продукт, упрощающий переезд. В данной предметной области много задач по взаимодействию с гео данными. Сегодня я расскажу, каким образом можно работать с картами в браузере. В этой части мы с вами поговорим про используемые технологии.

Пошаговое руководство по настройке сборщика Webpack 5 совместно с такими инструментами как Pug, Sass, JavaScript, React и Markdown.

Effector - менеджер состояния web-приложений.

Новое и удобное решение. Продолжаем серию статей для новичков. Разбираемся, что может упростить работу, как работать с формами и многое другое...

Всем привет, дорогие читатели Хабр. Мы долго думали, чтобы нам сделать такое, что от нас не потребует глубоких знаний бэкенда и базы данных, но все же интересное и обучающее, исключительно ориентированное на конечного пользователя. Так мы пришли к тому, что нам бы хотелось изучить более подробно сферу WebRTC и WebSockets и решили сделать что-то похожее на Google Meet c еë основными фичами, которые более подробно описаны чуть ниже. Но давайте все по порядку :) Приготовьтесь, будет много кода!

Чуть больше года назад я столкнулся с разработкой телеграм-ботов. Будучи профессиональным программистом быстро разобрался и свет увидел мой первый бот - Доктор Знаев. Статью про него выкладывал на vc.ru . Затем от него отпочковался Алкобот Знаева с забавным функционалом - вы ему название лекарства, а он вам скажет через сколько после приёма можно выпивать

Боты это хорошо!

Идея ботов мне понравилась, они не сложны в разработке, плюс у меня как у специалиста развязаны руки для использования тех технологий которыми я умею пользоваться. Например свои я писал на сервисе replit, который позволяет быстро и безболезненно поднять небольшой веб сервер и разрабатывать прямо в браузере, что очень удобно при небольшом проекте.

Итак, вот мои основные претензии к телеграму (сорян, Паша).

По отдельности хуки могут быть относительно понятны, но у многих возникают вопросы, как их использовать вместе. Особенно часто возникают подобные вопросы при переходе от классовых компонентов к функциональным. В этой статье мы разберем несколько случаев:

Как работать с запросами в useEffect

Как предотвращать лишние запросы в useEffect с помощью useRef и использовать useRef как стабильную переменную

Уже этих примеров будет достаточно для многих прочих случаев. Главное обсудим, как ведет себя замыкание в хуках, почему именно так, и почему useRef работает как стабильная переменная.

Команда Vercel порадовала нас большим релизом популярного фреймворка Next.js, давайте вместе разберёмся, что там изменилось и появилось нового

Redux и MobX больше не нужны ?

Туториал для новичков по EffectorJS - современному и удобному стейт-менджеру. Рассмотрим основные возможности, работу ядра, и какие проблемы решает. На примерах.

Приятно познакомиться, мы битриксоиды. Да-да, те самые которые:
- вообще не модные,
- пишут НЕ на Laravel и Symphony,
- возятся с кучей мягко говоря “неидеального” кода под названием “1С-Битрикс: Управление сайтом”,
- проходят Академию 1С-Битрикс и сдают платные экзамены для подтверждения компетенций,
- умеют дорабатывать обмен с 1С без истерики,
- берут с заказчика "тонну денег" за то что любой php-джун сделает на вордпрессе одной левой,
- но при всем этом почему-то делают сложные проекты переживающие тысячи доработок без потери товарного вида и управляемости.

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

Но сегодня речь не о бекенде. Поговорим мы про переделку нашего собственного сайта на более-менее свежих FRONTEND-технологиях. И одновременно прикинем, а почему бы не делать все сайты/магазины/личные кабинеты на таком стеке.

В этой статье я бы хотел подискутировать о том, насколько хорошо паттерн MVVM подходит для разработки Web приложений на React. Вместе этим, я собираюсь описать какие преимущества могут быть при разработке с использованием MobX с паттерном MVVM в сравнении с Redux. Запаситесь кофе, это будет долгое чтиво.

Использование ref в функциональных компонентах играет две роли:

1. С помощью них можно получить ссылку на dom элементы и react компоненты

2. ref можно использовать как стабильные переменные.

В этой статье сосредоточимся на первой роли, разберем, как с помощью ref получить доступ к dom элементам и компонентам react, включая такие какие способы как createRef, useRef и ref callback. Обсудим для чего нужны forwardRef и useImperativeHandle , и как с их помощью получить ссылку на функциональные компоненты, спойлер: нельзя так просто получить ссылку на функциональный компонент с помощью ref. А уже в следующей статье обсудим роль ref в качестве стабильной переменной, и как это облегчит нам жизнь при использовании useEffect, useMemo, useCallback.

Как часто приходится сталкиваться с тем, что начиная проект и развивая его до какого то момента, приходит понимание что код стал запутанным, а чтобы поправить зависимость в одном модуле, приходится править десятки похожих?

Казалось бы, что может избавить нас от мучительной рутины связанной с отслеживанием зависимостей? Есть один паттерн, который нам с этим поможет, и имя ему Наблюдатель. Давайте посмотрим как он реализуется в знакомой библиотеке менеджера состояний Redux.

В прошлой статье я рассказывал про библиотеку компонентов и утилит handy-ones. Я задумал её не только чтобы делиться с сообществом своими наработками на постоянной основе, но главное - чтобы понять, как должен выглядеть, собираться, тестироваться и дистрибутироваться современный JavaScript-проект.

Привет, друзья!

Представляю вашему вниманию перевод этой небольшой заметки, посвященной предложению нового хука React.

Первоклассная поддержка промисов в React — как это должно работать

Новое предложение от команды React вызвало некоторую шумихи в экосистеме React: одни разработчики с нетерпением ждут новых возможностей, другие выражают обеспокоенность тем, как это будет реализовано. В этой статье мы поговорим о том, что из себя представляет новая возможность, какие проблемы она решает, а также о сложностях, которые могут возникнуть в процессе ее реализации и применения.