Обновить
128K+

ReactJS *

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

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

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

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

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

Читать далее

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

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

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

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

Читать далее

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

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

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

Читать далее

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

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

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

Читать далее

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

Время на прочтение5 мин
Охват и читатели27K

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

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

Время на прочтение3 мин
Охват и читатели27K

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

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

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

Уровень сложностиПростой
Время на прочтение4 мин
Охват и читатели6.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 мин
Охват и читатели1.4K

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

Читать далее

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

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

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

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

Читать далее

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

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

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

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

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

Читать далее

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

Время на прочтение12 мин
Охват и читатели28K

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

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

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

Читать далее

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

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

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

Читать далее

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

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

Что имеем?

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

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

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

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

Создание простой CRM на Next.js и Prisma для B2B

Уровень сложностиСредний
Время на прочтение3 мин
Охват и читатели10K

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

На рынке представлено не так много распространённых CRM-систем для управления продажами, и в большинстве компаний мне приходилось работать именно с ними. В некоторых случаях я сталкивался с кастомными решениями, которые значительно упрощали жизнь пользователю благодаря удобному интерфейсу и гибкости. Поэтому на собеседованиях я часто задавал вопрос о CRM-системе компании. Разочарование наступало, когда выяснялось, что в компании используют "шаблонные" решения, которые не всегда соответствовали требованиям пользователей.

Ещё до того, как я начал заниматься разработкой, мне пришла идея поучаствовать в создании собственной CRM-системы и глубже погрузиться в процесс её разработки. Спустя несколько лет я начал заниматься веб-разработкой, и в какой-то момент понял, что даже небольшому бизнесу, где я работал, нужна CRM. Я пробовал использовать таблицы в Google Docs, тестировал триальные версии популярных CRM, но они были перегружены ненужной информацией и казались неудобными. Так что я решил создать что-то простое, что будет удобно мне и, возможно, другим.

В своей CRM я использую Next.js. Эта система не претендует на то, чтобы обслуживать тысячи пользователей, но она точно может решить задачи 1-2 небольших отделов продаж. У меня есть репозиторий на GitHub, и если кому-то это решение покажется интересным, его можно взять и доработать под свои задачи. В этой статье я постараюсь кратко описать текущий функционал, с какими трудностями я столкнулся и что удалось внедрить в качестве новых гипотез.

Читать далее

Тестирование redux store middleware

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

Бывает ситуация, когда нам необходимо протестировать middleware, либо асинхронное событие, которые возникает в хранилище redux.

Цель этой статьи в том, чтобы показать как тестировать action в redux store.

Есть готовое решение, redux-mock-store, но оно не позволяет оперировать реальным хранилищем, через него мы можем только проверить был вызван тот или иной action, а данные которые сохраняем мы в store, не можем проверить.

Читать далее

Руководство по Convex. Часть 1

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


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


В этой серии статей я рассказываю о Convex — новом открытом и бесплатном решении BaaS (Backend as a Service — бэкенд как услуга), которое выглядит очень многообещающе и быстро набирает популярность среди разработчиков.


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


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

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

Введение в AI Selfie Background Remover с использованием TensorFlow.js для React-приложений

Уровень сложностиСредний
Время на прочтение4 мин
Охват и читатели4.1K

Я создал "React Selfie AI Background Remover" — компонент React, который использует TensorFlow.js для удаления фона с изображений людей прямо в браузере.

✨ Основные особенности:

🤖 Использует MediaPipe Selfie Segmentation для точной сегментации объектов.

⚙️ Легко интегрируется в любое React-приложение.

🖼️ Доступно live demo для тестирования.

Вы можете найти компонент здесь:

📦 NPM

💻 GitHub

Читать далее

Что нас ждет в Next.js 15: обзор заявленных новинок

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

Привет, на связи Майя из Spectr. Сегодня я поделюсь обзором последней, пятнадцатой версии Next.js. В статье мы разберем интересные улучшения: React Compiler, улучшенные сообщения об ошибках гидрации в ‘use-client’, исправление поведения кэширования, Partial Prerendering (PPR), API next/after, обновленный дизайн create-next-app и оптимизацию бандлинга внешних пакетов.

Узнать о функциях Next.js 15

Vike — современный SSR-фреймворк

Уровень сложностиПростой
Время на прочтение8 мин
Охват и читатели13K

Всем привет. Я являюсь ведущим frontend-разработчиком компании 21Yard. Мы разрабатываем сервис для поиска строительных подрядчиков. На проект я пришел желторотым масленком, который мало смыслил в seo-продвижении продукта, но жизнь внесла свои коррективы, и сейчас я хочу рассказать, как я vike покорял.

Придя на проект, я с энтузиазмом взялся за дело. На момент старта моей работы у нас уже существовал интернет-портал, написанный на php. К сожалению, он был написан на устаревшем фреймворке, поэтому было принято решение переписать его с нуля на чем-то современном - выбор пал на React. Однако, параллельно кодингу шел и маркетинг. К работе был привлечен seo-специалист, по указаниям которого мне нужно было вносить микро-правки в старый портал. Тогда я узнал, что такое seo, и что для него нужен ssr...

Читать далее

Многопоточность в NextJS: как запустить и нужно ли?

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

На определённом этапе своей карьеры я задался вопросом: может ли Next.js работать в многопоточном режиме? Оказалось, что нет. Это побудило меня разобраться, как можно организовать многопоточную работу Next.js и насколько это оправдано для сайтов с высокой нагрузкой.

Читать далее