От React веет безумием, но все об этом молчат
Многие привыкли считать React эталоном фронтенда. Но если приглядеться, он вызывает много вопросов: рекурсивные хуки, запутанные деревья состояний, неочевидное смешение UI и побочных эффектов в одном месте.
В статье автор делится наблюдениями о том, как популярный фреймворк за годы оброс странностями и компромиссами — и почему это ощущение хаоса не стоит замалчивать
Что вас больше всего раздражает в React-проектах? Расскажите в комментариях!
#фронтенд@tproger_web #react@tproger_web
Многие привыкли считать React эталоном фронтенда. Но если приглядеться, он вызывает много вопросов: рекурсивные хуки, запутанные деревья состояний, неочевидное смешение UI и побочных эффектов в одном месте.
В статье автор делится наблюдениями о том, как популярный фреймворк за годы оброс странностями и компромиссами — и почему это ощущение хаоса не стоит замалчивать
Что вас больше всего раздражает в React-проектах? Расскажите в комментариях!
#фронтенд@tproger_web #react@tproger_web
👍7🤔4🔥2👎1
Типизация в React Router: ещё больше надёжности для вашей навигации
Когда приложение растёт, слежение за маршрутами становится сложной задачей. Типизированная навигация помогает поймать ошибки ещё на этапе разработки, спасти ваши нервы и сделать переходы надежнее.
Про конкретные подходы к типизации, советы по внедрению и рабочие примеры для реальных проектов на React вы можете узнать тут.
#react #фронтенд #typescript
Когда приложение растёт, слежение за маршрутами становится сложной задачей. Типизированная навигация помогает поймать ошибки ещё на этапе разработки, спасти ваши нервы и сделать переходы надежнее.
Про конкретные подходы к типизации, советы по внедрению и рабочие примеры для реальных проектов на React вы можете узнать тут.
#react #фронтенд #typescript
👍6❤2🤩1
Создание Typing Test приложения
Typing Test App — это приложение, которое позволяет проверять скорость и точность печати. Для его создания автор выбрал React и TypeScript , а для работы с состоянием использовал Redux Toolkit.
С подробным туториалом, а так же с репозиторием проекта вы сможете ознакомиться по ссылке:
https://tproger.ru/articles/sozdanie-typing-test-prilozheniya-na-react-typescript-redux-toolkit/
#react #typescript
Typing Test App — это приложение, которое позволяет проверять скорость и точность печати. Для его создания автор выбрал React и TypeScript , а для работы с состоянием использовал Redux Toolkit.
С подробным туториалом, а так же с репозиторием проекта вы сможете ознакомиться по ссылке:
https://tproger.ru/articles/sozdanie-typing-test-prilozheniya-na-react-typescript-redux-toolkit/
#react #typescript
👍3🤩1
ReactBits — большая библиотека сниппетов и анимаций для React
Здесь собрано более 90 различных анимаций, эффектов и просто готовых стилизованных элементов для сайта. Текст, кнопки, секции, списки и прочее с красивым дизайном и анимацией можно добавить всего в пару нажатий. Вы также можете выбрать, как именно стилизованы будут элементы — с помощью обычного CSS или с применением Tailwind.
Посмотреть все эффекты можно здесь: https://reactbits.dev/components/circular-gallery
#фронтенд #react #инструменты
Здесь собрано более 90 различных анимаций, эффектов и просто готовых стилизованных элементов для сайта. Текст, кнопки, секции, списки и прочее с красивым дизайном и анимацией можно добавить всего в пару нажатий. Вы также можете выбрать, как именно стилизованы будут элементы — с помощью обычного CSS или с применением Tailwind.
Посмотреть все эффекты можно здесь: https://reactbits.dev/components/circular-gallery
#фронтенд #react #инструменты
❤5🤩1🫡1
Как React‑Query упрощает архитектуру проектов на React + TypeScript
Все приложения, которые в той или иной мере имеют связь с сервером требуют выполнение стандартного набора действий:
0️⃣ загружать данные;
1️⃣ хранить эти данные;
2️⃣ информировать о том что идет загрузка;
3️⃣ информировать о том что произошла ошибка.
Когда в проекте растет количество запросов, состояний загрузки и повторяющегося кода — контролировать и поддерживать это всё становится сложно. В этой статье вы узнаете, как с помощью React Query выстроить чистую архитектуру: избавиться от проп‑дриллинга, централизовать работу с сервером и сократить бойлерплейт.
#фронтенд #react #react‑query
Все приложения, которые в той или иной мере имеют связь с сервером требуют выполнение стандартного набора действий:
Когда в проекте растет количество запросов, состояний загрузки и повторяющегося кода — контролировать и поддерживать это всё становится сложно. В этой статье вы узнаете, как с помощью React Query выстроить чистую архитектуру: избавиться от проп‑дриллинга, централизовать работу с сервером и сократить бойлерплейт.
#фронтенд #react #react‑query
Please open Telegram to view this post
VIEW IN TELEGRAM
🤩5👎4👍3
SolidJS и Qwik: будущее фронтенда?
Пока два лагеря спорят о том, что лучше — React или Vue, а третий тихонько пользуется Angular, появились две тёмные лошадки, которые по всем показателям обходят старичков.
SolidJS похож на React, но без виртуального DOM. Qwik — проект создателя Angular, который предлагает работу кода без гидратации. Мы решили разобраться в их особенностях и подготовили статью с плюсами и минусами решений, а также со своим мнением и рассуждениями о их будущем.
Подробности по ссылке.
А вы что думаете?
#фронтенд #react #vue #solidjs #qwik
Пока два лагеря спорят о том, что лучше — React или Vue, а третий тихонько пользуется Angular, появились две тёмные лошадки, которые по всем показателям обходят старичков.
SolidJS похож на React, но без виртуального DOM. Qwik — проект создателя Angular, который предлагает работу кода без гидратации. Мы решили разобраться в их особенностях и подготовили статью с плюсами и минусами решений, а также со своим мнением и рассуждениями о их будущем.
Подробности по ссылке.
А вы что думаете?
#фронтенд #react #vue #solidjs #qwik
🤔7👍2❤1
20 частых антипаттернов в React и как их исправить: кратко, понятно, без мифов
React обеспечивает предсказуемость и прозрачность UI при условии соблюдения его модельных ограничений. Но на практике даже опытные разработчики продолжают совершать ошибки при работе с библиотекой. Как итог — избыточные рендеры, мерцания интерфейса, нестабильные эффекты, расхождения данных и дефекты, плохо поддающиеся диагностике.
Тут собраны типовые антипаттерны, которые можно встретить чаще всего. Но самое главное — советы по их устранению и предотвращению. Рекомендую изучить как начинающим, так и опытным react-разработчикам.
#react #фронтенд
React обеспечивает предсказуемость и прозрачность UI при условии соблюдения его модельных ограничений. Но на практике даже опытные разработчики продолжают совершать ошибки при работе с библиотекой. Как итог — избыточные рендеры, мерцания интерфейса, нестабильные эффекты, расхождения данных и дефекты, плохо поддающиеся диагностике.
Тут собраны типовые антипаттерны, которые можно встретить чаще всего. Но самое главное — советы по их устранению и предотвращению. Рекомендую изучить как начинающим, так и опытным react-разработчикам.
#react #фронтенд
🤔2👍1
Разработчик объяснил, почему React тормозит развитие фронтенда
React, один из самых популярных JavaScript-фреймворков, перестал побеждать за счет технических преимуществ и теперь «побеждает по умолчанию» просто потому, что он более привычный и его все знают. Но это убивает конкуренцию и мешает развитию альтернатив, которые предлагают более актуальные и эффективные решения.
К такому выводу пришёл разработчик Лорен Стюарт. И в качестве решения этой проблемы предлагает не двигаться по инерции, а оценивать реальные требования проекта, выбирая инструмент под конкретную задачу. Иначе, по его мнению, экосистема будет развиваться гораздо медленнее, чем могла бы.
Что думаете по этому поводу? Согласны или нет?
#react
React, один из самых популярных JavaScript-фреймворков, перестал побеждать за счет технических преимуществ и теперь «побеждает по умолчанию» просто потому, что он более привычный и его все знают. Но это убивает конкуренцию и мешает развитию альтернатив, которые предлагают более актуальные и эффективные решения.
К такому выводу пришёл разработчик Лорен Стюарт. И в качестве решения этой проблемы предлагает не двигаться по инерции, а оценивать реальные требования проекта, выбирая инструмент под конкретную задачу. Иначе, по его мнению, экосистема будет развиваться гораздо медленнее, чем могла бы.
Что думаете по этому поводу? Согласны или нет?
#react
👍21💩4🤯3👎1🗿1
Forwarded from Точка входа в программирование
10 ошибок, которые портят ваши проекты на React и Next JS
Иногда мы сами себе усложняем жизнь, выбирая неправильные решения. В этом видео разобраны 10 таких ситуаций — от неправильного размещения логики в компонентах до неэффективной загрузки данных.
Посмотрите и, возможно, узнаете здесь себя.
#react #nextjs
Иногда мы сами себе усложняем жизнь, выбирая неправильные решения. В этом видео разобраны 10 таких ситуаций — от неправильного размещения логики в компонентах до неэффективной загрузки данных.
Посмотрите и, возможно, узнаете здесь себя.
#react #nextjs
YouTube
10 ОШИБОК, которые ЛОМАЮТ ваши ПРОЕКТЫ!
🔥 Забрать подписку и получить интенсив next js 15 бесплатно при выходе (потом подписки не будет!) - https://htmllessons.link/vPHheBx
❤️ Отзывы тут - https://xn--r1a.website/htmllessons_reviews
🦋 Наш ТГ канал - https://xn--r1a.website/redgroup
Забрать сервисы Kubernetes со скидкой…
❤️ Отзывы тут - https://xn--r1a.website/htmllessons_reviews
🦋 Наш ТГ канал - https://xn--r1a.website/redgroup
Забрать сервисы Kubernetes со скидкой…
👎4❤1🔥1
Типичные ошибки новичков в React JS: useState, useEffect, props drilling и useContext
Даже если вы уже какое-то время работаете с React, вы не застрахованы от ошибок и неправильных практик. В этом видео вы разберёте типичные ошибки, которые встречаются в проектах у начинающих React-разработчиков и узнаете:
🔘 как правильно изменять состояние в компоненте используя useState;
🔘 почему стоит быть аккуратным с вызовом useEffect и изменением состояния компонента внутри него;
🔘 что такое props drilling и как от него избавиться с помощью использования createContext и useContext.
#видео #react
Даже если вы уже какое-то время работаете с React, вы не застрахованы от ошибок и неправильных практик. В этом видео вы разберёте типичные ошибки, которые встречаются в проектах у начинающих React-разработчиков и узнаете:
#видео #react
Please open Telegram to view this post
VIEW IN TELEGRAM
👍3🔥1
React Reconciliation: скрытый механизм, управляющий компонентами
В React за годы его существования накопилось много интересных решений. Изучение их помогает не только лучше понимать, как работает сама библиотека, но иметь в запасе больше вариантов архитектурных решений и механизмов.
Сегодня предлагаю познакомиться с алгоритмом согласования, который лежит в основе всех внутренних оптимизаций и в результате которого React приводит DOM в соответствие с деревом компонентов.
Переходите по ссылке. Там всё описано довольно понятно и интересно.
#react
В React за годы его существования накопилось много интересных решений. Изучение их помогает не только лучше понимать, как работает сама библиотека, но иметь в запасе больше вариантов архитектурных решений и механизмов.
Сегодня предлагаю познакомиться с алгоритмом согласования, который лежит в основе всех внутренних оптимизаций и в результате которого React приводит DOM в соответствие с деревом компонентов.
Переходите по ссылке. Там всё описано довольно понятно и интересно.
#react
😁2🗿2
Срочно обновляем React до версий 19.0.1, 19.1.2 или 19.2.1
29 ноября исследователь Лахлан Дэвидсон обнаружил RCE‑уязвимость в React Server Components (RSC), зарегистрированную как CVE‑2025‑55182 и неформально названную React2Shell.
Уязвимость позволяет удалённо и без аутентификации выполнить произвольный код на сервере через специально сформированный HTTP‑запрос к endpoint’ам Server Actions / React Server Functions.
Проблема затрагивает приложения на React 19, использующие React Server Components и связанные пакеты протокола Flight (например, react‑server‑dom‑webpack и аналоги). Под удар попадают популярные фреймворки и тулчейны, использующие RSC: Next.js (App Router), React Router, Waku, Parcel RSC, Vite RSC‑плагины, RedwoodJS и прочие интеграции.
#новости #react
29 ноября исследователь Лахлан Дэвидсон обнаружил RCE‑уязвимость в React Server Components (RSC), зарегистрированную как CVE‑2025‑55182 и неформально названную React2Shell.
Уязвимость позволяет удалённо и без аутентификации выполнить произвольный код на сервере через специально сформированный HTTP‑запрос к endpoint’ам Server Actions / React Server Functions.
Проблема затрагивает приложения на React 19, использующие React Server Components и связанные пакеты протокола Flight (например, react‑server‑dom‑webpack и аналоги). Под удар попадают популярные фреймворки и тулчейны, использующие RSC: Next.js (App Router), React Router, Waku, Parcel RSC, Vite RSC‑плагины, RedwoodJS и прочие интеграции.
#новости #react
react.dev
Critical Security Vulnerability in React Server Components – React
The library for web and native user interfaces
🤣5❤3🤔3
Создаем React с нуля
В этом гайде содержится инструкция по созданию аналога React с нуля. Вряд ли вы станете использовать его в реальных проектах, но зато узнаете, как устроены основные функции и возможности библиотеки. Помимо гайда внутри вы найдёте ссылку на GitHub с готовым кодом.
Подробности: https://www.rob.directory/blog/react-from-scratch
#react #туториал
В этом гайде содержится инструкция по созданию аналога React с нуля. Вряд ли вы станете использовать его в реальных проектах, но зато узнаете, как устроены основные функции и возможности библиотеки. Помимо гайда внутри вы найдёте ссылку на GitHub с готовым кодом.
Подробности: https://www.rob.directory/blog/react-from-scratch
#react #туториал
🔥3😁2