Menambahkan CSS Pada Aplikasi React

by

Melanjutkan dari modul sebelumnya, disini kita akan membuat CSS dan menambahkannya pada aplikasi React.

Buka file index.js, lalu tambahkan code untuk import file css yang dimaksud, dan element HTML yang akan ditambahkan css rule.

Pada tutorial, kita akan tambahkan pada div teratas. Perhatikan, attribute yang digunakan adalah className, bukan class, karena keyword class sudah digunakan oleh javascript.

Berikut isi lengkap file index.js

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

// tambahkan className attribute pada element yang dimaksud
class App extends Component{
  render(){
    return(
      <div className='main'>      
        <div>
          <h1>Hello React</h1>
        </div>
        <AppFooter/>
      </div>
    );
  }
}

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

Untuk file css, karena akan menambahkan css pada file index.js, maka file harus diberi nama index.css. Ini berlaku untuk semua component lainnya yang akan menggunakan file css.

Buka file index.css, lalu ganti isi css rule dengan css dibawah. Anda bisa menggunakan rule sendiri, ini hanya contoh saja.

@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300&display=swap');

.main{
  margin: 0 auto;
  font-family: Lato;
}

Jalankan aplikasi dengan perintah npm start, pada browser akan ditampilkan aplikasi react sudah menggunakan css.

Latihan

Tambahkan css pada component AppFooter. Silakan gunakan css rule yang Anda inginkan.

Solusi

Buka file AppFooter.js, lalu tambahkan perintah import file css, serta tambahkan attribute className untuk element yang akan menggunakan css.

import React, {Component, Fragment} from 'react';
//import file css
import './AppFooter.css';

// tambahkan className attribute pada element yang dimaksud
export default class AppFooter extends Component{
    render(){
        const curYear = new Date().getFullYear();
        return(
            <Fragment>
                <hr/>
                <p className='footer'>Copyright &copy; 2021 - {curYear} Skillplus.web.id</p>
            </Fragment>
        );
    }
}

Buat file baru dengan nama AppFooter.css, lalu tambahkan css rule. Silakan gunakan rule Anda sendiri, atau silakan copy rule sederhana dibawah.

.footer {
    font-size: 0.8 em;
    color: darkgray;
}

Sampai disini, Kita sudah mempelajari bagaimana menggunakan CSS pada aplikasi React. Pada modul selanjutnya akan dibahas menggunakan framework CSS yang sudah ada, pada tutorial digunakan Bootstrap.

Sharing is caring:

Leave a Comment