React JS

🔥 Большая подборка вопросов по React и смежных технологиях для подготовки к собеседованию Здесь аж 120+ вопросов и ответов, что покрывает наверное 99% того, о чём могут спросить Пользуйтесь) Вот некоторые из вопросов: • Тестирование в React • Разница Zustand и Redux? • Что такое Redux-Saga? • Командный интерфейс Gatsby CLI • Что такое Tailwind CSS? • Преимущества и недостатки Next.js над React • Основные принципы Redux • Каков смысл функции getStaticProps в Next.js? 📎 Вопросы-ответы @react_tg

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

🖥 100 вопросов по React для подготовки к собеседованию Держите отличную подборку вопросов, здесь покрываются основные темы React: Основы React. — JSX (JavaScript XML) — Компоненты и их жизненный цикл. — Пропсы (props) и состояние (state). — События и обработчики событий. Компоненты и их типы — Функциональные компоненты. — Классовые компоненты. — Хук состояния (useState). — Хук эффекта (useEffect). — Хук контекста (useContext). Роутинг — React Router — библиотека для маршрутизации в React-приложениях. — Создание маршрутов и навигация. — Пропсы маршрутов и параметры URL. Состояние приложения — Redux — библиотека для управления состоянием приложения. — Создание хранилища (store), действий (actions) и редукторов (reducers). — Middleware и асинхронные действия. Взаимодействие с API — Fetch API для выполнения HTTP-запросов. — Axios — библиотека для выполнения HTTP-запросов. — Работа с асинхронными запросами и обработка ошибок. ...и остальные темы 📎 100 вопросов @react_tg

🖥 Вопросы с собеседования на фронтенд разработчика React.js Держите отличную подборку 🔥 Здесь собраны самые популярные вопросы, задаваемые на собеседованиях front-end разработчиков на React.js. Тематика вопросов включает в себя как основы JavaScript и веб-технологий так и глубокое понимание работы React.js и смежных технологий (Redux, MobX и прочего). К каждому вопросу приведён подробный ответ в выпадающем меню 📎 Ссылка @react_tg

⚡️ React Morph Clock Оригинальные часы, созданные из svg-картинки на React. #js #react https://codepen.io/Siddharth11/pen/MjjdyW @react_tg

🖥 Как создать локальную среду React с помощью Vite Держите годный контент! В этой статье вы узнаете, как создать локальную среду с помощью Vite, инструмента сборки и сервера разработки, разработанного для быстрой и эффективной работы. ⏩В процессе рассматриваются: — Пошаговые инструкции по созданию проекта Vite — Удаление шаблона по умолчанию — Создание простых компонентов React — Добавление основных стилей CSS. — Развертывание проекта с помощью Netlify (необязательно) — К концу этого руководства у вас будет четкое представление о создании локальной среды React с помощью Vite Уверен, будет полезно, а вот ссылка: 📎 Статья @react_tg

Мы помогаем за 3-6 месяцев накопить реальный 💪 опыт работы, а не преукрашивать его для резюме! 🔥 Основная фишка — тренируешься работать в команде с процессами и требованиями боевого проекта. ЧТО ВНУТРИ? 🔸 5 больших проектов — Погода, личный дневник, квизы, HR-платформа, таск-трекер. 🔸 Спринты и дедлайны — Научишься рассчитывать время и укладываться в сроки. 🔸 Работа с легаси — Исправишь ошибки, оптимизируешь код и сделаешь рефакторинг. 🔸 Пачка код-ревью — Увидишь много вариантов решений и поймешь как сделать свой код лучше. 🔸 Поддержка сообщества — Сможешь задать вопрос и за 5 минут получить ответ. 🔸 Новый стек технологий — Используешь самые популярные технологии, которые применяются в современных проектах. 🔸 Гибкий график — Сможешь легко совмещая тренировку с работой или учебой. 🔸 Полезные стримы — Публичные собеседования, разборы резюме, код-ревью, выступления от участников и обменом опытом. Попробуй первый спринт бесплатно! 🆓 Реклама, ООО «Преакс Плэтформ», ОГРН 1237700372755

