​Извлечение данных: три способа в React

Простой Fetch API, RTK Query из Redux Toolkit и React Query. Сравниваем и ищем лучший: https://proglib.io/w/9bad0bc7

#react

3 паттерна для создания React-компонентов

Статья (англ.): https://blog.openreplay.com/3-react-component-design-patterns-you-should-know-about

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

Презентационные компоненты и компоненты-контейнеры

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

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

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

Провайдер

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

Пример Провайдера в React - это контекст. Мы создаем объект контекста с нужными данными (например, цветовой темой приложения), оборачиваем все приложение в провайдер этого контекста и в нужных местах связываемся с ним с помощью хука useContext, или свойства contextType, или Context.Consumer.

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

Составные компоненты

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

Но у Menu и MenuItem есть общее состояние - активный элемент, оно должно храниться в компоненте Menu, значит, его нужно передать во все вложенные компоненты MenuItem. Об этом должен позаботиться сам компонент списка (например, с помощью React Context), тогда мы получим составной компонент (compound component).

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

#паттерны #ссылки

React 18, React Redux 8 и TypeScript: что вам нужно знать

https://blog.logrocket.com/react-18-redux-8-typescript/

Аутентификация с React Router 6

https://www.robinwieruch.de/react-router-authentication #react

Глубокое погружение в новую архитектуру React Native

https://medium.com/coox-tech/deep-dive-into-react-natives-new-architecture-fb67ae615ccd #react_native

Реализация связи WebSocket в Next.js

https://blog.logrocket.com/implementing-websocket-communication-next-js/

Gurufy облегчает изучение React.js разработки. 
C помощью крутых short гайдов вы можете изучить весь стек React.js быстро и легко.

Официальный сайт - https://gurufy.dev/

На данный момент доступны курсы по: Next.js, TypeScript, Jest, React Testing Library и другие.

Viro React

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

👉 @sWebDev

Tabulator — Библиотека для создания таблиц

Позволяет создавать интерактивные таблицы из различных данных, в формате HTML Table, Javascript Array или JSON.

Особенности / преимущества:
✔️Поддержка Safari, Chrome, Firefox, Opera, IE
✔️Оснащена полезными функциями (фильтры, сортировка, редактирование, загрузка данных)
✔️Возможность работы с React, Angular и Vue
✔️Не имеет зависимостей
✔️Стилизация с помощью классов CSS

Сайт: http://tabulator.info/
Гит: https://github.com/olifolkerd/tabulator

#библиотеки #полезно #js

👉 @frontend_mind

Заглянем под капот React Native и узнаем обо всех тонкостях его внутренней работы: выполнение кода JavaScript на устройствах Android/iOS и преобразование его в нативный, рендеринг UI, взаимодействие потоков в приложении, а также многое другое.

https://nuancesprog.ru/p/13634

@nuancesprog #статьи #React

Увлекательное обучающее руководство по работе с библиотекой lottie-react-native и созданию интересной анимации в приложении React Native.

https://nuancesprog.ru/p/13845

@nuancesprog #статьи #React

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

https://nuancesprog.ru/p/13874

@nuancesprog #статьи #React

Обучающее руководство для новичков по созданию бессерверных функций с помощью Netlify: настройка проекта, создание приложения и развертывание API.

https://nuancesprog.ru/p/14167/

@nuancesprog #Netlify #JavaScript

Redux, NextJS, Axios, Formik, Styled-components, React-query, Storybook - решение 16-ти задач разработки на React в сторонних пакетах NPM.

https://nuancesprog.ru/p/14231/

@nuancesprog #React

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

https://nuancesprog.ru/p/14380/

@nuancesprog #React

React: простое и эффективное решение для управления состоянием приложений


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

Статья

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

Читать статью

⚙️ Защищенные сетевые протоколы

▪️ Введение, TypeScript, Apollo, AntDesign, WebSocket - Смотреть
▪️ React-у жизненно необходим TypeScript - Смотреть
▪️ React + TypeScript за 30 минут - Смотреть
▪️ Redux + TypeScript - Смотреть
▪️ React + connect, TypeScript, mapStateToProps, mapDispatchToProps - Смотреть
▪️ React + Redux + TypeScript, типизация Actions и Thunk - Смотреть
▪️ React + Redux + TypeScript, типизация axios, api, enum, Promise - Смотреть
▪️ Redux-Form + TypeScript + Generic или как решать проблемы - Смотреть
▪️ React + TypeScript / Actions Creators, Generic, infer - Смотреть
▪️ React + TypeScript / Типизируем ВСЁ - Смотреть

🔝 @itlecture