Component dan Props di React
Jika ente sudah pernah belajar JavaScript , ente pasti tau dengan fungsi dalam JavaScript. Secara konsep, komponen mirip dengan fungsi pada JavaScript. Komponen menerima beberapa masukan (props) dan mengembalikan element yang dideskripsikan .
Class Komponen dan Fungsi Komponen
Cara untuk mendefinisikan sebuah komponen adalah dengan menuliskan fungsi JavaScript atau di React disebut dengan React Hooks
function Ahlan(props) {
return <h1>Ahlan {props.name}</h1>;
}
atau juga bisa dengan Class Komponen (ES6 class)
class Ahlan extends React.Component {
render() {
return (
<h1>Ahlan {this.props.name}</h1>;
);
}
}
Merender Komponen
function Ahlan(props) {
return <h1>Ahlan {props.name}</h1>
}
const el = <Ahlan name="Bass" />
ReactDOM.render(
el,
document.getElementById("root");
);
Menyusun Komponen
Sebuah dialog,tombol,form, di dalam React itu semua dinyatakan sebagai sebuah komponen.
contoh :
const Ahlan = (props) => {
return <h1>Ahlan {props.name}</h1>;
};
const App = () => {
return (
<>
<Ahlan name="Ahlan" />
<Ahlan name="Usamah" />
<Ahlan name="Basalamah" />
</>
);
};
ReactDOM.render(<App />, document.getElementById("root"));
Contoh Lain
Misal kita akan membuat page Login , terdiri dari 3 Komponen
- Sapaan User
- Form Login
- Footer Login
sekarang kita buat komponen "Sapaan User" dahulu, kita buat dengan nama file sapa.js
import React from "react";
const SapaUser = (props) => {
return (
<h6>
Ahlan, {props.user}. <br /> Silahkan Login !
</h6>
);
};
export default SapaUser;
untuk form login kita buat dengan nama file form.js
import React from "react";
const Form = () => {
return (
<form>
<input type="email" placeholder="Masukkan Email" />
<input type="password" placeholder="Masukkan Password" />
<button type="submit">Login</button>
</form>
);
};
export default Form;
untuk footer kita buat dengan nama file footer.js
import React from "react";
const Footer = () => {
return (
<footer>
<p>© Your Website</p>
</footer>
);
};
export default Footer;
nah, setelah itu kita import 3 komponen itu ke dalam file app.js
import React from "react";
import Sapa from "./sapa.js";
import Form from "./form.js";
import Footer from "./footer.js";
const App = () => {
return (
<Sapa>
<Sapa />
<Form />
<Footer />
</Sapa>
);
};
ReactDOM.render(<App />, document.getElementById("root"));
Selanjutnya Ape ?
pelajari tentang state , lifecycle dalam ReactJs dengan melihat dokumentasinya di sini
*Barakallahufiikum
Bagikan tulisan ini