Джентльменский набор React компонентов FullStack разработчика

Существует токсичный стереотип, что FullStack разработчики не могут ни в фронт, ни в бек. Как минимум, так как объем работ большой, часто, программирование фронта на React превращается в формошлепство с сомнительным качеством кода. Код копируется без создания компонентов, нет глобального состояния приложения.
В этой статье рассмотрим примеры использования нескольких компонентов, которые позволят малой кровью выкатить фичу на тестовый стенд так, чтобы код, загружающий данные с сервера, легко поддавался рефакторингу в недалеком будущем.

👉 @sWebDev

Онлайн-митап «Асинхронный рендеринг в React 18 и принципы практичного рефакторинга»

⏰ Дата и время: 24 августа, 14:00 (по МСК)

Программа митапа:

🎙Рефакторинг. Как поджечь свой велосипед и не пожалеть об этом?
Рассмотрим проблему техдолга под разными углами, поговорим о том, что учитывать и какие практики использовать, чтобы обойти подводные камни, уменьшить риски и держать ситуацию под контролем, обсудим какие аргументы уместно предоставить менеджеру, чтобы развеять его опасения.

🎙Чудеса асинхронного рендеринга
Рассмотрим под лупой асинхронный рендеринг в React - проведем краткий экскурс в его историю, путь становления от экспериментальной фичи до полноценного появления в React 18, посмотрим на текущее состояние, что его ждет в светлом будущем и причем тут fiber.

👉 Подключайтесь, смотрите и задавайте вопросы спикерам. Участие бесплатное, нужно только зарегистрироваться.

До встречи 🔥

boop! Необычные эффекты по ховеру или введение в React-Spring

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

👉 @sWebDev

Вещи, которые полезно знать о React.js

Большинство вещей, которые рассмотрим в этой статье, вы можете узнать из документации React. Но статистика собеседований говорит о том, что многие разработчики не знают о них по каким-то причинам, может просто не вчитывались внимательно или этому не уделено достаточного внимания в самой документации. Статья поможет понять React лучше и более осознанно использовать те или иные инструменты в работе. Так же это будет полезно тем, кто хочет подготовиться к собеседованию и не ударить в грязь лицом.

👉 @sWebDev

Star Rating виджет на React.js

В этой статье рассмотрим еще одну задачу, с которой вы можете столкнуться на собеседовании на позицию Front-End — создание Star Rating виджета.

👉 @sWebDev

Примеры синтаксиса популярных JS-фреймворков

По ссылке обзор синтаксиса популярных и набирающих популярность JavaScript-фреймворков.

👉 @sWebDev

Библиотека Ethers.js: новичкам на заметку

Ethers.js и web3.js — это две библиотеки JavaScript с открытым исходным кодом, которые позволяют разработчикам взаимодействовать с блокчейном Ethereum и выполнять разные задачи. В статье мы внимательно изучим ethers.js, которую создал и поддерживает канадский разработчик Rick Moore (Рик Мур). На данный момент она насчитывает 14 участников разработки. У библиотеки небольшой пакет установки, она протестирована, задокументирована и отлично обслуживается.

👉 @sWebDev

Рекурсивные компоненты во Vue

По ссылке разбираемся с рекурсивными компонентами Vue и рендерим вложенные комментарии.

👉 @sWebDev

Найди ошибку в React-компоненте: Функциональное Карри

В этом выпуске «Найди ошибку» у нас есть простой React компонент-переключатель, который переключается между активным и неактивным состояниями при нажатии. Однако он не работает как ожидается. Найдите ошибку. Сверяйте ваш ответ с детальным анализом ошибки по ссылке.

👉 @sWebDev

🔴 Для тех кто ответил: присматриваюсь

Есть вариант быстро стартануть карьеру и начать зарабатывать от 60к меньше чем через год

Вот самый полный курс по фронту на сегодня:

Профессия Frontend-разработчик с нуля до PRO

А вот причины почему надо идти:

📌 Сезонная скидка на курс - 50%
📌 Гарантируют трудоустройство
📌 Первые полгода вы учитесь бесплатно

Next.js

Фреймворк Next.js от Vercel. Интуитивно понятная архитектура маршрутизации на основе каталогов и встроенных функций извлечения данных с возможностями серверного рендеринга до функционала Fast Refresh, с которым пропадает необходимость в системах сборки для «живой перезагрузки», — в Next.js создается по-настоящему интегрированный, мощный процесс разработки полного цикла. Узнать все подробности можно по ссылке.

👉 @sWebDev

Загрузочный скелет страницы на React

Думаю, многие видели функционал загрузочного скелета, который заключается в том, что страница еще не прогрузилась, а мы уже видим деление и расположение элементов. В данной статье узнаем, как сделать такой функционал на React.

👉 @sWebDev

Nexus — новый визуализатор дерева компонентов для Next.js

Занимаясь поисками инструментов специально для разработчиков Next.js, мы подбирали стороннее расширение VS Code, структурированное под уникальный функционал Next.js, в то же время функционально считаясь с тем, что находится в его основе — библиотекой React. Фактически, мы искали визуализатор дерева компонентов, знакомый разработчикам React, но структурированный подобно приложению на Next.js и дающий детальную информацию об извлечении данных.
Nexus - Это гибкое и легкое расширение VS Code для разработки на Next.js. С Nexus можно просматривать древовидную структуру кодовой базы на Next.js — информация об извлечении соответствующих данных для всех вложенных компонентов будет у вас под рукой.

👉 @sWebDev

Leaflet.js

Библиотека для создания интерактивных карт. Из особенностей:
адаптация под мобильные устройства;
кроссбраузерность;
открытый исходный код;
малый вес;
хорошая документация.

👉 @sWebDev

Яндекс Карты в React Native приложениях

Сейчас при разработке мобильных и веб-приложений Google Карты лучше не использовать. У этого две причины: сервисы Google нельзя оплатить и есть шанс, что их могут заблокировать в России. В текущей ситуации можно попробовать перейти на Яндекс Карты. Команда разработки VVDEV расскажет, как это сделать.

👉 @sWebDev

Лучшие пропсы компонента Vue

В статье рассмотрим практики правильной передачи пропсов компонента vue, которые позволят избежать ненужного повтора в рендеринге.

👉 @sWebDev

Динамические импорты React

В статье разберёмся с динамическим импортами в React, которые позволят увеличить скорость загрузки вашего веб-приложения.

👉 @sWebDev

Спидометр на GSAP.js

Анимация спидометра для вашего веб-приложения. Реализовано с помощью Canvas, SVG и библиотеки GSAP.js.

👉 @sWebDev

Функция промежуточного программного обеспечения Next.js

Благодаря функции промежуточного программного обеспечения Next.js можно создавать функции, которые будут выполняться после сделанного пользователем запроса и до момента его выполнения. Все подробности в материале по ссылке.

👉 @sWebDev

Plotly.js

Библиотека для создания графиков с применением JavaScript. Особенности:
возможность использовать более 40 типов диаграм;
открытый исходный код;
доступна для: JavaScript, Python и т.д.

👉 @sWebDev