​Архитектура проекта React

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

https://tprg.ru/7PTa

#react

​Создание компонента React с помощью TDD

Подход TDD, или Test Drive Driven, предполагает очень короткий цикл разработки, который повторяется до достижения необходимого результата путём постоянного проведения тестов кода и внесения необходимых изменений.

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

https://tprg.ru/9TA0

#react

Использование 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

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

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

#typescript #react

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

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

#react

Аутентификация с 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

Заглянем под капот 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

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-компоненты и не столкнуться с подводными камнями.

https://nuancesprog.ru/p/15235/

@nuancesprog #React #Testing

React Router 6: Private Routes 

https://www.robinwieruch.de/react-router-private-routes/ #react

Как правильно обрабатывать и регистрировать ошибки в React, какие инструменты стоит для этого выбрать?

https://nuancesprog.ru/p/14635/

@nuancesprog #React

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

Перевод статьи React re-renders guide: everything, all at once, посвященной повторному рендерингу (re-render, далее — ререндеринг) в React.

👉 Читать перевод...
👉 Читать оригинал...

#longread #js #react