reactjs

Membuat Komponen

Untuk satu baris kode HTML

Syntax:

function NamaKomponen(){

return kodeHTMLmu

}

Untuk lebih dari satu baris kode HTML

Syntax:

function NamaKomponen(){

return (

kodeHTMLmu

)

}

Keterangan:

kode HTML harus dalam satu parent misalnya dalam tag <div> dan </div> atau jika tidak ada maka bisa diganti diawali dengan <> dan diakhiri</>

 

Pemanggilan Komponen

Syntax:

<NamaKomponen />

 

Contoh:

Saya ingin membuat tampilan seperti gambar dibawah ini:

Pertanyaan:

Bagaimana cara membuatnya … ?

Jawaban:

Ikutilah bacaan dibawah ini

Membuat Komponen Layout

Buatlah sebuah file src/pages/layout,js lalu masukan kode berikut ini:

function Layout(){
return (
<div>
<div class=”container-fluid”>
  <div class=”row content”>
    <div class=”col-sm-2 sidenav”>
      <center><h3> Donasi</h3></center>
      <ul class=”nav nav-pills nav-stacked”>
        <li><a href=”#section1″>Tambah</a></li>
        <li><a href=”#section2″>Daftar</a></li>
      </ul>
    </div>
  <div class=”col-sm-9″>
      <h4><small>Isi Website</small></h4>
</div>
</div>
</div>
<footer class=”container-fluid”>
  <p>Footer Text</p>
</footer>
</div>
);
}
export default Layout;

 

Perubahan File App.js

Bukalah file src/App.js lalu rubah seperti ini:

import Layout from ‘./pages/layout.js’;

function App() {

return (

<Layout />

);

}

export default App;

 

Jalankan Aplikasi

Buka terminal lalu ketik perintah ini:

yarn start