Tutorial Component React JS – Panduan lengkap untuk pemula

Di Tutorial kali ini kita akan belajar mengenal dan membuat component di React JS, seperti yang kita ketahui React Js merupakan pustaka / library dari javascript yang sangat populer saat ini dimana keguanaannya untuk membangun UI ( User Interface ) suatu website atau web aplikasi dan di React JS tidak bisa lepas dari yang namanya component, component ini sifatnya reuseable, yang artinya setiap component bisa digunakan kembali bahkan berkali-kali setiap component ini diperlukan. Di internet Ada banyak sekali component React JS yang siap digunakan dan akan memudahkan kita dalam membuat suatu web aplikasi.

Daftar Isi :

1. Pengertian Component React JS
2. Cara Kerja Component React JS
3. Macam-macam Component React JS
4. Cara penulisan Component React JS
5. Cara Menggunakan Component React JS
6. Penutup

1. PENGERTIAN COMPONENT REACT JS

Component merupakan bagian code yang terpenting dari aplikasi React JS, karena aplikasi React JS terusun dari barbagai component – component yang nantinya akan di render dan menghasilkan HTML. Setiap Component di React JS mempunyai fungsi dan perannya masing-masing dalam membentuk UI ( User Interface ) suatu website.

2. CARA KERJA COMPENENT REACT JS

Menurut saya ada hubungan yang erat antara component dan data, Cara kerja dari React JS sangat sederhana, ketika suatu data berubah maka UI ( user Interface ) juga otomatis ikut berubah akan tetapi apakah jika UI (user Interface ) di rubah data juga otomatis berubah ? Jawabanya Tidak. Cara kerja ini di sebut dengan One-Way Data Flow.

React JS menggunakan Virtual DOM, di dalam Virtual DOM inilah component akan memberitahukan React JS bagian-bagian mana saja yang harus di render yang kemudian akan menghasilkan HTML sehingga menghasilkan UI( user Interface ) kepada user.

3. JENIS-JENIS COMPONENT REACT JS

Ada 3 macam jenis component pada framework React JS yaitu :

1. Statefull Component

Yang pertama adalah Statefull Component. Statefull Component mempunyai semua fitur dan lifecycle dari ReactJs. Pada Statefull Component ini kita bisa melakukan berbagai perubahan state, operasi logic,  maupun fetch data dari server tentunya, untuk lifecycle seperti static getDerivedStateFromProps(), componentDidMount(), componentDidUpdate(), shouldComponentUpdate() bisa kita gunakan di Statefull Component ini.

contoh stateful commponent

class Main extends Component {
 constructor() {
   super()
   this.state = {
     kursi: []
   }
 }
 render() {
   return <BooksList books={this.state.kursi} />;
 }
}

2. Pure component

Berdasarkan konsep kemurnian dalam paradigma pemrograman fungsional, suatu fungsi dikatakan murni jika:

Nilai kembaliannya hanya ditentukan oleh nilai inputnya
Nilai kembaliannya selalu sama untuk nilai input yang sama

Sebuah komponen React dianggap murni/pure jika menghasilkan output yang sama untuk state dan props yang sama. Untuk komponen kelas seperti ini, React menyediakan kelas dasar Pure Component. Komponen kelas yang memperluas kelas React.PureComponent diperlakukan sebagai Pure Component.

Pure component memiliki beberapa peningkatan kinerja dan pengoptimalan render karena React mengimplementasikan metode shouldComponentUpdate() untuk mereka dengan perbandingan yang dangkal untuk props dan state.

Contoh Pure component

import React from 'react';

class PercentageStat extends React.PureComponent {

  render() {
    const { label, score = 0, total = Math.max(1, score) } = this.props;

    return (
      <div>
        <h6>{ label }</h6>
        <span>{ Math.round(score / total * 100) }%</span>
      </div>
    )
  }

}

export default PercentageStat;

3. Stateless Component

Stateless Component atau Component tanpa state adalah jenis component yang ke 3. Component ini hanya menerima props dan context pada react. Component ini juga tidak membawa lifecycle react di dalamanya. Jadi model component seperti sangat cocok untuk menyelesaikan permasalah seperti pembuatan Badge, Ticker, Label dsb.

contoh Stateless Component

import React from 'react';

const BadgePreOrder = (props) => {
  return (
    <div>Pre Order {props.num} hari</div>
  );
}

export default BadgePreOrder;

4. CARA PENULISAN COMPONENT REACT JS

Ada 3 cara untuk menulis component yaitu : cara function component, cara class component dan cara arrow component

• Contoh Penulisan Dengan Function Component

• Contoh Penulisan Dengan Class Component

• Contoh Penulisan Dengan Arrow Component

const navbar = () => {

  return (

    <div>

      <h1>Arrow Component</h1>

    </div>

  )

}

Untuk dapat menggunakan kedua component ini kita harus export seperti bagian paling bawah component diatas

 

“export default App;”

 

setelah kita export lalu kita import dimana component ini akan dipakai, disini saya contohkan component ini akan di pakai di index.js dengan perintah “import App from ‘./App’;” seperti gambar dibawah ini