ReactJS #18: Menggunakan CSS di React – Biar Aplikasi Tidak Polos dan Lebih Cantik

byFerdian Rahabista -
0

ReactJS #18: Menggunakan CSS di React

Biar Aplikasi Tidak Polos dan Lebih Cantik

Halo, desainer cilik! 🎨

Aplikasi React kita selama ini mungkin tampilannya masih polos dan sederhana. Padahal, aplikasi yang cantik dan menarik akan membuat pengguna betah. Nah, sekarang saatnya kita belajar memakaikan baju pada komponen React kita dengan CSS (Cascading Style Sheets).

💡 Analogi: Bayangkan komponen React adalah tubuh manusia. HTML adalah kerangka tulang, JavaScript adalah otot dan saraf, dan CSS adalah baju, celana, topi, dan aksesoris yang membuat kita tampil gaya. Dengan CSS, aplikasimu bisa tampil beda: dari yang biasa saja jadi kece badai!

📚 Cara Memberi CSS di React

Ada beberapa cara untuk menambahkan gaya ke komponen React. Masing-masing punya kelebihan dan cocok untuk situasi berbeda. Kita akan pelajari 5 cara paling populer:

  1. CSS Biasa (Global CSS) – file .css biasa yang diimpor.
  2. Inline Styles – menulis CSS langsung di atribut style.
  3. CSS Modules – CSS yang bersifat lokal per komponen.
  4. Styled Components – menulis CSS di dalam JavaScript (library).
  5. Tailwind CSS – framework utility-first yang sedang populer.

Kita akan bahas satu per satu dengan contoh.

📁 1. CSS Biasa (Global CSS)

Ini cara paling sederhana. Buat file .css, tulis aturan CSS seperti biasa, lalu impor ke komponen. File CSS ini bersifat global, artinya bisa memengaruhi semua komponen.

Contoh: buat file src/styles/global.css:

