Asset Loading позволит интегрировать загрузку различных ресурсов (стилей, шрифтов, скриптов) с механизмом Suspense. Это даст возможность гибко управлять отображением интерфейса.
@react_tg
Please open Telegram to view this post
VIEW IN TELEGRAM
👍29❤🔥5❤2⚡2😱2
С другой стороны, задача обработки списков элементов настолько частая, что будет не лишним её обсудить отдельно.
{} вложено выражение, внутри которого опять появляется 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
Please open Telegram to view this post
VIEW IN TELEGRAM
👍13❤🔥3❤3🔥3👎2
Ну и про React само собой, рекомендую к прочтению)
@react_tg
Please open Telegram to view this post
VIEW IN TELEGRAM
👍8⚡2🔥2❤1
'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