Komponen adalah bit kode yang independen dan dapat digunakan kembali. Komponen melayani tujuan yang sama seperti fungsi JavaScript, tetapi bekerja secara terpisah dan mengembalikan HTML melalui fungsi render.
Komponen datang dalam dua jenis, komponen Kelas dan komponen Fungsi, dalam tutorial ini kita akan berkonsentrasi pada komponen Kelas.
Section Artikel
Membuat Sebuah Class Component
Saat membuat komponen React, nama komponen harus dimulai dengan huruf besar.
Komponen harus menyertakan pernyataan extends React.Component, pernyataan ini membuat pewarisan ke React.Component, dan memberikan akses komponen Anda ke fungsi React.Component.
Komponen ini juga membutuhkan metode render (), metode ini mengembalikan sebuah HTML.
Contoh :
class Car extends React.Component {
render() {
return <h2>Hi, I am a Car!</h2>;
}
}
Sekarang aplikasi React Anda memiliki komponen bernama Car, yang mengembalikan elemen. Untuk menggunakan komponen ini dalam aplikasi Anda, gunakan sintaks yang mirip seperti HTML biasa:
Contoh (Buat dua file untuk index.js dan index.html ):
Index.js
import React from 'react';
import ReactDOM from 'react-dom';
class Car extends React.Component {
render() {
return <h2>Hi, I am a Car!</h2>;
}
}
ReactDOM.render(<Car />, document.getElementById('root'));
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1" />
<title>React App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
Dan hasilnya sebagai berikut :
Membuat Sebuah Function Component
Berikut adalah contoh yang sama seperti di atas, tetapi dibuat menggunakan komponen Fungsi.
Komponen Fungsi juga mengembalikan HTML, dan berperilaku hampir sama dengan komponen Kelas, tetapi komponen Kelas memiliki beberapa tambahan, dan akan lebih disukai dalam tutorial ini.
Contoh Syntex :
function Car() {
return <h2>Hi, I am also a Car!</h2>;
}
Sekali lagi aplikasi React Anda memiliki komponen Car.
Mengacu pada komponen Car sebagai HTML biasa (kecuali di React, komponen harus dimulai dengan huruf besar):
Contoh Tampilan komponen Mobil di elemen “root”:
Index.js
import React from 'react';
import ReactDOM from 'react-dom';
function Car() {
return <h2>Hi, I am also a Car!</h2>;
}
ReactDOM.render(<Car />, document.getElementById('root'));
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1" />
<title>React App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
Dan hasilnya adalah sebagai berikut :
Component Constructor
Jika ada fungsi Constructor() dalam komponen Anda, fungsi ini akan dipanggil saat komponen dimulai.
Fungsi konstruktor adalah tempat Anda memulai properti komponen.
Di React, properti komponen harus disimpan dalam objek yang disebut state.
Anda akan mempelajari lebih lanjut tentang status nanti dalam tutorial ini.
Fungsi konstruktor juga tempat Anda menghormati pewarisan komponen induk dengan menyertakan pernyataan super (), yang mengeksekusi fungsi Construktor komponen induk, dan komponen Anda memiliki akses ke semua fungsi komponen induk (React.Component).
Contoh :
Membuat fungsi Construktor di komponen Car, dan tambahkan properti color:
class Car extends React.Component {
constructor() {
super();
this.state = {color: "red"};
}
render() {
return <h2>I am a Car!</h2>;
}
}Gunakan properti warna dalam fungsi render ():
Contoh :
Index.js
import React from 'react';
import ReactDOM from 'react-dom';
class Car extends React.Component {
constructor() {
super();
this.state = {color: "red"};
}
render() {
return <h2>I am a {this.state.color} Car!</h2>;
}
}
ReactDOM.render(<Car />, document.getElementById('root'));
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1" />
<title>React App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
Dan hasilnya adalah sebagai berikut :
Props
Cara lain untuk menangani properti komponen adalah dengan menggunakan props.
Properti seperti argumen fungsi, dan Anda mengirimkannya ke dalam komponen sebagai atribut.
Anda akan mempelajari lebih lanjut tentang properti di bab berikutnya.
Contoh : Gunakan atribut untuk meneruskan warna ke komponen Car, dan menggunakannya dalam fungsi render ():
Index.js
import React from 'react';
import ReactDOM from 'react-dom';
class Car extends React.Component {
render() {
return <h2>I am a {this.props.color} Car!</h2>;
}
}
ReactDOM.render(<Car color="red"/>, document.getElementById('root'));
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1" />
<title>React App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
Dan hasilnya adalah sebagai berikut :
KOMPONEN DALAM KOMPONEN
Kita bisa merujuk ke komponen di dalam komponen lain:
Contoh :
Index.js
import React from 'react';
import ReactDOM from 'react-dom';
class Car extends React.Component {
render() {
return <h2>I am a Car!</h2>;
}
}
class Garage extends React.Component {
render() {
return (
<div>
<h1>Who lives in my Garage?</h1>
<Car />
</div>
);
}
}
ReactDOM.render(<Garage />, document.getElementById('root'));
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1" />
<title>React App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
Dan hasilnya adalah sebagai berikut :
KOMPONEN DIDALAM FILE
React adalah tentang menggunakan kembali kode, dan mungkin juga untuk memasukkan beberapa komponen Anda ke dalam file terpisah.
Untuk melakukan itu, buat file baru dengan ekstensi file .js dan masukkan kode di dalamnya:
Perhatikan bahwa file harus dimulai dengan mengimpor React (seperti sebelumnya), dan harus diakhiri dengan pernyataan export default Car ;.
Syntax:
Ini adalah file baru, kami menamakannya “App.js”:
App.js
import React from 'react';
import ReactDOM from 'react-dom';
class Car extends React.Component {
render() {
return <h2>Hi, I am a Car!</h2>;
}
}
export default Car;
Untuk dapat menggunakan komponen Car, Anda harus mengimpor file di aplikasi Anda.
Contoh :
Sekarang kita mengimpor file “App.js” dalam aplikasi, dan kita dapat menggunakan komponen Car seolah-olah itu dibuat di sini.
App.js
import React from 'react';
import ReactDOM from 'react-dom';
class Car extends React.Component {
render() {
return <h2>Hi, I am a Car!</h2>;
}
}
export default Car;
/*
Notice that you now have three files in your project:
"App.js", "index.js", and "index.html".
*/
Index.js
import React from 'react';
import ReactDOM from 'react-dom';
import Car from './App.js';
ReactDOM.render(<Car />, document.getElementById('root'));Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1" />
<title>React App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
Dan hasilnya adalah sebagai berikut :
