CSS Dan Bootstrap Di React: Tips Dan Trik Untuk Desain UI
Dalam komponen fungsional React, ada beberapa cara untuk menambahkan CSS. Berikut beberapa contohnya:
1. Style inline: Anda dapat menambahkan style inline ke komponen React menggunakan atribut style.
function SignupForm() {
const styles = {
backgroundColor: 'white',
color: 'black',
};
return (
<div style={styles}>
<input type="text" placeholder="Username" />
<input type="email" placeholder="Email" />
<input type="date" placeholder="Date of Birth" />
<input type="password" placeholder="Password" />
<input type="password" placeholder="Confirm Password" />
</div>
);
}
export default SignupForm;Di React, style sebaris ditentukan menggunakan objek JavaScript. Kunci objek adalah properti CSS, dan nilainya adalah nilai properti yang sesuai. Misalnya, untuk menyetel warna background elemen div menjadi merah, Anda dapat menggunakan kode berikut ini:
Lihat bahwa objek gaya diapit oleh kurung kurawal ganda {{}} karena ini adalah objek JavaScript yang digunakan sebagai penyangga.
<div style={{ backgroundColor: 'red' }}>Hello, world!</div>Style sebaris juga dapat digabungkan dengan kelas CSS menggunakan prop className.
Ini memungkinkan Anda menerapkan style tambahan ke komponen sambil masih tetap menggunakan style sebaris untuk properti tertentu. Misalnya:
<div style={{ backgroundColor: 'red' }} className="myClass">Hello, world!</div>2. Modul CSS: Anda dapat menggunakan Modul CSS untuk mengimpor dan menerapkan style ke komponen Anda.
import styles from './signup_form.module.css';
function SignupForm() {
return (
<div className={styles.container}>
<input type="text" className={styles.input} placeholder="Username" />
<input type="email" className={styles.input} placeholder="Email" />
<input type="date" className={styles.input} placeholder="Date of Birth" />
<input type="password" className={styles.input} placeholder="Password" />
<input type="password" className={styles.input} placeholder="Confirm Password" />
</div>
);
}
export default SignupForm;/* signup_form.module.css */
.container {
background-color: white;
color: black;
padding: 20px;
}
.input {
margin-bottom: 10px;
padding: 10px;
border: 1px solid black;
border-radius: 5px;
}3. Menggunakan Bootstrap dalam proyek React :
Instal Bootstrap 5: Anda bisa menginstal Bootstrap 5 di proyek Anda dengan menjalankan perintah berikut di terminal Anda:
Ini menginstal Bootstrap 5 dan dependensinya di folder node_modules proyek Anda.
npm install [email protected]impor Bootstrap 5: Untuk menggunakan Bootstrap 5 di komponen React Anda, Anda perlu mengimpor file CSS Bootstrap 5 di file index.js atau App.js Anda. Anda bisa melakukannya dengan menambahkan pernyataan impor berikut di bagian atas file Anda:
Ini mengimpor versi minified dari file Bootstrap 5 CSS.
import 'bootstrap/dist/css/bootstrap.min.css';Impor Bootstrap JavaScript: Impor file JavaScript Bootstrap di file index.js atau App.js Anda dengan menambahkan pernyataan impor berikut di bagian atas file:
import 'bootstrap/dist/js/bootstrap.bundle.min.js';Pakai komponen Bootstrap 5: Setelah mengimpor file CSS Bootstrap 5, Anda bisa menggunakan komponen Bootstrap 5 di komponen React Anda. Misalnya, Anda bisa menggunakan komponen Container, Row, dan Col untuk membuat layout grid seperti ini:
import 'bootstrap/dist/css/bootstrap.min.css';
function SignupForm() {
return (
Left column
Right column
);
}
export default SignupForm;Ini membuat penampung dengan dua kolom, masing-masing mengambil 50% dari lebar penampung pada layar berukuran sedang ke atas.
contoh lain dengan bootstrap :
function MyComponent() {
return (
<div className="dropdown">
<button
className="btn btn-secondary dropdown-toggle"
type="button"
id="dropdownMenuButton"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown button
</button>
<ul className="dropdown-menu" aria-labelledby="dropdownMenuButton">
<li>
<a className="dropdown-item" href="#">
Action
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Another action
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Something else here
</a>
</li>
</ul>
</div>
);
}Ini membuat menu dropdown dengan tiga item.
Anda dapat menggunakan plugin Bootstrap lainnya, seperti plugin Modal, Tooltip, dan Collapse, dengan menambahkan atribut data yang sesuai ke elemen HTML Anda.