React, я люблю тебя, но ты сводишь меня с ума

Ты у меня не первый. До тебя у меня были длительные отношения с jQuery, Backbone и Angular. Я знал, чего следует ожидать от фреймворка: лучший пользовательский интерфейс, продуктивность и опыт разработки, но также фрустрация от необходимости изменения способа написания кода в угоду парадигме фреймворка.

Когда я тебя встретил, я находился в длительных отношениях с Angular. Я был измотан watch и digest, не говоря уже о scope. Я искал то, что не заставляло бы меня чувствовать себя несчастным.

Rus https://habr.com/ru/companies/timeweb/articles/693072/

Eng https://marmelab.com/blog/2022/09/20/react-i-love-you.html

✍️ @React_lib

Будущее рендеринга в React

Популярность React как библиотеки для создания пользовательского интерфейса за последние несколько лет только росла и довольно быстро. На момент написания этой статьи она имеет более 14 миллионов еженедельных загрузок с npm, что, как я знаю, не является корректным показателем популярности библиотеки, но одно только расширение React Devtools chrome имеет более 3 миллионов еженедельных активных пользователей. Тем не менее, шаблоны рендеринга в React практически не менялись до появления React 18.

https://prateeksurana.me/blog/future-of-rendering-in-react/

✍️ @React_lib

useSignal() — будущее веб-фреймворков

Signal - это способ хранения состояния вашего приложения, аналогичный useState() в React. Но есть несколько ключевых отличий, которые дают Signals преимущество.

https://www.builder.io/blog/usesignal-is-the-future-of-web-frameworks

✍️ @React_lib

Как создавать собственные пользовательские React Hooks

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

https://blog.logrocket.com/create-your-own-custom-react-hooks/

✍️ @React_lib

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

В наши дни подход local-first к созданию веб-приложений набирает все большую популярность. Большинство таких баз данных предоставляют асинхронные API, и это существенно влияет на работу наших приложений React.

https://evilmartians.com/chronicles/how-to-avoid-tricky-async-state-manager-pitfalls-react

✍️ @React_lib

Реализация слайдера изображений и текста на React.js с вариантами оптимизации

В данной статье мы разберем задание, которое может встретиться в рамках собеседования на должность фронтенд-разработчика, а именно реализацию слайдера изображений.

https://betterprogramming.pub/implementing-image-and-text-slider-with-react-js-and-optimizations-7a16af998548

✍️ @React_lib

Понимание серверных компонентов в React 18 и Next.js 13

С выходом Next.js 13 у них появился новый каталог /app, который имеет более новые подходы к рендерингу, выборке данных, а также использует новейшие компоненты React Server Components.

https://programmingwithmosh.com/react/understanding-server-components-in-react-18-and-next-js-13/

✍️ @React_lib

Читаем исходный код – Chakra UI

Я провел более года в качестве главного инженера в одной из команд News UK по разработке платформ, где мы создавали библиотеки и инструменты для других инженеров компании. Одним из таких инструментов была фантастическая система проектирования.

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

https://alexkondov.com/reading-code-chakra-ui/

✍️ @React_lib

A cure for React useState hell?

https://dev.to/builderio/a-cure-for-react-usestate-hell-1ldi

✍️ @React_lib

5 небольших и скрытых библиотек React, которые вы уже должны использовать

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

https://javascript.plainenglish.io/5-small-and-hidden-react-libraries-you-should-already-be-using-49c8725c492f

✍️ @React_lib

Добавьте движение в свои приложения с помощью одной строки кода

AutoAnimate - это анимационная утилита с нулевой конфигурацией, которая добавляет плавные переходы в ваше веб-приложение. Вы можете использовать ее с React, Solid, Vue, Svelte или любым другим приложением JavaScript.

https://auto-animate.formkit.com/

✍️ @React_lib

Я слишком остро реагирую? Или React слишком остро реагирует?

Когда я только начинал заниматься веб-разработкой, это было в основном с Python/Django. Все рендерилось на стороне сервера, и я ни разу не задумывался о "производительности рендеринга". Спустя 10 лет, когда компьютеры стали по крайней мере в два раза быстрее, производительность рендеринга стала более важной проблемой, чем когда-либо. Одностраничные приложения (SPA) и фронтенд-библиотеки, такие как React, поощряют и позволяют создавать высокодинамичные веб-страницы. К сожалению, по моему опыту, рекомендуемый по умолчанию способ написания кода React на самом деле не очень хорошо поддерживает высокодинамичные страницы.

В этой заметке я рассмотрю проблемы, возникающие со стандартным кодом React, рекомендуемые варианты улучшения производительности React и, наконец, приведу примеры на ванильном JS.

https://devtails.xyz/@adam/am-i-overreacting-or-is-react-over-reacting

✍️ @React_lib

ReactJS for Jobseekers: The Only Guide You Need to Learn React and Crack Interviews
Автор: Qaifi Khan (2023)

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

✍️ @React_lib

React: разработка реального приложения с помощью React Query

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

Rus https://habr.com/ru/companies/timeweb/articles/702876/

Eng https://www.smashingmagazine.com/2022/01/building-real-app-react-query/

✍️ @React_lib

Как использовать инструменты React Dev - с примерами кода и видео

Когда вы работаете над проектом React, одним из самых простых способов отладки кода является использование React Dev Tools.
React Dev Tools - это расширение, созданное командой React. Оно позволяет разработчикам отлаживать свой код внутри своих инструментов разработчика.
После добавления расширения вы получите 2 новые вкладки в DevTools под названием Components и Profiler соответственно.

https://www.freecodecamp.org/news/how-to-use-react-dev-tools/

✍️ @React_lib

Practical Enterprise React: Become an Effective React Developer in Your Team
Автор: Devlin Basilan Duldulao (2021)

Научитесь писать реальные корпоративные приложения, используя основы React и самые популярные библиотеки React.
Книга включает такие популярные библиотеки, как React Router v6 для навигации по маршрутам, Redux с Saga и Thunk для управления состояниями и Formik с Yup для валидации форм и ввода. Вы также будете работать с Material UI 5 (следующая основная версия самой популярной библиотеки компонентов пользовательского интерфейса в React), Axios в качестве клиентской библиотеки HTTP, JWT auth для аутентификации клиентских приложений и TypeScript. Наконец, вы научитесь развертывать приложение на Netlify и контейнеризировать приложение React, чтобы отправить его в виде отдельного экземпляра контейнера или в кластере Kubernetes.

✍️ @React_lib

Создавайте свои CRUD-приложения на основе React без ограничений

refine - это фреймворк на основе React для быстрой ✨ разработки веб-приложений. Он устраняет повторяющиеся задачи, требуемые операциями CRUD, и предоставляет стандартные решения для критически важных частей, таких как аутентификация, контроль доступа, маршрутизация, сеть, управление состоянием и i18n.

https://github.com/refinedev/refine

✍️ @React_lib

Красивые и поражающие воображение эффекты с WebGL Render Targets

Поскольку я постоянно работаю над оттачиванием навыков создания красивых и интерактивных 3D-проектов в Интернете, я постоянно знакомлюсь с новыми инструментами и техниками, от разнообразных сцен React Three Fiber до великолепных шейдерных материалов. Однако есть один инструмент Three.js, который часто является общим знаменателем для всех этих увлекательных проектов, с которым я постоянно сталкиваюсь: Render Targets.

https://blog.maximeheckel.com/posts/beautiful-and-mind-bending-effects-with-webgl-render-targets/

✍️ @React_lib

React + TypeScript: необходимый минимум

Многие React-разработчики спрашивают себя: надо ли мне учить TypeScript? Еще как надо!

Преимущества изучения TS могут быть сведены к следующему:

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

Эта статья представляет собой минимальное введение по использованию TS в React.

Rus https://habr.com/ru/companies/timeweb/articles/707744/

Eng https://profy.dev/article/react-typescript

✍️ @React_lib

Что такое состояние

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

https://habr.com/ru/companies/ruvds/articles/706086/

✍️ @React_lib

5 советов по оптимизации производительности вашего приложения React

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

https://dzone.com/articles/5-tips-for-optimizing-your-react-apps-performance

✍️ @React_lib