React JS
16.3K subscribers
699 photos
104 videos
5 files
808 links
React программирование

@haarrp - admin

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

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

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

@ai_machinelearning_big_data - ml

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

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

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

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

@react_tg
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥18👍10❤5
This media is not supported in your browser
VIEW IN TELEGRAM
🖥 Топ-3 причины, почему вы должны использовать Copilot в работе с React и не только

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

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

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

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

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

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

📎 Статья

@react_tg
Please open Telegram to view this post
VIEW IN TELEGRAM
👍20🔥4❤3🥱1😈1
🖥 Понимаем полностью useMemo и useCallback

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

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

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

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

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

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

📎 Статья

@react_tg
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👍15❤7🔥3🥰1
This media is not supported in your browser
VIEW IN TELEGRAM
💡Легкий способ получения скриншотов во время загрузки и фильтрации запросов в Chrome dev tools: на заметку фронтенд-разработчику

#css #tip #frontend

@react_tg
Please open Telegram to view this post
VIEW IN TELEGRAM
👍20❤5🔥4
🖥 Слои типичного 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
Please open Telegram to view this post
VIEW IN TELEGRAM
👍38🥴7🔥6❤4🤔1🥱1
This media is not supported in your browser
VIEW IN TELEGRAM
🌟 Screenshot to Code — крутой инструмент для конвертирования скринов, Figma-шаблонов и мокапов в чистый код

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

@react_tg
👍24🔥5❤4
🖥 Порядок создания сайта на React

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

📎 Туториал

@react_tg
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👍33❤10🔥5🤔4
🚀 MightyMeld — уже готовых к работе веб-компонентов.

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

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

🖇 Github

@react_tg
👍16❤5🔥5
🖥 Виртуальная прокрутка в React: реализация с нуля

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

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

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

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

@react_tg
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👍25🔥8❤3⚡1🥴1
🖥 Аналог Taplink и Linktree на React JS и Chakra UI

Простое веб-приложение, чтобы собрать все ссылки на свои соцсети в одном месте.
Отличная идея для пет-проекта, можно взять это за основу и улучшить)

📎 YouTube
🖥 GitHub

@react_tg
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👍10❤4🔥4🥱2