​Тестируйте свои React-компоненты с помощью Nightwatch и Testing Library

Nightwatch и Testing Library — два крайне полезных инструмента для тестирования компонентов. Первая библиотека написана на Node.js и позволяет проводить полноценное сквозное тестирование веб-приложений и сайтов, написанных на JS. В свою очередь Testing Library более минималистичный инструмент, созданный специально для тестирования React-компонентов.

В этой статье вы научитесь:

— устанавливать новый проект React с помощью Vite, который также используется внутри Nightwatch для компонентного тестирования;
— подключать и конфигурировать Nightwatch и Testing Library;
— имитировать API запросы с помощью плагина @nightwatch/api-testing;
— писать комплексные React-компонентные тесты, используя Nightwatch и Testing Library.

https://habr.com/ru/companies/otus/articles/719266/

#react #qa

📚 Подборка бесплатных и актуальных книг по всем языкам программирования.

Java книги

Книги датасаентиста

Golang библиотека

Python библиотека

Крупнейший склад ит-книг

C++ книги

C# книги

Frontend книги

Книги по базам данных

Топ книги по Linux

Библиотека машинного обучения

Сохраняем себе, чтобы не потерять

Gallery animation — анимированная галерея с эффектом при прокрутке. Реализована с помощью CSS и JavaScript.

https://codepen.io/Tiopayo/pen/GRYoMEZ

@javascriptv

⚡ Подборка ресурсов с полезными шпаргалками для фронтенд-разработчика:

▫️htmlcheatsheet
▫️cssreference
▫️reactcheatsheet
▫️cheatography
▫️javascriptcheatsheet

Сохраняем себе, чтобы не потерять

@react_tg

React recursively re-renders child components, but there is a nuance

https://alexsidorenko.com/blog/react-render-children-prop #react

Mountain Hero Page — красивая страница с анимированным скроллом. Страница реализована с помощью CSS и JavaScript.

https://codepen.io/aryancodeworm/pen/rNKqgpY

@react_tg

Обрабатываем ошибки в React: полное руководство

Рассмотрим обработку ошибок в React: что делать при их появлении, как их выявить и устранить.

▪ Читать

@react_tg

Погружение в фундаментальные основы реактивного программирования: разберемся в том, что React.js всё же является реактивным, и рассмотрим кейсы, при которых целесообразно применять паттерны реактивного программирования.

Читать

​Как писать комментарии в React: хорошие, плохие и уродливые

Когда дело доходит до написания комментариев, React предлагает синтаксис {/* Comment */}, который может быть немного многословен.

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

https://dmitripavlutin.com/react-comments/

#react #фронтенд

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

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

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

https://css-tricks.com/5-mistakes-starting-react/

@react_tg

Поздравляем юбиляра библиотеке React исполнилось 10 лет.

React - это проект, который принес многое а в веб-индустрию и ещё больше впереди. Давайте поддержим React реакциями!

@react_tg

⚡ Как избежать повторного рендеринга компонентов React

https://blog.openreplay.com/how-to-stop-react-components-from-rerendering/

@react_tg

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

1. Использование React.iss.onemo (HOC, а не хук)

import React, { memo } from 'react'

interface Props {
title: string
subtitle: string
}

const MyComponent: React.FC<Props> = memo(({ title, subtitle }) => {
return (
<div>
<h1>{title}</h1>
<h2>{subtitle}</h2>
</div>
)
})

2. Оптимизация обработчиков событий с помощью useCallback

import React, { useState, useCallback } from 'react'

const Counter: React.FC = () => {
const [count, setCount] = useState(0) const increment = useCallback(() => {
setCount(prevCount => prevCount + 1)
}, [])

return (
<div>
<p>Count: {count}</p>
<button onClick={increment}>Increment</button>
</div>
)
}

3. Виртуализация длинных списков с помощью react-window

import React from 'react'
import { FixedSizeList as List } from 'react-window'

const Row: React.FC<{ index: number; style: React.CSSProperties }> = ({
index,
style,
}) => {
return (
<div style={style}>
<p>{`Row ${index}`}</p>
</div>
)
}