/* global.css */ .highlight { background-color: yellow; font-weight: bold; padding: 10px; border-radius: 20px; } .button-primary { background-color: #ff99cc; color: white; border: none; padding: 15px 30px; border-radius: 50px; font-size: 1.2em; cursor: pointer; box-shadow: 0 8px 0 #b3456b; } .button-primary:hover { background-color: #ffb3d9; transform: translateY(-2px); box-shadow: 0 10px 0 #b3456b; }

Lalu di komponen React, impor file CSS tersebut:

import './styles/global.css'; function Tombol() { return ( < div> < p className="highlight">Ini teks dengan highlight kuning< /p> < button className="button-primary">Klik Aku!< /button> < /div> ); }

Kelebihan: Mudah, cocok untuk gaya yang benar-benar global (seperti reset CSS).
Kekurangan: Bisa terjadi bentrok nama class jika tidak hati-hati.

🖌️ 2. Inline Styles

Kita bisa menulis CSS langsung di atribut style menggunakan objek JavaScript. Properti CSS ditulis dalam camelCase (misal backgroundColor, bukan background-color).

function Kotak() { const styles = { backgroundColor: '#ff99cc', color: 'white', padding: '20px', borderRadius: '30px', textAlign: 'center', boxShadow: '0 8px 0 #b3456b' }; return < div style={styles}>Ini kotak dengan inline styles< /div>; }

Atau bisa langsung ditulis:

<div style={{ backgroundColor: 'lightblue', padding: '20px' }}> Hello </div>

Kelebihan: Gaya bersifat lokal, mudah untuk gaya dinamis (berdasarkan state/props).
Kekurangan: Tidak bisa menggunakan pseudo-class (:hover, :active) dan media queries. Juga kurang rapi untuk gaya yang kompleks.

🧩 3. CSS Modules

CSS Modules adalah cara untuk membuat CSS yang bersifat lokal per komponen. Nama class akan diubah secara otomatis menjadi unik, sehingga tidak bentrok dengan class lain. Cocok untuk proyek besar.

Buat file CSS dengan nama [nama].module.css, misal Button.module.css:

/* Button.module.css */ .button { background-color: #ff99cc; color: white; padding: 15px 30px; border: none; border-radius: 50px; cursor: pointer; } .button:hover { background-color: #ffb3d9; } .special { background-color: gold; color: black; }

Lalu di komponen, impor sebagai objek:

import styles from './Button.module.css'; function Button() { return ( < div> < button className={styles.button}>Tombol Biasa < button className={`${styles.button} ${styles.special}`}>Tombol Spesial < /div> ); }

Hasilnya, class akan berubah menjadi seperti Button_button_abc123 sehingga aman dari bentrok.

Kelebihan: Lokal, aman untuk proyek besar, mendukung pseudo-class.
Kekurangan: Butuh konfigurasi (tapi Create React App sudah mendukung).

💅 4. Styled Components

Styled Components adalah library yang memungkinkan kita menulis CSS langsung di dalam JavaScript dengan sintaks yang mirip CSS biasa. Ini termasuk dalam kategori CSS-in-JS.

Instal dulu:

npm install styled-components

Contoh penggunaan:

import styled from 'styled-components'; // Membuat komponen button dengan gaya const StyledButton = styled.button` background-color: #ff99cc; color: white; padding: 15px 30px; border: none; border-radius: 50px; font-size: 1.2em; cursor: pointer; box-shadow: 0 8px 0 #b3456b; transition: 0.1s; &:hover { background-color: #ffb3d9; transform: translateY(-2px); box-shadow: 0 10px 0 #b3456b; } &:active { transform: translateY(2px); box-shadow: 0 5px 0 #b3456b; } `; const Kotak = styled.div` background-color: ${props => props.warna || 'lightblue'}; padding: 20px; border-radius: 30px; margin: 20px; `; function App() { return ( < div> < StyledButton>Klik Aku < Kotak warna="pink">Kotak pink dengan styled components < Kotak>Kotak default lightblue < /div> ); }

Kelebihan: Gaya benar-benar terikat dengan komponen, bisa menggunakan props untuk gaya dinamis, mendukung semua fitur CSS.
Kekurangan: Perlu instalasi library tambahan, agak berat untuk proyek kecil.

🌊 5. Tailwind CSS

Tailwind CSS adalah framework CSS yang menyediakan kelas-kelas utilitas (seperti bg-blue-500, text-center, p-4). Kita tinggal menempelkan kelas-kelas itu di elemen. Sangat cepat untuk prototyping.

Instalasi Tailwind di proyek React agak panjang, tapi Create React App punya panduan khusus. Secara singkat:

npm install -D tailwindcss postcss autoprefixer npx tailwindcss init

Kemudian atur konfigurasi sesuai dokumentasi. Setelah selesai, kita bisa menulis:

function Card() { return ( < div className="bg-white rounded-3xl p-6 shadow-xl border-4 border-pink-300"> < h2 className="text-2xl font-bold text-pink-600 mb-2">Judul Card< /h2> < p className="text-gray-600">Ini adalah card dengan Tailwind CSS. Cepat dan responsif!< /p> < button className="mt-4 bg-pink-400 hover:bg-pink-500 text-white px-6 py-2 rounded-full"> Klik < /button> < /div> ); }

Kelebihan: Cepat, konsisten, mudah responsif, ukuran file akhir kecil (karena hanya kelas yang dipakai).
Kekurangan: Perlu belajar kelas-kelas utilitas, HTML bisa terlihat penuh kelas.

🎯 Memilih Cara yang Tepat

Tidak ada cara yang paling benar. Pilihan tergantung kebutuhan:

  • Untuk belajar dan proyek kecil: CSS biasa atau inline styles sudah cukup.
  • Untuk proyek sedang/besar: CSS Modules atau Styled Components lebih aman.
  • Untuk prototype cepat: Tailwind CSS sangat membantu.
  • Untuk gaya dinamis berdasarkan props: Styled Components atau inline styles.

Kita bisa juga menggabungkan beberapa cara dalam satu proyek.

🧪 Latihan: Membuat Kartu Profil dengan 3 Cara

Sekarang coba buat komponen KartuProfil yang menampilkan foto (emoji), nama, dan bio. Buat tiga versi:

  1. Versi CSS Biasa – gunakan file CSS eksternal dengan class.
  2. Versi Inline Styles – gunakan objek style.
  3. Versi CSS Modules – buat file module.css.

Bandingkan hasilnya. Mana yang paling kamu suka?

👧

Siti

Suka belajar React

👦

Budi

Hobi main game

🐶

Doggy

Anjing lucu

💡 Tips Penting

  • Nama class di React: gunakan className, bukan class (karena class adalah kata kunci JavaScript).
  • Inline styles: nilai properti harus string (kecuali angka untuk properti tertentu, bisa langsung angka).
  • CSS Modules: jika ingin menggunakan beberapa class, gunakan template literal: className={`${styles.class1} ${styles.class2}`}.
  • Styled Components: nama komponen harus diawali huruf besar (seperti StyledButton).

🚀 Kesimpulan

  • Ada banyak cara memberi gaya di React, dari yang sederhana hingga canggih.
  • CSS biasa cocok untuk gaya global.
  • Inline styles praktis untuk gaya sederhana dan dinamis.
  • CSS Modules aman untuk proyek besar karena lokal per komponen.
  • Styled Components dan Tailwind adalah pilihan modern yang banyak dipakai.
  • Pilih cara yang paling nyaman untukmu dan sesuai kebutuhan proyek.

Di artikel selanjutnya kita akan belajar tentang Form dan Validasi serta cara mengirim data ke API. Sampai jumpa!

✨ Dengan CSS, aplikasi React-mu bisa tampil memukau! ✨
Tags

Anda mungkin menyukai postingan ini

Lebih baru Lebih lama

نموذج الاتصال