🖥 Как создать QR-код по строке и направить его пользователю на скачивание? Вот так звучит реальный кейс, давайте подробнее. ⏩При нажатии на кнопку (onClick событие) должен создаваться QR-код (превью для пользователя не нужно) по строке (рандомно генерирующийся набор символов) и отправляться на скачивание пользователю в виде png-картинки. Как же это можно реализовать? ⏩Например, можно сделать так:

import QRCode from "https://esm.sh/qrcode";

function download(dataurl, filename) {
  const link = document.createElement("a");

  link.href = dataurl;
  link.download = filename;
  link.click();

  document.removeElement(link);
}

QRCode.toDataURL("I am a pony!", function (err, qrCodeImageDataUrl) {
  console.log(qrCodeImageDataUrl);

  download(qrCodeImageDataUrl, "qrcode.png");
});

📎 Затестить, как работает, можно тут @react_tg

🖥 Создание сложного веб-приложения с помощью React JS и Tailwind Держите годный контент) ⏩В этом видео описано создание веб-приложения Brainwave с использованием React и Tailwind CSS. Приложение включает в себя различные элементы, реагирующие на курсор, навигационную панель, градиентные границы, схемы и другие элементы. ⏩Что происходит в видео? 00:04:24 — Настройка 00:22:07 — Header 00:44:28 — Компонент раздела оглавления 01:26:00 — Раздел о преимуществах 01:41:30 — Раздел о сотрудничестве 02:30:35 — Раздел о ценах 02:51:30 — Раздел roadmap 03:05:20 — Footer 03:10:10 — Деплой 📎 Кликабельный план видео 📎 Видео Enjoy) @react_tg

Стать фронтендером в Яндексе за выходные 18–19 мая устраиваем Weekend Offer Frontend: всего за 2 дня можно пройти технические секции и попасть в Яндекс. Для этого нужно зарегистрироваться и решить одну задачу в Контесте. Вы сможете выбрать одну из 13 команд: Поиск, E-com Поиска, Реклама, Бизнес, Cloud, 360, Игры, Умный дом, Путешествия, Аренда, Недвижимость, Авто.ру и Авто.ру Бизнес. Можно пообщаться с нанимающими менеджерами и выбрать самый интересный проект. Если всё пройдёт хорошо, сразу же получите офер. Поможем релоцироваться в пределах РФ, нанимаем в офисы по всей стране. Узнать подробности и зарегистрироваться можно здесь.

🖥 Хук дня — 'use client' ⏩'use client' позволяет отметить, какой код выполняется на клиенте. Добавьте 'use client' в верхней части файла, чтобы отметить модуль и его транзитивные зависимости как клиентский код. ⏩Когда файл, помеченный директивой 'use client', импортируется из серверного компонента, совместимые бандлеры будут рассматривать импорт модуля как границу между кодом, выполняемым на сервере, и кодом, выполняемым на клиенте. ⏩Будучи зависимостями RichTextEditor, formatDate и Button также будут оцениваться на клиенте, независимо от того, содержат ли их модули директиву 'use client'. Обратите внимание, что один модуль может оцениваться на сервере при импорте из серверного кода и на клиенте при импорте из клиентского кода. Некоторые нюансы ⏩'use client' должно находиться в самом начале файла, выше любого импорта или другого кода (комментарии допускаются). Они должны быть написаны с одинарными или двойными кавычками, но не с обратными знаками. ⏩Если модуль 'use client' импортируется из другого клиентского модуля, директива не имеет силы. ⏩Если модуль компонента содержит директиву 'use client', то любое использование этого компонента гарантированно является клиентским компонентом. Однако компонент может быть оценен на клиенте, даже если он не содержит директивы 'use client'. Дополнение: компонент считается клиентским, если он определен в модуле с директивой 'use client' или является транзитивной зависимостью модуля, содержащего директиву 'use client'. В противном случае он является серверным компонентом. ⏩Код, помеченный для использования клиентом, не ограничивается компонентами. Весь код, входящий в поддерево модулей Client, отправляется клиенту и выполняется им. ⏩Когда модуль, работающий с сервером, импортирует значения из модуля 'use client', эти значения должны быть либо компонентами React, либо поддерживаемыми сериализуемыми значениями prop для передачи в клиентский компонент. При любом другом варианте использования будет возникать исключение. 📎 Читать подробнее @react_tg

