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.
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 _yudha58Related Posts :
Cara Gampang Install React Js Dengan CepatBismillaahirrohmaanirrohiim…Sudah tau React JS?React JS merupakan library j4vascript yang ketika ini sangat terkenal untuk menciptakan… Read More...
Contoh Penggunaan Component Pada React JsBismillaahirrohmaanirrohiim…Seperti yang telah kita ketahui, react js dipakai untuk menciptakan interface atau tampilan.Konsep penting… Read More...
Integrasi Bootswatch Di ReactjsBismillaahirrohmaanirrohiim…Apa itu bootswatch? ia yakni template gratis untuk bootstrap, terdiri dari bermacam template gampang diinstall, … Read More...
Contoh Penggunaan React Router Di React JsBismillaahirrohmaanirrohiim…Setelah kita berhasil menginstall react JS, tentunya kita ingin mencoba menciptakan web dengan react JS ini.Dala… Read More...
Integrasi Bootstrap Di ReactjsBismillaahirrohmaanirrohiim…Sebagai lanjutan dari goresan pena sebelumnya wacana rujukan “penggunaan react router“, sekarang kit… Read More...
0 Response to "Contoh Penggunaan Component Pada React Js"
Posting Komentar