React Components

Class Components yaitu cara lain untuk membuat komponen adalah dengan menggunakan Class ES6. Class ini merupakan komponen React yang valid karena menerima sebuah masukan argumen berupa “props” dan mengembalikan sebuah elemen React.

Function Components yaitu Cara paling sederhana untuk membuat komponen adalah dengan fungsi JavaScript. Fungsi ini merupakan komponen React karena menerima sebuah masukan argument berupa “props” dan mengembalikan sebuah elemen React sehingga disebut Function Component.

Class vs Function Component

Class
Import React, {Component} from ‘react’;
class App extends Components {
// do something in between
render(
<div>
<h1>Hello World</h1>
<div>
)
}
export default App;

Function Component
import React from 'react’;
function App() {
// do something in between
return (
<div>
<h1>Hello World</h1>
</div>
);
}
export default App;

Function Components
Terdapat dua jenis components di React. Namun, kita hanya akan berfokus kepada Function Component saja. Functions Components strukturnya sama dengan fungsi JavaScript biasa. Perbedaannya adalah Functions Components mengembalikan nilai yang menyerupai HTML.

import React from 'react’;
function App() {
// do something in between
return (
<div>
<h1>Hello World</h1>
</div>
);
}
export default App;

React JSX
Pada slide sebelumnya, Function Components mengembalikan nilai yang menyerupai JSX. JSX adalah syntax yang menggabungkan HTML dengan JavaScript. Berikut adalah contoh penerapannya.

import React from 'react’;
function App() {
const title = “React”
return (
<div>
<h1>Hello {title}</h1>
</div>
);
}
export default App;

List di React
Misalkan kita memiliki array dari object seperti disamping. Kita dapat merender list tersebut menggunakan JSX. Kita dapat menggunakan method map pada javascript untuk melakukan iterasi terhadap array tersebut.

import React from ‘react’;
const list = [
{
title: ‘React’,
author: ‘Jordan Walke’,
},
{
title: ‘Redux’,
author: ‘Dan Abramov’,
}
];
function App () {...};
Export default App;
import React from ‘react’;
const list = [...];
function App () {
return (
<div>
{list.map((item) =>
<div>{item.title}</div>
)}
<div>
)
};
Export default App;

Components di React
Kita dapat membuat lebih dari satu component di React. Misalnya kita dapat membuat component untuk merender item.

Pada fungsi ListItem memiliki parameter value. Parameter tersebut disebut props. Props berfungsi untuk mengirimkan data dari induk component (App) ke component tersebut (ListItem). Penerapannya ada di slide selanjutnya.

import React from ‘react’;
const list = [...];
function ListItem (value) {
return {
<div>
<div>{value.title}</div>
<div>{value.author}</div>
<div>
}
}
function App () {...};
Export default App;

Components di React
Kita dapat menggunakan function component pada component lain dengan cara seperti contoh disamping.

Hasil iterasi list berupa item dikirimkan ke component ListItem melalui props value. Penggunaan props serupa dengan atribut pada HTML.

import React from ‘react’;
const list = [...];
function ListItem (value) {...}
function App () {
return {
list.map((item) => {
<ListItem value={item} />
})
}
};
Export default App;

React DOM
Component App di-instantiate di entry point projek React kita, yaitu src/index.js.

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App’;
ReactDOM.render(
<App />,
document.getElementById('root')
);

Selain menggunakan module react, terdapat module react-dom. Modul tersebut digunakan untuk menginject component App di HTML dengan id root pada file public/index.html.

Handler Function di JSX
Kita dapat mendefinisikan handler menggunakan onChange handler. Handler tersebut akan dieksekusi apabila terdapat perubahan event yang dihanlde.

import React from 'react’;
function App () {
const handleChange = event => { console.log(event.target.value) };
return (
<div>
<input type=“text” onChange={handleChange}>
</div>
)
}
Fungsi handleChange akan dieksekusi setiap nilai input berubah sehingga akan mencetaknya nilainya di console.

React State
Props digunakan untuk mengirimkan informasi dari component induk ke anak component. Sedangkan state digunakan untuk membuat aplikasi menjadi interaktif. Kita dapat menggunakan state dengan mengimplementasikan useState.

import React, {useState} from 'react’;
function App () {
const [greeting, setGreeting] = useState(‘World’);
const handleChange = event => { setGreeting(event.target.value)};
return (
<div>
<h1>Hello, {greeting}!</h1>
<input type=“text” onChange={handleChange}>
</div>
)
}
const [greeting, setGreeting] = useState(‘World’);

useState membutuhkan satu parameter yang berfungsi sebagai nilai awal dari state tersebut. useState mengembalikan nilai berupa array yang berisi nilai state saat ini (greetings) dan fungsi untuk mengubah nilai state tersebut (setGreetings).

Contoh pada slide sebelumnya, greeting digunakan untuk menampilkan nilai dari state tersebut. Kemudian setGreeting digunakan oleh handleChange untuk mengubah state setiap nilai input berubah. Saat nilai state berubah, component akan dirender ulang sehingga menampilkan state terbaru.

React Side-Effect
React side-effect adalah suatu pengganti untuk React Life Cycle pada class components. React side-effect dapat digunakan dengan fungsi useEffect. useEffect berfungsi untuk memberi tahu component bahwa ada fungsi yang perlu dijalankan setelah component dirender.

import React, {useState, useEffect} from 'react’;
function App () {
const [greeting, setGreeting] = useState(‘World’);
const handleChange = event => { setGreeting(event.target.value)};
useEffect(() => {
console.log(greeting)
}, [greeting]);
return (...)
}
useEffect
useEffect(() => {
console.log(greeting)
}, [greeting]);

useEffect menerima dua parameter. Parameter pertama adalah suatu fungsi yang akan dijalankan saat side-effect muncul. Parameter kedua adalah array (dependency array). Array tersebut berisi state. Apabila nilai dari salah satu state dalam array tersebut berubah nilainya, fungsi akan dijalankan.

useEffect(() => {
console.log(greeting)
}, []);

Apabila dependency array berupa array kosong, fungsi side-effect hanya akan dijalankan ketika component dirender (tidak terpengaruh dari perubahan state).