Tahukah Anda bahwa lebih dari 97% situs web menggunakan CSS untuk gaya?
Cascading Style Sheets, atau CSS, memungkinkan pengembang membuat halaman web yang tampak bagus, dapat dipindai, dan rapi.
Bahasa CSS menentukan bagaimana dokumen disajikan kepada pengguna. Dokumen dalam hal ini adalah file yang ditulis dalam bahasa markup seperti XML atau HTML.
Apa itu penataan di React?
Kesederhanaan dalam membuat, menjalankan, dan memelihara aplikasi React adalah alasan utama di balik popularitasnya. Bereaksi adalah pustaka JavaScript daripada kerangka kerja, menawarkan lebih dari sekadar fungsi dan cuplikan kode yang telah ditulis sebelumnya.
Ketersediaan komponen yang dapat digunakan kembali, fleksibilitasnya, stabilitas kode, kecepatan, dan kinerjanya adalah beberapa alasan mengapa React berperingkat tinggi di antara kerangka kerja dan pustaka JavaScript.
Styling dalam React adalah proses membuat berbagai komponen dalam aplikasi React menarik secara visual menggunakan CSS. Namun, perlu dicatat bahwa React menggunakan JSX (JavaScript dan XML) alih-alih HTML sebagai bahasa markupnya. Salah satu perbedaan utama adalah bahwa HTML menggunakan .class untuk melabeli kelas sedangkan JSX menggunakan .ClassName untuk menunjukkan hal yang sama.
Mengapa Anda harus menata React menggunakan CSS?
- Jadikan aplikasi Anda responsif. Aplikasi web modern harus dapat diakses di layar kecil dan besar. CSS memungkinkan Anda menerapkan kueri media ke aplikasi React Anda dan membuatnya responsif terhadap berbagai ukuran layar.
- Mempercepat proses pembangunan. Anda dapat menggunakan aturan CSS yang sama di beberapa komponen aplikasi React Anda.
- Jadikan aplikasi React dapat dipelihara. Membuat perubahan tampilan pada komponen/bagian tertentu dari aplikasi Anda mudah dilakukan menggunakan CSS.
- Pengalaman pengguna yang lebih baik. CSS memungkinkan pemformatan yang mudah digunakan. Bereaksi dengan teks dan tombol di tempat logis mudah dinavigasi dan digunakan.
Ada beberapa pendekatan yang dapat digunakan pengembang untuk mendesain aplikasi React mereka. Berikut ini adalah beberapa yang paling umum;
Tulis Gaya Inline
Gaya sebaris adalah pendekatan termudah untuk menata aplikasi React, karena pengguna tidak perlu membuat lembar gaya eksternal. Gaya CSS diterapkan langsung ke kode React.
Perlu diperhatikan bahwa gaya sebaris lebih diutamakan daripada gaya lainnya. Jadi, jika Anda memiliki lembar gaya eksternal dengan beberapa pemformatan, lembar gaya tersebut akan diganti dengan gaya sebaris.
Ini adalah demonstrasi gaya inline di aplikasi React.
import React from 'react';
import ReactDOM from 'react-dom/client';
const Header = () => {
return (
<>
<h1 style={{backgroundColor: "lightblue"}}>Hello World!!!!!</h1>
<h2>Add a little style!</h2>
</>
);
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Header />);
Elemen yang ditampilkan akan menampilkan h1 dengan latar belakang biru muda.
Pro gaya inline
- Cepat. Ini adalah pendekatan paling sederhana, karena Anda menambahkan gaya langsung ke tag yang ingin Anda gaya.
- Memiliki preferensi yang bagus. Gaya inline menggantikan stylesheet eksternal. Dengan demikian, Anda dapat menggunakannya untuk fokus pada fungsi tertentu tanpa mengubah keseluruhan aplikasi.
- Luar biasa untuk pembuatan prototipe. Anda dapat menggunakan gaya sebaris untuk menguji fungsionalitas sebelum menggabungkan pemformatan pada lembar gaya eksternal.
Kontra gaya inline
- Bisa membosankan. Menata setiap tag secara langsung memakan waktu.
- Terbatas. Anda tidak dapat menggunakan fitur CSS seperti pemilih dan animasi dengan gaya sebaris.
- Banyak gaya sebaris membuat kode JSX tidak dapat dibaca.
Mengimpor Stylesheet Eksternal
Anda dapat menulis CSS di file eksternal dan mengimpornya ke aplikasi React. Pendekatan ini sebanding dengan mengimpor file CSS dalam tag
dokumen HTML.Untuk mencapainya, Anda perlu membuat file CSS di direktori aplikasi, mengimpornya ke komponen target, dan menulis aturan gaya untuk aplikasi Anda.
Untuk mendemonstrasikan cara kerja lembar gaya CSS eksternal, Anda dapat membuat file CSS dan menamainya App.css. Anda kemudian dapat mengekspornya sebagai berikut.
import { React } from "react";
import "./Components/App.css";
function App() {
return (
<div className="main">
</div>
);
}
export default App;
Cuplikan kode di atas mengimpor stylesheet eksternal ke komponen App.js. File App.css terletak di folder Komponen.
Kelebihan style sheet CSS eksternal
- Dapat digunakan kembali. Anda dapat menggunakan aturan CSS yang sama di berbagai komponen dalam aplikasi React.
- Membuat kode lebih rapi. Memahami kode itu mudah saat menggunakan stylesheet eksternal.
- Memberikan akses ke fitur CSS lanjutan. Anda dapat menggunakan kelas semu dan penyeleksi lanjutan saat menggunakan style sheet eksternal.
Con dari style sheet CSS eksternal
- Membutuhkan konvensi penamaan yang andal untuk memastikan gaya tidak diganti.
Gunakan Modul CSS
Aplikasi React bisa menjadi sangat besar. Nama animasi CSS dan nama kelas, secara default, dicakup secara global. Pengaturan ini bisa menjadi masalah saat berhadapan dengan style sheet yang besar, karena satu gaya dapat menimpa yang lain.
Modul CSS mengatasi tantangan ini dengan membatasi animasi dan nama kelas secara lokal. Pendekatan ini memastikan bahwa nama kelas hanya tersedia di dalam file/komponen yang diperlukan. Setiap nama kelas mendapat nama program yang unik, menghindari konflik.
Untuk mengimplementasikan Modul CSS, buat file dengan .module.css. Jika Anda ingin memberi nama stylesheet Anda sebagai style, nama filenya adalah style.module.css.
Impor file yang dibuat ke dalam komponen React Anda, dan Anda akan siap untuk memulai.
File CSS Anda mungkin terlihat seperti ini;
/* styles.module.css */
.font {
color: #f00;
font-size: 30px;
}
Anda dapat mengimpor Modul CSS di App.js Anda sebagai berikut;
import { React } from "react";
import styles from "./styles.module.css";
function App() {
return (
<h1 className={styles.heading}>Hello techking.id reader</h1>
);
}
export default App;
Kelebihan menggunakan modul CSS
- Terintegrasi dengan mudah dengan SCSS dan CSS
- Menghindari konflik nama kelas
Kontra menggunakan modul CSS
- Mereferensikan nama kelas menggunakan modul CSS bisa membingungkan bagi pemula.
Gunakan Styled-Components
Komponen bergaya memungkinkan pengembang untuk membuat komponen menggunakan CSS dalam kode JavaScript. Komponen yang diberi gaya bertindak sebagai komponen Bereaksi yang hadir dengan gaya. Komponen Bergaya menawarkan gaya dinamis dan nama kelas yang unik.
Untuk mulai menggunakan Komponen Bergaya, Anda dapat menginstal paket di folder akar menggunakan perintah ini;
npm install styled-components
Langkah selanjutnya adalah mengimpor Komponen Bergaya ke aplikasi React Anda
Berikut adalah cuplikan kode App.js yang menggunakan Styled Components;
import { React } from "react";
import styled from "styled-components";
function App() {
const Wrapper = styled.div`
width: 80%;
height: 120px;
background-color: lightblue;
display: block;
`;
return <Wrapper />;
}
export default App;
Aplikasi yang dirender akan memiliki gaya di atas yang diimpor dari Komponen Bergaya.
Kelebihan Komponen Bergaya
- Itu bisa diprediksi. Gaya dalam pendekatan gaya ini disarangkan ke dalam komponen individual.
- Tidak perlu fokus pada konvensi penamaan kelas Anda. Tulis saja gaya Anda, dan paket akan mengurus sisanya.
- Anda dapat mengekspor Komponen Bergaya sebagai properti. Styled Components mengubah CSS normal menjadi komponen React. Dengan demikian Anda dapat menggunakan kembali kode ini, memperluas gaya melalui alat peraga, dan mengekspor.
Con dari Komponen Bergaya
- Anda harus menginstal perpustakaan pihak ke-3 untuk memulai.
Style Sheets yang Mengagumkan Secara Sintaktis (SASS/ SCSS)
SASS hadir dengan alat dan fitur yang lebih kuat yang tidak ada di CSS biasa. Anda dapat menulis gaya dalam dua gaya berbeda yang dipandu oleh ekstensi ini; .scss dan .sass.
Sintaks untuk SASS mirip dengan CSS biasa. Namun, Anda tidak memerlukan tanda kurung buka dan tutup saat menulis aturan gaya di SASS.
Cuplikan sederhana dari SASS akan muncul sebagai berikut;
nav ul margin-right: 20px padding: 0 list-style: list li display: block a display: block padding: 6px 12px text-decoration: underline nav
Untuk mulai menggunakan SASS ke dalam aplikasi React Anda, Anda harus mengompilasi SASS ke CSS biasa terlebih dahulu. Setelah mengatur aplikasi Anda melalui perintah Create React App, Anda dapat menginstal node-sass untuk menangani kompilasi.
npm install node-sass
Anda kemudian dapat membuat file Anda dan memberinya ekstensi .scss atau .sass. Anda kemudian dapat mengimpor file Anda dengan cara biasa. Sebagai contoh;
import "./Components/App.sass";
Kelebihan SASS/SCSS
- Muncul dengan banyak fitur dinamis seperti mixin, nesting, dan extending.
- Anda tidak memiliki banyak boilerplate untuk menulis kode CSS saat menggunakan SASS/SCSS
Kekurangan SASS/SCSS
- Gaya bersifat global, dan karena itu Anda mungkin menemukan masalah utama.
Manakah pendekatan gaya terbaik?
Karena kita telah membahas lima pendekatan, Anda ingin tahu mana yang terbaik. Sulit untuk menyoroti pemenang langsung dalam diskusi ini. Namun, pertimbangan ini akan membantu Anda membuat keputusan berdasarkan informasi:
- Metrik kinerja
- Apakah Anda memerlukan sistem desain
- Kemudahan mengoptimalkan kode Anda
Gaya inline cocok jika Anda memiliki aplikasi sederhana dengan beberapa baris kode. Namun, yang lainnya; eksternal, SASS, Komponen Bergaya, dan Modul CSS, cocok untuk aplikasi besar.
Apa praktik terbaik untuk memelihara CSS dalam Aplikasi Bereaksi Besar?
- Hindari gaya inline. Menulis gaya CSS sebaris untuk setiap tag dalam aplikasi React yang besar bisa melelahkan. Sebagai gantinya, gunakan style sheet eksternal yang sesuai dengan kebutuhan Anda.
- Lint kode Anda. Linter seperti Stylelint akan menyoroti kesalahan gaya dalam kode Anda sehingga Anda dapat memperbaikinya lebih awal.
- Lakukan tinjauan kode secara teratur. Menulis CSS sepertinya menyenangkan, tetapi ulasan kode reguler memudahkan untuk mengidentifikasi bug lebih awal.
- Otomatiskan pengujian pada file CSS Anda. Enzyme dan Jest adalah alat luar biasa yang dapat Anda gunakan untuk mengotomatiskan pengujian pada kode CSS Anda.
- Jaga agar kode Anda KERING. ketika berurusan dengan gaya yang umum digunakan seperti warna dan margin, gunakan variabel dan kelas utilitas sesuai dengan prinsip Jangan Ulangi Diri Sendiri (KERING).
- Gunakan konvensi penamaan seperti Pengubah Elemen Blok. Pendekatan semacam itu memudahkan penulisan kelas CSS yang mudah dipahami dan digunakan kembali.
Kesimpulan
Di atas adalah beberapa cara yang dapat Anda gunakan untuk mendesain React. Pilihan pendekatan gaya akan bergantung pada kebutuhan, keterampilan, dan selera Anda. Anda bahkan dapat mengombinasikan beberapa pendekatan gaya, seperti style sheet inline dan eksternal, di aplikasi React Anda.
Anda juga dapat menjelajahi beberapa kerangka kerja dan pustaka CSS terbaik untuk pengembang front-end.
