React JS

Полезная библиотека для понимания работы JS js2flowchart — библиотека визуализации для преобразования любого кода JavaScript в красивую блок-схему SVG. Вы можете изучать чужой код, делать рефакторинг или писать документацию, не путаясь в функциональности. А начинающим — неплохая шпаргалка по foo, while, if: https://github.com/Bogdan-Lyashenko/js-code-to-svg-flowchart #js

ChatGPT уже сейчас разделил жизнь многих людей на «До» и «После». Для фронтенда ИИ может генерировать код, исправлять ошибки, улучшать удобство сайта и давать персональные рекомендации. Обсудим возможности ИИ для фронтенда на бесплатном вебинаре, который проведут тимлиды из ВКонтакте и Frogly (Chrome Extension) В итоге вы на практических примерах узнаете, как использовать ChatGPT для ускорения фронтенд-разработки, а также поймёте насколько опасен (и опасен ли?) ChatGPT для карьеры. Встречаемся 12 апреля в 19:00 (по Москве) в прямом эфире. Регистрируйтесь по ссылке

​React Spectrum — создание компонентов нового поколения При переиспользовании компонентов или создании новых на основе старых нам необходимо каждый раз заново разбираться в.логике кода Это неудобно. Согласны? Решением этой проблемы является React Spectrum от компании Adobe. Это библиотека, в которой логика для создания компонентов уже написана за вас. Вам необходимо только импортировать её к себе в проект и добавить кастомных стилей. В этой статье вы можете посмотреть, как работает эта библиотека, а также познакомиться с аналогами: https://habr.com/ru/articles/718000/ #react #фронтенд

⚡️Команда Microsoft выпустила новую версию Teams Архитектура Teams теперь включает Fluent UI, WebView2 вместо Electron и React вместо Angular. Подробнее

React Labs: над чем работает команда React — март 2023 г. 1️⃣ React Server Components 2️⃣ Asset Loading 3️⃣ Static Server Rendering Optimizations 4️⃣ React Optimizing Compiler 5️⃣ Offscreen Rendering 6️⃣ Transition Tracing Читать

​Креативное оформление списков Мы очень часто используем списки, чтобы структурировать различную информацию. В этой статье вы найдёте подборку интересных вариантов оформления списков, которые вы можете использовать у себя на сайте, а также рассмотрите в каком случае будет наиболее удобен тот или иной вид списка: https://web.dev/creative-list-styling/

​3 полезных ресурса для веб-разработки 1. Compressor.io — веб-приложение, которое уменьшает размер изображения без потери качества. 2. MockFlow — онлайн-инструмент для создания макетов и прототипов веб-сайтов и мобильных приложений. Не требует установки и прост в использовании: просто перетащите нужные формы и элементы на доску, а затем настройте их. 3. Flatiron — одна из крупнейших библиотек иконок для проектов. #веб

В новой документации React нет create-react-app. Это, мягко говоря, вызывает у многих недоумение. Начать новый проект React теперь рекомендуется с помощью одного из популярных в сообществе фреймворков на базе React. Robin Wieruch вот предлагает свой взгляд на то, как начать проект React в 2023 году.👇 https://www.robinwieruch.de/react-starter/

Видеоруководство по работе с React 18 + Redux Toolkit: 14 часов убойного кодинга для начинающих от freeCodeCamp. 📺 Смотреть

Наглядные примеры использования React Hooks В этой статье вы узнаете различные особенности React Hooks и получите полезные советы по их использованию. Автор объясняет, как работать с хуками жизненного цикла, кастомными хуками и хуками контекста, а также как обрабатывать ошибки в хуках на наглядных примерах с кодом. https://css-tricks.com/react-hooks-the-deep-cuts/ #react #фронтенд @react_tg

⚡Команда React представила новый сайт с документацией ⬇️ 🗄 Новый сайт обучает современному React с функциональными компонентами и хуками 🗄 Вас ждут новые диаграммы, иллюстрации, задачи и более 600 новых интерактивных примеров

DevSamples — полезная коллекции чужого кода С её помощью вы можете найти кусок, который будет полезен именно вам в вашем проекте — его можно свободно скопировать и вставить Основное внимание сервис уделяет исходным кодам для веб-разработчиков Стоимость: #бесплатно #web #css #шпаргалка

Сборник шпаргалок для фронтенд-разработчика В этих шпаргалках собраны не просто методы, функции и базовый синтексис, но и их подробное объяснение с примерами. — Шпаргалка по тегам HTML5 — Шпаргалка по методам JavaScript для работы с DOM — Шпаргалка по работе с медиа в браузере — Шпаргалка по HTTP-заголовкам, связанным с безопасностью — Шпаргалка по доступности веб-приложений — Шпаргалка по Internationalization API — Шпаргалка по Temporal API и Dayjs Сохраняйте себе в закладки, чтобы не потерять. #js #html #фронтенд

