# cara styling react js untuk pemula: Panduan Terlengkap 2024
## Mengapa Memahami Cara Styling React JS untuk Pemula Penting?
## Teknik Dasar Menggunakan JavaScript XML (JSX)
## Mengelola Gaya Dinamis dengan Props and State
## Mengelola Gaya dalam Component-Based Architecture
## Eksplorasi CSS-in-JS untuk Skalabilitas Aplikasi
## Meningkatkan Web Performance dan Responsive Web Design
## Menggunakan React Hooks untuk Kontrol Gaya Dinamis
## Kesimpulan: Pilih Metode Styling Terbaik untuk Proyek Anda
Karena JSX pada dasarnya adalah JavaScript yang bisa menyisipkan elemen HTML, kita juga bisa menambahkan styling agar tampilan komponen menjadi lebih indah.
style.
Dalam JSX, nilai dari style
berupa object JavaScript.function
InlineExample() {
return (
<h1 style={{ color: "blue", fontSize: "24px", textAlign: "center" }}>
Hello, React!
</h1>
);
}.css, lalu mengimpor ke komponen. .title
{
color: red;
font-size: 28px;
text-align: center;
}
App.jsimport
"./App.css";
function CssExample() {
return <h1 className="title">Hello dengan CSS Eksternal!</h1>;
}
.button
{
background-color: green;
color: white;
padding: 10px 20px;
border-radius: 8px;
}
import
styles from "./Button.module.css";
function Button() {
return <button className={styles.button}>Klik Saya</button>;
}
import
styled from "styled-components";
const Title = styled.h1`color: purple;
font-size: 32px;
text-align: center;
`
; function
StyledExample() {
return <Title>Hello dengan Styled Components!</Title>;
}
Kelebihan: sangat fleksibel, style bisa dinamis berdasarkan props. Cocok untuk aplikasi modern.
Tailwind adalah utility-first CSS framework yang sangat populer di React. Kita bisa styling
dengan class bawaan tanpa menulis CSS manual.
function
TailwindExample() {
return (
<h1 className="text-blue-500 text-3xl font-bold text-center">
Hello dengan Tailwind CSS!
</h1>
);
}
Cocok untuk pengembangan aplikasi modern.
Praktik Terbaik Styling JSX
1. Gunakan CSS Modules atau Styled Components untuk proyek menengah ke besar agar lebih
terorganisir.
2. Jika butuh cepat dan konsisten, Tailwind CSS sangat membantu.
3. Hindari terlalu banyak inline style, kecuali untuk kondisi sederhana atau style dinamis.
4. Selalu gunakan penamaan class yang jelas agar mudah dikelola.
Styling komponen JSX di React bisa dilakukan dengan berbagai cara:
Inline Style → cepat, cocok untuk styling sederhana.
CSS Eksternal → umum digunakan, rapi untuk proyek kecil.
CSS Modules → aman dari bentrokan class.
Styled Components → fleksibel dengan CSS-in-JS.
Tailwind CSS → praktis untuk desain cepat dan modern.
Inline Style adalah teknik menambahkan style langsung ke elemen dengan menggunakan atribut style.Namun, berbeda dengan HTML biasa yang menggunakan string CSS, di React inline
style ditulis dalam bentuk object JavaScript.
Contoh perbandingan:
HTML Biasa
<h1
style="color: blue; font-size: 20px;">Hello World</h1>
React (JSX)<h1 style={{ color: "blue", fontSize: "20px" }}>Hello World</h1>Perhatikan: Property CSS ditulis dengan camelCase (contoh: font-size → fontSize).Nilai style ditulis sebagai string atau angka (jika angka, otomatis satuan default-nya adalah px).
Contoh Penggunaan Inline Style
function App() { return ( <div> <h1 style={{ color: "green", fontSize: "24px" }}> Belajar Inline Style di React
</h1> <p style={{ textAlign: "center", fontStyle: "italic" }}> Ini adalah contoh penggunaan inline style.
</p> </div> );
}
Inline Style dengan Variabel Object
Untuk membuat kode lebih rapi, style bisa disimpan di variabel JavaScript.
const titleStyle = { color: "purple", fontSize: "28px", textAlign: "center",};
function App() { return <h1 style={titleStyle}>Hello dengan Object Style!</h1>;}
Inline Style Dinamis
Inline style juga mendukung penggunaan kondisi.
function App() { const isActive = true; return ( <button style={{ backgroundColor: isActive ? "blue" : "gray", color: "white", padding: "10px 20px", border: "none", borderRadius: "8px", }}
>
{isActive ? "Aktif" : "Nonaktif"}
</button> );
}
Kelebihan : Mudah digunakan untuk styling cepat, Cocok untuk style dinamis berdasarkan kondisi,
Tidak perlu file CSS terpisah.
Kekurangan : Sulit dikelola jika style semakin kompleks, Tidak mendukung pseudo-class
(:hover, :focus) atau media queries langsung, Membuat komponen terlihat berantakan jika style
terlalu banyak.
Inline style cocok digunakan untuk:
Prototype cepat atau project kecil.
Styling dinamis yang berubah sesuai state/props.
Style unik yang hanya dipakai sekali di sebuah komponen.
Namun, untuk proyek besar, sebaiknya gunakan CSS eksternal, CSS Modules, atau Tailwind CSS
agar lebih terstruktur.
Inline style di React adalah teknik styling langsung menggunakan object JavaScript. Metode
ini sangat praktis untuk kebutuhan sederhana atau styling dinamis, namun kurang efisien jika
digunakan dalam aplikasi besar yang kompleks.
Dengan memahami inline style, pemula dapat lebih cepat beradaptasi dengan cara kerja
React sebelum melangkah ke metode styling yang lebih canggih.
Metode ini menggunakan file .css
terpisah sehingga kode menjadi lebih rapi, terstruktur, dan mudah dikelola, terutama untuk
proyek yang semakin besar.
CSS Eksternal adalah file
CSS yang ditulis terpisah dari komponen, lalu diimpor ke dalam file
JavaScript/JSX.
Keuntungannya: Kode lebih bersih
(JSX hanya berisi struktur, CSS berisi gaya). Style bisa digunakan ulang di
banyak komponen, Mudah dikelola ketika aplikasi berkembang.
Cara Menggunakan CSS Eksternal di React
Buat file dengan ekstensi .css, misalnya App.css.
App.css
.title { color: blue; font-size: 28px; text-align: center;}
.description { color: gray; font-size: 16px; text-align: justify;}
Mengimpor File CSS ke Komponen
Setelah membuat file CSS, impor ke dalam file React dengan perintah import "./App.css";.
App.js
import "./App.css";
function App() { return ( <div> <h1 className="title">Belajar CSS Eksternal di React</h1> <p className="description"> Styling dengan CSS eksternal membuat kode lebih rapi dan mudah dikelola.
</p> </div> );
}
export default App;
Perhatikan: di React kita menggunakan atribut className (bukan class) untuk memberikan style.
Styling di Banyak Komponen
Misalnya kita punya komponen Button.js:
Button.css
.button {
background-color: green;
color: white;
padding: 10px 20px;
border: none;
border-radius: 8px;
cursor: pointer;
}.button:hover { background-color: darkgreen;
}
Button.js
import "./Button.css";function Button() { return <button className="button">Klik Saya</button>;}
export default Button;
Dengan cara ini, setiap komponen bisa punya file CSS masing-masing agar lebih terorganisir.
Kelebihan : Kode lebih terstruktur dan mudah dipelihara, Bisa menggunakan fitur CSS
penuh (pseudo-class :hover, media queries, dll), Style bisa digunakan ulang di berbagai komponen.
Kekurangan : Bisa
terjadi konflik class jika nama class sama di banyak komponen. Untuk proyek
besar, sulit melacak class mana yang dipakai oleh komponen tertentu.
Styling dengan CSS eksternal di React adalah cara yang paling umum dan mudah
dipahami pemula.
Dengan memisahkan file .css
dari komponen, kode menjadi lebih rapi, mudah dipelihara, dan mendukung fitur
CSS penuh.
Dalam membangun aplikasi React, styling adalah bagian penting untuk menciptakan tampilan
yang menarik. Setelah mengenal inline style dan CSS eksternal, ada dua pendekatan modern
yang sering digunakan untuk mengatasi masalah konflik class dan memudahkan pengelolaan style,
yaitu: CSS Modules, Styled Components
Keduanya memiliki kelebihan masing-masing dan cocok digunakan pada proyek
skala menengah hingga besar.
CSS Modules adalah fitur yang membuat setiap class CSS bersifat lokal
terhadap komponen yang mengimpornya. Artinya, class yang ditulis di satu file
CSS tidak akan bertabrakan dengan class lain di komponen berbeda.
Membuat File CSS Modules
File CSS Modules biasanya menggunakan ekstensi .module.css.
Button.module.css
.button {
background-color: #007bff;
color: white;
padding: 10px 20px;
border-radius: 6px;
border: none;
cursor: pointer;
}
{
background-color: #0056b3;
}Mengimpor dan Menggunakan di Komponen
Button.js
import styles from "./Button.module.css";function Button() { return <button className={styles.button}>Klik Saya</button>;}
export default Button;
Perhatikan bahwa kita memanggil class dengan styles.button, bukan "button".
Kelebihan CSS Modules : Menghindari konflik class antar komponen, Kode lebih rapi
dan terorganisir, Masih tetap menggunakan sintaks CSS murni.
Kekurangan CSS Modules: Harus membuat file CSS tambahan untuk setiap komponen,
Kurang fleksibel untuk style yang sangat dinamis.
Styled Components
Styled Components adalah library populer di React yang menggunakan konsep CSS-in-JS.
Artinya, kita bisa menulis CSS langsung di file JavaScript dengan bantuan template
literals.
Styled Components membuat setiap komponen memiliki style yang unik tanpa
khawatir terjadi konflik.
Cara Menggunakan Styled Components
a. Instalasi Styled Components perlu diinstal terlebih dahulu:
npm install styled-components
b. Membuat Styled Components
Button.js
import styled from "styled-components";const Button = styled.button` background-color: #28a745; color: white; padding: 10px 20px; border-radius: 6px; border: none; cursor: pointer; &:hover { background-color: #1e7e34; };function App() { return <Button>Klik Saya</Button>;}
export default App;Styling Dinamis dengan Props
Styled Components juga mendukung style dinamis berdasarkan props.
import styled from "styled-components";
const Button = styled.button`
: "gray")};
color: white;
padding: 10px 20px;
border-radius: 6px;
border: none;
cursor: pointer;
`; function App() {
return (
<div>
<Button primary>Button Utama</Button>
<Button>Button Sekunder</Button>
</div>
);
}export default App;Kelebihan Styled Components: Tidak ada konflik class, Mendukung style dinamis
(berdasarkan props/state), CSS ditulis langsung di dalam file komponen.
Kekurangan Styled Components : Perlu library tambahan, jika terlalu banyak styled components,
ukuran bundle bisa membesar.
Perbandingan CSS Modules vs Styled Components
CSS Modules cocok untuk kamu yang terbiasa dengan CSS murni dan ingin menjaga agar style tidak bentrok antarkomponen.Styled Components lebih cocok untuk kamu yang suka menulis CSS langsung di file JavaScript dan membutuhkan style dinamis.
