Komponen Bereaksi

Komponen seperti fungsi yang mengembalikan elemen HTML.

Komponen Bereaksi

Komponen adalah bit kode yang independen dan dapat digunakan kembali. Mereka melayani tujuan yang sama seperti fungsi JavaScript, tetapi bekerja secara terpisah dan mengembalikan HTML.

Komponen datang dalam dua jenis, komponen Kelas dan komponen Fungsi, dalam tutorial ini kita akan berkonsentrasi pada komponen Fungsi.

Buat Komponen Pertama Anda

Saat membuat komponen React, nama komponen HARUS dimulai dengan huruf besar.

Komponen Kelas

Sebuah komponen kelas harus menyertakan extends React.Componentpernyataan. Pernyataan ini membuat pewarisan ke React.Component, dan memberikan komponen Anda akses ke fungsi React.Component.

Komponen juga memerlukan render()metode, metode ini mengembalikan HTML.

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

Komponen Fungsi

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

Komponen Fungsi juga mengembalikan HTML, dan berperilaku dengan cara yang sama seperti komponen Kelas, tetapi komponen Fungsi dapat ditulis menggunakan lebih sedikit kode, lebih mudah dipahami, dan akan lebih disukai dalam tutorial ini.

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

Merender Komponen

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

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

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

Atribut

Komponen dapat diteruskan sebagai props, yang merupakan singkatan dari properti.

Alat peraga seperti argumen fungsi, dan Anda mengirimkannya ke dalam komponen sebagai atribut.

Anda akan belajar lebih banyak tentang propsdi bab berikutnya.

function Car(props) {
  return <h2>I am a {props.color} Car!</h2>;
}

ReactDOM.render(<Car color="red"/>, document.getElementById('root'));

Komponen dalam Komponen

Kita dapat merujuk ke komponen di dalam komponen lain:

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

function Garage() {
  return (
    <>
      <h1>Who lives in my Garage?</h1>
      <Car />
    </>
  );
}

ReactDOM.render(<Garage />, document.getElementById('root'));

Komponen dalam File

React adalah tentang menggunakan kembali kode, dan disarankan untuk membagi komponen Anda menjadi file terpisah.

Untuk melakukannya, buat file baru dengan .js ekstensi file dan masukkan kode di dalamnya:

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

export default Car;

Untuk dapat menggunakan komponen Mobil, Anda harus mengimpor file di aplikasi Anda.

import React from 'react';
import ReactDOM from 'react-dom';
import Car from './Car.js';

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

function (props) {
  return <h2>Hi, I'm {props.name}</h2>;
}