Pada tutorial sebelumnya kita telah mengenal cara membuat sebuah komponen. Setiap komponen terdiri dari berberapa tag HTML berbeda yang disusun menjadi sebuah komponen. Komponen – komponen tersebut bisa dengan mudah kita gunakan berulang kali.
Dibawah ini adalah komponen ImageFeed yang telah kita buat pada tutorial sebelumnya. Sangat basic, karena kita hanya menggunakan tag <img> dan <p> tanpa styling sedikitpun. Lalu bagaimana cara membuat styling di react?
Tugas kita sekarang adalah membuat gambar diatas memiliki tinggi yang sama dengan Styling
Impor CSS ke HTML
Cara ini adalah cara klasik sebagaimana kita membuat sebuah file HTML biasa. Yaitu dengan cara membuat file CSS dan kita impor di file index.css. Coba cek folder public, lalu buat sebuah file index.css.
Sekarang isikan dengan CSS dibawah ini:
/* index.css */
/* memastikan body 100% layar */
body {
width: 100%;
}
/* memastikan #root 100% body */
#root {
width: 100%;
}
/* memastikan .App 100% body */
.App {
width: 100%;
}
.image-feed-container {
max-height: 20rem;
padding: 10px;
margin: 10px;
}
.image-feed-img {
object-fit: cover;
width: 100%;
height: 20rem;
}
Lalu impor CSS diatas dengan menambahkan line berikut diantara <head></head>:
<link rel="stylesheet" href="index.css">
Jangan lupa untuk menambahkan className di file ImageFeed.js seperti dibawah ini:
import React from "react";
export default function ImageFeed(props) {
return (
<div className="image-feed-container">
<img className="image-feed-img" src={props.image} />
<p className="image-feed-description">{props.description}</p>
</div>
);
}
Perhatikan! class di HTML harus ditulis sebagai className di React!
Maka hasilnya akan seperti berikut:
Impor CSS ke Javascript File
Kamu bisa membuat file CSS untuk tiap – tiap komponen yang ada.
Cara ini dapat mempermudahmu memanajemen styling component dibanding cara sebelumnya 😊
Buka folder components lalu buat file ImageFeed.css.
Isikan ImageFeed.css dengan CSS berikut:
/* ImageFeed.css */
/* memastikan body 100% layar */
body {
width: 100%;
}
/* memastikan #root 100% body */
#root {
width: 100%;
}
/* memastikan .App 100% body */
.App {
width: 100%;
}
.image-feed-container {
max-height: 20rem;
padding: 10px;
margin: 10px;
}
.image-feed-img {
object-fit: cover;
width: 100%;
height: 20rem;
}
Lalu impor file ImageFeed.css ke file ImageFeed.js seperti dibawah ini:
import React from "react";
// import css disini
import './ImageFeed.css'
export default function ImageFeed(props) {
return (
<div className="image-feed-container">
<img className="image-feed-img" src={props.image} />
<p className="image-feed-description">{props.description}</p>
</div>
);
}
Maka hasilnya akan sama seperti cara pertama 😁
Inline Style di JSX
Kamu bisa membuat inline style dengan menulis object javascript di props style seperti dibawah ini.
import React from "react";
export default function ImageFeed(props) {
return (
<div style={{ maxHeight: "20rem", padding: "10px", margin: "10px" }}>
<img
style={{
objectFit: "cover",
width: "100%",
height: "20rem",
}}
src={props.image}
/>
<p>{props.description}</p>
</div>
);
}
Script diatas akan menghasilkan inline style dengan hasil yang sama dengan cara sebelumnya. Tapi ingat! Inline style memiliki performa buruk dibanding menggunakan external css
Kesimpulan
Ada 3 cara membuat styling di react
- Impor external css di index.html
- Import css di setiap komponen
- Membuat inline css
Cara pertama direkomendasikan jika kamu ingin memuat css dari framework CSS seperti Bootstrap. Cara kedua lebih mudah digunakan jika kamu ingin memanajemen styling tiap komponen. Cara ketiga bisa digunakan dengan kekuranganya berupa penurunan performa dari file HTML kamu.
