Question 1

Що таке CSS Module у React?

Accepted Answer

CSS Modules автоматично генерують унікальні імена класів, додаючи хеш до імені класу, що запобігає конфліктам стилів між компонентами. Кожен файл CSS Module має власну локальну область видимості, на відміну від традиційних глобальних таблиць стилів. Цей підхід дозволяє писати модульні стилі без ризику випадкового перевизначення в інших компонентах.

Question 2

Яка головна перевага styled-components?

Accepted Answer

Styled-components дозволяє писати CSS безпосередньо в JavaScript-файлах за допомогою template literals, що спрощує створення динамічних стилів на основі props компонента. Цей підхід усуває ручне зіставлення між класами CSS та компонентами і гарантує, що лише стилі змонтованих компонентів вставляються на сторінку. Розміщення стилів разом з логікою компонента також покращує підтримуваність коду.

Question 3

Як імпортувати CSS Module у компонент React?

Accepted Answer

Щоб імпортувати CSS Module, використовуйте стандартний синтаксис імпорту JavaScript із назвою файлу, що закінчується на .module.css, і призначте результат змінній, яка міститиме об'єкт із перетвореними іменами класів. За угодою, ця змінна часто називається 'styles'. Класи можуть бути застосовані через атрибут className з використанням об'єктної нотації. Цей підхід гарантує, що імена класів є унікальними і обмеженими компонентом.

Styling & CSS-in-JS

Що таке CSS Module у React?

Відповідь

Яка головна перевага styled-components?

Відповідь

Як імпортувати CSS Module у компонент React?

Відповідь

Яка головна характеристика Tailwind CSS?

Який головний недолік вбудованих стилів у React?

Інші теми співбесід React / Next.js

Основи JavaScript

Основи React

React Hooks

Життєвий цикл компонента

React Router

Управління станом з Context

Форми та Controlled Components

Отримання даних та API

React Query (TanStack Query)

Основи Next.js

TypeScript з React

Data Fetching у Next.js

Server Actions у Next.js

Маршрутизація та Навігація в Next.js

API Routes у Next.js

Metadata & SEO у Next.js

Middleware та Auth у Next.js

Тестування React

Zustand State Management

Оптимізація продуктивності React

Error Boundaries & обробка помилок

Advanced React Patterns

Розширені можливості Next.js

Розгортання та Продакшн Next.js

Architecture & Design Patterns

React Server Components

Інтернаціоналізація Next.js

React Безпека & Найкращі Практики

Опануй React / Next.js для наступної співбесіди