Rockpack – данный инструмент позволяет создавать «каркас» React приложения в стиле create-react-app
Основная идея - сократить время настройки проекта с недель до 5 минут
#JavaScript #React
@react_tg
Please open Telegram to view this post
VIEW IN TELEGRAM
👍6❤1🔥1
Некоторые компоненты, хуки и функции можно использовать в React
@react_tg | #Interesting #JavaScript #React
Please open Telegram to view this post
VIEW IN TELEGRAM
GitHub
GitHub - toss/slash: A collection of TypeScript/JavaScript packages to build high-quality web services.
A collection of TypeScript/JavaScript packages to build high-quality web services. - toss/slash
👍4❤1👎1🔥1😐1
Библиотека многофункциональная и модульная, позволяет отображать настраиваемые, сложные визуализации
@react_tg | #JavaScript #React #Interesting #Visualization
Please open Telegram to view this post
VIEW IN TELEGRAM
GitHub
GitHub - reaviz/reaflow: 🎯 React library for building workflow editors, flow charts and diagrams. Maintained by @goodcodeus.
🎯 React library for building workflow editors, flow charts and diagrams. Maintained by @goodcodeus. - reaviz/reaflow
👍8❤1🔥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
#анимация #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
#анимация #css #javascript
https://codepen.io/mandymichael/pen/axZyoP
@react_tg
👍8❤1🔥1
⚛️ React Custom Hooks позволяют повторно использовать логику состояния в компонентах React, интегрируясь с хуками useState и useEffect.
Пример Custom Hook, `useFetch`, показывает, как можно обрабатывать загрузку данных и управлять состоянием загрузки:
Helper Function, `formatDate`, не зависит от React и форматирует даты, используя
Если требуется управление состоянием, используйте Custom Hooks. Для общих вычислений без привязки к состоянию лучше подходят Helper Functions.
#frontend #react #JavaScript #ReactJS
📎 Хабр
@react_tg
Пример 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
👍19❤3🥰2🥱2🔥1😈1
📘 React-подсказка: как работает `useState`
Хук
🔹 Что делает `useState`?
Добавляет состояние в функциональный компонент. Ты можешь отслеживать и изменять значения прямо внутри компонента.
🔧 1. Импорт
🔧 2. Объявление состояния
Примеры с разными типами данных:
🔧 3. Обновление состояния
Не изменяй значение напрямую — используй функцию:
🎯 4. Функциональный стиль обновления
Если новое значение зависит от предыдущего:
📦 5. Несколько состояний в одном компоненте
Что важно помнить
*
* Обновление состояния асинхронно.
* При работе с объектами и массивами всегда создавай копии, не мутируй напрямую.
🔥 Пользуйся этой шпаргалкой, чтобы уверенно управлять состоянием в React-приложениях!
#React #useState #Frontend #JavaScript
@react_tg
Хук
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
👍18❤3🔥2
🚀 Promises-Training — практикуй промисы в JavaScript
Promises-Training — это коллекция упражнений по промисам с автоматическими тестами, где можно прокачать работу с
⏩ Почему полезно:
- Пошаговый рост сложности: от простых примеров до нетривиальных сценариев.
- Автотесты сразу показывают, правильно ли решена задача.
- Хорошо подходит, чтобы глубже понять асинхронность и промисы.
- Есть упражнения по реальным случаям:
📦 Как начать:
Запуск проверки конкретного упражнения:
npm run check <category>/<exercise>
🔥 Итог: отличный способ на практике закрепить работу с промисами и уверенно освоить асинхронность в JS.
Лежит тут: https://github.com/henriqueinonhe/promises-training
#javascript #тренажер #js
@react_tg
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
👍15❤8🔥4
🌊 Эффект жидкого стекла для React Native
Liquid Glass добавляет эффект жидкого стекла iOS 26 в приложения React Native. Позволяет настраивать цвета и использовать два режима эффекта: прозрачный и обычный. Идеально подходит для создания стильных интерфейсов.
🚀 Основные моменты:
- Эффект жидкого стекла для iOS 26
- Настраиваемые цвета и режимы
- Поддержка взаимодействия с элементами
📌 GitHub: https://github.com/callstack/liquid-glass
#javascript
Liquid Glass добавляет эффект жидкого стекла iOS 26 в приложения React Native. Позволяет настраивать цвета и использовать два режима эффекта: прозрачный и обычный. Идеально подходит для создания стильных интерфейсов.
🚀 Основные моменты:
- Эффект жидкого стекла для iOS 26
- Настраиваемые цвета и режимы
- Поддержка взаимодействия с элементами
📌 GitHub: https://github.com/callstack/liquid-glass
#javascript
❤4🥱1🥴1
Фишингом угнали 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
OpenSpot Music предлагает возможность стриминга и скачивания музыки без рекламы и входа в систему. Доступно на мобильных и десктопных платформах, приложение обеспечивает высокое качество звука и удобный интерфейс.
🚀 Основные моменты:
- Мобильное приложение на React Native для Android и iOS
- Десктопное приложение на Electron для macOS, Windows и Linux
- Оффлайн-доступ и фоновое воспроизведение
- Поддержка локального хранения и управления окнами
📌 GitHub: https://github.com/BlackHatDevX/openspot-music-app
#javascript
GitHub
GitHub - BlackHatDevX/openspot-music-app: OpenSpot is a free and open-source music streaming application designed for a seamless…
OpenSpot is a free and open-source music streaming application designed for a seamless, high-fidelity listening experience. Built with a modern tech stack, it features a beautiful, responsive UI th...
👍4❤1
🚀 Углубленное изучение промисов в JavaScript
Этот репозиторий предлагает практические упражнения для освоения промисов и асинхронного программирования. Он предназначен для разработчиков с базовыми знаниями, желающих углубить свои навыки и научиться решать более сложные задачи.
🚀 Основные моменты:
- Упражнения разделены на категории: графовые, конкретные и базовые.
- Каждое упражнение имеет три уровня сложности: начальный, средний и продвинутый.
- Проект включает объяснения и контекст для каждой задачи.
- Подходит для разработчиков, стремящихся улучшить свои навыки работы с промисами.
📌 GitHub: https://github.com/henriqueinonhe/promises-training
#javascript
Этот репозиторий предлагает практические упражнения для освоения промисов и асинхронного программирования. Он предназначен для разработчиков с базовыми знаниями, желающих углубить свои навыки и научиться решать более сложные задачи.
🚀 Основные моменты:
- Упражнения разделены на категории: графовые, конкретные и базовые.
- Каждое упражнение имеет три уровня сложности: начальный, средний и продвинутый.
- Проект включает объяснения и контекст для каждой задачи.
- Подходит для разработчиков, стремящихся улучшить свои навыки работы с промисами.
📌 GitHub: https://github.com/henriqueinonhe/promises-training
#javascript
❤8