🖥 Топ-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

🖥 Авторизация в React — базовые сведения

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

🟡Для того, чтобы сделать функционал авторизации нужно иметь back-end приложение с API, при вызове которого мы будем получать информацию о том, что пользователь прошёл авторизацию. И front-end приложение, которое будет запрашивать API.
Здесь сфокусируемся на архитектуре front-end приложения

🔜 Поехали

@react_tg

🖥 Вышел React 19 beta

🟡Команда React.js вовсю готовится к предстоящей конференции и видимо именно на ней они представят React 19. На сайте уже была опубликована страница релиза.

🟡В релизе всё то, о чём рассказывала команда Next.js — action для формы, новые хуки, серверные компоненты и серверные действия, метаданные страницы и предзагрузка ресурсов из коробки. Из нового — для передачи ref больше не нужно использовать forwardRef, обновлённое API контекстов и продвинутая поддержка таблиц стилей.

🟡Вместе с релизом был опубликован и гайд на обновление до 19 версии для библиотек. В гайде можно отметить значительные удаления функционала помеченного в последние годы как устаревший.

@react_tg