Modul 3-1 Component React JS

Halo teman-teman, selamat datang kembali di course React JS bersama Nusantech Academy 🙂 .

Pada modul sebelumnya kita telah sedikit berkenalan dengan React JS, mulai dari apa itu React, cara membuat aplikasi React, props, state, dan lain-lain. Pada modul ini akan dibahas lebih dalam lagi tentang React JS. Yuks simak terus ya teman-teman.

Pada chapter ini kita akan mempelajari tentang komponen pada React JS. Di aplikasi React yang telah teman-teman buat sebelumnya, teman-teman telah membuat beberapa komponen pada React JS. Namun, mungkin teman-teman masih kurang memahami dengan penulisan komponen pada React JS, macam-macam komponen pada React, dan sebagainya. Pada chapter ini akan dibahas lebih dalam tentang komponen React. Yuks simak terus chapter ini 🙂 .

Pengertian Komponen

Komponen merupakan bagian-bagian dari suatu halaman web yang mempunyai fungsi dan perannya masing-masing. Komponen pada React bersifat reusable. Artinya, setiap komponen yang telah kita buat di suatu aplikasi dapat kita gunakan kembali di aplikasi lain. Berikut contoh komponen React.

class Contoh extends React.Component {
  render() {
    return <h2>Hello Nusantech Academy</h2>;
  }
}

Penulisan nama komponen harus diawali dengan huruf besar. Setelah nama komponen harus diikuti dengan pernyataan “extends React.Component”. Pernyataan ini berfungsi untuk memberikan akses komponen kita pada fungsi-fungsi di React.Component. Di dalam komponen React terdapat fungsi render() yang berfungsi mengubah JSX menjadi elemen HTML. Terdapat dua tipe komponen pada React, yaitu stateful component dan stateless component.

Stateful Component

Stateful component merupakan komponen React yang memerlukan state di dalamnya. Stateful component ditulis menggunakan class. Berikut contoh stateful component. 

class App extends React.Component {
 constructor(props) {
   super(props)
   this.state = { name: 'Nusantech Academy' }
 }
 
 render() {
   return (
     <div>
       <h1>
         Hello 
         {this.state.name}
       </h1>
       <button
         type="button"
         onClick={() => this.setState({ name: 'World' })}
       >
         Ubah State
       </button>
     </div>
   )
 }
}

Stateful component biasanya digunakan ketika dalam suatu page terjadi perubahan view atau tampilan ketika ada suatu trigger. Karena ketika state berubah maka komponen akan di-render ulang. Seperti pada contoh diatas, ketika kita klik tombol “Ubah State”, maka state akan berubah sehingga komponen akan di-render ulang mengakibatkan tampilan berubah.

Stateless Component 

Berbeda dengan stateful component, stateless component tidak memerlukan state di dalamnya. Stateless component biasanya ditulis menggunakan function. Berikut contoh stateless component. 

function App(){
  return (
    <div>
      <h1>Hello Nusantech Academy</h1>
    </div>
  )
}

Stateless component biasanya digunakan jika kita tidak menginginkan perubahan view atau tampilan dalam suatu page. Sama seperti stateful component, stateless component juga me-return elemen HTML. 

Constructor component

Constructor component digunakan untuk memberikan nilai properti awal pada suatu komponen. Constructor component ditulis di dalam stateful component, karena nilai properti awal komponen diletakkan di dalam state. Berikut contoh constructor component.

class Contoh extends React.Component {
  constructor() {
    super();
    this.state = {name: "Nusantech Academy"};
  }
  render() {
    return <h2>Hello {this.state.name} !!</h2>;
  }
}

Pada contoh di atas, komponen Contoh mempunyai properti “name” dengan nilai awal “Nusantech Academy” yang diletakkan di dalam state di dalam fungsi constructor().

Component in Component

Pada React kita dapat menaruh komponen di dalam komponen. Berikut contohnya.

function Parent() {
  return <Child />
}
 
function Child(){
  return (
    <div>
      <h1>Hello Nusantech Academy</h1>
    </div>
  )
}

Pada contoh di atas, kita meletakkan komponen Child di dalam komponen Parent. Cara memanggil komponen Child sama seperti kita menuliskan elemen HTML pada umumnya.

Component in File

Selain komponen React bersifat reusable, kita dapat meletakkan komponen React di dalam file yang berbeda. Berikut contohnya.

Di dalam Child.js

import React from 'react'
 
function Child(){
  return (
    <div>
      <h1>Hello Nusantech Academy</h1>
    </div>
  )
}
 
export default Child

Di dalam App.js

import React from 'react'
import Child from './Child'
 
function Parent() {
  return <Child />
}
 
export default App

Pada contoh di atas, kita letakkan file Child.js satu folder dengan file App.js. Kemudian di dalam App.js kita import file Child.js sebagai “Child”.

Penutup

Pada chapter ini kita telah mempelajari komponen React JS. Terdapat dua tipe komponen pada React JS, yaitu stateful component dan stateless component. Jika tampilan ingin berubah, muka gunakan stateful component. Sebaliknya, jika tampilan tidak berubah atau teman-teman hanya ingin menampilkan data saja, maka gunakan stateless component.

Sekian teman-teman penjelasan tentang React Component. Semoga teman-teman bisa memahami dengan baik ya. Sampai jumpa di chapter selanjutnya 🙂 . See you! 

Quiz

Untuk mengasah kemampuan teman-teman terkait materi ini, kami berikan beberapa soal untuk teman-teman jawab. Quiz dapat dikerjakan disini: https://bit.ly/quizreact3-1