Material-UI adalah sebuah framework UI yang sangat populer untuk pengembangan aplikasi web menggunakan React. Dengan Material-UI, Anda dapat membuat tampilan yang menarik dan responsif dengan mudah, berkat komponen-komponen siap pakai yang disediakan.
Dalam tutorial ini, kami akan membahas langkah-langkah untuk membuat tampilan yang menarik dengan menggunakan Material-UI dan React. Ikuti langkah-langkah di bawah ini untuk mulai membangun aplikasi Anda sendiri dengan tampilan yang menarik.
Persiapan Awal
Sebelum memulai, pastikan Anda telah menginstal Node.js dan npm (Node Package Manager) di sistem Anda. Anda juga harus memiliki pengetahuan dasar tentang React dan pembangunan aplikasi web.
Langkah-langkah berikutnya adalah:
Buatlah proyek baru dengan menggunakan create-react-app. Buka terminal atau command prompt, lalu jalankan perintah berikut:
npx create-react-app material-ui-tutorial
Setelah proses pembuatan proyek selesai, masuklah ke direktori proyek dengan perintah:
cd material-ui-tutorial
Buka proyek ini menggunakan editor kode favorit Anda. Anda akan melihat struktur dasar proyek React. Selanjutnya, instal paket-paket Material-UI yang diperlukan. Jalankan perintah berikut di terminal atau command prompt:
npm install @mui/material @emotion/react @emotion/styled
Paket-paket ini diperlukan untuk menggunakan Material-UI dengan React.
Membuat Tampilan Dasar
Setelah persiapan awal selesai, saatnya membuat tampilan dasar aplikasi kita menggunakan Material-UI. Ikuti langkah-langkah berikut:
Buka file src/App.js dan hapus semua kode di dalamnya. Tambahkan kode berikut ke dalam file src/App.js:
import React from 'react';
import { Container, Typography } from '@mui/material';
function App() {
return (
<Container maxWidth="sm">
<Typography variant="h2" component="h1" align="center">
Selamat Datang di Tutorial Material-UI React
</Typography>
<Typography variant="h5" component="h2" align="center">
Mulailah membangun tampilan yang menarik!
</Typography>
</Container>
);
}
export default App;Kode di atas menggunakan komponen Container dan Typography dari Material-UI untuk membuat tampilan dasar aplikasi. Komponen Container memberikan tata letak yang rapi, sementara komponen Typography digunakan untuk menampilkan teks dengan gaya yang telah ditentukan.
Simpan perubahan dan kembali ke terminal atau command prompt. Jalankan perintah berikut untuk memulai server pengembangan lokal:
npm start
- Anda akan melihat aplikasi React Anda terbuka di browser dengan tampilan dasar yang baru saja Anda buat.
Menambahkan Komponen Material-UI
Sekarang saatnya kita menambahkan beberapa komponen Material-UI yang lebih menarik ke tampilan aplikasi kita. Berikut adalah langkah-langkahnya:
Buka kembali file src/App.js. Kemudian, import komponen-komponen yang akan kita gunakan dari Material-UI. Lalu, tambahkan baris-baris berikut di atas fungsi App():
import { Button, Card, CardContent, CardMedia, Grid } from '@mui/material';Komponen-komponen ini akan kita gunakan untuk membuat tampilan yang lebih menarik. Selanjutnya, gantikan kode yang ada di dalam fungsi App() dengan kode berikut:
function App() {
return (
<Container maxWidth="md">
<Typography variant="h2" component="h1" align="center">
Selamat Datang di Tutorial Material-UI React
</Typography>
<Typography variant="h5" component="h2" align="center">
Mulailah membangun tampilan yang menarik!
</Typography>
<Grid container spacing={2} mt={4}>
<Grid item xs={12} sm={6} md={4}>
<Card>
<CardMedia
component="img"
height="200"
image="https://example.com/image1.jpg"
alt="Image 1"
/>
<CardContent>
<Typography variant="h5" component="div">
Judul Kartu 1
</Typography>
<Typography variant="body2" color="text.secondary">
Deskripsi kartu 1.
</Typography>
</CardContent>
<Button variant="outlined" color="primary">
Baca Selengkapnya
</Button>
</Card>
</Grid>
<Grid item xs={12} sm={6} md={4}>
<Card>
<CardMedia
component="img"
height="200"
image="https://example.com/image2.jpg"
alt="Image 2"
/>
<CardContent>
<Typography variant="h5" component="div">
Judul Kartu 2
</Typography>
<Typography variant="body2" color="text.secondary">
Deskripsi kartu 2.
</Typography>
</CardContent>
<Button variant="outlined" color="primary">
Baca Selengkapnya
</Button>
</Card>
</Grid>
<Grid item xs={12} sm={6} md={4}>
<Card>
<CardMedia
component="img"
height="200"
image="https://example.com/image3.jpg"
alt="Image 3"
/>
<CardContent>
<Typography variant="h5" component="div">
Judul Kartu 3
</Typography>
<Typography variant="body2" color="text.secondary">
Deskripsi kartu 3.
</Typography>
</CardContent>
<Button variant="outlined" color="primary">
Baca Selengkapnya
</Button>
</Card>
</Grid>
</Grid>
</Container>
);
}Kode di atas menambahkan tiga kartu (card) dengan gambar, judul, deskripsi, dan tombol “Baca Selengkapnya”. Kami menggunakan komponen Grid untuk menampilkan kartu-kartu tersebut dalam grid responsif.
Jangan lupa untuk mengganti URL gambar (image) dengan URL gambar yang valid. Simpan perubahan dan periksa tampilan aplikasi Anda di browser. Jika Anda sudah menjalankan server pengembangan lokal menggunakan perintah npm start, perubahan akan secara otomatis direfleksikan di browser.
Anda sekarang akan melihat tampilan aplikasi dengan tiga kartu yang menarik, masing-masing memiliki gambar, judul, deskripsi, dan tombol “Baca Selengkapnya”.
Pastikan juga untuk mengganti URL gambar dengan URL gambar yang valid agar gambar-gambar tersebut dapat ditampilkan dengan benar.
Selain itu, Anda juga dapat menyesuaikan tampilan kartu dan komponen lainnya menggunakan properti-properti yang disediakan oleh Material-UI. Anda dapat mengubah ukuran, warna, gaya teks, dan banyak lagi sesuai kebutuhan proyek Anda.
Selamat! Anda telah berhasil membuat tampilan yang menarik dengan Material-UI dan React. Anda sekarang dapat melanjutkan pengembangan aplikasi Anda dengan menambahkan komponen-komponen dan fitur-fitur tambahan menggunakan Material-UI.