Menambahkan Component Pada React Web App

Melanjutkan dari modul sebelumnya, pada modul ini kita akan membuat component baru. Isinya cukup sederhana, yaitu menampilkan footer.

Pada directory src, buat file baru, pada tutorial digunakan nama AppFooter.js

import React, {Component, Fragment} from 'react';

export default class AppFooter extends Component{
    render(){
        return(
            <Fragment>
                <hr/>
                <p>Copyright &copy; 2021 Skillplus.web.id</p>
            </Fragment>
        );
    }
}

Pembahasan Code

Import library yang diperlukan

import React, {Component, Fragment} from 'react';

Buat class yang diextends dari component, perhatikan kita gunakan keyword export agar class AppFooter dapat digunakan pada modul lainnya.

export default class AppFooter extends Component{

Setiap class component harus memiliki fungsi render, yang akan menampilkan garis horizontal hr dan text copyright.

Perhatikan, digunakan tag <Fragment></Fragment> untuk membungkus component AppFooter. Karena XML memiliki aturan tag harus memiliki opening dan closing tag, sementara hr adalah single tag.

Oleh karena itu digunakan tag khusus dari react, yaitu <Fragment>. Tag ini bertujuan agar component memilki valid XML, namun tag ini sendiri tidak akan dirender pada file html.

    render(){
        return(
            <Fragment>
                <hr/>
                <p>Copyright &copy; 2021 Skillplus.web.id</p>
            </Fragment>
        );
    }

Kemudian buka file .src/index.js dan ubah menjadi seperti code dibawah.

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

class App extends Component{
  render(){
    return(
      <div>      
        <div>
          <h1>Hello React</h1>
        </div>
        <AppFooter/>
      </div>
    );
  }
}

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

Pembahasan Code

Lakukan import file component yang diperlukan, dalam hal ini adalah AppFooter.

import AppFooter from './AppFooter';

Pada fungsi render, tambahkan tag <Appfooter />.

  render(){
    return(
      <div>      
        <div>
          <h1>Hello React</h1>
        </div>
        <AppFooter/>
      </div>
    );
  }

Sampai disini, kita sudah bisa membuat component baru dan menggunakannya.

Latihan

Pada AppFooter, digunakan angka statis untuk tahun copyright. Coba gunakan tahun berjalan saat ini.

Solusi

Buka file AppFooter.js, lalu tambahkan variable baru untuk menampung tahun berjalan. Kemudian gunakan variable tersebut saat menampilkan text copyright.

const curYear = new Date().getFullYear();

Perhatikan, untuk mengakses variable, digunakan tanda curly braces {nama_variable}.

<p>Copyright &copy; 2021 - {curYear} Skillplus.web.id</p>

Berikut isi lengkap AppFooter.js setelah dimodifikasi.

import React, {Component, Fragment} from 'react';

export default class AppFooter extends Component{
    render(){
        const curYear = new Date().getFullYear();
        return(
            <Fragment>
                <hr/>
                <p>Copyright &copy; 2021 - {curYear} Skillplus.web.id</p>
            </Fragment>
        );
    }
}

Buka web browser, dan reload. Maka akan ditampilkan copyright berdasarkan tahun berjalan.