React JS

🖥 Порядок создания сайта на React Держите очень практическое руководство, самое то для тех, кто всё хочет создать свой пет-проект, но не знает, с чего начать Enjoy) 📎 Туториал @react_tg

🌟 Screenshot to Code — крутой инструмент для конвертирования скринов, Figma-шаблонов и мокапов в чистый код Поддерживаемые стэки: HTML + Tailwind, React + Tailwind, Vue + Tailwind, Bootstrap, Ionic + Tailwind и SVG. @react_tg

Из джуна в мидла вместе с Холдингом Т1🚀 Приглашаем java-разработчиков в Открытые школы Т1! 🎓 Открытые школы Т1 — это новая карьерная программа для IТ-специалистов, объединяющая обучение без отрыва от работы и offer weeks. 👨‍💻 Для участия необходим опыт работы java-разработчиком от 1 года, а также желание присоединиться к команде Т1. Т1 занимает 2 место среди крупнейших ИКТ-компаний по версии RAEX 2023 и является партнёром ключевых производителей и разработчиков в сфере ИТ. В программу входит: spring framework; docker; синхронное и асинхронное взаимодействие, брокеры сообщений; паттерны, SOLID ⏰ Длительность 1 месяц. 💻 Формат: онлайн по вечерам (от 8 часов в неделю на вебинары и практику). Лучшим назначим интервью и направим оффер! 📌 Подробнее о программе — в карточках внутри поста. Принимаем заявки до 22 апреля! 🚀 Реклама. ООО "Т1". ИНН 7720484492.

🖥 Слои типичного 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

Вместе уютно собираемся по вечерам каждый у себя дома и учимся верстать сайты с нуля. В комплекте приятная музыка, тёмная тема и добрейшее сообщество неопытных верстальщиков, которые вообще-то огого и всем ещё покажут. Всё это будет на бесплатном марафоне по HTML и СSS «ночной кружок по вёрстке», который пройдёт с 18 по 23 апреля. За 6 дней вы: — Изучите основы веб-технологий и попробуете себя в роли фронтенд-разработчика; — Напишете в тренажёрах свои первые строчки кода и увидите как изменяется страница сайта в реальном времени; — Поймёте нравится ли вам веб-разработка. Кстати, а ещё мы разыграем курс по HTML и СSS среди участников марафона. Вступить в кружок.

💡Простой способ получения скриншотов во время загрузки и фильтрации запросов в Chrome dev tools: на заметку фронтенд-разработчику #css #tip by Shripal Soni

Что делать новичку во фронтенд-разработке, чтобы уже в этом году гарантировано зарабатывать от 1000$/мес. на фронтенд-разработке, не выходя из дома. Для начала попробуй с нуля собрать сайт на Angular. ➡️ Вот тут пройдёт бесплатный-интенсив с подробными уроками, по которым ты сможешь: - Сверстать веб-сайт на HTML + CSS; - Оживить страницу на JavaScript; - Создать проект фронтенд-фреймворк Angular; - Подключить Backend и загрузить сайт на хостинг; - Сделать сайту адаптив. А чтобы точно получилось, тебе будут помогать опытные кураторы. И в итоге своими руками разработаешь качественный сайт, который не стыдно добавить в портфолио или продать. Интенсив стартует 16 апреля. 👉 Успей проскочить бесплатно Бонусом тебе помогут составить пошаговый план, как тебе развиваться в профессии, чтобы уже в этом году гарантировано зарабатывать от 1000$/мес. на фронтенд-разработке, не выходя из дома.

🖥 Понимаем полностью useMemo и useCallback Если вы изо всех сил пытались разобраться в useMemo и useCallback, вы не одиноки. Есть ненулевое количество разработчиков React, которые cломали голову над этими 2 хуками. Так что держите полезную статью, которая призвана помочь разобраться в путанице. Вот некоторые факты из статьи: ⏩React.memo и useMemo помогают оптимизировать производительность компонентов; в частности useMemo запоминает результат дорогостоящих вычислений и предотвращает ненужные повторные рендеры. ⏩Имеется проблема: чистые компоненты часто перерисовываются даже при отсутствии изменений; useMemo решает эту проблему, сохраняя ссылки на массивы и объекты. ⏩useCallback аналогичен useMemo для функций, позволяя запоминать функции колбэков. ⏩Рекомендуется использовать хуки useMemo и useCallback только при необходимости для оптимизации производительности. 📎 Статья @react_tg

🖥 Топ-3 причины, почему вы должны использовать Copilot в работе с React и не только В отличие от традиционных инструментов завершения кода, которые полагаются на предопределённые шаблоны и ключевые слова, GitHub Copilot идёт на шаг дальше, понимая цель кода и генерируя контекстуально подходящие предложения. Он основан на обширном репозитории фрагментов кода, библиотек и шаблонов программирования, доступных на GitHub, что делает его ценным ресурсом для разработчиков в различных областях и языках программирования. В статье автор делится такими 3 плюсами от использования Copilot: ⏩Улучшение качества кода. Copilot предлагает рекомендации и варианты кода на основе переданного контекста, что помогает предотвратить ошибки и соблюдать практики программирования. ⏩Увеличение продуктивности. С Copilot разработчики могут сосредоточиться на более творческих и стратегических задачах, вместо того чтобы тратить время на рутинную работу. ⏩Обучение и рост. Использование Copilot также может стать отличным инструментом для обучения новичков в области программирования. Путём изучения рекомендаций и генерируемого кода они могут улучшить свои навыки и расширить свой опыт. В целом, плюсы очевидны, но статью можно глянуть в первую очередь ради конкретных кейсов использования Copilot 📎 Статья @react_tg

🔥 Большая подборка вопросов по 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