🖥 Sliding Image Track — реализация изящного cлайдера с эффектом параллакса.

📌 Код

react_tg

🖥 Elastic Accordion GSAP — галерея с «эластичным» эффектом переключения.

https://codepen.io/supah/pen/rNKraQJ

@react_tg

🖥 Дополнить программу так, чтобы в previousInputValue сохранялось предыдущее введенное значение, с помощью useRef?

Дан следующий код:

import { useState, useEffect, useRef } from "react";

function App() {
const [inputValue, setInputValue] = useState("");
const previousInputValue = useRef("");

return (
<>
<input
type="text"
value={inputValue}
onChange={(e) => setInputValue(e.target.value)}
/>
<h2>Current Value: {inputValue}</h2>
<h2>Previous Value: {previousInputValue.current}</h2>
</>
);
}

Ответ:

function App() {
const [inputValue, setInputValue] = useState("");
const [prevInputValue, setPrevInputValue] = useState("");

const prevRef = useRef();
useEffect(() => {
prevRef.current = inputValue;
}, [inputValue]);

return (
<>
<input
type="text"
value={inputValue}
onChange={(e) => setInputValue(prev => {
setPrevInputValue(prev); // Предыдущее состояние
return e.target.value; // Устанавливаем текущее
})}
/>
<h2>Current Value: {inputValue}</h2>
<h2>Previous Value: {prevInputValue}</h2>
<h2>Previous Value vs Ref: {prevRef.current}</h2>
</>
);
}
Можно ли обойтись без использования useEfect?

👍 если нравится такой формат вопрос.

Пишите свое решение в комментариях👇

@react_tg

🖥 Знакомство с 5 самыми популярными хуками React.


React Hooks подобны специям на вашей кухне, они придают аромат вашему блюду и делают его еще вкуснее.

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

▪Читать
▪Зеркало

@react_tg

🖥 Scrollend

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

Узнать подробности можно тут:

https://developer.chrome.com/blog/scrollend-a-new-javascript-event/

@react_tg

🖥 Технические основы SEO для разработчиков React.

React разработчик Винкас Стонис собрал 12 пунктов по техническому SEO:

"Многие разработчики, даже опытные, ничего не знают о поисковой оптимизации (SEO). И я тоже долго не знал. SEO в основном невидим, поэтому его легко игнорировать"

Добавляйте в закладки чтобы не потерять:
👉 Читать статью

@react_tg

💡 Play with Header on Page Transitions

Стильное, анимированное переключение между вкладками, реализованное c применением SCSS.

https://codepen.io/pehaa/pen/wvBLpNK

@react_tg

🖥 Простые способы повышения производительности вашего приложения на React без использования useMemo.

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

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

▪Читать

@react_tg

🖥 7 советов по очистке кода React

▪ Читать

@react_tg

💨 Card Hover Interactions — шикарная анимация текста.

https://codepen.io/hexagoncircle/pen/XWbWKwL

@react_tg

🖥 Топ-45 библиотек React

React просто великолепен: он крайне производителен и популярен во всем мире. Но не стоит игнорировать тот факт, что “из коробки” React предоставляет не так уж и много готовых решений.

Поэтому приходится искать дополнительные сторонние библиотеки. Они могут оказаться как высококачественными, так и написанными на скорую руку. Если вы новичок, то вам придется потратить довольно много времени на поиск наилучшего решения.

Сегодня проведем сравнительное обсуждение с целью детально разобраться в альтернативных решениях различных проблем React.

▪Читать

@react_tg

🖥 Современный модульный лендинг React

Шаблоны лендингов очень распространены в интернете: легко собираются, удобны в использовании и выглядят отлично. Но это только в теории.

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

Шаблон с разумным применением современных технологий отличается от них как небо и земля.

▪Читать
▪Код

@react_tg

🖥 Storybook

Storybook — это проект для создания компонентов и страниц пользовательского интерфейса.

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

🖥 Github
📝 Project

@react_tg

🖥 React. Компоненты

Читая документацию React наткнулся на интересную с моей точки зрения конструкцию в react-bootstrap:

<Nav
activeKey="/home"
onSelect={selectedKey => alert(`selected ${selectedKey}`)}>
<Nav.Item>
<Nav.Link href="/home">Active</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="link-1">Link</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="link-2">Link</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="disabled" disabled>
Disabled
</Nav.Link>
</Nav.Item>
</Nav>

Это способ структурирования кода.

Nav.Item это такой же компонент, как и любой другой обычный компонент React. Но, в данном случае, мы используем namespace для того, что бы точно знать, какой именно компонент используем. Посмотрите сами, Item очень обобщенное имя, поэтому другие библиотеки могут тоже его использовать

import {Item} from 'one-lib';
import {Item} from 'two-lib'; // Oooops. Duplicate name!

Можно выкрутиться используя конструкцию as, но это не так красиво)

import {Item} from 'one-lib';
import {Item as ItemTwo} from 'two-lib'; // Ok

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

import {Nav} from 'lib';

Nav.Component1; // Ok!
Nav.Component2; // Ok too!

// В коде либы

export Nav = {
Component1: ...,
Component2: ...,
}

При этом Nav сам может являться компонентом, тогда остальные будут статическими св-свами

class Nav extends React.Component {}; // Тут уже используются эта техника - React.Component

Nav.Component1 = class Component1 extends React.Component {}
Nav.Component2 = class Component1 extends React.Component {}

export Nav

@react_tg