React JS

React Native: Свайп для удаления (Swipe to delete)

Ссылка на репозиторий:
Гитхаб

@react_tg

💡Совет React JS / JavaScript:

Нам не нужно использовать хуки при работе с формами в React. Мы можем обрабатывать изменения и отправлять их непосредственно в данные формы.

Посмотрите этот пример. Кроме того, мы получаем гораздо лучшую производительность (без повторного рендеринга).

#junior

@react_tg

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

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

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

▪Читать

@react_tg

💡 Play with Header on Page Transitions

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

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

@react_tg

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

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

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

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

@react_tg

Для хардкорных фанатов Реакта и всем кому интересна веб-разработка. На ютубе вышел документальный фильм – React.js: Documentary

React — одна из самых популярных библиотек. Учитывая, что он был создан внутри Facebook, можно было предположить, что он всегда был обречен на успех.

Что, если мы скажем вам, что первое столкновение React с публикой было не таким гламурным? Полная история первых дней существования React и группы преданных своему делу разработчиков, которые помогли вывести его на мировую арену.

Фильм на английском, есть русские сабы:
👉 Смотреть на ютуб

@react_tg

🖥 Scrollend

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

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

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

@react_tg

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


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

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

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

@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

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

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

@react_tg

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

📌 Код

react_tg

🖥 React Patterns

Коллекция паттернов проектирования React, советы и рекомендации по их использованию.

📌 Статья
🖥 Сайт
🖥 Github

react_tg

🖥 Общие шаблоны и нюансы использования React Query

Из-за своей гибкой парадигмы React имеет несколько подходов проектирования проекта.

Решения, которые мы принимаем на этапе проектирования и архитектуры проекта, могут либо сократить временные затраты на разработку простого надежного решения, либо затруднить её из-за усложнения реализации.

▪Читать

react_tg

🚀 Как использовать React в приложениях Angular

React в приложениях Angular может понадобится в двух случаях.

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

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

▪Читать

react_tg

9 полезных инструментов для разработки на React

В данной статье вы сможете узнать о 9-и инструментах React, которые вам стоит использовать для разработки веб-приложений.

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

react_tg

🖥 React resizable panels

Готовый Код Компонентов React для макетов панелей с настраиваемым размером.

🖥 Github

#group #layout #panel #react #resizable

react_tg

⭐️ Quiz App with React + GSAP

Квиз по CSS, сделанный с помощью SCSS и библиотек React.js и GSAP.js

#codepen #css #js

https://codepen.io/knyttneve/pen/abybEey

react_tg

7️⃣ правил ESLint, рекомендуемых для проектов TypeScript/React

Комбинация ESLint и Prettier не только значительно сокращает время разработки, но и позволяет вам оптимизировать приложение.

Вот 7 рекомендуемых конфигураций ESLint, которые значительно улучшат ваш проект на React.

▪Читать

@react_tg

🖥 Управление состоянием в React с помощью MobX 2023

Одним из наиболее часто задаваемых вопросов разработчиками при создании современных приложений на React является управление состоянием. В этом руководстве вы узнаете, как использовать MobX в качестве библиотеки управления состоянием для React-приложений. Мы будем использовать её для управления состоянием, что поможет нам понять концепцию работы MobX.

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

@react_tg

🖥 Создание анимации в React с помощью Framer Motion

Framer Motion — это библиотека анимации React с открытым исходным кодом, которая предоставляет пользователям несложный API для создания анимации, управления свойствами анимации и обработки пользовательских действий.

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

npm create-react-app framer

▪ Читать

@react_tg