📈 Пора повышать грейд! 10 июля в 20:00 пройдет бесплатный вебинар по теме "Как стать уверенным JavaScript-разработчиком: план от джуна до мидла". Запись ограничена: https://tglink.io/e0f647326a9a

Что будет на вебинаре?

🗝  Что отличает джуна от сильного специалиста: структура знаний, подходы, ответственность.
🗝 Какие технологии важны в 2025 году: React, TypeScript, API, архитектура.
🗝 Почему "копипастить с GitHub" недостаточно — нужно понимать, как и зачем работает код.
🗝  Как избежать «плато развития» и начать расти — по-настоящему.
🗝  Как выстроить план обучения и выйти на следующий уровень — без метаний и хаоса.

Чему вы научитесь:

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

💥 Оставляйте заявку на бесплатный урок и получите спец. предложение: https://tglink.io/e0f647326a9a

erid: 2W5zFHuWGvU

📘 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

🔮 fresnel — элегантное решение для адаптивного рендеринга в React. Этот проект переосмысливает работу с медиазапросами, перенося их логику прямо в React-компоненты. Вместо ручного управления условиями рендера через CSS или JS, проект предлагает декларативный подход: вы определяете breakpoints, а библиотека автоматически рендерит нужную версию интерфейса.

Инструмент имеет поддержку SSR, благодаря чему рендерит все breakpoints на сервере, а клиент уже после гидратации отключает лишнее через matchMedia. Это не только ускоряет загрузку, но и избавляет от проблем с мерцанием стилей при CSR.

🤖 GitHub

@react_tg

📊 Tremor — готовые React-компоненты для дашбордов. Библиотека предлагает более 35 предварительно стилизованных компонентов на базе Tailwind CSS и Radix UI — от графиков и таблиц до сложных интерактивных элементов. Все компоненты можно копировать и вставлять в проект, быстро получая рабочие элементы интерфейса.

Проект фокусируется на доступности и кастомизации: все элементы адаптированы под требования WCAG, но при этом легко перекрашиваются и адаптируются под дизайн-систему. Компоненты заранее оптимизированы для работы с большими наборами данных без потерь производительности.

🤖 GitHub

@react_tg

Я, конечно, многое могу стерпеть…
Но называть HTML языком программирования — это уже за гранью

ChatGPT остановись)

🍉 WatermelonDB — гибкая база данных для React. Эта СУБД предлагает необычный подход к работе с данными в React-приложениях. Вместо загрузки всей информации при старте, она подгружает только то, что действительно нужно пользователю прямо сейчас.

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

🤖 GitHub

@sqlhub

Он всего лишь только что выпустился из университета

#ithumor

🎠 Nuka Carousel — доступная и настраиваемая карусель для React. Это лёгкая библиотека для создания каруселей с акцентом на доступность и кастомизацию. Позволяет быстро собрать слайдер, который будет соответствовать дизайну вашего продукта — от анимаций до управления с клавиатуры.

Инструмент имеет минималистичный API с поддержкой TypeScript и удобной системой пропсов для тонкой настройки поведения. Под капотом — современный React без лишних зависимостей.

🤖 GitHub

@react_tg

«Да у нас нормальный интерфейс»

- Также их интерфейс:

@React_tg

🌼 react-daisyui — библиотека React-компонентов, построенная на daisyUI и Tailwind CSS. Она предлагает готовые UI-элементы с поддержкой темl и минимальным количеством кастомного CSS.

Проект идеально подходит для быстрого прототипирования: кнопки, карточки и формы работают из коробки с адаптивным дизайном. Есть глубокая интеграция с Tailwind: можно кастомизировать компоненты через утилитарные классы, не покидая HTML.

🤖 GitHub

@react_tg

🌀 Reatom — необычный стейт-менеджер, который совмещает простоту Redux с мощью реактивных систем. Вместо привычных редьюсеров здесь работают атомы — изолированные кусочки состояния с автоматической подпиской на изменения.

При этом под капотом у инструмента всего три базовые сущности: контекст, атомы и действия. При этом система поддерживает сложные асинхронные сценарии, кеширование и отмену запросов. Разработчики обещают идеальную типизацию и вес всего 2 КБ в сжатом виде.

🤖 GitHub

@react_tg

🔥 Nhost — свежий взгляд на backend-разработку с открытым исходным кодом. Этот проект предлагает готовую облачную платформу или возможность самому развернуть альтернативу Firebase, но с GraphQL и PostgreSQL под капотом. Вместо NoSQL — привычный SQL, вместо REST — мощный GraphQL API на базе Hasura, а также встроенные аутентификация, хранилище и serverless-функции.

При этом Nhost не привязывает разработчика к конкретному фронтенд-фреймворку. Один и тот же SDK работает с React, Vue, Next.js и даже Flutter. Локальная разработка упрощена благодаря CLI, а для продакшна можно выбрать как managed-решение от создателей, так и развернуть всё на своих серверах через Docker.

🤖 GitHub

@react_tg

🧩 Masonic — React-библиотека для создания высокопроизводительных masonry-гридов с виртуализацией. Основана на react-virtualized, но предлагает более гибкий API и автоматическую адаптацию под размеры контейнера.

Библиотека экспортирует не только готовый компонент, но и низкоуровневые хуки (useMasonry, usePositioner), позволяя кастомизировать поведение. Поддерживает TypeScript и оптимизирована для работы с тысячами элементов.

🤖 GitHub

@react_tg