React JS

erid: LjN8KPnH8 Каждый день мы просыпаемся и идём к компьютеру писать код. Но новогодние праздники — отличный повод отвлечься и показать, чему вы научились за год. Поэтому мы  запускаем телеграм-игру «Код сурка», чтобы вы могли блеснуть знаниями в веб-разработке и получить за это ценные призы. Забрать их легко — достаточно отвечать на вопросы о веб-разработке (их будет аж 1200) и набирать баллы за правильные ответы. Чем выше вы вскарабкаетесь в рейтинге — тем круче призы. К слову: разыграем профессию на выбор победителя, 2 «инженерии», 7 курсов по вёрстке и JavaScript, 20 безлимитных доступов к тренажёрам на месяц и 70 доступов к тренажёрам на неделю. Ну и самое приятное — все участники акции смогут легко получить безлимитный доступ к тренажёрам Академии на время игры, а после игры — скидки и бонусы. Присоединяйтесь, и пусть каникулы не проходят зря. Реклама. ООО "ИНТЕРАКТИВНЫЕ ОБУЧАЮЩИЕ ТЕХНОЛОГИИ". ИНН 7807382880.

Чистая архитектура фронтенда В этой статье речь пойдет об архитектуре фронтенда, проектирование которой подчиняется множеству принципов, в том числе SOLID, KISS, DRY и DDD. В чем важность архитектуры фронтенда? Функциональные и нефункциональные требования должны применяться не только к бэкенду, но и к фронтенду. Именно архитектура фронтенда позволяет полностью реализовать потребности бизнеса. Кроме того, она дает более четкое представление о сложности проектов, тем самым сокращая время их создания, риски и стоимость. Однако, на мой взгляд, наибольшая ценность фронтенд-архитектуры заключается в том, что она обеспечивает поддерживаемость и масштабируемость любого проекта. Что представляет собой архитектура фронтенда? 📌 Читать

Совет React: используйте пользовательский хук для обработки состояний массива в ваших компонентах ↓ @react_tg

⚛️ Я не слишком беспокоюсь о повторных рендерах в React. (если только я не вижу проблем с производительностью). Однако мне важно понимать, как работает процесс рендеринга. @react_tg

🔥 Дайджест полезных материалов из мира React за неделю Почитать: — Многооконное веб приложение — решение для перегруженных интерфейсов — Как мы отказались от styled-components в React Native приложениях — Билдер Vue 3 веб приложений — 8 бесплатных курсов по большим языковым моделям — Современные варианты баз данных — Typescript: лучшие практики — Архитектура серверного рендеринга для SPA — Интересные трюки HTML. Экстремальный минимализм — Как сгенерировать безопасный, типизированный Node.js API с использованием Prisma, TypeGraphQL и graphql-query-purifier — Unveiling the Unparalleled Style: Essentials Hoodie Collection by Fear of God — Animated 3D text with bubble background using html,css — Reinforcing my ReactJS Knowledge — Solid.js vs React: Which is Better in 2024? — Yes! There’s a Technology that’s Faster than React! — Resolving React Hook Error and Building a Simple Todo List Page — Uncovering the React Universe: The Starter Guide — Mastering useState: A Guide to Avoiding Common Pitfalls in React Development — Mastering React Performance: In-Depth Guide to useCallback and useMemo. 🚀 — 3 Things I Learned by Building a Portfolio Website Посмотреть: 🌐 Ollama — модель уровня GPT. Используй GPT без ограничений и абсолютно бесплатно. 🌐 Refactoring a React component - Design Patterns 🌐React Zero to Hero (5 Days) 🌐 WTF Do These Even Mean (⏱ 13:44) 🌐 This New Tailwind Feature Is A Game Changer (⏱ 00:59) Хорошего дня! @react_tg

🖥 Представляем Million.js 3.0! Million.js - это чрезвычайно быстрый и легкий (<4 кб) виртуальный DOM, который позволяет ускорить работу компонентов React на 70 %. Сделайте React быстрее⚡️. ▪Github ▪Документация @react_tg

После 3-х месяцев обучения вы научитесь пользоваться библиотекой React, использовать Type-скрипт и тестировать веб-приложения с помощью юнит-тестов и cypress. → Начните учиться бесплатно

🖥 Полезные сайты, на которых вы можете попрактиковаться в использовании JavaScript: 1. Codewars http://codewars.com 2. JS challenger http://jschallenger.com 3. W3resource https://w3resource.com/javascript-exercises/ 4. Герой JS https://jshero.net/en/koans/var.html 5. Edabit http://edabit.com/practice @react_tg

🖥 Compound components - это подход, в котором вы объединяете несколько компонентов одной общей сущностью и общим состоянием. Отдельно от этой сущности вы их использовать не можете, тк они являются единым целым. Это как в BEM нельзя использовать E - элемент, отдельно от B - блока. На гифке пример, как вы можете использовать этот паттерн, чтобы сделать свои компоненты открытыми для расширения и закрытыми для модификации. @react_tg

🔥🔥 Вышел Redux Toolkit 2.0!!!🔥🔥 В свежей версии добавлены новые возможности, ускорена работа, уменьшен размер пакета и удалены устаревшие опции. Она сопровождается обновлениями для всех наших пакетов семейства Redux. https://github.com/reduxjs/redux-toolkit/releases/tag/v2.0.0 @react_tg

