Mengapa para profesional menggunakan React

kamu akan mengingat penderitaan dari Level 1 – dan memahami mengapa komponen diciptakan. Pelajaran hanya membaca.

Di Level 1, kamu memiliki header dengan menu di setiap halaman. Dan setiap kali kamu menambahkan halaman baru, kamu harus menyalin menu – dan memperbaikinya di mana saja dengan setiap perubahan. Mengganggu dengan tiga halaman, mimpi buruk dengan tiga puluh halaman. Dan rasa sakit itulah yang menjadi awal cerita kita.

Komponen: tulis sekali, gunakan di mana saja

Para profesional berpikir: bagaimana jika menunya adalah sepotong kode yang “dimasukkan” ke setiap halaman? Ubah di satu tempat – berubah di mana saja. Bagian seperti itu disebut komponen.

Dan itu bukan hanya menunya. Lihatlah situs web kamu dari sudut pandang serangkaian blok penyusun:

kartu pemain (kamu memilikinya 4× – dan hanya berbeda berdasarkan nama dan posisi),
foto di galeri (10× – hanya gambarnya yang berbeda),
tombol (di mana saja – hanya teksnya yang berbeda).

Situs web profesional bukanlah tumpukan file HTML. Ini adalah kotak LEGO: beberapa blok (komponen) khusus yang dirangkai menjadi satu aplikasi utuh.

Apa itu React

React adalah alat (perpustakaan) untuk JavaScript yang menangani perakitan semacam ini. Itu ditemukan di Facebook, gratis, dan sebagian besar internet dibangun di atasnya: Facebook, Instagram, Netflix, Airbnb… Komponen dalam React terlihat seperti ini – jangan khawatir, kami hanya mencarinya sekarang:

function PlayerCard({ name, position, jerseyNumber }) {
  return (
    <div className="card">
      <h3>{name} · #{jerseyNumber}</h3>
      <p>{position}</p>
    </div>
  );
}

Dan itu digunakan seperti tag HTML khusus:

<PlayerCard name="Jake" position="goalkeeper" jerseyNumber={1} />
<PlayerCard name="Alex" position="midfield" jerseyNumber={8} />

Apakah kamu mengenali ini? Ini adalah fungsi (dari Level 2) yang mengembalikan HTML. Kartu ini ditulis satu kali dan digunakan dengan data yang berbeda – seperti stempel dengan huruf yang dapat ditukar.

Kekuatan super nomor dua: React menangani penggambaran ulang

Di Level 2 kamu menulis: “temukan elemen, ubah teksnya, tambahkan kelas…” Dalam aplikasi besar, ada begitu banyak pengaturan ulang manual sehingga kamu bisa tersesat di dalamnya. React membaliknya:

kamu mendeskripsikan seperti apa tampilan halaman untuk data tertentu. Ketika datanya berubah, React memikirkan sendiri apa yang harus digambar ulang.

Skornya berubah dari 0 menjadi 1? kamu tidak perlu mencari elemen apa pun – kamu cukup mengubah nomornya, dan React menggambar ulang apa pun yang diperlukan. kamu akan melihatnya beraksi dalam pelajaran tentang negara.

Apa yang terjadi di level ini

kamu akan menginstal alat pro: terminal dan Node.js (pelajaran berikutnya).
kamu akan menyiapkan aplikasi React pertama kamu menggunakan Vite.
kamu akan mempelajari komponen, props, dan status.
kamu akan membangun kembali situs web Level 1 kamu di React.
kamu akan membuat server Node.js kamu sendiri dan menghubungkan buku tamu ke server tersebut.

💡

kamu tidak harus sepenuhnya memahami semuanya dari pelajaran hari ini. Cukup ambil satu kalimat: React = komponen (bata LEGO) + menggambar ulang otomatis. kamu akan langsung mempelajari segala hal lainnya dalam pelajaran mendatang.

Apa yang bisa diambil dari pelajaran ini

Menyalin kode yang sama ke beberapa tempat adalah jebakan – kamu sudah menemukannya sendiri di Level 1.
Komponen adalah fungsi yang mengembalikan sebagian halaman. Tulis sekali, pakai berkali-kali dengan data berbeda.
React menggambar ulang halaman untuk kamu: kamu mengubah data, itu mengubah layar.