Menggunakan CSS Framework Pada Aplikasi React

by

Pada modul sebelumnya dibahas penggunaan custom css, pada modul ini akan dibahas penggunaan CSS Framework.

Banyak pilihan CSS Framework, seperti Material-UI, Bootstrap dan lainnya. Pada tutorial akan dibahas penggunaan Material-UI.

Perhatian, ini bukan tutorial CSS, jadi hanya akan dibahas cara instalasi dan penggunaannya saja.

Ada dua cara menggunakan Material-UI, yaitu dengan instalasi menggunakan npm dan dengan menggunakan CDN (tidak akan dibahas pada tutorial ini).

Instalasi Material-UI

Untuk instalasi, buka command prompt, lalu masuk pada direktori project. Ketikan perintah instalasi berikut:

$ npm install @material-ui/core

Setelah instalasi selesai. Buat component baru untuk keperluan tutorial ini.

Buat file baru, AppContent.js, lalu masukan code berikut

import React, {Component, Fragment} from 'react';
import Button from '@material-ui/core/Button';

export default class AppContent extends Component{
    render(){
        return(
            <Fragment>
                <p>Content goes here</p>
                <Button variant="contained" color="primary">Click Me</Button>
            </Fragment>
        );
    }
}

Pembahasan Code

Code diatas menggunakan Button yang disediakan oleh Material-UI. Untuk menggunakannya kita import dahulu library yang dibutuhkan.

import Button from '@material-ui/core/Button';

Kemudian kita gunakan pada fungsi render.

<Button variant="contained" color="primary">Click Me</Button>

Gunakan component diatas pada file index.js, berikut isi index.js setelah ditambahkan component AppContent.

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import AppContent from './AppContent';
import AppFooter from './AppFooter';
import './index.css';

class App extends Component{
  render(){
    return(
      <div className='main'>      
        <div>
          <h1>Hello React</h1>
          <AppContent/>
        </div>
        <AppFooter/>
      </div>
    );
  }
}

ReactDOM.render(<App/>, document.getElementById('root'))

Jika kita jalankan, maka Aplikasi react sudah menampilkan button yang disediakan oleh Material-UI.

Untuk dokumentasi lengkap penggunaan Material-UI, kunjungi website official di https://material-ui.com/

Sharing is caring:

Leave a Comment