Использование Effector в стеке React + TypeScript

Effector - стейт-менеджер с несколькими хранилищами для приложений Javascript (React/ React Native/Vue/Node.js)

#effector #state #react #typescript

К статье(rus)

8 удобных React хуков

— useTimeout - имплементация setTimeout
— usePrevious - для хранения свойств с прошлого состояния
— useClickInside - для определения клика внутри элемента
— useClickOutside - для клика вне компонента
— useFetch - как обертка над fetch
— useInterval - имплементация setInterval
— useComponentDidMount - для выполнения кода после mount компонента
— useComponentWillUnmount - для выполнения кода на unmount компонента

#react

К статье(eng)

​​5 приемов по разделению «бандла» и «ленивой» загрузке компонентов в React.

Разделение Javascript-кода на несколько файлов называется разделением «бандла» или сборки (bundle splitting). Это позволяет загружать только тот код, который который используется приложением в данный момент, другие части загружаются по необходимости (по запросу пользователя).

[ Статья ]

#js #react

React Native with Typescript – The Practical Guide (2022)

FREE For Limited Enrolls

Create an app in React Native - from basic knowledge to working app. Learn React Native components, Typescript, and more

https://coursevania.com/courses/react-native-with-typescript-the-practical-guide-2022/

Beginning React Native with Hooks - 2020
#ReactNative

Как использовать TypeScript с React-компонентами

https://proglib.io/w/5230c64b

#typescript #react

​Детальный разбор процесса сборки в webpack

https://proglib.io/w/6fa568dc

#tools #webpack

​Извлечение данных: три способа в 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