Tutorial Belajar Reactjs #4: Mengenal Props dan Styling Pada Component Reactjs

 

Tutorial ini merupakan materi lanjutan dari tutorial sebelumnya yaitu, Tutorial Belajar Reactjs #3: Mengenal Jenis Component Pada Reactjs. untuk mempermudah memahami materi pada tutorial part04 ini, saya sarankan untuk membaca tutorial sebelumnya.

pada meteri tutorial part#04 ini kita akan membahas materi tentang mengenal props dan memberikan styling pada Component react js. langsung saja kita mulai,

buat sebuah folder baru dan berinama misal tutorial part 04, lalu seperti biasa buka kode editor kalian, dan buat sebuah file index.html dan buat struktur dasar tag html.

1.Props / property Pada Component React Js

    Apa Itu Props..?

    

  Props atau property, merupakan sebuah parameter, pada reactjs dan dapat di gunakan untuk menjembatani suatu component dengan component lain untuk saling terhubung satu sama lain, dan dengan props ini juga dapat mempermudah kita dalam menggunakan component, tanpa harus menulis ulang struktur dari componentnya, contoh misalkan , kita memiliki component menu makanan, seperti dibawah ini,

  
  //functional component
var MenuMakanan = function () {
    return (
       <div>
         <div>Bakso Pak Kumis</div>
         <div>Harga Rp. 10.000</div>
       </div>
     );
}

//class component
class MenuMakanan extends React.Component {
    render() {
      return (
         <div>
           <div>Bakso Pak Kumis</div>
           <div>Harga Rp. 10.000</div>
         </div>
       )
    }
}
ReactDOM.render(
  <div>
   <MenuMakanan/>
 </div>, document.getElementById("app"));
 

ketika kita ingin menampilkan jenis atau nama makanan lebih dari satu, misalkan 3 jenis makanan, maka logika nya kita harus menulis tag html nya sebanyak 3 kali atau pun bisa juga kita mebuat component diatas sebanyak tiga component, mungkin jika menu makanan yang kita tampilkan ada lebih dari 10 misal nya kita perlu melakukan hal yang sama sebanyak 10 kali, ini akan cukup merpotkan, dan juga codingan kita akan lebih panjang.

Nah disini lah kengunaan dari props yang kita bahas kali ini, dengan menggunakan props kita cukup memanggil nama component Menumakanan dan kita parsing atau isi parameter yang ingin kita tampilkan sehingga kita tidak perlu menulis ulang tag html nya dan component yang kita buat menjadi dinamis, untuk menampilkan data makanan terbaru kita cukup memanggil comnponent nya saja. sperti contoh di bawah ini.

  
var MenuMakanan = function (props) {
return (
       <div>
         <div>{props.nama}</div>
         <div>{props.harga}</div>
         </div>
     );
}

//class component
class MenuMakanan extends React.Component {
    render() {
      return (
         <div>
           <div>{this.props.nama}</div>
           <div>{this.props.harga}</div>
         </div>
       )
    }
}
        
ReactDOM.render(
   <div>
     <MenuMakanan nama="Bakso Pak Kumis" harga="Rp 10.000" />
     <br/>
     <MenuMakanan nama="Soto Babat" harga="Rp 15.000" />
     <br/>
     <MenuMakanan nama="Es Campur" harga="Rp 5.000" />
   </div>, document.getElementById("app") );
   

jika di jalankan codingan di atas maka hasilnya sama saja, baik itu menggunakan props atau pun tanpa mengunakan prosp. 

Hasil Running..

Tutorial Belajar Reactjs #4: Mengenal Props dan Styling Pada Component Reactjs

Notes: Kenapa di URL Browser nya menjadi Sebuah IP Address, disini saya menggunakan Code Editor Visual Studio Code jadi untuk meruning programnya saya menggunakan plugin OpenWith Live Server

sedikit penjelasan dalam penggunaan props pada component react js. ketika kita menggunakan props pada functional component kita perlu medekalrasikan nya pada awal function nya  function MenuMakanan (props) lalu untuk menampilkan parameter yang kita parsing kita perlu menambahkan  <div>{props.nama}</div>  .

