Component dan props pada react JS

Masih melanjutkan tutorial React Js sebelumnya yaitu Memulai Project Dengan React JS, kali ini kita akan membahas Component dan Props pada React JS, bagaimana cara membuat dan mengunakannya.

Component adalah suatu potongan code yang nantinya dapat digunakan kembali (reusable) sehingga tidak terjadi penulisan kode yang berulang-ulang (redundant) dan bertujuan untuk memisahkan antara satu bagian dengan bagian lainnya.

Secara konsep, Component dirancang mirip dengan fungsi pada JavaScript. Mereka dapat menerima masukan (melalui variable Props).

Langsung saja kita menuju Bagaimana cara membuat component pada React JS.

Pada project React kita akan menemukan folder “src” nah silahkan Anda buat folder baru dengan nama bebas, namun pada kesempatan kali ini kita menggunakan nama “components” untuk menyimpan komponen-komponen yang akan kita buat.

Selanjutnya pada folder components buat file dengan extensi “.js” dengan nama “ComponentSaya.js” dan tulislah code seperti berikut :

import React,{Component} from 'react';
export default class ComponentSaya extends Component {
    render(){
        return(
            <div>
                <span>Nama Saya Adalah <strong>Chabib Nurozak</strong></span>
            </div>
        );
    }
}

hal-hal dasar yang perlu diingat dalam membuat component adalah nama file sama dengan nama class dan juga Harus diawali dengan huruf Kapital (Besar), hal ini disebabkan karena React Js akan membaca Huruf Besar sebagai sebuah komponen dan Huruf Kecil sebagai suatu tag Html.

Kemudian pada App.js kita edit scriptnya menjadi

import React, { Component } from 'react';
import ComponentSaya from "./components/ComponentSaya";
class App extends Component {
  render() {
    return (
        <ComponentSaya/>
    );
  }
}
export default App;

pada script diatas terdapat cara untuk memanggil component yang telah kita buat

import ComponentSaya from "./components/ComponentSaya";

dan pada fungsi render() terdapat <ComponentSaya/> adalah cara menggunakan component yang telah kita buat.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.