Telegram Web Link
🖥 Хук дня — '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
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👍944❤‍🔥2🥰1
🖥 Создание сложного веб-приложения с помощью 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
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👍245🔥4
🖥 Как создать 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
Please open Telegram to view this post
VIEW IN TELEGRAM
16👍8🔥4
🖥 Как создать локальную среду React с помощью Vite

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

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

Уверен, будет полезно, а вот ссылка:
📎 Статья

@react_tg
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👍17🔥3❤‍🔥21🌚1
This media is not supported in your browser
VIEW IN TELEGRAM
⚡️ React Morph Clock

Оригинальные часы, созданные из svg-картинки на React.

#js #react

https://codepen.io/Siddharth11/pen/MjjdyW

@react_tg
👍19❤‍🔥43
🖥 Вопросы с собеседования на фронтенд разработчика React.js

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

К каждому вопросу приведён подробный ответ в выпадающем меню

📎 Ссылка

@react_tg
Please open Telegram to view this post
VIEW IN TELEGRAM
👍21❤‍🔥53
🖥 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
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👍274❤‍🔥3
🌟 Анатомия 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
Please open Telegram to view this post
VIEW IN TELEGRAM
12👍6🔥3❤‍🔥2
🔥 Большая подборка вопросов по React и смежных технологиях для подготовки к собеседованию

Здесь аж 120+ вопросов и ответов, что покрывает наверное 99% того, о чём могут спросить
Пользуйтесь)

Вот некоторые из вопросов:
• Тестирование в React
• Разница Zustand и Redux?
• Что такое Redux-Saga?
• Командный интерфейс Gatsby CLI
• Что такое Tailwind CSS?
• Преимущества и недостатки Next.js над React
• Основные принципы Redux
• Каков смысл функции getStaticProps в Next.js?

📎 Вопросы-ответы

@react_tg
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥18👍105
2025/07/11 18:17:48
Back to Top
HTML Embed Code: