Pada seri tutorial React JS kali ini, kita akan mencoba untuk styling dengan CSS dan Tailwind di ReactJS. Tampilan dan desain yang menarik pada aplikasi web merupakan hal yang sangat penting untuk menarik perhatian pengguna.
Pada era digital saat ini, pembuatan aplikasi web yang responsif dan estetis juga sebuah keharusan. Styling adalah salah satu aspek utama dalam membuat aplikasi web yang menarik. Ada berbagai cara untuk melakukan styling pada aplikasi web, namun pada artikel ini, kita akan membahas tentang dua pilihan styling yang paling populer di ReactJS, yaitu CSS dan Tailwind untuk membuat tampilan yang menarik pada aplikasi ReactJS.
Apa itu CSS dan Tailwind?
CSS merupakan salah satu teknologi web yang paling dasar, namun juga sangat penting dalam pembuatan aplikasi web. Dengan CSS, kita dapat membuat tampilan aplikasi web menjadi lebih menarik dan responsif. Namun, penggunaan CSS dapat menjadi sangat rumit dan memakan waktu, terutama jika Anda harus menulis kode CSS yang banyak dan kompleks.
Tailwind CSS adalah sebuah framework CSS yang memungkinkan kita untuk membuat tampilan aplikasi web dengan cepat dan mudah tanpa harus menulis banyak kode CSS. Tailwind CSS memiliki banyak class CSS yang siap pakai, seperti class untuk margin, padding, warna, font, dan lain sebagainya. Salah satu keuntungan dari Tailwind CSS adalah fleksibilitasnya yang tinggi. Kita dapat menggabungkan class CSS yang berbeda untuk membuat tampilan yang unik dan sesuai dengan kebutuhan. Selain itu, Tailwind CSS juga memiliki dokumentasi yang lengkap dan mudah dipahami, sehingga memudahkan pengguna dalam mempelajarinya.
Oleh karena itu, Tailwind CSS hadir sebagai solusi alternatif yang lebih efisien dan fleksibel dalam melakukan styling di ReactJS. Tailwind CSS memungkinkan kita untuk membuat tampilan aplikasi web dengan cepat dan mudah tanpa harus menulis banyak kode CSS. Dalam artikel ini, kita akan membahas tentang cara menggunakan CSS dan Tailwind CSS di ReactJS, serta tips dan trik untuk mengoptimalkan Tailwind CSS.
Styling CSS di React JS
Berikut ini adalah cara styling CSS di React JS
Cara Menggunakan CSS di React JS
Secara umum, ada dua cara untuk menggunakan CSS di ReactJS, yaitu dengan membuat file CSS terpisah atau menggunakan inline styling. Pembuatan file CSS terpisah memungkinkan kita untuk menulis kode CSS yang terorganisir dan mudah dikelola. Sedangkan, inline styling memungkinkan kita untuk menambahkan style langsung pada elemen HTML.
Pembuatan file CSS terpisah atau inline styling
Untuk membuat file CSS terpisah, Anda dapat membuat file CSS baru dan menambahkan link CSS pada file HTML yang terkait. Contohnya:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
Sedangkan, untuk menggunakan inline styling, kita dapat menambahkan atribut style pada elemen HTML yang terkait. Contohnya:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1 style="color: blue;">Hello World!</h1>
</body>
</html>
Contoh penggunaan CSS di ReactJS
Dalam ReactJS, kita dapat membuat file CSS terpisah dan mengimportnya ke dalam komponen yang terkait. Berikut adalah contoh kode untuk membuat komponen Button dengan style CSS terpisah:
import React from 'react';
import './Button.css';
function Button(props) {
return (
<button className="Button" onClick={props.onClick}>
{props.label}
</button>
);
}
export default Button;
Kita juga dapat menggunakan inline styling pada elemen HTML di dalam komponen ReactJS. Contohnya:
import React from 'react';
function Heading(props) {
return (
<h1 style={{ color: 'blue' }}>{props.text}</h1>
);
}
export default Heading;
Styling Tailwind CSS di React JS
Sekarang, kita akan coba untuk styling Tailwind CSS di React JS
Cara menginstall Tailwind CSS di ReactJS
Untuk menginstall Tailwind CSS di ReactJS, pertama-tama kita perlu menginstall Tailwind CSS dan PostCSS melalui terminal dengan perintah berikut:
npm install tailwindcss postcss-cli autoprefixer
Selanjutnya, kita perlu membuat file konfigurasi untuk Tailwind CSS dengan perintah berikut:
npx tailwindcss init
Setelah itu, kita perlu mengedit file konfigurasi tersebut sesuai dengan kebutuhan. Contohnya:
module.exports = {
purge: ['./src/**/*.js'],
darkMode: false,
theme: {
extend: {},
},
variants: {},
plugins: [],
}
Pada contoh di atas, kita mengatur bahwa Tailwind CSS akan memperhatikan file JavaScript di dalam folder src dan sub-foldernya untuk melakukan purgeCSS (menghapus kode CSS yang tidak terpakai). Kita juga dapat menambahkan konfigurasi lain sesuai dengan kebutuhan.
Setelah itu, kita perlu mengubah file postcss.config.js dengan menambahkan Tailwind CSS. Contohnya:
module.exports = {
plugins: [
require('tailwindcss'),
require('autoprefixer'),
],
};
Menggunakan Tailwind CSS di ReactJS
Setelah menginstall dan mengkonfigurasi Tailwind CSS, kita dapat langsung menggunakannya di dalam komponen ReactJS dengan menambahkan kelas CSS yang telah disediakan oleh Tailwind CSS. Contohnya:
import React from 'react';
function Button(props) {
return (
<button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded" onClick={props.onClick}>
{props.label}
</button>
);
}
export default Button;
Pada contoh di atas, kita menggunakan kelas CSS bg-blue-500 untuk memberikan warna latar belakang pada button, hover:bg-blue-700 untuk memberikan warna latar belakang ketika button di-hover, text-white untuk memberikan warna teks putih, font-bold untuk membuat teks menjadi bold, py-2 dan px-4 untuk memberikan padding pada button, serta rounded untuk membuat button menjadi berbentuk bulat pada sudut-sudutnya.
Contoh penggunaan Tailwind CSS di ReactJS
Berikut adalah contoh penggunaan Tailwind CSS di ReactJS:
import React from 'react';
import './App.css';
import 'tailwindcss/tailwind.css';
function App() {
return (
<div className="h-screen flex justify-center items-center bg-gray-100">
<div className="bg-white rounded-lg shadow-lg p-8 max-w-sm w-full">
<h1 className="text-2xl font-bold text-gray-800">Welcome to My Website!</h1>
<p className="text-gray-600 mt-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam euismod lectus et dolor ultricies, in tincidunt leo euismod. Fusce auctor lacus quis pulvinar egestas.</p>
<button className="mt-8 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Learn More</button>
</div>
</div>
);
}
export default App;
Dalam contoh di atas, kita menggunakan class dan utility yang disediakan oleh Tailwind CSS untuk mengatur tampilan komponen ReactJS. Dalam komponen App, kita menggunakan class h-screen, flex, justify-center, dan items-center pada div pertama untuk membuatnya menjadi full screen dan berada di tengah-tengah layar.
Selain itu, kita juga menggunakan class bg-white, rounded-lg, shadow-lg, p-8, max-w-sm, dan w-full pada div kedua untuk mengatur tampilan box yang ada di dalamnya. Sedangkan pada judul dan paragraf, kita menggunakan class text-2xl, font-bold, text-gray-800, dan text-gray-600 untuk mengatur tampilannya.
Terakhir, pada button kita menggunakan class bg-blue-500, hover:bg-blue-700, text-white, font-bold, py-2, px-4, dan rounded untuk membuat tampilan button yang lebih menarik.
Dengan menggunakan Tailwind CSS, kita bisa mengatur tampilan komponen ReactJS dengan lebih mudah dan cepat tanpa perlu menulis banyak kode CSS manual.
Mengoptimalkan Tailwind CSS di React JS
Tailwind CSS adalah framework CSS yang memiliki banyak class dan utilitas untuk memudahkan styling pada aplikasi web. Namun, karena banyaknya class yang tersedia, Tailwind CSS dapat menghasilkan file CSS yang besar dan berdampak pada kinerja aplikasi web. Oleh karena itu, penting untuk mengoptimalkan Tailwind CSS di ReactJS agar file CSS yang dihasilkan menjadi lebih kecil dan aplikasi web menjadi lebih cepat.
Cara mengkonfigurasi Tailwind CSS di ReactJS
Ketika menggunakan Tailwind CSS di ReactJS, kita dapat mengoptimalkannya dengan mengkonfigurasinya sesuai dengan kebutuhan website kita. Salah satu hal yang dapat kita lakukan adalah dengan menghilangkan kelas CSS yang tidak terpakai pada aplikasi kita.
Untuk melakukan hal tersebut, kita dapat menambahkan konfigurasi purgepada file konfigurasi Tailwind CSS. Contohnya:
module.exports = {
purge: ['./src/**/*.js'],
darkMode: false,
theme: {
extend: {},
},
variants: {},
plugins: [],
}Pada konfigurasi di atas, kita memberikan parameter ./src/**/*.js pada purge untuk memberitahu Tailwind CSS untuk mencari file JavaScript di dalam folder src dan sub-foldernya. Tailwind CSS akan mencari kelas CSS yang digunakan pada file JavaScript tersebut dan menghapus kelas CSS yang tidak terpakai pada aplikasi kita.
Menggunakan purgeCSS untuk mengoptimalkan Tailwind CSS
Saat menggunakan Tailwind CSS, terkadang kita hanya menggunakan sebagian kecil dari class yang disediakan oleh Tailwind CSS. Hal ini menyebabkan ukuran file CSS yang dihasilkan menjadi besar dan berdampak pada kinerja aplikasi web. Untuk mengatasi masalah ini, kita bisa menggunakan purgeCSS untuk mengoptimalkan Tailwind CSS di ReactJS.
PurgeCSS adalah library yang digunakan untuk menghapus kode CSS yang tidak terpakai pada file HTML atau JavaScript. Dalam konteks ReactJS, kita bisa menggunakan purgeCSS untuk menghapus class Tailwind CSS yang tidak terpakai pada komponen ReactJS yang kita gunakan.
Berikut adalah langkah-langkah untuk mengoptimalkan Tailwind CSS di ReactJS menggunakan purgeCSS:
- Pertama-tama, untuk menggunakan purgeCSS, kita perlu menginstall library tersebut terlebih dahulu dengan perintah berikut:
npm install purgecss-webpack-plugin --save-dev
- Setelah itu, buat file webpack.config.js di dalam direktori utama aplikasi ReactJS dan tambahkan konfigurasi berikut:
const PurgeCSSPlugin = require('purgecss-webpack-plugin');
const glob = require('glob');
const path = require('path');
module.exports = {
// konfigurasi lainnya
plugins: [
// konfigurasi plugin lainnya
new PurgeCSSPlugin({
paths: glob.sync(`${path.join(__dirname, 'src')}/**/*`, { nodir: true }),
whitelistPatterns: [/^bg-/, /^text-/, /^hover:/]
})
]
}
Penjelasan konfigurasi di atas adalah sebagai berikut:
- Pertama, kita import library PurgeCSSPlugin, glob, dan path.
- Selanjutnya, kita menambahkan konfigurasi plugin PurgeCSSPlugin dan menentukan paths yang akan di-scan oleh PurgeCSSPlugin. Dalam contoh di atas, kita menggunakan metode glob.sync untuk mencari file yang ada di dalam direktori src dan sub-direktorinya.
- Terakhir, kita menambahkan whitelistPatterns yang berisi pola regex yang akan di-include oleh PurgeCSSPlugin. Pada contoh di atas, kita memilih untuk hanya include class yang memiliki awalan “bg-“, “text-“, dan “hover:”.
- Jalankan perintah build untuk mengoptimalkan Tailwind CSS di ReactJS:
npm run build
Dengan menggunakan purgeCSS, kita bisa mengoptimalkan Tailwind CSS di ReactJS sehingga ukuran file CSS yang dihasilkan menjadi lebih kecil dan berdampak pada kinerja aplikasi web yang lebih baik.
Tips dan Trik untuk Styling di React JS
Setelah memahami dasar-dasar cara styling CSS dan Tailwind di ReactJS, berikut adalah beberapa tips dan trik yang bisa membantu Anda dalam melakukan styling pada project ReactJS yang dibuat:
1. Menerapkan konsep komponen untuk styling yang lebih mudah dan terorganisir
Seperti yang telah dijelaskan sebelumnya, ReactJS menggunakan konsep komponen untuk membangun aplikasi web. Dalam hal styling, konsep komponen ini dapat digunakan untuk memecah styling menjadi bagian-bagian yang lebih kecil dan terorganisir.
Misalnya, Anda dapat membuat komponen Button yang memiliki styling tertentu, lalu menggunakannya di berbagai bagian aplikasi yang membutuhkan tombol. Dengan demikian, Anda tidak perlu menuliskan styling tombol secara berulang-ulang di setiap halaman.
2. Memanfaatkan variabel pada Tailwind CSS untuk penggunaan yang lebih fleksibel
Tailwind CSS menyediakan berbagai variabel yang dapat digunakan untuk mempermudah styling pada proyek ReactJS. Variabel ini dapat diatur pada file tailwind.config.js dan digunakan pada berbagai bagian aplikasi yang membutuhkan.
Misalnya, Anda dapat mengatur variabel fontSize pada file tailwind.config.js, lalu menggunakan variabel tersebut pada berbagai komponen yang membutuhkan ukuran font yang sama.
3. Menggunakan extension untuk meningkatkan efisiensi dan kecepatan dalam styling di ReactJS
Ada banyak extension atau plugin yang dapat membantu meningkatkan efisiensi dan kecepatan dalam melakukan styling pada proyek ReactJS. Beberapa extension populer yang dapat digunakan antara lain:
- React Developer Tools: extension ini memungkinkan Anda untuk melihat komponen ReactJS dan stylingnya secara langsung pada browser.
- Tailwind CSS IntelliSense: extension ini memberikan fitur auto-completion dan saran variabel pada editor kode Anda saat menggunakan Tailwind CSS.
- Prettier: extension ini membantu Anda melakukan formatting kode yang konsisten dan mudah dibaca.
Dengan menggunakan extension atau plugin yang tepat, Anda dapat meningkatkan efisiensi dan kecepatan dalam melakukan styling pada project ReactJS.
Kesimpulan
Styling merupakan bagian penting dalam membangun aplikasi web yang menarik dan mudah digunakan, termasuk UI/UX. Dalam artikel ini, kita telah selesai membahas dasar-dasar styling dengan CSS dan Tailwind di ReactJS, serta tips dan trik untuk meningkatkan efisiensi dan kecepatan dalam melakukan styling.
Dengan memahami dasar-dasar styling dengan CSS dan Tailwind di ReactJS, serta menerapkan tips dan trik yang telah dijelaskan, semoga Anda bisa improve untuk mengembangkan aplikasi web yang menarik dan mudah digunakan untuk user.