React JS
17.6K subscribers
592 photos
72 videos
5 files
682 links
React программирование

@haarrp - admin

@itchannels_telegram - 🔥лучшие ит-каналы

@javascriptv - продвинутый javascript

@programming_books_it - бесплатные it книги

@ai_machinelearning_big_data - ml

№ 5037566384
Download Telegram
🖥 Rockpack

Rockpackданный инструмент позволяет создавать «каркас» React приложения в стиле create-react-app

Основная идея - сократить время настройки проекта с недель до 5 минут

🔩 Ссылка на проект

#JavaScript #React

@react_tg
Please open Telegram to view this post
VIEW IN TELEGRAM
👍61🔥1
🖥 Slashколлекция пакетов для JavaScript и TypeScript. Библиотека содержит более 30 npm-пакетов для создания высококачественных веб-приложений

Некоторые компоненты, хуки и функции можно использовать в React

🔩 Ссылка на проект

@react_tg | #Interesting #JavaScript #React
Please open Telegram to view this post
VIEW IN TELEGRAM
👍41👎1🔥1😐1
🖥 reaflowReact-библиотека для построения флов-чартов, воркфлоу-диаграм с редактором

Библиотека многофункциональная и модульная, позволяет отображать настраиваемые, сложные визуализации

🔩 Ссылка на проект

@react_tg | #JavaScript #React #Interesting #Visualization
Please open Telegram to view this post
VIEW IN TELEGRAM
👍81🔥1
This media is not supported in your browser
VIEW IN TELEGRAM
GSAP - Scroll animation — анимация текста при прокрутке. Реализована с помощью CSS и JavaScript

#анимация #css #javascript #gsap

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

@react_tg
🔥12👍2🥰1
This media is not supported in your browser
VIEW IN TELEGRAM
Shapes, Clip-Path and CSS Grid — демонстрация CSS Shapes, CSS-свойства clip-path и CSS Grid. Реализована с помощью CSS и JavaScript

#анимация #css #javascript

https://codepen.io/mandymichael/pen/axZyoP

@react_tg
👍81🔥1
⚛️ React Custom Hooks позволяют повторно использовать логику состояния в компонентах React, интегрируясь с хуками useState и useEffect.


Пример Custom Hook, `useFetch`, показывает, как можно обрабатывать загрузку данных и управлять состоянием загрузки:

import { useState, useEffect } from 'react';

