🌟 Анатомия 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

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

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

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

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

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

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

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

📎 Статья

@react_tg

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

#css #tip #frontend

@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