Как стать автором
Обновить
44.64

ReactJS *

JavaScript-библиотека для создания интерфейсов

Сначала показывать
Порог рейтинга
Уровень сложности

Многослойная архитектура FrontEnd-приложений на основании SOLID, часть 1

Уровень сложностиСредний
Время на прочтение6 мин
Количество просмотров8.4K

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

Но в основном сначала получается та самая картина с балконом.

Читать далее

Typescript для React

Уровень сложностиПростой
Время на прочтение5 мин
Количество просмотров7K

Typescript - сложный язык, но большинству разработчиков не нужно знать все его тонкости, чтобы быть эффективными в своей работе.

Это то, что я считаю минимальным набором знаний по тайпскрипту для эффективной разработки продукта на React.

Основные принципы, которые мы здесь используем:

Типизируйте входные данные, предсказывай результат

Минимизируйте шум в кодовой базе

Ошибки должны отображаться как можно ближе к коду, который их вызвал

Читать далее

Всё под контролем: сила useRef и forwardRef в React

Уровень сложностиСредний
Время на прочтение5 мин
Количество просмотров4.6K

Начнем с небольшой истории. Как-то раз я с размахом накинулся на проект — в духе нынешних фреймворков всё было обложено компонентами, декларативный стиль царил, все шло идеально… ну почти. Дошел я, значит, до нужды контролировать DOM-узлы напрямую. И что вы думаете? Прямого доступа нет, React закрыл от меня этот мир, сидит и ухмыляется: мол, мы тут за производительность боремся, зачем тебе что-то трогать руками?

Но мы не из тех, кто сдаётся, верно? React предлагает своё решение — рефы, и именно о них сегодня пойдет речь.

Читать далее

Разработка Telegram Mini App с помощью React

Уровень сложностиСредний
Время на прочтение15 мин
Количество просмотров14K

Telegram Mini App — это веб-приложения, которые открываются внутри мессенджера Telegram. Эти приложения создаются с использованием стандартных веб-технологий, таких как HTML, CSS и JavaScript, и выглядят как обыкновенные сайты.

Более подробно о том, что такое Telegram Mini App, мы рассказали в предыдущей статье, а сегодня рассмотрим, как создать собственный Mini App, используя React.

Читать далее

Истории

Ошибки при работе с tailwindcss

Уровень сложностиПростой
Время на прочтение3 мин
Количество просмотров2.5K

Рассмотрим распространенные ошибки которые допускают разработчики при работе с tailwind и пути их решения.

Читать далее

Расширения VSCode для комфортной работы с проектами

Уровень сложностиПростой
Время на прочтение4 мин
Количество просмотров37K

Для работы с проектами существует куча редакторов кода и IDE (VSCode, NeoVim, SublimeText, WebStorm и т.д.). В данный момент наиболее популярны VSCode и Webstorm и у каждого есть свои плюсы и минусы. Webstorm является примером прекрасного IDE от компании JetBrains, где многие вспомогательные модули идут “из коробки”. К сожалению, сейчас нет возможности легально получить доступ к этому продукту гражданам России, поэтому многим приходится искать альтернативу. Такой альтернативой вполне может стать Visual Studio Code от компании Microsoft, который имеет открытую кодовую базу, полностью бесплатный и гибко настраиваемый под ваши нужды. В данной статье мы рассмотрим пример настройки рабочего пространства VSCode для комфортной работы с нашими проектами. Я покажу вам, какими расширениями я пользуюсь для лучшего удобства и продуктивности. Эти расширения я использую давно и они хорошо зарекомендовали себя, но возможно некоторые из них могут не подойти под ваш стиль работы и написания кода. Итак, начнем!

Читать далее

Как организовать сериализацию в Redux и избежать ошибки: non-serializable value

Уровень сложностиСредний
Время на прочтение6 мин
Количество просмотров1.1K

