Membuat React Component

by

Tentu sudah menjadi kebiasaan umum, aplikasi pertama yang dibuat untuk tutorial programming adalah hello world.

Buka project direktori menggunakan text editor favorit Anda, pada tutorial digunakan visual studio code.

Ada dua folder penting yang perlu diperhatikan pada struktur file reactjs, yaitu public dan src.

Direktori public akan berisi file yang bisa diakses oleh pengguna, sementara direktori src akan berisi source file dimana kita melakukan development.

Sebelum memulai tutorial ini, kita akan hapus beberapa file hasil instalasi dari modul sebelumnya. File tersebut tidak digunakan dan jika diperlukan, kita akan buat ulang.

File yang kita hapus adalah yang diberi tanda kotak merah.

Kemudian buka file index.js, masukan code dibawah

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

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

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

Sesuai ekspektasi, pada browser akan ditampilkan h1 dengan tulisan Hello React.

Pembahasan code

Untuk membuat aplikasi react, import libray yang diperlukan.

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

Kita akan buat component react, dengan membuat class yang diextends dari Component.

Setiap Component, harus memiliki fungsi render(), dimana fungsi render akan berisi tag XML untuk membuat tampilan.

Pada contoh code akan membuat tampilan div dengan isi h1 yang berisi text Hello React.

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

Untuk menampilkan pada web page, kita harus lakukan rendering pada ReactDOM. Parameter yang dibutuhkan adalah component yang akan dirender, dalam hal ini adalah <App/>.

Perhatikan cara penulisan Component, selalu menggunakan closing tag.

Serta lokasi hasil render akan ditampilkan, yaitu element div dengan id=root pada file publc/index.html.

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

Isi file public/index.html tidak dilakukan perubahan, hanya dibuang bagian commentar.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

Sampai disini kita sudah belajar membuat component pertama, dan memahami hubungan Antara file index.js dengan index.html.

Jadi secara sederhananya, Reactjs akan mengkompilasi file index.js, hasilnya akan ditampilkan di index.html.

Pada React app tidak ada batasan jumlah component. Pada modul berikutnya, kita akan membuat component lainnya di file terpisah, dan bagaimana cara menghubungkannya dengan file index.js.

Sharing is caring:

Leave a Comment