'use client'
позволяет отметить, какой код выполняется на клиенте.Добавьте
'use client'
в верхней части файла, чтобы отметить модуль и его транзитивные зависимости как клиентский код.'use client'
, импортируется из серверного компонента, совместимые бандлеры будут рассматривать импорт модуля как границу между кодом, выполняемым на сервере, и кодом, выполняемым на клиенте.RichTextEditor
, formatDate
и Button
также будут оцениваться на клиенте, независимо от того, содержат ли их модули директиву 'use client'
. Обратите внимание, что один модуль может оцениваться на сервере при импорте из серверного кода и на клиенте при импорте из клиентского кода.Некоторые нюансы
'use client'
должно находиться в самом начале файла, выше любого импорта или другого кода (комментарии допускаются). Они должны быть написаны с одинарными или двойными кавычками, но не с обратными знаками.'use client'
импортируется из другого клиентского модуля, директива не имеет силы.'use client'
, то любое использование этого компонента гарантированно является клиентским компонентом. Однако компонент может быть оценен на клиенте, даже если он не содержит директивы 'use client'
.Дополнение: компонент считается клиентским, если он определен в модуле с директивой
'use client'
или является транзитивной зависимостью модуля, содержащего директиву 'use 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
👍9⚡4❤4❤🔥2🥰1
Держите годный контент)
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
👍24❤5🔥4
Вот так звучит реальный кейс, давайте подробнее.
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
Держите годный контент!
В этой статье вы узнаете, как создать локальную среду с помощью 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❤🔥2❤1🌚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
Оригинальные часы, созданные из svg-картинки на React.
#js #react
https://codepen.io/Siddharth11/pen/MjjdyW
@react_tg
👍19❤🔥4⚡3
Держите отличную подборку
Здесь собраны самые популярные вопросы, задаваемые на собеседованиях front-end разработчиков на React.js.
Тематика вопросов включает в себя как основы JavaScript и веб-технологий так и глубокое понимание работы React.js и смежных технологий (Redux, MobX и прочего).
К каждому вопросу приведён подробный ответ в выпадающем меню
@react_tg
Please open Telegram to view this post
VIEW IN TELEGRAM
👍21❤🔥5⚡3
Держите отличную подборку вопросов, здесь покрываются основные темы 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-запросов.
— Работа с асинхронными запросами и обработка ошибок.
...и остальные темы
@react_tg
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👍27⚡4❤🔥3
Держите полезную статью)
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
Здесь аж 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👍10❤5