Как использовать MVVM в React с помощью хуков и TypeScript

Программные приложения часто начинаются с простого и быстро разрастаются. Как бы ни старались его уменьшить, код так или иначе всегда разрастается до полноценного приложения. Во многих языках мы следуем таким структурным паттернам, как MVVM и Clean Architecture.

В этой статье мы рассмотрим, как можно спроектировать React-приложение в соответствии с архитектурным паттерном MVVM, чтобы создать масштабируемое и поддерживаемое React-приложение. Мы будем использовать TypeScript и функциональные компоненты React, а также напишем пользовательские хуки для ViewModel и Model. Этот же код, конечно, будет работать и в React Native с небольшими изменениями.

Если при чтении статьи у вас возникнут вопросы, в конце статьи вы найдете обширный FAQ.

https://dev.to/perssondennis/how-to-use-mvvm-in-react-using-hooks-and-typescript-3o4m

✍️ @React_lib

Структура приложения React.js - лучшие практики

В этой статье рассматриваются лучшие практики структурирования приложений React.js с упором на три основных подхода: Группировка по признакам, Группировка по типу файлов и гибридный подход. В руководстве также рассказывается о том, как интегрировать в структуру приложения современные возможности React, такие как Redux, Hooks, Stateful Container Components, Context API, Testing libraries и Styled-компоненты.

https://www.dotnetcurry.com/reactjs/folder-structure-for-reactjs

✍️ @React_lib

Mastering Zustand: Простая и эффективная библиотека управления состояниями для React

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

https://www.freecodecamp.org/news/zustand-course-react-state-management/

✍️ @React_lib

Как развернуть приложение React с помощью PM2 и Serve

Да, вы изучили React и теперь можете разрабатывать полноценные фронтенд-приложения.

С помощью create-react-app можно настроить и запустить проект React, включая транспиляцию кода, базовую линтинг-систему, тестирование и систему сборки.

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

https://compile7.org/decompile/react-app-deployment/

✍️ @React_lib

Learning React
Modern Patterns for Developing React Apps 2nd Edition
Alex Banks, Eve Porcello (2020)

Хотите создавать эффективные приложения с помощью React? Тогда эта книга написана для вас. Познакомьтесь c лучшими практиками и шаблонами создания современного кода.

В этой книге вы:
• Разберетесь с ключевыми аспектами функционального программирования на JavaScript.
• Узнаете, как устроена работа React в браузере.
• Создадите слои представления приложения с помощью компонентов React.
• Научитесь управлять данными и тратить меньше времени на отладку.
• Внедрите в проект хуки React для управления состояниями и перехвата данных.
• Используете маршрутизатор для полноценной работы с одностраничными приложениями.
• Научитесь структурировать приложения React с учетом особенности работы сервера.

✍️ @React_lib

React: полное руководство по повторному рендерингу

https://www.developerway.com/posts/react-re-renders-guide

✍️ @React_lib

Интерактивное руководство по рендерингу в React

В чистом виде React - это библиотека для построения пользовательских интерфейсов. Она настолько проста, что всю ментальную модель можно представить в виде формулы v = f(s) - где ваше представление является просто функцией вашего состояния.

Хотя это уравнение дает нам простую мысленную модель работы React, есть один аспект уравнения, который до сих пор, после стольких лет, кажется, смущает людей. Когда и как именно вызывается f? Или, говоря иначе, когда и как React обновляет представление?

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

https://ui.dev/why-react-renders

✍️ @React_lib

Tanstack: Как добавить таблицы в приложение React

Таблица Tanstack - это рабочая лошадка, созданная для фильтрации, сортировки, группировки, агрегации, пагинации, материализации и отображения массивных наборов данных. Он предлагает множество улучшенных возможностей, таких как производительность, поддержка рендеринга на стороне сервера (SSR), новые крючки и более современный, гибкий API. Безголовый дизайн не поставляется с компонентами и стилями разметки, что дает нам полный контроль над разметкой и стилями. В этой статье мы рассмотрим, как начать добавлять и стилизовать наши ReactJS-таблицы с помощью Tanstack Table. Итак, давайте погрузимся и посмотрим, что предлагает Tanstack Table!

https://blog.openreplay.com/tanstack--how-to-add-tables-to-your-react-app/

✍️ @React_lib

useSyncExternalStore - The underrated React API

https://thisweekinreact.com/articles/useSyncExternalStore-the-underrated-react-api

✍️ @React_lib

Как я уменьшил размер образа Docker с 1,43 ГБ до 22,4 МБ

Если вы занимаетесь веб-разработкой, то, вероятно, уже знаете об идее контейнеризации и о том, как это здорово и все такое.

Но при работе с Docker размер образа вызывает серьезные опасения. Зачастую он превышает 1,43 ГБ только для шаблонного проекта, который мы получаем из create-react-app.

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

Трюки будут показаны для ReactJS, но они применимы к любому NodeJS-приложению.

