Haii.. mungkin ini bukan hal yang baru apalagi front-end engineer,
pasti udah tau yang namanya Material Design product dari raksasa teknologi
yaitu google, pada kesempatan kali ini saya akan coba membahas penerapan
Material UI pada React Component.
Material UI muncul sebagai alternative Component untuk memudahkan developer dalam membuat website atau aplikasi. Material UI menerapkan component yang umum digunakan di beberapa platform google lainnya seperti Gmail, Youtube, dll.
Penjelasan lebih detailnya mampir di official websitenya https://material-ui.com/
Sebelum
menggunakan Material UI, install terlebih dahulu framework react js di
direktori kalian, untuk lebih jelas silahkan liat ke official website react js https://reactjs.org/docs/getting-started.html
Setelah
project react selesai di install, silahkan install Material UI pada package
project kalian dengan command
$ npm install @material-ui/core
Untuk penggunaannya
seperti dibawah ini
import React, { Component } from 'react'; import './App.css'; import Button from '@material-ui/core/Button'; class App extends Component { render() { return ( <div className="App"> <header className="App-header"> <Button variant="contained" color="primary"> Hello World </Button> </header> </div> ); } } export default App;
ini hanya sebagian kecil dari component yang disediakan oleh
Material UI, cukup mudah bukan? Dokumentasi di official websitenya sangat
lengkap dan mudah di mengerti
Beberapa fitur yang ditawarkan oleh Material UI antara lain
1. Style
Seperti halnya framework UI lainnya yang menawarkan component untuk styling seperti Font, Icons, dan Typography. Dengan menggunakan Material UI pastinya semua Font yang ada di Google Font bisa diterapkan
2. Layout
Fitur layout menjadi penting karena dalam sebuah website pasti butuh kerangka seperti penggunaan Grid dan Breakpoints
3. Utils
Material UI menyediakan additional utilisasi juga seperti Modal, Transition, Popover, dan Poper
4. Components Demo
Dalam mendevelop website pasti ada beberapa component yang umum digunakan para developer App Bar, Button, Cards, Lists, Table, Tabs, dll. Di components demo kita bisa melihat UI dan source code penggunaan setiap componentnya
5. Components API
Jika kita menggunakan third party library pasti banyak masalah karena kostomisasi yang minim, component yang disediakan oleh Material UI dapat di custom sesuai dengan kebutuhan setiap masing masing website, di dokumentasinya juga tersedia properti dan styling yang dapat digunakan
6. CSS in JS
Material UI sendiri sedang proses migrasi untuk penerapan CSS in JS yang jalan di server side, dengan penerapan CSS in JS kinerja dari browser bisa diminimasir
7. Customization
Material UI juga menyediakan fungsi untuk overriding default styling, kita juga bisa membuat Tema seperti Primary, Secondary, and Error. jadi kita bisa miliki Base Styling sendiri sesuai kebutuhan project
8. Premium Themes
Untuk mempercepat dalam membuat tampilan, Material UI menyediakan Template yang bisa didapatkan dengan membeli Official Template Material UI
9. Lab
Ada beberapa component yang masih belom siap untuk di migrasi ke Base Material UI bisa kita dapatkan di fitur Lab, ini untuk mendapatkan update terkini dari perkembangan Component Material UI
Dengan menerapkan Material UI diharapkan bisa membuat aplikasi kalian Google Friendly, jadi user familiar dengan aplikasi yang kita kembangkan
References
No comments:
Post a Comment