function useFetch(url) {
const [data, setData] = useState([]);
const [isLoading, setIsLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
async function fetchData() {
try {
const response = await fetch(url);
const result = await response.json();
...


Helper Function, `formatDate`, не зависит от React и форматирует даты, используя dayjs:

import dayjs from 'dayjs';

function formatDate(date) {
return dayjs(date).format('MM/DD/YYYY');
}

Если требуется управление состоянием, используйте Custom Hooks. Для общих вычислений без привязки к состоянию лучше подходят Helper Functions.

#frontend #react #JavaScript #ReactJS
📎 Хабр

@react_tg
👍193🥰2🥱2🔥1😈1
📘 React-подсказка: как работает `useState`

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

🔹 Что делает `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
👍184🔥2
🚀 Promises-Training — практикуй промисы в JavaScript

Promises-Training — это коллекция упражнений по промисам с автоматическими тестами, где можно прокачать работу с async/await, .then/.catch, конкурентным выполнением и ограничением параллельности.

Почему полезно:
- Пошаговый рост сложности: от простых примеров до нетривиальных сценариев.
- Автотесты сразу показывают, правильно ли решена задача.
- Хорошо подходит, чтобы глубже понять асинхронность и промисы.
- Есть упражнения по реальным случаям: parallelMaxConcurrency, concurrencyOverride, extractingResolvers и др.

📦 Как начать:

npm create promises-training@latest


Запуск проверки конкретного упражнения:

npm run check <category>/<exercise>

🔥 Итог: отличный способ на практике закрепить работу с промисами и уверенно освоить асинхронность в JS.
Лежит тут: https://github.com/henriqueinonhe/promises-training

#javascript #тренажер #js

@react_tg
👍158🔥4
🌊 Эффект жидкого стекла для React Native

Liquid Glass добавляет эффект жидкого стекла iOS 26 в приложения React Native. Позволяет настраивать цвета и использовать два режима эффекта: прозрачный и обычный. Идеально подходит для создания стильных интерфейсов.

🚀 Основные моменты:
- Эффект жидкого стекла для iOS 26
- Настраиваемые цвета и режимы
- Поддержка взаимодействия с элементами

📌 GitHub: https://github.com/callstack/liquid-glass

#javascript
5🥱1🥴1
🔥 Самая масштабная атака на экосистему JavaScript

Фишингом угнали npm-аккаунт мейнтейнера qix и пушнули апдейты в 18 ключевых пакетов (chalk, debug, strip-ansi, color-convert и др.) — суммарно это ~2,6 млрд загрузок в неделю.
В обновления вставили браузерный крипто-«клиппер»: на сайтах/в приложениях с уязвимыми версиями он перехватывает трафик и подменяет адреса кошельков.

Скомпрометированные версии — удалить немедленно из всех сред (локальные машины разработчиков, CI/CD, прод):

[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]



⚡️ Что стоит сделать:
Удалить уязвимые версии из дерева зависимостей, пересобрать и задеплоить исправления.
Проверить lock-файлы (package-lock.json, yarn.lock, pnpm-lock.yaml) и node_modules на присутствие перечисленных версий.
Очистить кэш менеджера пакетов: npm cache clean --force, yarn cache clean, pnpm store prune.
Переустановить зависимости с нуля (удалив node_modules и lock-файлы) и заново зафиксировать версии.
Пересобрать фронтенд-бандлы, инвалидировать CDN/кэши, перезапустить рантаймы.
Проверить логи на внешние запросы из бандла, провести аудит внесённых PR/коммитов.
Ротировать ключи/токены, если могли утечь, и ужесточить 2FA/доступ к npm.

📌 Разбор атаки

#security #npm #javascript #supplychain #infosec #malware
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
11👍7🔥4❤‍🔥1
🎶 OpenSpot Music - Your Gateway to Limitless Music

OpenSpot Music предлагает возможность стриминга и скачивания музыки без рекламы и входа в систему. Доступно на мобильных и десктопных платформах, приложение обеспечивает высокое качество звука и удобный интерфейс.

🚀 Основные моменты:
- Мобильное приложение на React Native для Android и iOS
- Десктопное приложение на Electron для macOS, Windows и Linux
- Оффлайн-доступ и фоновое воспроизведение
- Поддержка локального хранения и управления окнами

📌 GitHub: https://github.com/BlackHatDevX/openspot-music-app

#javascript
👍42
🚀 Углубленное изучение промисов в JavaScript

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

🚀 Основные моменты:
- Упражнения разделены на категории: графовые, конкретные и базовые.
- Каждое упражнение имеет три уровня сложности: начальный, средний и продвинутый.
- Проект включает объяснения и контекст для каждой задачи.
- Подходит для разработчиков, стремящихся улучшить свои навыки работы с промисами.

📌 GitHub: https://github.com/henriqueinonhe/promises-training

#javascript
11
🚀 Интенсивный курс по JavaScript и веб-разработке

JSCamp — это bootcamp, который охватывает все от основ до продвинутых технологий JavaScript, включая HTML, CSS, Node.js и Docker. Участники создадут полноценный проект, применяя полученные знания, и получат доступ к видео и материалам на платформе JSCamp.dev.

🚀Основные моменты:
- Полный курс по JavaScript и веб-разработке
- Практический проект от начала до конца
- Доступ к видео и материалам на JSCamp.dev
- Опциональный сертификат и поддержка в Discord
- Обратная связь по CV и участие в воркшопах

📌 GitHub: https://github.com/midudev/jscamp

#javascript
4🔥2👍1
🎸 It's MyTabs: Your Self-Hosted Tab Viewer

It's MyTabs — это веб-приложение для просмотра и воспроизведения гитарных и басовых табулатур. Поддерживает синхронизацию с аудиофайлами и видео на YouTube, а также предлагает простой интерфейс и мобильную совместимость.

🚀 Основные моменты:
- Открытый исходный код (MIT License)
- Поддержка различных форматов табулатур
- Синхронизация с аудио и видео
- Многофункциональный MIDI синтезатор
- Настраиваемые режимы курсора

📌 GitHub: https://github.com/louislam/its-mytabs

#javascript
🔥92👍1
🌐 Интерактивная визуализация данных для SVI

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

🚀Основные моменты:
- Интерактивные графики для глубокого анализа данных
- Поддержка различных форматов данных
- Легкость в использовании и настройке
- Возможность интеграции с другими инструментами

📌 GitHub: https://github.com/samihadouaj/svi

#javascript
😐63🔥3
📹 Загрузчик медиа из Twitter 🚀

TwitterXDownload — это мощный инструмент для скачивания видео и других медиа из Twitter. Он идеально подходит для контент-креаторов и маркетологов, позволяя эффективно переводить и перепубликовывать контент. Также проект служит отличной основой для изучения Next.js и других технологий.

🚀 Основные моменты:
- 🎥 Извлечение медиа из твитов с поддержкой пакетной загрузки
- 🔍 Умный поиск по твитам по автору, дате и типу медиа
- 🌐 Однокнопочный перевод и перепубликация твитов
- 🌍 Поддержка 12 языков для глобальной доступности
- 📦 Оптимизация для SEO и AdSense

📌 GitHub: https://github.com/imtonyjaa/twitterxdownload

#javascript
1
🛠️ Улучшаем коммиты с AI

Git Rewrite Commits — это инструмент для автоматического улучшения сообщений коммитов с помощью AI. Он помогает привести в порядок историю коммитов, создавая более осмысленные и структурированные сообщения, что особенно полезно перед публикацией проектов или для повышения удобства работы с репозиториями.

🚀Основные моменты:
- AI-генерация сообщений для коммитов
- Поддержка локальных моделей и оффлайн-работы
- Установка git hooks одним командой
- Оценка качества коммитов и автоматическое исправление
- Возможность настройки формата и языка сообщений

📌 GitHub: https://github.com/f/git-rewrite-commits

#javascript
😁53👍2🥰1