Действительно хороший вариант кнопки, никогда не видел ничего подобного. Даже немного поиграл с ней 😅. http://rive.app @react_tg

🖥 Сайты вы найдете сниппеты кода Javascript: ➽ javascripting - http://javascripting.com ➽ codepen - http://codepen.io ➽ codemyui - http://codemyui.com ➽ jsfiddle - http://jsfiddle.net ➽ jsbin - http://jsbin.com ➽ 30secondsofcode - http://30secondsofcode.org/js/p/1/ ➽ freefrontend - http://freefrontend.com ➽ snippit - http://snippit.io ➽ codesandbox - http://codesandbox.io ➽ glitch - http://glitch.com ➽ tabnine - http://tabnine.com ➽ github - http://github.com @react_tg

Верстаешь? Оцени 7 причин пройти наш бесплатный интенсив по Frontend-разработке: 1. Сверстаешь веб-сайт на HTML + CSS; 2. Оживишь страницу с помощью JavaScript; 3. Используешь фронтенд-фреймворк Angular; 4. Подключишь Backend и загрузишь сайт на хостинг; 5. Получишь советы по доработке своего проекта; 6. Добавишь в портфолио 1 качественный проект; 7. Получишь в подарок чек-лист «45 мест для поиска работы». А главное, ты проведёшь 7 дней в приятной компании Fullstack-разработчика с 10-летним стажем – Романа Чернова. 👉 Проскочить на интенсив бесплатно Начинаем 6 декабря.

⚡️ 10 сайтов для отработки навыков работы с фронтендом: 1. Frontend Mentor http://frontendmentor.io 2. Codewars http://codewars.com 3. Codewell http://codewell.cc 4. JavaScript30 http://javascript30.com 5. Кодербайт http://coderbyte.com 6. CSS Battle http://cssbattle.dev 7. FreeCodeCamp http://freecodecamp.org/learn/ 8. Frontend Practice http://frontendpractice.com 9. Задачи CodePen http://codepen.io/challenges/?re 10. Dev Challenges http://devchallenges.io @react_tg

⭐️Совет по CSS!⭐️ Для создания инвертированного эффекта :hover вы можете использовать режим mix-blend-mode с настраиваемыми свойствами :hover.

button > span {
  left: calc(var(--x, 0) * 1px);
  top: calc(var(--y, 0) * 1px);
  mix-blend-mode: difference; 
}

Классная фишка в том, что использование режима mix-blend-mode действует как инвертор цвета, что хорошо работает с монохромными элементами управления. Что касается того, как переместить этот код в JavaScript?

const UPDATE = ({target, x, y }) => {
  const bounds = target.getBoundingClientRect()
  target .style.setProperty('--x', x - bounds.left)
  target .style.setProperty('--y', y - bounds .top)
}

const BTNS = document.querySelectorAll('button')
BTNS.forEach(BTN => BTN.addEventListener('pointermove', UPDATE))

button:is(:hover, :focus-visible) { --active: 1; } button span { transform: translate(-50%, -50%) scale(calc(var(--active, 0) * 3); transition: transform 0.25s; } @react_tg

🏆 Stagger Cube — вращающийся куб с анимацией расширения-уменьшения квадратиков в каждой из сторон. Реализована с помощью CSS и JavaScript https://codepen.io/hexagoncircle/pen/qBdEGrj @react_tg

Чёрная Пятница в Практикуме заканчивается 30 ноября. Выберите любой курс до 30.11 и учитесь на 20% дешевле. → Выбрать курс

💡 Нашел новое место для вдохновения дизайном сайтов. Сайт → http://seesaw.website @react_tg

🔴Проблема: Необходимо создать постоянно обновляемый диалог на React, который сам управляет своей видимостью. 🟢Решение: Создайте компонент DialogButton, который управляет видимостью диалога. Не нужно объявлять и управлять состоянием для каждого экземпляра диалога. 📌Dev @react_tg

Что происходит, когда вы вводите в браузер URL-адрес? Давайте рассмотрим этот процесс пошагово: 1️⃣ Пользователь вводит в браузер URL и нажимает Enter. Первое, что нам нужно сделать, это преобразовать URL в IP-адрес. Браузер ищет IP-адрес в нескольких уровнях кэша. 2️⃣ Если IP-адрес не удается найти ни в одном из кэшей, браузер обращается к DNS-серверам для выполнения рекурсивного DNS-поиска, пока IP-адрес не будет найден. 3️⃣ Теперь, когда у нас есть IP-адрес сервера, браузер посылает на него HTTP-запрос. Для безопасного доступа к ресурсам сервера всегда следует использовать протокол HTTPS. Сначала браузер устанавливает TCP-соединение с сервером с помощью трехстороннего рукопожатия TCP. 4️⃣ Сервер обрабатывает запрос и отправляет ответ. Ответ состоит из 3 частей: HTML, CSS и Javascript. Браузер анализирует HTML и формирует дерево DOM. Он также анализирует CSS и генерирует дерево CSSOM. Затем он объединяет дерево DOM и дерево CSSOM в дерево рендеринга. Браузер отображает содержимое пользователю. @react_tg