Мы пишем онлайн-компилятор для отладки ИИ-сервисов. И статья — это скорее приглашение к обсуждению. Хочу поделиться практическим подходом, который показался простым и удобным в этом проекте. Ваши комментарии и критика будут очень полезны.

Читать далее

Как я создавал бесплатный сервис оптимизации изображений FlashImg.ru

Уровень сложностиПростой
Время на прочтение3 мин
Количество просмотров2.5K

Всем привет. В этом материале я расскажу как создавал беспслатный сервис оптимизации изображений FlashImg.ru

Читать далее

Тестирование фронтенд компонентов с jest-dom на видимость пользователю

Уровень сложностиПростой
Время на прочтение3 мин
Количество просмотров822

Решаем проблему с тестирование элемента что он виден пользователю или не виден.

Данное решение для reactjs проекта написано, но также работает и для других фреймворков, с которыми работает jest-dom

Читать далее

8 инструментов для разработчиков, которые стоит попробовать

Уровень сложностиПростой
Время на прочтение5 мин
Количество просмотров9.5K

Эта статья расскажет о восьми инструментах, которые помогут разработчикам упростить рабочий процесс и повысить продуктивность. Вы найдете решения для создания пользовательских компонентов, упрощения работы с кодом, разработки интерфейсов и документации. 

Читать далее

Отладка и мониторинг в MobX: trace, introspection и spy

Уровень сложностиСредний
Время на прочтение13 мин
Количество просмотров1.6K

Привет, меня зовут Дмитрий, я Middle-React-разработчик с замашками сеньора, поднимающийся с самых низов без мам, пап и ипотек. В последнее время я частенько вижу ситуацию: при использовании MobX в больших проектах у людей появляются сложности с количеством перерисовок или наоборот не обновлением данных со стора. Также могут проявляться проблемы с производительностью в том числе и из-за этого. Я решил поделиться отладочными инструментами MobX, ведь это может кому пригодиться.

Читать далее

CI/CD для начинающих: деплой React-приложения без боли

Время на прочтение5 мин
Количество просмотров11K

Следующий шаг после разработки веб-приложения — размещение его на сервере. Независимо от сложности проекта или используемой инфраструктуры, общий процесс остается одинаковым: нужно «упаковать» код в CI/CD-конвейер и отправить на сервер. В тексте рассмотрим, как это происходит на примере простого приложения to-do list на React. Подробности под катом!
Читать дальше →

React Native полностью переделан

Время на прочтение3 мин
Количество просмотров14K

После 6 лет разработки команда React Native представила полностью переписанную архитектуру фреймворка (0.76) – самое значительное обновление с момента создания React Native. Это результат масштабной работы над улучшением производительности, стабильности и возможностей платформы.

Читать дальше →

Ближайшие события

27 марта
Deckhouse Conf 2025
Москва
25 – 26 апреля
IT-конференция Merge Tatarstan 2025
Казань

Front-end глазами back-end разработчика

Уровень сложностиПростой
Время на прочтение4 мин
Количество просмотров3.2K

Всем привет! После учебы попал на ферросплавный завод в 2005 году, сначала "киповцем" в цех КИПиА, а позже меня перевели в службу АСУТП. Там относительная свобода в сравнении с цехом АСУП, потому что у них там были разные корпоративные стандарты безопасности, Active Directory и другие ограничения на разработку. В нашем же цехе, хоть и была проблема с Интернет, все сервера были на тот момент ограничены внутренней сетью, но на тот момент дома почти у всех был ADSL и дома можно было искать информацию, а потом на работе ее использовать.

В итоге практика написания скриптов на VBScriptSCADA Cimplicity был на тот момент только этот язык для написания сценариев, как и во многих других пакетах), с использованием Win32API, проект на Delphi с использованием Mutex и Semaphore, первый проект и вроде даже не один на Visual C++ MFC, поддержка и отладка проектов на Borland C++ и С++ Builder, с нуля созданный портал на PHP (спасибо коллеге Антону - это была его идея, чтобы не дописывать проект на умирающем уже на тот момент Delphi, хотя он вроде функционирует до сих пор), ну и самое главное, что появился опыт работы с MS SQL (почему-то нам его даже в университете не преподавали).

