Tutorial ReactJS Part #4 ~ Komponen ReactJS

Komponen mempermudah teman teman semua untuk memecah antarmuka pengguna menjadi bagian tersendiri. Setiap komponen ada di ruang yang sama, tetapi mereka bekerja secara independen satu sama lain dan menggabungkan semua dalam komponen induk, yang akan menjadi UI akhir aplikasi Anda.

Setiap komponen React memiliki struktur, metode, serta API mereka sendiri. Mereka dapat digunakan kembali sesuai kebutuhan Anda. Untuk pemahaman yang lebih baik, pertimbangkan seluruh UI sebagai pohon. Di sini, akar adalah komponen awal, dan masing-masing bagian lainnya menjadi cabang, yang selanjutnya dibagi menjadi sub-cabang.

Fungsi Komponen

Fungsi komponen adalah cara untuk menulis komponen yang hanya berisi metode render dan tidak memiliki statusnya sendiri. Mereka hanyalah fungsi JavaScript yang mungkin atau mungkin tidak menerima data sebagai parameter. Kita dapat membuat fungsi yang mengambil props(properties) sebagai input dan mengembalikan apa yang harus di-render. Komponen fungsional yang valid dapat ditunjukkan pada contoh di bawah ini.

function WelcomeMessage(props) {  
  return <h1>Welcome to the , {props.name}</h1>;  
}

Sekarang aplikasi React teman memiliki komponen, yang mengembalikan elemen. Untuk menggunakan komponen ini dalam aplikasi Anda, gunakan sintaks yang mirip seperti HTML biasa:

import React, { Component } from 'react';  
class App extends React.Component {  
   render() {  
      return (  
         <div>  
            <First/>  
            <Second/>  
         </div>  
      );  
   }  
}  
class First extends React.Component {  
   render() {  
      return (  
         <div>  
            <h1>Teman Ngoding</h1>  
         </div>  
      );  
   }  
}  
class Second extends React.Component {  
   render() {  
      return (  
         <div>  
            <h2>www.temanngdoging.com</h2>  
            <p>Ngoding Together.</p>  
         </div>  
      );  
   }  
}  
export default App;

Output :

Komponen Class

Komponen class lebih kompleks daripada komponen fungsional. Itu mengharuskan Anda untuk memperluas dari React. Komponen dan buat fungsi render yang mengembalikan elemen React. Anda dapat meneruskan data dari satu kelas ke komponen kelas lainnya. Anda dapat membuat kelas dengan mendefinisikan kelas yang memperluas Komponen dan memiliki fungsi render. Komponen kelas yang valid ditunjukkan pada contoh di bawah ini.

class MyComponent extends React.Component {  
  render() {  
    return (  
      <div>This is main component.</div>  
    );  
  }  
}

Komponen class juga dikenal sebagai komponen stateful karena mereka dapat menyimpan atau mengelola status lokal. Dapat dijelaskan pada contoh di bawah ini.

Dalam contoh ini, kami membuat daftar elemen yang tidak berurutan, di mana kami akan secara dinamis memasukkan StudentName untuk setiap objek dari array data. Di sini, kami menggunakan sintaks panah ES6 (=>) yang terlihat jauh lebih bersih daripada sintaks JavaScript lama. Ini membantu kita untuk membuat elemen kita dengan lebih sedikit baris kode. Ini sangat berguna ketika kita perlu membuat daftar dengan banyak item.

import React, { Component } from 'react';  
class App extends React.Component {  
 constructor() {  
      super();  
      this.state = {  
         data:   
         [  
            {             
               "name":"Fazri"             
            },  
            {            
               "name":"Awal"             
            },  
            {    
               "name":"Dian"          
            }  
         ]  
      }  
   }  
   render() {  
      return (  
         <div>  
            <StudentName/>  
            <ul>            
                {this.state.data.map((item) => <List data = {item} />)}           
            </ul>  
         </div>  
      );  
   }  
}  
class StudentName extends React.Component {  
   render() {  
      return (  
         <div>  
            <h1>Student Name Detail</h1>  
         </div>  
      );  
   }  
}  
class List extends React.Component {  
   render() {  
      return (  
         <ul>            
            <li>{this.props.data.name}</li>   
         </ul>  
      );  
   }  
}  
export default App;

Output :