Komponen React JS

Belajar React JS

Fungsi komponen seperti membalikkan elemen HTML

Komponen React JS

Komponen adalah bit kode yang bebas dan dapat digunakan kembali. Komponen menjadikan tujuan yang sama dengan fungsi JavaScript, tetapi bekerja secara terpisah dan mengembalikan HTML melalui fungsi render.

Komponen terdapat dalam dua jenis, komponen Class dan komponen Fungsi, dalam artikel ini kita akan berkonsentrasi pada komponen Class.

Membuat Komponen Class

Ketika membuat komponen React JS, nama komponen harus dimulai dengan huruf besar.

Komponen tersebut meliputi pernyataan extends React.Component, pernyataan ini menciptakan turunan untuk React.Component, dan memberikan akses komponen ke fungsi React.Component.

Komponen ini juga membutuhkan  metode render(), metode ini membalikkan HTML.

Contoh

Membuat komponen Class bernama Car

class Car extends React.Component {
  render() {
    return <h2>Hi, I am a Car!</h2>;
  }
}

Sekarang  aplikasi React Anda memiliki komponen yang disebut Car, yang mengembalikan elemen  <h2>.

Untuk menggunakan komponen ini dalam aplikasi Anda, gunakan sintaks yang sama seperti HTML biasa: <Car />

Contoh

Menampilkan komponen Car dalam elemen “akar”:

ReactDOM.render(<Car />, document.getElementById('root'));
Membuat Komponen Fungsi

Berikut adalah contoh yang sama seperti di atas, tetapi dibuat menggunakan komponen Fungsi sebagai gantinya.

Komponen Fungsi juga membalikkan HTML, dan hampir sama dengan komponen Class, tetapi komponen Kelas memiliki beberapa tambahan, dan akan lebih dipelajari dalam artikel ini.

Contoh

Membuat komponen Fungsi bernama Car

function Car() {
  return <h2>Hi, I am also a Car!</h2>;
}

Sekali lagi aplikasi React JS kamu memiliki komponen Car.

Mengacu pada komponen Car sebagai HTML normal (kecuali dalam React, komponen harus mulai dengan huruf besar):

Contoh

Menampilkan komponen Car dalam elemen “akar”:

ReactDOM.render(<Car />, document.getElementById('root'));
komponen Konstruktor

Jika ada fungsi constructor() dalam komponen kamu, fungsi ini akan dipanggil ketika komponen akan dimulai.

Fungsi constructor adalah tempat di mana kamu memulai sifat komponen.

Dalam React, properti komponen harus disimpan dalam suatu objek disebut state.

kamu akan belajar lebih banyak tentang state nanti dalam artkel ini.

Di mana fungsi constructor kamu juga menerima turunan dari komponen induk dengan memasukkan pernyataan super() , yang mengeksekusi fungsi konstruktor komponen, dan komponen kamu memiliki akses ke semua fungsi dari komponen induk ( React.Component).

Contoh

Membuat fungsi konstruktor dalam komponen Car, dan menambahkan properti warna:

class Car extends React.Component {
  constructor() {
    super();
    this.state = {color: "red"};
  }
  render() {
    return <h2>I am a Car!</h2>;
  }
}

Menggunakan properti warna dalam fungsi render ():

Contoh

class Car extends React.Component {
  constructor() {
    super();
    this.state = {color: "red"};
  }
  render() {
    return <h2>I am a {this.state.color} Car!</h2>;
  }
}
Atribut

Cara lain untuk menangani properti komponen adalah dengan menggunakan props.

Alat peraga seperti fungsi argumen, dan kamu mengirim mereka ke dalam komponen sebagai atribut.

Anda akan belajar lebih banyak tentang props dalam artikel berikutnya.

Contoh

Gunakan atribut untuk memberikan warna untuk komponen Car, dan menggunakannya dalam fungsi render ():

class Car extends React.Component {
  render() {
    return <h2>I am a {this.props.color} Car!</h2>;
  }
}
 
ReactDOM.render(<Car color="red"/>, document.getElementById('root'));
Komponen dalam komponen

Kita bisa merujuk ke komponen di dalam komponen lain:

Contoh

Menggunakan komponen Car dalam komponen Garage:

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'));
Komponen dalam File

React adalah tentang menggunakan ulang semua kode, dan dapat menjadi mudah untuk memasukkan beberapa komponen kmau dalam file terpisah.

Untuk melakukan itu, buat file baru dengan ekstensi file.js  dan memasukkan kode tersebut di dalamnya:

Perhatikan bahwa file harus mulai dengan memasukkan React (seperti sebelumnya), dan harus berakhir dengan pernyataan export default Car;.

Contoh

Ini adalah file baru, kita namakan “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 memasukkan  file dalam aplikasi kamu.

Contoh

Sekarang kita memasukkan file “App.js” ke dalam aplikasi, dan apakah kita dapat menggunakan komponen Car seperti itu di sini.

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

No related posts.