🖥 Современный подход к разработке с использованием Next.js ⏩Использование традиционных подходов и инструментов разработки приводит к трудностям в достижении эффективной изоляции компонентов. По мере усложнения приложения, управление и повторное использование компонентов в различных проектах становится все более сложной задачей. ⏩Здесь на помощь приходит Bit, предлагая современное и эффективное решение. Bit — это система сборки, предназначенная для создания составного (композитного) программного обеспечения. Используя Bit, вы можете создавать компоненты как независимые фрагменты кода, которые можно совместно использовать и которыми можно обмениваться через удаленный хостинг компонентов. ⏩Именно про Bit в связке с Next.js и говорится в этой статье Ну и про React само собой, рекомендую к прочтению) 📎 Статья @react_tg

🖥 Работа с коллекциями в JSX ⏩В работе с коллекциями элементов в JSX по большей части нет ничего особенного. С другой стороны, задача обработки списков элементов настолько частая, что будет не лишним её обсудить отдельно. ⏩На скрине приведён типичный код, в котором коллекция генерируется прямо в том месте, куда и подставляется. Здесь можно снова увидеть, что внутрь JSX через {} вложено выражение, внутри которого опять появляется JSX-код. Как правило, рекурсия на этом заканчивается. Если нужна более сложная обработка, то имеет смысл вынести генерацию коллекции в метод компонента и вызывать его внутри render. Например, ниже выделена функция renderList(), которая формирует список для отрисовки:

class List extends React.Component {
  renderList = (data) => {
    return data.map(item => <li>{item.name}</li>);
  }

  render() {
    const { data } = this.props;

    return (
      <ul>
        {this.renderList(data)}
      </ul>
    );
  }
}

⏩Проп key Для повышения эффективности, React настоятельно рекомендует идентифицировать каждую генерируемую строку коллекции. Связано это с механизмом, который производит изменения в DOM. Генерируя коллекцию элементов в JSX, нужно обязательно проставлять уникальный проп key, который не меняется при повторной генерации коллекции. ⏩Чаще всего с этой задачей не возникает проблем, так как у любой сущности, с которой мы работаем, есть свой идентификатор (например, primary key из базы данных).

class List extends React.Component {
  render() {
    const { data } = this.props;

    return (
      <ul>
        {data.map((item) => <li key={item.id}>{item.name}</li>)}
      </ul>
    );
  }
}

const items = [
  { name: 'first', id: 1 },
  { name: 'second', id: 2 }
];

const mountNode = document.getElementById('react-root');
const root = ReactDOM.createRoot(mountNode);
root.render(<List data={items} />);

📎 Читать подробнее @react_tg

🖥 React 19 и Forget вводят новый стандарт производительности ⏩Недавно команда React объявила, что их новая разработка — компилятор React (внутреннее название «Forget») — больше не является экспериментальным проектом. Это компилятор, который конвертирует код приложений на React в оптимизированный JavaScript код. За счёт этого достигается автоматическое ускорение работы приложений. ⏩Также разработчики анонсировали React 19 — следующую большую версию популярной библиотеки для создания пользовательских интерфейсов. ⏩В React 19 появятся такие новые возможности как Actions (ранее — Server Actions), Asset Loading и поддержка Web Components. Asset Loading позволит интегрировать загрузку различных ресурсов (стилей, шрифтов, скриптов) с механизмом Suspense. Это даст возможность гибко управлять отображением интерфейса. ⏩А функция Document Metadata позволит манипулировать рендером метаданных страницы (например, мета-тегов, описанных для SEO). Их можно будет отрендерить в любом месте дерева компонентов, как на клиенте, так и на сервере. Раньше метаданные можно было задать только в корневом компоненте. ⏩Больше информации о React 19 и компиляторе будет анонсировано на конференции React Conf 2024, которая пройдёт 15-16 мая в Хендерсоне, Невада, США. Организаторы ожидают большой наплыв посетителей и уже ввели лотерею на получение билетов. @react_tg