const VirtualizedList: React.FC = () => {
const itemCount = 1000
return (
<List height={500} itemCount={itemCount} itemSize={50} width={300}>
{Row}
</List>
)
}

4. Ленивая загрузка компонентов с помощью React.lazy и Suspense

import React, { lazy, Suspense } from 'react'
const LazyLoadedComponent = lazy(() => import('./LazyLoadedComponent'))

const App: React.FC = () => {
return (
<div>
<Suspense fallback={<div>Loading...</div>}>
<LazyLoadedComponent />
</Suspense>
</div>
)
}

5. Использование API React.Profiler для выявления узких мест производительности

import React, { Profiler } from 'react'

const onRender = (
id: string,
phase: 'mount' | 'update',
actualDuration: number,
baseDuration: number,
startTime: number,
commitTime: number,
interactions: Set<{ id: number; name: string; timestamp: number }>
) => {
console.log('Profiler:', {
id,
phase,
actualDuration,
baseDuration,
startTime,
commitTime,
interactions,
})
}

const App: React.FC = () => {
return (
<Profiler id="MyComponent" onRender={onRender}>
<MyComponent />
</Profiler>
)
}

6. Оптимизация обновления состояний с помощью Immer

import React, { useState } from 'react'
import produce from 'immer'

interface User {
id: number
name: string
}

const App: React.FC = () => {
const [users, setUsers] = useState<User[]>([
{ id: 1, name: 'Alice' },
{ id: 2, name: 'Bob' },
])

const updateUser = (id: number, newName: string) => {
setUsers(
produce((draftUsers: User[]) => {
const user = draftUsers.find(user => user.id === id)
if (user) {
user.name = newName
}
})
)
}

return (
// ...
)
}

7. Использование троттлинга и дебаунсинга для обработчиков ввода

import React, { useState, useCallback } from 'react'
import { debounce } from 'lodash-es'

const SearchBox: React.FC = () => {
const [searchTerm, setSearchTerm] = useState('')

const handleSearch = useCallback(
debounce((value: string) => {
setSearchTerm(value)
}, 300),
[]
)

const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
handleSearch(event.target.value)
}

return (
<div>
<input type="text" onChange={handleChange} />
</div>
)
}

@react_tg

🔥Waku

Waku - это минималистичный React-фреймворк с поддержкой React Server Components.

▪Github

@react_tg

Parallax Article Card — форма с эффектом параллакса при наведении. Реализована с помощью SCSS и JavaScript.

https://codepen.io/mprquinn/pen/zdKqGE

@react_tg

📚7 библиотек для анимаций на React

1. React Spring

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

2. Framer Motion

Framer Motion - это библиотека анимации для React, которая подходит для использования в проектах. Она использует функциональность, предоставляемую Framer - лучшим инструментом для прототипирования команд. Библиотека создана на основе открытого исходного кода...

3. TS Particles

С tsParticles вы можете легко создавать подробные настройки для частиц и анимаций конфетти и фейерверков, которые могут использоваться как анимированные фоны для вашего сайта. Эта библиотека предоставляет готовые компоненты для работы с React, Angular, Svelte и Web Components.

4. Green Sock

GSAP, или GreenSock Animation Platform, является платформой для анимации, которая может анимировать любой элемент, на который можно нажать (CSS свойства, SVG, React Canvas, общие объекты и многое другое), решая множество проблем с несоответствиями в разных браузерах, и все это происходит с ошеломляющей скоростью.

5. Remotion

Remotion — это инструмент, который позволяет создавать видео и анимации с использованием HTML, CSS, JavaScript и TypeScript, и даже неспециалисты могут освоить этот процесс. Основываясь на своем программистском опыте, вы можете создавать анимации и видео с помощью Remotion.

6. React Move

React Move — легковесная библиотека, позволяющая разработчикам создавать красивые анимации на основе данных. Она наглядно отражает события жизненного цикла при загрузке страниц, и может быть использована для создания привлекательных эффектов в вашем проекте.

7. React Awesome Reveal

