Thinking in React isn’t enough

A quick read on how Ohans cleaned up some complicated React code at work using the Compound Components pattern

react-hook-use-cancelable-thunk-reducer

Custom implementation of react hook useReducer that allows to dispatch thunk actions and will cancel all dispatched actions if the component is unmounted

React Tiger Transition

Easy page transitions for react-router. Built with react-transition-group. Use the provided transitions or create your own

Hacker UI | a design system for developers

Hacker UI is an open source React design system, currently in early alpha stages. If you want to be involved in building a brandless, simple, responsive design system, the team is looking for contributors

When to use React context or Redux / Redux Toolkit

This post draws from the Redux Docs and various other articles and talks to give a quick, condensed answer about this specific topic.

Writing unit tests with React, Typenoscript, and react-testing-library

In this article, Wojciech Matuszewski shares a pattern he came up with for writing tests which avoids unnecessary repetition and makes it clear how Typenoscript can be more of tool and less of a burden

Persisting React State in localStorage

In this tutorial, Josh Comeau walks though how to create a custom React hook (useStickyState) to abstract away the "stickiness" of a React app, so we get it for free whenever we need it.

Webcodesk

Webcodesk is a front-end visual development tool for React apps

react-query ⚛️

Hooks library for fetching, caching and updating asynchronous data in React

Event Bubbling and Event Catching in JavaScript and React – A Beginner’s Guide

Mariya Diminsky created this beginner-friendly tutorials to help you understand event bubbling and event catching like a pro. You’ll learn about event propagation and how it works in JavaScript and React in a clear and comprehensible way.

Learning React State Manager Jotai With 7GUIS Tasks

In this article, Daishi Kato re-created the 7GUIs task challenge with jotai, a new primitive and flexible state management solution for React. The tasks are organized from basic tasks to advanced tasks, and you will get to see how they are implemented firsthand.

Virtualizing Large Data Lists with react-window

In this tutorial, Ikeh Akinyemi covers how to render large amount of data, either from an external API or a dummy data file within your application. He’ll use a React library, react-window, to render this large amount of data, then show you how to build a simple e-commerce app displaying a list of products.

Nice Modal

This is a small, zero dependency utility to manage modals in a natural way for React. It uses context to persist state of modals globally so that you can show/hide a modal easily either by the modal component or id. Created by the developers at eBay

Всем привет!
Сегодня хотел поделиться полезной статьей о работе с длинным и неожиданным контентом в CSS.

Когда мы пишем CSS, часто забываем учесть крайние случаи, что может привести к поломке дизайна. В статье рассматриваются реальные примеры UI-ошибок и их решения.

Например, как правильно добавить иконку к кнопке, чтобы текст не перекрывал её. Или как избежать проблем с длинными именами и ссылками в статье. Автор также рассказывает про использование flexbox для автоматической адаптации контента.

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

https://css-tricks.com/handling-long-unexpected-content-css/

Новая статья о методах итераторов в JavaScript

Недавно в V8 добавили новые методы для работы с итераторами, которые значительно упрощают их использование. Теперь любой объект с прототипом Iterator.prototype поддерживает эти методы, включая массивы.

Вот несколько примеров:
- .map() позволяет трансформировать значения итератора.
- .filter() отбирает элементы по заданному условию.
- .take() и .drop() ограничивают количество возвращаемых значений.
- .flatMap() превращает вложенные итераторы в плоский список.
- .reduce() помогает свести все значения к одному результату.

Эти методы делают код более лаконичным и понятным. Полный список методов и примеры их использования можно найти в статье на блоге V8. Стоит отметить, что поддержка этих методов есть в Chrome и Babel, но отсутствует в Firefox и Safari.

Читайте подробнее на https://v8.dev/features/iterator-helpers.

📚 Окунитесь в мир продвинутого TypeScript с помощью курса "Type-Level TypeScript"! В этом комплексном руководстве вы получите навыки от среднего до экспертного уровня, изучив эволюцию системы типов TypeScript в мощный язык программирования.

🔍 Узнайте, как использовать такие продвинутые функции, как Generics, Conditional Types, Mapped Types и Recursive Types, для создания надежного, безопасного для типов кода. Научитесь создавать языки, ориентированные на конкретную область, оптимизировать производительность компиляции и отлаживать сложные проблемы с типами. Курс проводит увлекательные параллели между знакомыми концепциями программирования и их эквивалентами на уровне типов, предлагая новый взгляд на разработку TypeScript.

💡 Если вы опытный разработчик или хотите усовершенствовать свои навыки работы с TypeScript, этот курс просто необходим для прочтения. Получите знания, которые изменят ваш подход к документированию кода, обнаружению ошибок и продуктивности разработчиков. Освоив эти продвинутые концепции, вы сможете решать широкий спектр задач и создавать более эффективные и удобные для сопровождения TypeScript-проекты. Не упустите возможность повысить свой уровень владения TypeScript!

#TypeScript #WebDevelopment #CodingSkills

https://type-level-typenoscript.com/

📊 Разработчики TypeScript, внимание! Есть инструмент "Are The Types Wrong?", который поможет вам проанализировать типы в пакетах npm. Этот мощный помощник проверяет корректность типов и работает как с самими пакетами, так и с выводом команды npm pack. Теперь вы сможете быстро выявлять несоответствия типов и повышать качество своего кода!

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

💡 Если вы хотите улучшить надежность своего кода, сэкономить время на отладке и быть уверенным в типах используемых пакетов - обязательно ознакомьтесь с полной статьей об этом инструменте. Узнайте, как "Are The Types Wrong?" может стать вашим незаменимым помощником в ежедневной работе с TypeScript и npm. Прокачайте свои навыки работы с типами и сделайте свой код еще более надежным! 🚀

https://arethetypeswrong.github.io

React Server Components (RSC) - это революционный подход к рендерингу React-приложений, который обещает решить ряд проблем традиционного Server-Side Rendering (SSR). В этой статье подробно рассматривается история развития SSR в React, его ограничения и то, как RSC преодолевают эти барьеры, предлагая улучшенную производительность и более гибкую архитектуру.

Автор глубоко анализирует ключевые проблемы SSR, такие как "Double Data Problem" и "Uncanny Valley", и показывает, как RSC адресуют эти вызовы. Особенно интересно описание того, как RSC позволяют выполнять серверные операции прямо внутри компонентов, что открывает новые возможности для оптимизации и улучшения пользовательского опыта. Статья также затрагивает текущее состояние RSC в экосистеме React и планы по их дальнейшему развитию.

Если вы работаете с React или интересуетесь современными подходами к разработке веб-приложений, эта статья - обязательное чтение. Она не только предоставляет глубокое понимание RSC, но и дает представление о будущем направлении развития React. Автор обещает серию из 15 глав, которые детально рассмотрят различные аспекты RSC, что делает эту статью отличной отправной точкой для изучения этой перспективной технологии.

#React #ServerComponents #WebDevelopment #FrontendOptimization #JavaScript

https://jessedit.tech/articles/react-server-components/1-background/