React JS
React программирование @haarrp - admin @itchannels_telegram - 🔥лучшие ит-каналы @javascriptv - продвинутый javascript @programming_books_it - бесплатные it книги @ai_machinelearning_big_data - ml № 5037566384
Mostrar más📈 Análisis del canal de Telegram React JS
El canal React JS (@react_tg) en el segmento lingüístico de Ruso es un actor destacado. Actualmente la comunidad reúne a 16 125 suscriptores, ocupando la posición 8 012 en la categoría Tecnologías y Aplicaciones y el puesto 40 676 en la región Rusia.
📊 Métricas de audiencia y dinámica
Desde su creación el невідомо, el proyecto ha mostrado un crecimiento acelerado, reuniendo a 16 125 suscriptores.
Según los últimos datos del 28 octubre, 2026, el canal mantiene una actividad estable. En los últimos 30 días la variación de miembros fue de -141, y en las últimas 24 horas de -12, conservando un alto alcance.
- Estado de verificación: No verificado
- Tasa de interacción (ER): El promedio de interacción de la audiencia es 15.31%. Durante las primeras 24 horas tras publicar, el contenido suele obtener 5.65% de reacciones respecto al total de suscriptores.
- Alcance de las publicaciones: Cada publicación recibe en promedio 2 470 visualizaciones. En el primer día suele acumular 912 visualizaciones.
- Reacciones e interacción: La audiencia responde de forma activa: el promedio de reacciones por publicación es 17.
- Intereses temáticos: El contenido se centra en temas clave como javascript, github, css, интерфейс, браузер.
📝 Descripción y política de contenido
El autor describe el recurso como un espacio para expresar opiniones subjetivas:
“React программирование
@haarrp - admin
@itchannels_telegram - 🔥лучшие ит-каналы
@javascriptv - продвинутый javascript
@programming_books_it - бесплатные it книги
@ai_machinelearning_big_data - ml
№ 5037566384”
Gracias a la alta frecuencia de actualizaciones (últimos datos recibidos el 29 octubre, 2026), el canal mantiene la vigencia y un amplio alcance. La analítica demuestra que la audiencia interactúa activamente con el contenido, lo que lo convierte en un punto de referencia dentro de la categoría Tecnologías y Aplicaciones.
Intersection Observer в JavaScript и зачем он используется?
Intersection Observer — это API, которое позволяет отслеживать, когда элемент входит или выходит из области видимости (viewport). Оно полезно для оптимизации ленивой загрузки изображений, бесконечной прокрутки или анимаций при прокрутке.
➡️ Пример:
// Целевой элемент для наблюдения
const target = document.querySelector('.observe-me');
// Callback-функция для обработки пересечений
const observerCallback = (entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
console.log('Элемент видим:', entry.target);
observer.unobserve(entry.target); // Останавливаем наблюдение
}
});
};
// Настройки наблюдателя
const observerOptions = {
root: null, // Вся область видимости
threshold: 0.5 // 50% видимости элемента
};
// Создаем наблюдатель
const observer = new IntersectionObserver(observerCallback, observerOptions);
// Начинаем наблюдение за элементом
observer.observe(target);
🗣️ В этом примере API отслеживает, когда .observe-me становится видимым на 50%. Intersection Observer делает прокрутку более производительной, так как избавляет от необходимости использовать события scroll.🖥 Подробнее тут
matchMedia. Это не только ускоряет загрузку, но и избавляет от проблем с мерцанием стилей при CSR.
🤖 GitHub
@react_tguseState добавляет состояние в функциональный компонент, позволяя создавать интерактивные интерфейсы.
🔹 Что делает `useState`?
Добавляет состояние в функциональный компонент. Ты можешь отслеживать и изменять значения прямо внутри компонента.
🔧 1. Импорт
import { useState } from 'react';
🔧 2. Объявление состояния
const [count, setCount] = useState(0);
count — текущее значение
setCount — функция для обновления
0 — начальное значение
Примеры с разными типами данных:
const [name, setName] = useState('Alice'); // строка
const [isActive, setIsActive] = useState(false); // булево
const [user, setUser] = useState({ id: 1, name: 'Bob' }); // объект
const [items, setItems] = useState([]); // массив
🔧 3. Обновление состояния
Не изменяй значение напрямую — используй функцию:
setCount(count + 1);
setName('Charlie');
setIsActive(!isActive);
setUser({ ...user, name: 'David' });
setItems([...items, 'New']);
🎯 4. Функциональный стиль обновления
Если новое значение зависит от предыдущего:
setCount(prev => prev + 1);
📦 5. Несколько состояний в одном компоненте
function MyComponent() {
const [count, setCount] = useState(0);
const [text, setText] = useState('');
return (
<>
<button onClick={() => setCount(count + 1)}>+1</button>
<input value={text} onChange={e => setText(e.target.value)} />
<p>Счётчик: {count}</p>
<p>Текст: {text}</p>
</>
);
}
Что важно помнить
* useState возвращает массив [значение, функция].
* Обновление состояния асинхронно.
* При работе с объектами и массивами всегда создавай копии, не мутируй напрямую.
🔥 Пользуйся этой шпаргалкой, чтобы уверенно управлять состоянием в React-приложениях!
#React #useState #Frontend #JavaScript
@react_tg