🖥 Немного о производительность React.js Преждевременная оптимизация — корень всех зол. © Перед тем, как рассуждать о производительности, настоятельно рекомендуется прочитать Optimization.guide. Для начала стоит вспомнить, что виртуальный DOM — это уже оптимизация, которая позволяет React из коробки работать достаточно быстро, чтобы вы могли вообще не задумываться о производительности долгое время. В общих чертах, React работает так: — Монтирование вызывает рендеринг приложения. — Получившийся DOM вставляется в реальный DOM целиком, так как там еще ничего нет. Виртуальный DOM сохраняется внутри React для последующего обновления. — Изменение состояния приводит к вычислению нового виртуального DOM. — Вычисляется разница между старым виртуальным DOM и новым. — Разница применяется к реальному DOM. ⏩Согласование Когда происходит изменение в состоянии компонента, запускается механизм «согласование» (reconciliation), который вычисляет разницу между прошлым состоянием и новым. С алгоритмической точки зрения происходит поиск отличий в двух деревьях. В общем случае алгоритм, выполняющий это вычисление, работает со сложностью O(n³). Для решения этой проблемы React настоятельно просит для всех элементов списков использовать атрибут key, который не меняется для конкретного элемента списка. Подобное требование позволяет оптимизировать работу алгоритма, уменьшив сложность до О(n). ⏩Пропсы по умолчанию Первая засада ожидает при неправильной работе со свойствами по умолчанию, пример кода на изображении. Вроде безобидный код, но вызов [] каждый раз генерирует новый объект (при условии что options равен false). Проверяется это легко: [] === [] будет ложным. То есть данные не поменялись, но <Cell> будет отрисован заново. Вывод: используйте встроенный механизм для свойств по умолчанию. 📎 Читать подробнее @react_tg

🖥 Все хуки в React Норм видео о том, какие хуки вообще существуют в природе, и как их можно использовать. Речь идёт про такие хуки и не только: • useState() • setState() • useEffect() • useContext() • useReducer() • useCallback() • useMemo() • useRef() 📎 Видео @react_tg

🖥 Mode дня — StrictMode Режим <StrictMode> позволяет находить распространенные ошибки в компонентах на ранних стадиях разработки. Используйте StrictMode для включения дополнительных поведений разработки и предупреждений для внутреннего дерева компонентов. Строгий режим включает следующие модели поведения, доступные только для разработчиков: ⏩Ваши компоненты будут перерендериваться дополнительно для поиска ошибок, вызванных нечистым рендерингом. ⏩Ваши компоненты будут перезапускать эффекты дополнительно, чтобы найти ошибки, вызванные отсутствием очистки эффектов. ⏩Ваши компоненты будут проверяться на использование устаревших API. 📎 Читать подробнее @react_tg

🖥 Адаптивный рендер в ReactJS для мобильных и ПК ⏩Чтобы распознать, с какого устройства открывается ваше приложение — с мобильного или с десктопа — в ReactJS, воспользуйтесь window.matchMedia:

const isMobile = window.matchMedia("(max-width: 768px)").matches;

Значение isMobile примет значение true для экранов шириной меньше 768px — это показатель мобильных устройств. Параметр max-width можно настроить согласно вашим требованиям к адаптивности. В дальнейшем isMobile позволит наладить поведение приложения в зависимости от размера экрана. ⏩Настройте React-компоненты так, чтобы они были чувствительны к изменению размеров экрана. Это особенно важно, когда пользователи переворачивают свои мобильные устройства или изменяют размеры окна браузера на десктопе:

