ReactJS *
JavaScript-библиотека для создания интерфейсов
Новости
Fiber изнутри: погружение в новый алгоритм согласования React
Погрузитесь глубоко в новую архитектуру React под названием Fiber и узнайте о двух основных фазах нового алгоритма согласования (reconciliation). Мы подробно рассмотрим, как React обновляет состояние и пропсы и обрабатывает дочерние элементы.
CSS :has() селектор
Вы когда-нибудь задумывались о селекторе CSS, где вы проверяете, существует ли конкретный элемент внутри родителя? Например, если у компонента карты есть миниатюра, нам нужно добавить к нему display: flex. Это было невозможно в CSS, но теперь у нас будет новый селектор CSS :has, который поможет нам выбрать родителя определенного элемента и многое другое.
В этой статье я объясню проблему, которую решает :has, как он работает, где и как мы можем его использовать с некоторыми вариантами использования и примерами, и, самое главное, как мы можем использовать его уже сегодня.
Оптимизация производительности ssr-приложений
Кто бы что не говорил о метриках производительности, мол это все ерунда и никому кроме гугла не нужно. Но, во-первых, я так не считаю, а во вторых у нас есть заказчики, которым это важно
и они задачи по оптимизации производительности нам ставят, и, даже если по Вашему высокопрофессиональному мнению они заблуждаются, то делать их надо.
Не буду пересказывать рекламные лозунги про 500% пользователей покидают страницу после 100мс ожидания, увелечения конверсии на 20% при снижении LCP на 2мс… читайте сами. Скажу коротко: метрики производительности важны.
Movika приглашает на стажировку начинающих разработчиков для работы с интерактивными фильмами
Казанская IT-компания объявила набор стажёров, которым предстоит заниматься сборкой интерактивных фильмов. Работать нужно будет удалённо, так что рассматриваются кандидаты со всей России и других стран. Основное требование - знание одного из языков: Kotlin, Android SDK / Swift, iOS SDK, UIKit / JavaScript, React. Рассматривают студентов и выпускников IT-направлений, которые находятся в поисках интересного опыта.
Почитать подробности и подать заявку до 21 апреля можно здесь: hr.movika.com
Movika разрабатывает IT-решения для интерактивного видео: инструменты для его создания, просмотра, монетизации и экспорта. Цель компании - сделать так, чтобы формат интерактивного контента становился повсеместным и популярным.
Zustand — руководство по простому управлению состоянием
За последние несколько лет управление состоянием в React претерпело значительные изменения. Многие перешли с Flux на Redux и ищут еще более простые решения. Кроме того, появление React Hooks открыло новые возможности для управления состоянием.
Некоторые из новых библиотек управления состоянием, которые появились на горизонте, — это Recoil, Jotai, Radio Active state и Zustand.
В этой статье я расскажу о Zustand, который предоставляет легкий и простой способ управления состоянием в React.
Обработка ошибок на React с помощью Error Boundary
Привет, когда разрабатываем любой проект на React, мы, при выборе что рендерить, больше всего имеем дело с условными операторами или просто с передачей компонентов в определенный компонент, функцию или тому подобное. Но если происходит неожиданная ситуация и в React компоненте или функции случается ошибка, то, зачастую мы видим белый экран смерти. И после этого нам надо открыть инструменты разработчика, чтобы увидеть в консоли ошибку. А это точно не лучший способ обработки ошибок. Решением данной проблемы является Error Boundary.
Введение в Test-Driven Development на React для чайников
Привет, в данном посте вы найдете перевод статьи Mangabo Kolawole, в которой пойдет речь о Test-Driven Development. Мы создадим крайне простое приложение на React по всем правилам TDD.
Первое правило Test-Driven Development (TDD) – это написание тестов перед написанием кода. Это звучит более интуитивно, когда мы говорим о разработке для бэкенда, если честно, но работает ли данная схема для фронтенда, в частности для React, что же, посмотрим.
8 проектов с открытым исходным кодом
Представляю несколько проектов с исходным кодом начиная от инструментов для повышения производительности до B2B приложений. Решения можно использовать как замену платным.
Vue или React? Кратко о возможном росте технического долга и что лучше для начинающих
В статье ставится проблема избыточной сложности использования фреймворка React.js при богатстве его функций, описана возможная тенденция роста технического долга и зависимость между предоставляемыми средствами и величиной технического долга.
Что подразумевается под необоснованной сложностью проектов?
Для начала необходимо отметить, что «React» в отличии от «Vue» предоставляет огромную свободу разработчику. Благодаря этому разработчики любят данный фреймворк и всячески указывают, что приложения на «React» будут быстрее и производительнее чем на «Vue». Это несомненно так, «React» приложения можно сделать быстрым, производительным и легко тестируемым. К сожалению, достичь этого крайне тяжело и из-за этого многие компании могут иметь не высокопроизводительные приложения, а наоборот перегруженные излишним кодом и трудно тестируемые приложения. Это связанно с тем, что начинающим разработчикам сложно понять, как правильно писать приложения на «React».
«React» словно тренер по плаванию, бросает вас в воду и говорит плыви, ему не важно будете вы правильно дышать или махать руками, ему важно чтобы вы плыли. Проецируя данный пример на «React», мы получаем возможность писать очень плохой рабочий код. Особенно это распространено в командах, где нет специалиста по «React». Люди меняются и каждый раз поддерживать приложение все труднее и труднее, кто-то увидел пример в функциональном стиле:
Как поместить ваше Next.js/React приложение в Docker
Привет, в переводе данного руководства вы сможете узнать как поместить ваше приложение в докер.
Докер – это открытая платформа для разработки, запуска и управления контейнерами на сервере и в облаке.
Для примера приложения в этом руководстве мы будем использовать Next.js.
Универсальный компонент для графиков на React + D3.js
Распространенная проблема: создается какой-нибудь “универсальный” компонент, и вдруг в него нужно добавить что-то, что совершенно не влезает в текущую реализацию. Проще написать новый. Именно так и случилось, когда мы рисовали графики на React с использованием библиотеки D3.
В этой статье:
📌 Типичные технические и бизнес-требования к графикам
📌 Различные способы передачи данных в React компонентах. От решения "в лоб" до постепенного улучшения
Все хуки и концепты React в одной статье
В первую очередь React это JS библиотека, а не полноценный фреймворк, так что для создания полноценного веб приложения тебе нужно знать много дополнительных вещей, чтобы использовать их вместе с React. В этой статье пойдет речь о React концептах, хуках и, конечно 😊 , хороших практиках.
React 18. Что нового?
Эта статья — перевод основных изменений версии реакта 18.0.0.
Также я веду телеграм канал “Frontend по-флотски”, где рассказываю про интересные вещи из мира разработки интерфейсов.
Как создать и опубликовать библиотеку React компонентов
В этом руководстве вы пройдете через процесс создания и публикации собственной библиотеки компонентов React и размещения ее на Github.
От переводчика: в статье автор демонстрирует как создать библиотеку с React компонентом внутри, подготовить её к публикации с помощью Rollup, опубликовать через npm, настроить StoryBook, настроить тестирование с использованием React Testing Library и Jest. В оригинальной статье есть ссылка на видеоверсию текущего урока.
Как Discord реализовал навигацию клавиатурой по всему приложению
Мы делаем Discord доступным для каждого. В 2020 году мы многое сделали, чтобы значительно улучшить ассебилити в приложении. Остаётся ещё много работы, но мы уже сейчас можем рассказать об одном из наших последних проектов - Навигация по клавиатуре.
Далее по катом.
Резиновая верстка: универсальная сетка под все брейкпоинты, примеры и правила
«Почему бы не сделать одну сетку и работать с ней?», — подумал Senior Frontend Developer @manmo и внедрил идею стандартизированных резиновых эластичных сеток в департамент Frontend-разработки компании.
Рассказываем, как это решение облегчило работу верстальщиков и сэкономило время на проектах.
Материал предназначен для дизайнеров и frontend-разработчиков. Дизайнеры поймут, как минимизировать количество работы для верстальщиков, и тем самым получить их одобрение. Верстальщики научатся экономить свои ресурсы, силы и мозги, чтоб потратить их на более полезные задачи, чем расчёт непонятных сеток.
React 18
В нашем последнем посте мы поделились пошаговыми инструкциями по обновлению вашего приложения до React 18. В текущем посте мы дадим обзор того, что нового появилось в React 18, и что это означает для будущего.
Наша последняя основная версия включает в себя такие улучшения, как автоматическое пакетирование, новые API, такие как startTransition, и потоковый серверный рендеринг с поддержкой Suspense.
Многие функции в React 18 построены на основе нашего нового конкурентного рендеринга - закулисного изменения, которое открывает новые мощные возможности. Concurrent React является опциональным - он включается только при использовании concurrent функционала - но мы считаем, что он окажет большое влияние на то, как люди создают приложения.
Мы потратили годы на исследование и разработку поддержки конкурентности в React, и мы позаботились о том, чтобы обеспечить постепенное внедрение для существующих пользователей. Прошлым летом мы создали рабочую группу React 18, чтобы собрать отзывы экспертов сообщества и обеспечить плавное обновление для всей экосистемы React.
Тёмная тема в React с помощью Redux-toolkit
Эта статья является продолжением статьи Тёмная тема в React с использованием css переменных в scss. Если в прошлый раз мы добавляли темную тему через родной реактовский контекст, то сейчас мы попробуем сделать всё то же самое, но с помощью Redux
, точнее redux-toolkit
i18nano: локализация React приложений
Разрабатывая продукт, в какой-то момент задумываешься о поддержке языков. И, казалось бы, что могло пойти не так?
Вклад авторов
-
ru_vds 1161.2 -
jarvis394 375.0 -
MrCheater 199.4 -
varanio 191.0 -
aio350 175.4 -
EFS_programm 168.0 -
maxfarseer 163.8 -
comerc 161.2 -
kashey 155.0 -
PaulMaly 144.0