Contoh Penggunaan Component Pada React Js

Bismillaahirrohmaanirrohiim…

Seperti yang telah kita ketahui, react js dipakai untuk menciptakan interface atau tampilan.

Konsep penting react js yang harus dipahami dalam menciptakan interface ialah component.

Dari namanya saja kita tahu bahwa component merupakan bab yang membentuk kesatuan.

Baca juga:

• Cara Gampang Install React Js Dengan Cepat
• Contoh Penggunaan Component Pada React Js
• Contoh Penggunaan React Router Di React Js

Misalkan sebuah mobil, memiliki komponen pintu, roda, mesin, dll.

Rumah memiliki komponen kamar tidur, atap, lemari, kamar mandi, dll

pada halaman react JS memiliki komponen header, content, footer, comment, dll

Nah, dari analogi di atas sudah terperinci kan apa itu component di react js.

Sekarang eksklusif saja kita praktekkan.

Jika anda belum sanggup menjalankan react js, sebaiknya membaca dulu artikel cara install react js.

Saat menciptakan create-react-app, kita akan memiliki struktur folder ibarat berikut:

 

Buat file Header.js di dalam folder src

isikan kodenya spt berikut:

import React, { Component } from 'react';

class Header extends Component {
  render() {
    return (
      <div>
      <h1>Ini ialah komponen header</h1>
      </div>
    );
  }
}

export default Header;

 

Buat file Content.js di dalam folder src

Isikan kodenya spt berikut:

import React, { Component } from 'react';

class Content extends Component {
  render() {
    return (
      <div>
      <p>Contoh komponen content baris 1</p>
      <p>Contoh komponen content baris 2</p>
      </div>
    );
  }
}

export default Content;

 

Buat file Footer.js di dalam folder src

Isikan kodenya spt berikut:

import React from 'react';

class Footer extends React.Component {
  render() {
    return (
      <div>
      <p>Komponen footer</p>
      </div>
    );
  }
}


export default Footer;

Terakhir buka App.js

Isikan kodenya ibarat di bawah ini:

import React, { Component } from 'react';

import Header from './Header';
import Content from './Content';
import Footer from './Footer';

class App extends Component {
  render() {
    return (
      <div>
        <Header />
        <Content />
        <Footer />
      </div>
    );
  }
}

export default App;

 

Penjelasan

kita telah menciptakan komponen header, content, dan footer.

ketiga komponen tersebut dimasukkan didalam App.js dengan cara meng “import” dulu komponen kemudian menuliskannya sebagai “tag”.

setelah disave kemudian lihatlah hasilnya.

Kesimpulan

Mudah bukan memahami komponen pada react js? yang kita pelajari diatas disebut class component.

Yang selain itu ada juga functional component, bentuk sederhana dari komponen react js, akan dijelaskan nanti ketika membahas props dan state.

Jika ada error atau ada yang ingin ditanyakan silahkan tinggalkan komentar dibawah ini.

Sumber https://rasupe.com

Mari berteman dengan saya

Follow my Instagram _yudha58

Share on Facebook

Share on Twitter

Share on Google+

Share on LinkedIn

Subscribe to receive free email updates: