Belajar React.js dari nol untuk Pemula : Hello World #2

 Halo semuanya, 

Perkenalkan saya albiruni, seorang freelancer front end developer. Pada kesempatan ini, saya akan sharing tentang belajar react.js dari nol untuk pemula. Artikel ini akan memiliki beberapa seri maka dari itu kalian bisa langsung bookmark blog ini di browser kesayangan kalian. Oke, langsung saja kita mulai ya.

Di seri kedua ini kita akan belajar membuat hello world dan membahas apa yang terjadi dibalik kode tersebut.

Hello world di React.Js

Untuk membuat hello world di react.js, kalian bisa ikuti step step dibawah ini:

1. Buka folder project kalian yang sudah dibuat di seri pertama

2. Edit index.js menjadi seperti ini:

import React from "react";

import ReactDOM from "react-dom";

ReactDOM.render(<h1>Hello World</h1>, 

document.getElementById("root"));

3. Jalankan npm start dan buka localhost:3000 untuk melihat hasilnya.

Pembahasan:

Untuk mempermudah penjelasan kalian bisa membuka file index.html yang ada di public folder terlebih dahulu

<div id="root">

      <!-- Hasil render react.js -->

</div>

nah, di dalam index.html, kita bisa melihat ada sebuah tag div yang memiliki id root. di dalam blok div ini react.js akan menyisipkan elemen-elemennya seperti h1, p, div dan lain-lain.

ReactDOM.render(<h1>Hello World</h1>, 

document.getElementById("root"));

Nah, untuk kode ini digunakan untuk merender elemen ke div root yang ada di file index.html. seperti 

yang kita lihat disini. ReactDOM.render digunakan untuk merender elemen ke dom, ReactDOM.render 

ini membutuhkan 2 parameter, parameter yang pertama adalah elemen atau component, parameter 

kedua adalah elemen pembungkus yang ada di file index.html.

Pertanyaannya : Apakah syntax "<h1>Hello World </h1>" itu HTML ?

Jawabannya : Bukan, h1 disini adalah syntax JSX ( yang akan kita bahas lebih lanjut di seri ke 3 )

 

Pada dasarnya, React.js tidak memahami syntax html maka react.js memiliki cara sendiri untuk merender elemen ke dom

caranya adalah seperti ini

Behind The Scene

import React from "react";

import ReactDOM from "react-dom";

ReactDOM.render(

  React.createElement("h1", { children: "Hello World" }),

  document.getElementById("root")

);

Nah ini adalah syntax yang terjadi secara behind the scene. di atas kita mengimport React, artinya kita 

menggunakan semua method dari react. lalu kita menggunakan React.createElement(),

createElement inilah yang digunakan untuk membuat elemen di dom, parameter pertama menerima 

elemen yang mau dibuat, lalu parameter kedua berisi object props ( Pembahasan lebih lanjut di seri ke 5), 

didalam contoh berisi atribut children yang berisi tulisan Hello World, atribut children adalah isi dari 

tag h1 tersebut, bisa berupa text ataupun elemen react lainnya.

Apakah kita menggunakan React.createElement() ?

Tidak, kita tidak menggunakan React.createElement didalam codebase kita, kita nanti akan menggunakan syntax yang bernama JSX. Singkatnya JSX ini adalah kode yang mirip html tapi berjalan diatas javascript.

Kalo kalian penasaran sama JSX, langsung lanjut ke seri selanjutnya ya.

Sebagai kesimpulan, React.js memiliki cara tersendiri untuk merender elemen ke DOM. karena react.js tidak bisa menjalankan syntax HTML, maka dari itu react menggunakan createElement untuk membuat elemen ke DOM.

Oke, mungkin itu saja untuk pengenalan react.js kali ini, di artikel selanjutnya kita akan belajar syntax JSX sehingga kita tidak perlu repot-repot membuat elemen dengan createElement.

Terimakasih dan sampai jumpa di seri selanjutnya ya.