Java — один из самых популярных языков программирования. Он универсален и выступает основой всех типов сетевых приложений. Специалисты, работающие с этим языком, востребованы на рынке. Если хотите к ним присоединиться, участвуйте в бесплатном тематическом онлайн-интенсиве. Узнайте подробности: 👉 https://epic.st/KXdyBQ Сразу после регистрации отправим вам на почту гайд по профессии Java-разработчика: из него вы узнаете, сложно ли изучить Java, сколько зарабатывают специалисты и как начать карьеру в этой сфере. 📌 Никакой скучной теории — только самый интересный материал и мощная практика. За 3 дня вы примерите на себя профессию Java-разработчика и поймёте, в каком направлении двигаться дальше. 📌 Спикером выступит директор центра подбора IT-специалистов SymbioWay Даниил Пилипенко. Он поделится секретами профессии и лайфхаками, расскажет, как найти первого заказчика. 🎁 Всех ждут подарки. Участвуйте, задавайте вопросы и получите сертификат на скидку 10 000 рублей на любой курс Skillbox. Присоединяйтесь к онлайн-интенсиву с 23 по 25 марта в 19:00 по московскому времени.

​6 проектов на ReactJS для начинающих В этом видеоуроке подробно разбирается, как создать простые проекты уровня Junior, а именно: — счётчик, — модальное окно, — простой опросник, — конвертер валют, — коллекция фотографий, — список пользователей. Ссылка на видео: https://youtu.be/eS0GL73tkmw #reactjs

​Выбор CSS макета: Grid или Flexbox? В целом Grid и Flex решают одни и те же задачи при разработке макета, но между ними всё же есть отличия: — Flexbox является популярной системой вёрстки, но она одномерна: разработчики могут работать только со столбцами или строками. — CSS Grid считается двумерной системой компоновки, с помощью которой можно передвигать элементы между строками и рядами. Однако для более удобной вёрстки сайта можно совмещать оба модуля и использовать гриды только для каркаса сайта, а флексы — для контента. Источник: https://odva.pro/blog/flex_or_grid/ #web #css

React — самая популярная библиотека для фронтенд-разработки. А ещё это стабильный фреймфорк, который легко поддерживать, поэтому на нём пишут большие популярные веб-приложения. Если вы ищете новую интересную работу в IT или мечтаете о повышении, то вам подойдет курс Яндекс Практикума «React-разработчик». Курс длится всего 3 месяца, но за это время мы научим вас: • уверенно разбираться в библиотеке React; • использовать TypeScript при разработке React-приложений; • тестировать веб-приложения с помощью юнит-тестов и cypress. Учёбе нужно будет уделять 20-25 часов в неделю. Обучение разбито на спринты, заниматься можно когда угодно, главное — уложиться в дедлайн. На всех этапах вас будут сопровождать опытные разработчики: мы не дадим просесть по учёбе и поможем выкроить время на образование. Вы будете практиковаться на реальных кейсах и положите в портфолио работающие проекты. А карьерные консультации подготовят вас к разговору о повышении или помогут с поиском новой работы.  Записаться на курс можно здесь: https://practicum.yandex.ru/react/

​Zustand как альтернатива Redux Управление состоянием в React за последнее время значительно меняется. Одни перешли на Redux, другие — используют сторонние библиотеки, например: Zustand или Recoil. Библиотека Zustand была разработана создателями Jotai и React-spring и позволяет легко управлять состоянием приложения, не усложняя разработку обилием кода. В этом видео рассматривается, что такое Zustand, работа с этой библиотекой и оптимизация рендера компонентов: https://youtu.be/l6WDSN-_HSI #фронтенд

​Популярные инструменты и библиотеки веб-разработки Автор собрал все известные графические ресурсы, React UI и Vue UI библиотеки, шаблоны HTML, CSS и многое другое в одном Notion файле. Вам нужно только выбрать категорию. Например, если вы забывали, где найти бесплатные шрифты, то здесь собрано 37 полезных ресурсов для любого проекта: https://surffers.notion.site/surffers/The-Best-Web-Development-Tools-2cf90734ead54d748edaf706120728d8 #web

​Создаём приложение для чата с помощью ReactJS и Firebase Небольшое приложение со входом в аккаунт через учётную запись Google с помощью Firebase Authentication (SDK). Это инструмент Firebase, который поддерживает различные методы аутентификации, такие как пароли, номера телефонов, Google, Facebook, Twitter, GitHub и другие. Все сообщения из чата пользователя хранятся в облаке Firestore. Cloud Firestore сохраняет данные в документах в виде пар ключ-значение. В этой статье вы найдёте пошаговое руководство, как настроить проект в Firebase и React, и создадите полноценное приложение для чата: https://www.freecodecamp.org/news/building-a-real-time-chat-app-with-reactjs-and-firebase/ #react