На следующем месте работы было более глубокое погружение в MS SQL, так как вся бизнес-логика была реализована на нём, и знакомство с Visual C# и .NET Framework, так как на нем был клиент написан на WinForms. Так же не первый опыт работы с OPC.

Но проект заканчивался, а новых пока там не планировалось, поэтому в следующей организации было знакомство с ASP.NET WebForms и, помимо MS SQL, уже и с Oracle DB. Всё было на примитивном уровне, опять сбор данных, хранение, отображение. Там было реализовано своеобразное хранение и отображение данных по сменам рабочих с помощью рекурсий на T-SQL.

Читать далее

Family Frontend Meetup #3

Время на прочтение3 мин
Количество просмотров732

Автогенерация функций выборки данных с помощью Orval, переработка логики оптимизации изображений с заменой нашего компонента Picture, обновления Next.js 15 и небольшой бонус – наш топ библиотек, которые упростят поддержку и разработку вашего проекта, а также сэкономят время на его инициализацию.

Читать далее

Как Vercel микрофронтенды внедрила

Уровень сложностиСредний
Время на прочтение6 мин
Количество просмотров3.1K

Узнайте, как Vercel сократил время сборки и повысил скорость разработки, сохранив при этом удобство работы с микрофронтендами.

Основной веб-сайт Vercel, некогда являвшийся единым крупным сайтом Next.js приложение, обслуживающее как посетителей нашего веб-сайта, так и панель управления для входа в систему. Но по мере того, как компания Vercel росла, в этой системе появились возможности для совершенствования. Время сборки росло, управление зависимостями становилось все более сложным, а рабочие процессы требовали оптимизации. Незначительные изменения привели к полномасштабным сборкам, повлияв на изолированную разработку и конвейеры CI.

Читать далее

Циклические импорты на фронтенде

Уровень сложностиСредний
Время на прочтение5 мин
Количество просмотров3.2K

Хочу рассказать о том, какие проблемы при разработке создают рекурсивные зависимости на фронте.

С данной проблемой каждый второй проект живет и разработчики не знают, что у них есть циклические зависимости.

Рассмотрим способы разрешения циклических зависимостей и их обнаружение.

Читать далее

Next.js v15 — Что Нового (под Капотом)

Время на прочтение12 мин
Количество просмотров19K

Привет! Это ставшая уже регулярной рубрика о релизах next.js (читайте релизы по v11, v12, v13, v14). Каждый релиз - набор нового, интересного и спорного. Новая версия не станет исключением. Но всё же новая версия интересна не столько новым функционалом, сколько изменением приоритетов и организации в next.js. И да, как вы уже догадались из названия, в значительной части релиз ценен проработкой ошибок и доработками.

В данной статье я не буду останавливаться на том что такое App Router или серверные компоненты - про это подробно расписано в предыдущих статьях. Только про новую версию и только про новые изменения.

Примечание: в статье отражены самые интересные изменения с призмы автора. Здесь разобраны коммиты и PR в ядро next.js, сообщения разработчиков и задачи, поэтому статья отражает больше изменений, чем представлено официально.

Читать далее

Как сделать React Server Components в Electron с помощью Next.js и без открытых портов

Уровень сложностиСредний
Время на прочтение8 мин
Количество просмотров969

Статья про то как заставить работать React Server Components внутри Electron приложения с помощью Next.js при этом не запуская локальный сервер и не открывая порты. С возможностью публикации стандартными инструментами. А также исследование зачем все это надо.

Читать далее

Как ускорить создание компонентов с помощью Plop-генератора или автоматизация рутинных задач в React

Уровень сложностиСредний
Время на прочтение7 мин
Количество просмотров2.4K

Что имеем?

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

Однако, несмотря на наличие единой системы, мы сталкивались с рядом проблем — делюсь тем, как мы их решали...

Ну ка расскажи