React JS

🖥 Виртуальная прокрутка в React: реализация с нуля

⏩Сколько раз вы сталкивались с ситуацией, когда в веб-приложении необходимо вывести список элементов?
Проблема возникает, когда нужно вывести очень большой набор данных, да еще и без пагинации. Это приведет к загрязнению DOM и займет много памяти браузера, что приведет к проблемам с производительностью.

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

Держите полезную статью, где пошагово реализуется виртуальная прокрутка в React

📎 Читать
📎 А вот демонстрация этой прокрутки

@react_tg

🚀 MightyMeld — уже готовых к работе веб-компонентов.

Это обширная коллекция компонентов, которые совместимы с Tailwind CSS и React. Просто выберите необходимый элемент из большой библиотеки шаблонов, перетащите его на рабочее пространство и настройте под свои потребности. В проекте также имеется встроенный искусственный интеллект.

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

🖇 Github

@react_tg

🖥 Порядок создания сайта на React

Держите очень практическое руководство, самое то для тех, кто всё хочет создать свой пет-проект, но не знает, с чего начать
Enjoy)

📎 Туториал

@react_tg

🌟 Screenshot to Code — крутой инструмент для конвертирования скринов, Figma-шаблонов и мокапов в чистый код

Поддерживаемые стэки: HTML + Tailwind, React + Tailwind, Vue + Tailwind, Bootstrap, Ionic + Tailwind и SVG.

@react_tg

🖥 Слои типичного React-приложения

1. Сам React (архитектура, компоненты, хуки, эвенты, стилизация, статические данные, HTML/CSS/JS)

2. Типизация React-приложения (TypeScript)

3. Стейт-менеджер (Redux toolkit)

4. Взаимодействие с API и обработка данных (URL, axios, апи-сервисы, логин, CRUD, localStorage, cookies, динамические данные и т.д.)

5. Сборка и экосистема (create-react-app, react-script, NextJS, Webpack, Parcel, npm-пакеты, env, линтеры, форматтеры, тестеры и т.д.)

6. UI-фреймворк для React (Material UI, bootstrap и т.д.)

7. Backend для React-приложения (сервер, SSR, бекенд-код, DB и т.д.)

8. Деплой приложения на тестовый и продакшн-серверы

Архитектура React-приложения
— components/ - переиспользуемые компоненты
— utils/ - переиспользуемые утилиты
— consts/ или constants/- переиспользуемые константы
— store/ - Redux, mobx
— routes/, pages/ или containers/- страницы приложения
— styles/ - статичные стили
— api/ - взаимодействие с API
— static/ или assets/ - статичные файлы (изображения, шрифты, иконки и пр.)
— types/ или interfaces/ - файлы переиспользуемой типизации

📎 Подробнее

@react_tg

💡Легкий способ получения скриншотов во время загрузки и фильтрации запросов в Chrome dev tools: на заметку фронтенд-разработчику

#css #tip #frontend

@react_tg

🖥 Понимаем полностью useMemo и useCallback

Если вы изо всех сил пытались разобраться в useMemo и useCallback, вы не одиноки. Есть ненулевое количество разработчиков React, которые cломали голову над этими 2 хуками.

Так что держите полезную статью, которая призвана помочь разобраться в путанице.
Вот некоторые факты из статьи:

⏩React.memo и useMemo помогают оптимизировать производительность компонентов; в частности useMemo запоминает результат дорогостоящих вычислений и предотвращает ненужные повторные рендеры.

⏩Имеется проблема: чистые компоненты часто перерисовываются даже при отсутствии изменений; useMemo решает эту проблему, сохраняя ссылки на массивы и объекты.

⏩useCallback аналогичен useMemo для функций, позволяя запоминать функции колбэков.

⏩Рекомендуется использовать хуки useMemo и useCallback только при необходимости для оптимизации производительности.

📎 Статья

@react_tg

🖥 Топ-3 причины, почему вы должны использовать Copilot в работе с React и не только

В отличие от традиционных инструментов завершения кода, которые полагаются на предопределённые шаблоны и ключевые слова, GitHub Copilot идёт на шаг дальше, понимая цель кода и генерируя контекстуально подходящие предложения. Он основан на обширном репозитории фрагментов кода, библиотек и шаблонов программирования, доступных на GitHub, что делает его ценным ресурсом для разработчиков в различных областях и языках программирования.

В статье автор делится такими 3 плюсами от использования Copilot:

⏩Улучшение качества кода. Copilot предлагает рекомендации и варианты кода на основе переданного контекста, что помогает предотвратить ошибки и соблюдать практики программирования.

⏩Увеличение продуктивности. С Copilot разработчики могут сосредоточиться на более творческих и стратегических задачах, вместо того чтобы тратить время на рутинную работу.

⏩Обучение и рост. Использование Copilot также может стать отличным инструментом для обучения новичков в области программирования. Путём изучения рекомендаций и генерируемого кода они могут улучшить свои навыки и расширить свой опыт.

В целом, плюсы очевидны, но статью можно глянуть в первую очередь ради конкретных кейсов использования Copilot

📎 Статья

@react_tg

🔥 Большая подборка вопросов по React и смежных технологиях для подготовки к собеседованию

Здесь аж 120+ вопросов и ответов, что покрывает наверное 99% того, о чём могут спросить
Пользуйтесь)

Вот некоторые из вопросов:
• Тестирование в React
• Разница Zustand и Redux?
• Что такое Redux-Saga?
• Командный интерфейс Gatsby CLI
• Что такое Tailwind CSS?
• Преимущества и недостатки Next.js над React
• Основные принципы Redux
• Каков смысл функции getStaticProps в Next.js?

📎 Вопросы-ответы

@react_tg

🌟 Анатомия HTMX

Держите полезную статью)
⏩По данным 2023 JavaScript Rising Stars библиотека htmx заняла 2 место в разделе Front-end Frameworks (1 место вполне ожидаемо принадлежит React) и десятое место в разделе Most Popular Projects Overall.

⏩htmx — это библиотека, которая предоставляет доступ к AJAX, переходам CSS, WebSockets и Server Sent Events прямо из HTML через атрибуты, что позволяет создавать современные пользовательские интерфейсы (насколько сложные — другой вопрос), пользуясь простотой и мощью гипертекста. На сегодняшний день у библиотеки почти 30 000 звезд на Github. Удивительно, что до такого решения додумались только сейчас, учитывая, что весь функционал был доступен уже 10 лет назад (вы сами убедитесь в этом, когда изучите исходный код htmx).

И в этой статье разбирается, как htmx работает, рекомендую
📎 Статья

@react_tg

🖥 100 вопросов по React для подготовки к собеседованию

Держите отличную подборку вопросов, здесь покрываются основные темы React:

Основы React.
— JSX (JavaScript XML)
— Компоненты и их жизненный цикл.
— Пропсы (props) и состояние (state).
— События и обработчики событий.

Компоненты и их типы
— Функциональные компоненты.
— Классовые компоненты.
— Хук состояния (useState).
— Хук эффекта (useEffect).
— Хук контекста (useContext).

Роутинг
— React Router — библиотека для маршрутизации в React-приложениях.
— Создание маршрутов и навигация.
— Пропсы маршрутов и параметры URL.

Состояние приложения
— Redux — библиотека для управления состоянием приложения.
— Создание хранилища (store), действий (actions) и редукторов (reducers).
— Middleware и асинхронные действия.

Взаимодействие с API
— Fetch API для выполнения HTTP-запросов.
— Axios — библиотека для выполнения HTTP-запросов.
— Работа с асинхронными запросами и обработка ошибок.

...и остальные темы

📎 100 вопросов

@react_tg