- Component/ Functional component
Component adalah method/ perilaku yang merepresentasikan bagian dari web misal textbox, label, radiobutton, etc. React di tulis di dalam tag script denga type "text/babel". Berikut contoh penulisan component :
<script type="text/babel">
function OurFirstComponent() {
return (
// Code that represents the UI element goes here
);
}
</script>
atau dapat di tulis juga seperti ini
const OurFirstComponent = () => {
return (
// Stuff to make this component goes here
);
}
- JSX
Selain menggunakan HTML Rect juga dapat menggunakan JSX. JSX merupakan script HTML yang di tuliskan di dalam script javascript, berikut contoh nya :
<script type="text/babel">
function OurFirstComponent() {
return (
<h1>Hello, I am a React Component!</h1>
);
}
</script>
Note : karena "class" merupakan reserved word di javascript jadi kita harus mengganti atribut tag "class" html menjadi ClassName di JSX.
- ReactDOM
ReactDOM merupakan bagian dari react JS yang bertugas untuk melakukan render JSX ke halam HTML. berikut contoh nya :
<script type="text/babel">
function OurFirstComponent() {
return (
<h1>Hello, I am a React Component!</h1>
);
}
const placeWeWantToPutComponent = document.getElementById('hook'); //hook adalah id dari tag
ReactDOM.render(OurFirstComponent(), placeWeWantToPutComponent);
</script>
Atau kita dapat melakukan nya seperti ini :
ReactDOM.render(<OurFirstComponent />, placeWeWantToPutComponent);
- Component di dalam Component
Kita dapat memanggil component di dalam component, contoh :
<script type="text/babel">
function OurFirstComponent() {
return (
<h1>I am the child!</h1>
);
}
function Container() {
return (
<div>
<h1>I am the parent!</h1>
<OurFirstComponent />
</div>
);
}
const placeWeWantToPutComponent = document.getElementById('hook');
ReactDOM.render(<Container />, placeWeWantToPutComponent);
</script>
- Class Component
Jika sebelum nya component bisa di katakan sebagai method/function, React menyediakan penggunaan class di dalam javascript sebagai Component, yang di namakan Class Component. Berikut contoh penggunaan nya :
render() {
return (
<div>
<h1>I am the parent!</h1>
<OurFirstComponent />
</div>
);
}
}
const placeWeWantToPutComponent = document.getElementById('hook');
ReactDOM.render(<Container />, placeWeWantToPutComponent);
Class component harus memiliki function render() untuk mengembalikan nilai JSX yang ada di dalam nya. Sama seperti Component/ Functional Component, Class Component dapat di panggil menggunakan notasi seperti ini : <SebuahClassComponent />
Note ; Jika masih isa pakai functional component usahakan jangan pakai class component karena agak sulit dibaca (kata author nya).
- Javascript di dalam JSX
Berikut cara memanggil javascript di dalam JSX :
render() {
const greeting = 'I am a string!';
return (
<div>
<h1>{ greeting }</h1>
<OurFirstComponent />
</div>
);
}
}
Contoh lain nya :
render() {
const addNumbers = (num1, num2) => {
return num1 + num2;
};
return (
<div>
<h1>The sum is: { addNumbers(1, 2) }</h1>
<OurFirstComponent />
</div>
);
}
}
- State
Class Component dapat menyimpan informasi tentang informasi yang sedang terjadi, informasi tersebut di sebut dengan state. Berikut contoh penggunaan nya :
constructor(props) {
super(props);
this.state = { isMusicPlaying: false };
}
render() {
return (
);
}
}
dari code di atas state di isi object dengan key isMusicPlaying dan value false.
Sifat pendefinisian constructor nya bersifat baku, harus seperti itu :
constructor(props) {
super(props);
}
Note : props adalah informasi yang di bagikan dari parent ke child.
- Event Handler
constructor(props) {
super(props);
this.state = { isMusicPlaying: false };
}
handleClick(event) {
if (event.state.isMusicPlaying) {
event.setState({ isMusicPlaying: false });
} else {
event.setState({ isMusicPlaying: true });
}
};
render() {
let status = this.state.isMusicPlaying
? 'Playing :)'
: 'Not playing :(';
return (
<div>
<h1 onClick={this.handleClick.bind(this)}>{ status }</h1>
</div>
);
}
}
Dari code di atas, pada saat pertama kali dio render(), program akan mengecek apakah state true atau false. Jika true maka "Playing" jika false maka "Not Playing".
Selanjutnya di dalam bagian JSX, pada tag h1 di tambahkan event listener javascript "onClick". event tersebut diisi dengan method handleClick yang akan mengeksekusi sesuatu jika tag h1 di click.
Note : sebenar nya di dalam method handleClick parameter event bisa di ganti pakai this aja, jadi ga usah pakai parameter.
- Hubungan komunikasi antar Component
Berikut contoh hubungan antara class component dengan component (function) diluar class tersebut :
constructor(props) {
super(props);
this.state = { isMusicPlaying: false };
}
handleClick() {
if (this.state.isMusicPlaying) {
this.setState({ isMusicPlaying: false });
} else {
this.setState({ isMusicPlaying: true });
}
};
render() {
return (
<div>
<PlayButton isMusicPlaying={this.state.isMusicPlaying} />
</div>
);
}
}
berikut isi dari function PlayButton
function PlayButton(props) {
const className = props.isMusicPlaying ? 'play active' : 'play';
return <a href="#" title="Play video" className={className} />;
}
function PlayButton menerima object yang di passing dari class Containe dimana function PlayButton di panggil.
Selain mempassing informasi, kita juga bisa mempasing function seperti contoh sebagai berikut :
function PlayButton(props) {
const className = props.isMusicPlaying ? 'play active' : 'play';
return <a onClick={props.onClick} href="#" title="Play video" className={className} />;
}
constructor(props) {
super(props);
this.state = { isMusicPlaying: false };
}
handleClick() {
if (this.state.isMusicPlaying) {
this.setState({ isMusicPlaying: false });
} else {
this.setState({ isMusicPlaying: true });
}
};
render() {
return (
<div>
<PlayButton
onClick={this.handleClick.bind(this)}
isMusicPlaying={this.state.isMusicPlaying}
/>
</div>
);
}
}
dari code di atas, dapat kita lihat di bagian render() dimana Component PlayButton di panggil, di beri dua parameter yaitu onClick yang berupa function dan isMusicPlaying. Keduanya di bugnkus menjadi props pada saat di terima di Component PlayButton.
silahkan di kunjungi. bagus, mudah di pahami.