https://dev.to/mohammadfaisal/how-i-reduced-docker-image-size-from-143-gb-to-224-mb-53nc

✍️ @React_lib

React: полное руководство по повторному рендерингу

Что такое ререндеринг?
Существует 2 основные стадии, которым следует уделять пристальное внимание, когда речь заходит о производительности в React:

первоначальный рендеринг (initial rendering) — происходит, когда компонент впервые появляется на экране;
ререндеринг — второй и последующие рендеринги компонента.

Ререндеринг происходит, когда React необходимо обновить приложение некоторыми данными. Обычно, это является результатом действий пользователя, получения ответа на асинхронный запрос или публикацию при подписке (паттерн "pub/sub" — публикация/подписка или издатель/подписчик) на определенные данные.

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

Eng https://www.developerway.com/posts/react-re-renders-guide

✍️ @React_lib

React: разрабатываем кастомный useEffect

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

https://habr.com/ru/companies/timeweb/articles/688982/

✍️ @React_lib

React Application Architecture for Production: Learn best practices and expert tips to deliver enterprise-ready React web apps
Автор: Alan Alickovic (2023)

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

✍️ @React_lib

Тайна React Element и повторные рендеры

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

// wrapping MovingComponent in memo to prevent it from re-rendering
const MovingComponentMemo = React.memo(MovingComponent);

const SomeOutsideComponent = () => {
// trigger re-renders here with state
const [state, setState] = useState();

return (
<MovingComponentMemo>
<!-- ChildComponent will re-render when SomeOutsideComponent re-renders -->
<ChildComponent />
</MovingComponentMemo>
)
}

https://www.developerway.com/posts/react-elements-children-parents

✍️ @React_lib

Оптимизация производительности React

Оптимизация производительности приложений крайне важна для разработчиков, заботящихся о сохранении приятного пользовательского опыта, чтобы удержать пользователей. Согласно исследованиям Akamai, разработчики должны создавать приложения, оптимизированные по скорости: каждая дополнительная секунда времени загрузки может привести к снижению конверсии на 7%. В этой статье мы рассмотрим методы и объясним, почему эти процессы оптимизации важны и когда их следует использовать.

import { List } from 'immutable';
Class MyComponent extends React.Component {
state = {
items: List([1, 2, 3])
}

handleAddItem = () => {

this.setState(prevState => ({
items: prevState.items.push(4)
}));
}

render() {
return (
<div>
<button onClick={this.handleAddItem}>Add Item</button>
<ul>
{this.state.items.map(item => (
<li key={item}>{item}</li>
))}
</ul>
</div>
);
}
}

https://blog.openreplay.com/optimizing-reacts-performance/

✍️ @React_lib

Как я построил систему продажи билетов на мероприятия с помощью Next.js и Firebase

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

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

https://dev.to/arshadayvid/how-i-built-an-event-ticketing-system-with-nextjs-and-firebase-50l2

✍️ @React_lib

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

Компоненты React Server в последнее время вызывают большой интерес и оживление. Недавно они были приняты в качестве опции по умолчанию в Next.js 13, и теперь все больше и больше разработчиков используют их.

React Server Components органично сочетают рендеринг на стороне сервера с интерактивностью JavaScript на стороне клиента. В этом учебном пособии вы узнаете о том, что такое серверные компоненты React, какие проблемы они решают и какие мощные возможности предоставляют.

https://www.freecodecamp.org/news/react-server-components-for-beginners/

✍️ @React_lib

Создание анимированного тултипа с помощью React и Framer Motion

Tooltip кажется очень простым компонентом. То есть, вы просто показываете симпатичный плавающий элемент с подсказкой или сообщением о помощи. Никакой сложной стилизации или взаимодействия с пользователем, верно? Ну, отчасти. Приходится думать о нескольких крайних случаях. Как расположить всплывающую подсказку по центру (или выровнять ее по краю элемента ссылки)? Что делать, если не хватает места? Элемент ссылки изменил размер или положение? Как его анимировать? Как анимировать при размонтировании?

https://sinja.io/blog/animated-tooltip-with-react-framer-motion

✍️ @React_lib

Использование шаблонов проектирования группы GoF в React

В этой статье поговорим о том, как написать в React многократно используемый код, используя три шаблона проектирования группы Gang-of-Four.

Rus https://habr.com/ru/company/rshb/blog/680770/

Eng https://blog.bitsrc.io/using-gof-design-patterns-with-react-c334f3ea3147

✍️ @React_lib

React with TypeScript. Бесплатный курс от Matt Pocock.

Возможности TypeScript и опыт разработчиков отлично сочетаются с React, но начало работы может оказаться запутанным.

Как лучше всего типизировать реквизиты компонентов? Что это за странные ошибки useRef?

Именно для этого и предназначен данный учебник по React с TypeScript!

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

https://www.totaltypescript.com/tutorials/react-with-typescript

✍️ @React_lib