This media is not supported in your browser
VIEW IN TELEGRAM
В отличие от традиционных инструментов завершения кода, которые полагаются на предопределённые шаблоны и ключевые слова, GitHub Copilot идёт на шаг дальше, понимая цель кода и генерируя контекстуально подходящие предложения. Он основан на обширном репозитории фрагментов кода, библиотек и шаблонов программирования, доступных на GitHub, что делает его ценным ресурсом для разработчиков в различных областях и языках программирования.
В статье автор делится такими 3 плюсами от использования Copilot:
В целом, плюсы очевидны, но статью можно глянуть в первую очередь ради конкретных кейсов использования Copilot
@react_tg
Please open Telegram to view this post
VIEW IN TELEGRAM
👍20🔥4❤3🥱1😈1
Если вы изо всех сил пытались разобраться в
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
Please open Telegram to view this post
VIEW IN TELEGRAM
👍20❤5🔥4
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
Поддерживаемые стэки: HTML + Tailwind, React + Tailwind, Vue + Tailwind, Bootstrap, Ionic + Tailwind и SVG.
@react_tg
👍24🔥5❤4
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
Это обширная коллекция компонентов, которые совместимы с Tailwind CSS и React. Просто выберите необходимый элемент из большой библиотеки шаблонов, перетащите его на рабочее пространство и настройте под свои потребности. В проекте также имеется встроенный искусственный интеллект.
Основной функционал инструмента предоставляется бесплатно, однако также имеются платные возможности.
🖇 Github
@react_tg
👍16❤5🔥5
Проблема возникает, когда нужно вывести очень большой набор данных, да еще и без пагинации. Это приведет к загрязнению 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
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👍10❤4🔥4🥱2
Здесь сфокусируемся на архитектуре front-end приложения
@react_tg
Please open Telegram to view this post
VIEW IN TELEGRAM
👍22❤4🔥3
🔥 Beautiful icon library, made for creativity.
- Более 27 000 красивых иконок для разработчиков
- Более 3800 бесплатных иконок для коммерческого использования
- Доступны npm, SVG, React и React Native
→ http://hugeicons.com
@react_tg
- Более 27 000 красивых иконок для разработчиков
- Более 3800 бесплатных иконок для коммерческого использования
- Доступны npm, SVG, React и React Native
→ http://hugeicons.com
@react_tg
🔥15❤6👍6
action
для формы, новые хуки, серверные компоненты и серверные действия, метаданные страницы и предзагрузка ресурсов из коробки. Из нового — для передачи ref
больше не нужно использовать forwardRef
, обновлённое API контекстов и продвинутая поддержка таблиц стилей.@react_tg
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥25❤4👍2