Styling & CSS-in-JS
CSS Modules, styled-components, Tailwind CSS, inline styles, theming
1Apa itu CSS Module di React?
Apa itu CSS Module di React?
Jawaban
CSS Modules secara otomatis menghasilkan nama kelas yang unik dengan menambahkan hash pada nama kelas, yang mencegah konflik style antar komponen. Setiap file CSS Module memiliki scope lokal tersendiri, berbeda dari stylesheet global tradisional. Pendekatan ini memungkinkan penulisan style modular tanpa risiko penimpaan tidak sengaja di komponen lain.
2Apa keunggulan utama styled-components?
Apa keunggulan utama styled-components?
Jawaban
Styled-components memungkinkan penulisan CSS langsung di file JavaScript menggunakan template literals, yang memudahkan pembuatan style dinamis berdasarkan props komponen. Pendekatan ini menghilangkan pemetaan manual antara kelas CSS dan komponen, serta memastikan bahwa hanya style dari komponen yang dipasang yang diinjeksikan ke halaman. Penempatan style bersama logika komponen juga meningkatkan pemeliharaan kode.
3Bagaimana cara mengimpor CSS Module di komponen React?
Bagaimana cara mengimpor CSS Module di komponen React?
Jawaban
Untuk mengimpor CSS Module, gunakan sintaks impor JavaScript standar dengan nama file yang berakhiran .module.css, dan tetapkan hasilnya ke variabel yang akan berisi objek dengan nama kelas yang telah diubah. Secara konvensi, variabel ini sering dinamai 'styles'. Kelas kemudian dapat diterapkan melalui atribut className menggunakan notasi objek. Pendekatan ini memastikan nama kelas unik dan dibatasi pada komponen.
Apa karakteristik utama dari Tailwind CSS?
Apa kelemahan utama inline styles di React?
+15 pertanyaan wawancara
Topik wawancara React / Next.js lainnya
Dasar-Dasar JavaScript
Dasar-Dasar React
React Hooks
Siklus hidup komponen
React Router
Manajemen state dengan Context
Form & Controlled Components
Pengambilan Data & API
React Query (TanStack Query)
Dasar-dasar Next.js
TypeScript dengan React
Data Fetching Next.js
Server Actions Next.js
Routing & Navigasi Next.js
API Routes Next.js
Metadata & SEO di Next.js
Middleware & Auth di Next.js
Pengujian React
Zustand State Management
Optimasi Performa React
Error Boundaries & Error Handling
Advanced React Patterns
Fitur Lanjutan Next.js
Deployment & Produksi Next.js
Architecture & Design Patterns
React Server Components
Internasionalisasi Next.js
Keamanan React & Praktik Terbaik
Kuasai React / Next.js untuk wawancara berikutnya
Akses semua pertanyaan, flashcards, tes teknis, latihan code review dan simulator wawancara.
Mulai gratis