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.memo (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>Click Me Load More...</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

Circular Corner Borders 3D Hover Image (CSS Only) - Эффект при наведении на карточку, выполненный на чистом CSS, без использования JavaScript

https://codepen.io/TheMOZZARELLA/pen/OJOOVVJ

@react_tg

Gallery Example - Крутая Галерея картинок в стиле киберпанк.

https://codepen.io/toshiya-marukubo/pen/gOKMvPZ

@react_tg

​Самый безопасный способ скрыть ключи API при использовании React

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

Подробнее:

https://www.smashingmagazine.com/2023/05/safest-way-hide-api-keys-react/

#фронтенд #react

📚10 лучших библиотек React для разработки высокопроизводительных веб-приложений.

1. React Native
React Router - это популярная библиотека для управления навигацией в React-приложениях. Она позволяет задавать маршруты и URL декларативно, а также предоставляет возможности вложенных маршрутов и динамического согласования.

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

3. React Router
React Router - популярная библиотека для управления навигацией в React-приложениях. Она позволяет декларативно определять маршруты и URL, а также предоставляет возможности вложенных маршрутов и динамического согласования маршрутов. React Router интегрируется с другими React-библиотеками, включая Redux, что делает ее мощным инструментом для создания сложных веб-приложений.

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

5. React Bootstrap
React Bootstrap - библиотека компонентов пользовательского интерфейса для React-приложений, основанная на фреймворке Bootstrap. Она предлагает предварительно встроенные компоненты, включая кнопки, формы, модалы и оповещения, и оптимизирована для использования с React.

6. Material UI
Material UI - библиотека с готовыми компонентами пользовательского интерфейса, основанными на Google Material Design. Она включает кнопки, карточки, формы, иконки и другие компоненты. Material UI легко настраивается и подходит для создания привлекательных и отзывчивых интерфейсов.

7. Styled Components
Styled Components - это библиотека для стилизации React-компонентов, позволяющая писать CSS в коде JavaScript с использованием мощного и интуитивно понятного API. Она также предоставляет возможность создавать темы и управлять настройками, а также оптимизирует производительность CSS путем уменьшения размера сгенерированного кода.

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

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

10. Framer Motion
Framer Motion - библиотека для анимации в React, с простым API и поддержкой различных типов анимации, включая ключевые кадры, переходы и физическую анимацию. Также позволяет создавать сложные взаимодействия на основе жестов.

@react_tg