🖥 Хук дня — '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

🖥 Создание сложного веб-приложения с помощью 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

🖥 Как создать локальную среду React с помощью Vite

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

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

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

@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 и смежных технологиях для подготовки к собеседованию

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

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

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

@react_tg