React Awesome Reveal позволяет создавать анимацию появления элементов с помощью Intersection Observer API, который определяет, когда элементы становятся видимыми в окне приложения.
Emotion использует эффективную технологию анимации CSS, которая повышает производительность и обеспечивает аппаратное ускорение.

@react_tg

Million.js — ориентированная на производительность замена VDOM для React

Начавшаяся два года назад как небольшая, не зависящая от библиотек реализация виртуального DOM, Million сейчас — это библиотека, которая ускоряет работу компонентов React до 70 %.

🗂4 пользовательских хука React.

1. useMount
Следует настроить хук под названием useMount. Тогда функция обратного вызова будет выполняться только при первом рендеринге компонента.

Исходный код:
const useMount = (callback) => {
React.useEffect(callback, [])
}

Пример:
const UseMountDemo = () => {
const [count, setCount] = React.useState(0)

useMount(() => {
console.log("useMount")
})

return (
<div>
count: { count }
<button onClick={() => setCount(count++)}>add</button>
</div>
)
}

Когда компонент рендерится повторно, useMount не выполняется снова.

2. useUnmount
Можно разработать хук useUnmount, чтобы указать, что функция обратного вызова выполняется, когда компонент размонтирован.

Исходный код:
const useUnmount = (callback) => {
React.useEffect(() => {
return callback
}, [])
}
Пример:
const Child = () => {
const [ count, setCount ] = useState(0)

useUnmount(() => {
// Мы ожидаем вывод значения num, когда компонент будет размонтирован
console.log('useUnmount', count)
})
return (
<div>
count: {count}
<button onClick={() => setCount(count + 1)}>add</button>
</div>
)
}

const UseUnmountedDemo = () => {
const [showChild, setShowChild] = React.useState(true);
// Мы используем "showChild" для управления отображением и скрытием дочернего компонента
return (
<div>
{ !!showChild && <Child /> }
<button onClick={() => setShowChild(false)}>Destroy child</button>
</div>
)
}
Когда компонент Child удаляется, функция обратного вызова useUnmount выполняется, но обнаруживается, что count  —  это начальное значение 0, а не 10. Что вызывает такой неправильный результат?

Причина этого кроется в механизме закрытия в useEffect, потому что функция передается при выгрузке компонента для первого рендеринга. Чтобы получить состояние в реальном времени, нужно использовать useRef.
const useUnmount = (callback) => {
const callbackRef = React.useRef(callback)

callbackRef.current = callback

React.useEffect(() => {
return () => {
callbackRef.current()
}
}, [])
}
Теперь при удалении компонента получаем правильное значение count

3. useContext
Иногда необходимо выполнять логический код только после изменения зависимости. Можно ли мы достичь этой цели, используя такой подход?
function UseUpdateEffectDemo() {
const [count, setCount] = React.useState(0)

React.useEffect(() => {
console.log('count changed', count)
}, [ count ])

return (
<div>
count: {count}
<button onClick={() => setCount(count + 1)}>change</button>
</div>
)
}
Однако count выведет 0, как только компонент будет смонтирован. Как можно выполнить функцию обратного вызова после изменения count?
const useUpdateEffect = function (effectCallback, deps = []) {
const isFirstMount = React.useRef(false)

React.useEffect(() => {
return () => {
isFirstMount.current = false
}
}, [])
React.useEffect(() => {
// Не выполняйте effectcallback для первого раза
if (!isFirstMount.current) {
isFirstMount.current = true
} else {
return effectCallback()
}
}, deps)
}

function UseUpdateEffectDemo() {
const [count, setCount] = React.useState(0)

useUpdateEffect(() => {
console.log('Count changed', count)
}, [ count ])

return (
<div>
count: {count}
<button onClick={() => setCount(count + 1)}>change</button>
</div>
)
}

4. useSetState

▪ Читать продолжение

@react_tg

Grid 3d card tilt effect — карточки с эффектом объема при наведении. Реализованы с помощью CSS и JavaScript.

https://codepen.io/ghaste/pen/zYJqxax

@react_tg

React.js
Design Patterns

Год: 2023
Автор: Aleksandra Desmurs-Linczewska
Publisher: Bpb
Формат: EPUB

📚 Скачать книгу

@react_tg