Sedangkan pada class component kita tidak mendeklarasikan nya, akan tetapi untuk menerima atau menampilkan props yang kita parsing kita perli menambahkan this. pada props nya. sehingga menjadi 

<div>{this.props.nama}</div> untuk lebih jelas bisa melihat gambar di bawah ini.

Penggunaan props pada Component React js

2. Styling Pada Component React Js

    seteleh kita berhasil menggunakan props selanjutnya kita coba untuk menggunakan css atau memberikan sedikit style pada component yang sudah kita buat sebelumnya.

pada react js untuk menggunakan property css. cara pemanggilan nama css nya sedikit berbeda dengan cara pemanggilan css pada umumnya, kita perlu menambahkan Name pada saat pemanggilan css nya className="nama css" pada tag yang kita ingin beri style css nya.  pada react js kita juga bisa menulis langsung kode css satu file bersamaan dengan file component nya, namun agar lebih rapi kita pisahkan saja kode css. buat file baru untuk menyimpan kode css nya dan jangan lupa impor file css ke file index.html nya, untuk style css bisa lihat koding dibawah ini.

.card {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    transition: 0.3s;
    width: 25%;
    margin: 5px;
}

.label-Nama {
    text-align: center;
    font-size: 25px;
    color: rgb(5, 5, 5);
}

.label-harga {
    width: fit-content;
    padding: 5px;
    font-size: 20px;
    font-style: italic;
    color: #ffffff;
    background: crimson;
}

lalu berinama tag html pada component yang telah kita buat sebelumnya, sehingga keseluruhan koding dari file html yang telah kita buat seperti berikut.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- REACT LIBRARY-->
    <link rel="stylesheet" href="style.css">
    <script src="https://unpkg.com/react@15.5.4/dist/react.js"></script>
    <!-- REACT DOM LIBRARY-->
    <script src="https://unpkg.com/react-dom@15.5.4/dist/react-dom.js"></script>
    <!--BABEL LIBRARY-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.25.0/babel.min.js"></script>
    <title>Belajar React part03</title>
</head>

<body>
    <div id="app">Isi konten rout react JS</div>
    <script type="text/babel">
//functional Component
function MenuMakanan(props) {
    return (
        <div className="card">
            <div className="label-Nama"><b>{this.props.nama}</b></div>
            <div className="label-harga">{this.props.harga}</div>
        </div>
    );
}

//class component
class MenuMakanan extends React.Component { 
    render() { 
	   return (
        <div className="card">
            <div className="label-Nama"><b>{this.props.nama}</b></div>
            <div className="label-harga">{this.props.harga}</div>
        </div>
        ) 
    } 
} 

ReactDOM.render(
        <div>
            <MenuMakanan nama="Bakso Pak Kumis" harga="Rp 10.000" />
            <br/>
            <MenuMakanan nama="Soto Babat" harga="Rp 15.000" />
            <br/>
            <MenuMakanan nama="Es Campur" harga="Rp 5.000" />
        </div>, document.getElementById("app") );
    </script>
</body>
</html>

hasil Runing ...

Tutorial Belajar Reactjs #4: Mengenal Props dan Styling Pada Component Reactjs

pada materi tutorial kali ini kita telah mempelajari apa itu props pada react js , bagaimana cara penggunaan props pada react js, dan memberi style pada component yang telah kita buat.. sampai disini Tutorial Belajar Reactjs #4: Mengenal Props dan Styling Pada Component Reactjs. 

untuk lebih memahahami lagi tentang react js, bisa lanjut ke Tutorial Part #5.

Part#5 : Tutorial Belajar Reactjs #5: Mengenal State dan Event Pada Reactjs

Jika ada masukan dan saran mengenai postingan ini bisa berikan di kolom Komentar..

Sekian Dan Terima kasih...

#Happy Coding

#Keyword Penelusuran

• Belajar ReactJs 
• Tutorial ReactJs
• Belajar ReactJs Untuk Pemula
• Tutorial ReactJs Untuk Pemula
• Jenis Component pada React JS
• Functional Component pada Reactjs
• Class Component Pada Reactjs
• Cara menggunakan Functional Component pada Reactjs
• Cara menggunakan Class Component Pada Reactjs
• Props dan Styling pada react js
• cara menggunakan props pada react js
• cara memberi style pada component react js

Share this post