import React, { useState, useEffect } from 'react';

// Хук useDeviceDetect для определения типа устройства
const useDeviceDetect = () => {
  const [isMobile, setIsMobile] = useState(window.innerWidth < 768);

  useEffect(() => {
    // Отслеживаем изменение размера экрана здесь
    const handleResize = () => setIsMobile(window.innerWidth < 768);
    window.addEventListener('resize', handleResize);
    // удаляем обработчик, чтобы предотвратить утечку памяти
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return { isMobile };
};

export default useDeviceDetect;

⏩Хук useDeviceDetect позволяет отслеживать изменение ширины устройства и динамически адаптировать рендеринг:

import React from 'react';
import useDeviceDetect from './useDeviceDetect';

const MyResponsiveComponent = () => {
  const { isMobile } = useDeviceDetect();

  return (
    <div>
      {
        // Выбираем между мобильным и десктопным в зависимости от типа устройства
        isMobile ? <MobileComponent /> : <DesktopComponent />
      }
    </div>
  );
};

export default MyResponsiveComponent;

📎 Читать подробнее @react_tg

🖥 Разбираемся с ошибкой о уникальных ключах в React.js ⏩В React рекомендуется использовать уникальные идентификаторы как ключи для дочерних элементов массива. Это делает более эффективным сохранение состояния компонентов и оптимизирует процесс перерендеринга. Если ваши списки не будут изменяться в будущем, то применение индексов как ключей неприемлемо. Использование уникальных ID, связанных с данными, обеспечивает бесперебойное обновление и способствует предотвращению ошибок при управлении состоянием и интерфейсом.

// используем уникальные ID 
const todoItems = todos.map(todo => <li key={todo.id}>{todo.task}</li>);

// если список не статический, не используйте индексы в качестве ключей
const menuItems = menu.map((dish, index) => <li key={index}>{dish.name}</li>);

⏩Пару простых советов по поводу ключей: — В погоне за "идеальным" ключом. При обновлении компонентов ориентируйтесь на уникальные и стабильные ключи. Откажитесь от использования индексов массива, которые могут вызвать проблемы с производительностью. И забудьте о Math.random(), так как случайные значения не соответствуют принципам работы алгоритма React. — Чудеса управления ключами. Ставьте явные ключи каждому элементу в массиве. Это важно для эффективного обновления DOM. В методе .map() ключи следует присваивать на самом верхнем уровне элемента, чтобы обеспечить плавную работу компонента при рендеринге. — Запасной вариант: ручное создание ключей. Если уникальное свойство недоступно, вам пригодится создание уникальных идентификаторов вручную. Для этого подойдут библиотеки, такие как react-key-index или uuid, предлагающие надёжные методы генерации ключей. 📎 Читать подробнее @react_tg

Из джуна в мидла вместе с лидером* российского ИТ-рынка — Холдингом Т1🚀 Открытые школы Т1 — это уникальная возможность для быстрого роста в ИТ. Внутри два трека: образовательный ИТ-интенсив + карьерный в формате offer weeks в Т1. 🤚 Поможем прокачать скилы для развития внутри профессии, если ты: - имеешь опыт работы разработчиком JS+React от года - хочешь присоединиться к команде Т1. Лучшим назначим интервью и направим оффер! В программе интенсива: 🔹Архитектура, клиент-серверное взаимодействие 🔹BFF (Backend For Frontend) 🔹Микрофронты 🔹Паттерны программирования (SOLID, YAGNI, DRY, KISS) 🔹React 🔹State-менеджеры 🔹Тестирование, автотесты 📚 Формат: онлайн и по вечерам (8 часов в неделю на вебинары и практику). Длительность — 1 месяц, стартуем в конце марта! 🏳️Подай заявку до 26 марта на сайте. *По версии CNews Analytics 2022, TAdviser 2021 и RAEX 2023 Реклама. ООО "Т1". ИНН 7720484492.