Это перевод статьи "What’s So Great About Redux?" (автор Justin Falcone), которая мне показалась весьма приятной и интересной для прочтения, enjoy!
Redux мастерски справляется со сложными взаимодействиями состояний, которые трудно передать с помощью состояния компонента React. По сути, это система передачи сообщений, которая встречается и в объектно-ориентированном программировании, но она не встроена непосредственно в язык, а реализована в виде библиотеки. Подобно ООП, Redux переводит контроль от вызывающего объекта к получателю — интерфейс не управляет состоянием напрямую, а передает ему сообщение для обработки.
В этом плане хранилище в Redux — это объект, редюсеры — это обработчики методов, а действия — это сообщения. Вызов store.dispatch({ type:"foo", payload:"bar" }) равносилен store.send(:foo, "bar") в Ruby. Middleware используется почти таким же образом, как в аспектно-ориентированном программировании (например, before_action в Rails), а с помощью connect в react-redux осуществляется внедрение зависимости.
React.createElement, но с jsx получится гораздо лаконичнее, что повышает читаемость. И всё замечательно до появления первой необходимости вывести данные в цикле. В jsx циклы не предусмотрены. Зато предусмотрена вставка js-кода. И тут вновь возникает вопрос читаемости, но теперь она значительно ухудшается. Возникает ситуация, когда в js-коде пишется html, в котором пишется js-код с html. Конечно, можно выделить html в отдельную функцию. Но тогда html будет появляться в коде то тут, то там. А хотелось бы локализовать всё в одном месте. К счастью, в современном javascript почти для любой проблемы, есть решение в виде библиотеки или плагина. Выше обозначенную проблему легко решает плагин для babel transform-react-statements.
Какие горизонты открывает React? Single Page Application (и веб-приложения, и десктопные приложения на Electron) — это цветочки. Очень заманчиво выглядит разработка мобильных приложений на React Native. Лозунг "learn once, write anywhere" стоит того, чтобы приложить некоторые усилия. Go!
Хочу показать три приёма, как можно ускорить загрузку интерфейсов с Backend-Driven UI и улучшить UX. Решения показали хорошие результаты на демо-версии, но увы, пока ещё не внедрены в реальный проект. Было бы интересно обсудить с вами, как эти приёмы могут помочь в боевых задачах и что ещё можно улучшить.
Пишу про полезные материалы про IT, и собираю свой ламповый нетворкинг тут - https://t.me/+434aQiGpZtAyNTU6. Присоединяйтесь!
Оглавление.
В этой статье мы продолжим разбирать базовые концепции реактивности на основе идей и примеров, изложенных Райан Карниато (Ryan Carniato), автором SolidJS. Сегодня рассмотрим, как в реактивных системах планируется выполнение изменений производных значений.
Большинство разработчиков воспринимают реактивность как систему событий. У вас есть некоторое состояние, которое обновляется, а все зависящие от него данные пересчитываются. В итоге это изменение проявляется через побочные эффекты.
Аутентификация в мобильных приложениях с помощью Telegram Login Widget обделена информацией как официальной документации, так и в интернете. В этой статье поделюсь примером реализации входа в iOS приложение c помощью Telegram. В статье приведены сниппеты кода на Typescript + React, Go и Swift.
В этой статье речь пойдет об инструментах, с помощью которых можно проанализировать качество спроектированного front-end разработчиком сайта. В качестве наглядного материала используется проект, реализованный на базе Next.js 14-й версии с app router.
В эпоху цифрового контента каждая миллисекунда загрузки страницы может существенно повлиять на пользовательский опыт. В Hikasami, платформе, предоставляющей потоковое аниме и азиатские медиа для пользователей СНГ, наша цель — обеспечить мгновенную загрузку страниц, минимизировать задержки, а также гарантировать актуальность данных. Для этого мы внедрили Next.js 15, который открыл перед нами возможности глубокой оптимизации:
История от задумки до запуска на Google Play приватного финансового менеджера inCourse для Android на React Native и TypeScript.
Я и сам до конца не знаю, является ли заголовок статьи кликбейтом или нет. Разберёмся в комментариях. Только давайте по-честному! Согласен с тезисами — напиши, что статья огонь, поставь лайк и всё такое. Не согласен — аргументируй, а не просто: «бред»! Есть что добавить (идеи, фишечки) — добро пожаловать в комментарии.
Привет, меня зовут Андрей Шпилевский, и в этой статье я расскажу, почему я делаю тестовое лучше большинства, а также дам советы, как проходить этот этап быстро и максимально эффективно. Тема достаточно большая, поэтому будет разбита на 3 части. Это первая и начну ее я, пожалуй, не с советов: ‘Делай так, спина болеть не будет’, а с лирического вступления, которое, на самом деле, важнее, чем какие-либо пункты.
При разработке у нас зачастую возникает необходимость прямого взаимодействия с DOM-элементами. Для такого случая React предоставляет нам механизм рефов (refs), который позволяет получать доступ к элементам после того, как они зарендерятся. Чаще всего используются обычные объектные рефы через useRef (обзовём их так), но также существует другой подход — callback refs. Этот метод даёт нам дополнительную гибкость и контроль над жизненным циклом элементов, позволяя выполнять необходимые нам специфические действия в точные моменты привязки и отвязки элементов. В этой статье я хочу объяснить, что такое callback refs, как они работают, показать проблемы при их использовании и примеры их использования.
Вокруг все говорят о серверных компонентах реакта, о серверном рендеринге, и разных новшествах в мире фронтенде. Как будто JQuery в один миг взял и исчез. Несмотря ни на что он всё ещё остаётся самой популярной библиотекой 😅.
Сегодня я вам расскажу, как мы постепенно мигрируем с JQuery на React.
На майской конференции React Conf 2024 команда React не только презентовала версию библиотеки React 19, но и рекомендовала использовать для старта новых JavaScript-проектов один из четырех фреймворков: Next.js, Remix, RedwoodJs или Expo. Позже аналогичная рекомендация появилась в официальной документации по React. Из этих фреймворков Next.js может похвастаться самым большим комьюнити, документацией и удобством. Если вы до сих пор его не освоили, то мы идем к вам!
Привет, Хабр! В этой статье расскажем, что такое Next.js, и покажем вам на примере небольшого pet-проекта его базовые возможности.
Я вас понимаю. Да – еще один. Но давайте посмотрим, вдруг правда?
Давайте определимся с тем, что такое удобно. Конечно, у нас разные представления об удобстве, поэтому я опишу свои с примерами из api react: