Jalan untuk Bereaksi

Dec 01 2022

React adalah salah satu library Javascript terbaik yang digunakan untuk membangun aplikasi web. Untuk memahami React, kita perlu memahami cara kerjanya di balik layar.

Foto oleh Ksenia Yakovleva di Unsplash

React adalah salah satu library Javascript terbaik yang digunakan untuk membangun aplikasi web. Untuk memahami React, kita perlu memahami cara kerjanya di balik layar. Pada artikel ini, mari kita lihat dasar-dasar React, API React mentah, cara kerjanya secara internal, dan terakhir membuat komponen React yang dapat digunakan kembali.

Saya berasumsi bahwa Anda memiliki pemahaman dasar tentang konsep Javascript dan HTML DOM. Jika tidak, Anda dapat mempelajari konsep-konsep ini di sini: Panduan Javascript , Pengantar DOM .

Sekarang mari lompat ke topik kita!!

Bagaimana Halaman Web dibuat?

Pernahkah Anda penasaran dengan cara kerja web? Apa yang terjadi setelah Anda mengetik URL situs web dan mengeklik Enter? Bagaimana Anda bisa melihat halaman web itu di layar kita? Mari kita lihat langkah demi langkah.

1. Setelah Anda mencari situs web apa pun, permintaan HTTP dikirim ke server.

2. Server akan mengirimkan file website.

3. Browser akan mengurai file-file ini. Pertama, file HTML diurai, kemudian file CSS dan JavaScript diurai.

4. Browser membuat DOM dari HTML yang diurai dan menampilkannya di layar.

Beginilah cara halaman web ditampilkan di layar Anda (ada konsep lain seperti server DNS dan protokol HTTP, tetapi itu bukan bidang perhatian kami). Sesederhana itu, tapi tunggu, apa DOM ini? Dari mana asalnya? Haruskah kita menjelajahi DOM sedikit?

DOM mengacu pada Document Object Model, yang merepresentasikan dokumen HTML dengan pohon logika. Setiap cabang berisi node, dan setiap node berisi objek. Metode DOM memungkinkan akses ke DOM. Dengan metode tersebut, Anda dapat mengubah struktur dan isi dokumen.

Seperti yang kita semua tahu, HTML adalah blok bangunan dasar web, dan kita dapat membuat halaman web menggunakan HTML. Mari buat halaman web sederhana yang menampilkan "Halo dunia!!" seperti yang ditunjukkan di bawah ini:

<html>
  <body>
    <div id="root">
      <h1 id="greet">Hello World!!</h1>
    </div>
  </body>
</html>

Agar javascript dapat berinteraksi dengan DOM, kami perlu menambahkan tag skrip di file HTML, dan Anda dapat menulis kode untuk membuat, menghapus, atau memperbarui elemen di DOM (inilah yang kami sebut manipulasi DOM).

Mari kita lihat kode JavaScript yang berinteraksi dengan “Hello World!!” yang dibuat di atas. halaman dan mengubah kontennya menjadi "Wassup World!!".

Membuat elemen HTML dengan Javascript:

Seperti yang telah kita lihat bahwa kita dapat memodifikasi elemen HTML melalui javascript, mari kita coba membuat halaman web yang berisi div dengan "root" sebagai id dan h1 sebagai anak dari div. h1 berisi “Halo Dunia!!”. Kode dapat ditemukan di kotak pasir di bawah ini.

Tetapi membuat elemen melalui Javascript sangat penting. Untuk menyelesaikan tugas ini, kita harus menyediakan Javascript dengan petunjuk langkah demi langkah. Misalnya, jika Anda ingin membuat div dengan id, pertama-tama Anda harus membuat elemen div tersebut, kemudian menyetel atribut id , dan terakhir menambahkan div ini ke induknya. Sudah terlalu banyak pekerjaan. Bagaimana jika ada cara untuk memberi tahu JavaScript hanya elemen mana yang harus dibuat daripada cara membuatnya (pendekatan deklaratif)? Ini mengurangi banyak kode JavaScript. Kedengarannya bagus, bukan? Tapi bagaimana kita mencapainya? Apa pendekatan imperatif dan deklaratif ini?

Pemrograman imperatif adalah bagaimana Anda melakukan sesuatu, dan pemrograman deklaratif lebih seperti apa yang Anda lakukan. Ini adalah artikel yang bagus tentang pemrograman imperatif vs deklaratif .

Bereaksi adalah bahasa deklaratif, yaitu memungkinkan kita untuk menulis kode tanpa khawatir tentang bagaimana hal-hal yang terjadi di balik terpal.

Jadi, mari kita lihat bagaimana pemrograman deklaratif dapat membuat hidup kita lebih mudah.

Gambaran umum tentang React API:

React API menyertakan metode untuk memanipulasi DOM. misalnya, React.createElement() dan ReactDOM.render(). Pertimbangkan metode React.createElement() setara dengan document.createElement() dan ReactDOM.render() sebagai document.append(). Mari kita lihat jauh ke dalam metode ini.

React.createElement() membutuhkan dua argumen: elemen yang akan dibuat dan props. Jika Anda ingin membuat tag div sederhana dengan id "root" dan teks "Hello World!" di dalamnya, akan terlihat seperti ini:

const elementType = "div";
const elementProps = {id: "root", children: "Hello World!!"}
const newDiv = React.createElement(elementType, elementProps)

const elementType = "h1";
const elementProps = {className: "heading", children: "Hello World!!"}
const heading = React.createElement(elementType,elementProps)

ReactDOM.render(heading,document.getElementById("root"))

const root = ReactDOM.createRoot(document.getElementById("root"))
root.render(heading)

React adalah titik awal untuk menggunakan React dalam kode Anda. Anda dapat menginstalnya sebagai paket melalui npm atau menggunakan file skrip yang tersedia di unpkg.com . Mari gunakan file skrip dalam kode contoh kita, karena kita tidak perlu repot menginstalnya.

Sekarang mari kita buat ulang "Halo Dunia!!" halaman dengan React API.

Prop anak-anak untuk React.createElement() bisa berupa teks biasa atau elemen lain, itulah cara kami membuat elemen bersarang. Sebagai ilustrasi, pertimbangkan kode HTML berikut: div sebagai wadah yang berisi div lain sebagai turunan. Tag div anak berisi dua tag rentang dengan teks "Halo" dan "Dunia". Tautkan ke codeSandbox

membuat elemen bersarang dengan React API

Untuk membuat elemen bersarang kita harus menggunakan metode bersarang, yang membuatnya sangat sulit untuk membaca dan memahami kodenya.
Jadi kita membutuhkan kode yang lebih mudah dibaca. Jadi apakah ada cara alternatif untuk membuat kode dapat dibaca? Bagaimana jika kita bisa menulis sintaks seperti HTML alih-alih menggunakan React API? JSX muncul di sini. Mari luangkan beberapa menit untuk mempelajari tentang JSX.

BEJ:

JSX adalah sintaks seperti HTML (tetapi bukan HTML), yang merupakan gula sintaksis di atas React API mentah Anda. Anda dapat menulis semua metode React ini dalam sintaks mirip HTML sederhana dengan bantuan JSX.

Karena JSX bukan Javascript, Anda perlu mengubahnya menjadi JavaScript, yang dipahami oleh browser.

Babel adalah transpiler yang mengubah JSX menjadi Javascript. Semua JSX diubah menjadi React API oleh Babel, seperti yang ditunjukkan di bawah ini.

Babel mengubah JSX menjadi Javascript

Seperti yang terlihat pada gambar sebelumnya, <div id=”root”> dikonversi menjadi React.createElement(“div”,{id:”root”},anak-anak). Beginilah cara Babel mengubah JSX menjadi React API.

Untuk menggunakan Babel dalam proyek kami, kami harus menggunakan file skrip dari unpkg.com, dan kami dapat mulai menulis JSX di dalam tag skrip yang menyebutkan type=”text/babel” . Untuk lebih jelasnya, Anda dapat merujuk di bawah kotak pasir

Kami sampai sejauh ini dari memodifikasi DOM secara imperatif melalui Javascript menjadi menggunakan JSX. Tidak seperti di Javascript, kami tidak peduli tentang cara membuat elemen saat menggunakan JSX. Adalah tugas Babel untuk mengubahnya menjadi React API, yang akan memodifikasi DOM.

Inilah bagaimana pendekatan deklaratif React membuat hidup kita mudah. Tapi ini belum berakhir, dan kita kehilangan ide utama dari React, yaitu dapat digunakan kembali. Mari membuat komponen React yang dapat digunakan kembali.

Membuat Komponen Bereaksi:

Seperti yang kita ketahui bahwa fungsi membuat hidup kita lebih mudah dengan berbagi kode, kita juga dapat membagikan kode JSX sebagai fungsi, tetapi ini disebut komponen di React.

Mari kita ambil contoh.

<div className="container">
  <div className="msg">Hello World!!</div>
  <div className="msg">Bye World!!</div>
</div>

function message({children}){
  return (
    <div className="msg">{children}</div>
  )
}

const element = (
  <div className="container">
      {message("Hello World!!")}
      {message("GoodBye World!!")}
  </div>
)

ReactDOM.createRoot(document.getElementById("root")).render(element)

const element = React.createElement("div",{className="container"},
  React.createElement(message,"Hello World!!"),
  React.createElement(message,"GoodBye World!!")
)

Kami telah meneruskan fungsi pesan sebagai parameter ke React.createElement() alih-alih sebuah elemen. ketika kita meneruskan sebuah fungsi sebagai parameter ke React.createElement(), Reconciler React akan memanggil fungsi itu dengan parameter yang kita lewati. Saat rekonsiliator bertemu dengan elemen host, ia mengizinkan perender untuk memasangnya.

Komponen host adalah komponen khusus platform milik lingkungan host (seperti browser atau perangkat seluler). Dalam kasus host DOM, ini mungkin elemen HTML seperti div atau img .

Dalam kasus kita, dua pemanggilan fungsi akan terjadi, message (“Hello World!!”) dan message (“GoodBye World!!”) , dan kedua fungsi tersebut akan kembali:

<div className=”msg”> Halo Dunia!! </div>

<div className=”msg”>Selamat Tinggal Dunia!! </div>

Sama seperti menggunakan JSX untuk membuat kode lebih mudah dibaca daripada menggunakan React API mentah, menggunakan JSX untuk komponen khusus (fungsi Javascript) membuat kode kita lebih bersih dan lebih mudah dibaca. Ingatlah bahwa Babel yang bertanggung jawab untuk mengambil JSX kita dan mentranspilasinya ke dalam React API, jadi kita perlu mengonfigurasi Babel sedemikian rupa sehingga melewati fungsi dengan namanya, bukan string.

Untuk menggunakan komponen khusus sebagai tag JSX, kita harus mengkapitalisasi karakter pertama dari nama fungsi sehingga Babel mengenalinya sebagai komponen khusus. Ini terlihat seperti ini:

function Message({children}){
  return (
    <div className="msg">{children}</div>
  )
}

const element = (
  <div className="container">
      <Message>Hello World!!</Message>
      <Message>GoodBye World!!</Message>
  </div>
)

ReactDOM.createRoot(document.getElementById("root")).render(element)

Hore!! kita telah membuat komponen React pertama kita

Kesimpulan:

Beginilah cara React bekerja di belakang layar. Ingatlah bahwa ini hanyalah artikel mendasar yang menjelaskan cara kerja di balik terpal, dan ada banyak konsep lain seperti Status, DOM virtual, rekonsiliasi, dll. yang membuat React kuat dan efisien.