InDepthEngineering-REACT- ARTICLE — 2

Jan 08 2023

Sekadar referensi, ikuti tautan ini untuk sampai ke artikel sebelumnya. Seperti biasa, senang melihat Anda tertarik untuk membaca artikel saya.

Sebelum memulai dengan artikel nomor dua mari kita rekap apa yang kita lihat di artikel sebelumnya sebagai berikut:

Kami membuat aplikasi sederhana dalam vanilla JavaScript.
Kami dapat menambahkan react.js ke aplikasi kami.
Dalam proses penambahan react.js kita belajar bahwa react.js hanyalah kumpulan fungsi.

Kami akan menambahkan Styling ke aplikasi kami yang kami buat di artikel sebelumnya.
Kita akan mengetahui mengapa react.js menggunakan DOM virtual dan cara kerjanya

let paragraph1 = React.createElement('p', {}, 'Hey there!');

let paragraph1 = React.createElement('p', {className: 'greetings'}, 'Hey there!');

const root = document.getElementById('root');

const reactProjectRoot = ReactDOM.createRoot(root);

const childParagraphOne = React.createElement('p',{},'Hello World!');
const childParagraphTwo = React.createElement('p',{},'Welcome to my website');

// property className is added to the second argument.
// I have removed the property id is now.
const container = React.createElement('div',{className: 'greetings'},[childParagraphOne,childParagraphTwo]);

reactProjectRoot.render(container);

.greetings {
    color: rgb(200, 159, 252);
    font-size: 2rem;
    font-weight: bold;
    text-align: center;
}

<!DOCTYPE html>
<html>
<head>
    <title>My App</title>
    <script src="index.js" defer></script>
    <!-- link to css -->
    <link rel="stylesheet" href="./index.css">
</head>
<body>
    <div id="root">
    </div>
    <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
</body>
</html>

Apakah aplikasi kami benar-benar bebas dari kesalahan? Tidak! bukan itu. Saat Anda membuka konsol browser, Anda seharusnya dapat melihat kesalahan berikut:

Cara menghilangkan error ini adalah dengan melakukan perubahan berikut pada index.js (cek komentar):

const root = document.getElementById('root');

const reactProjectRoot = ReactDOM.createRoot(root);

// I have added the property key to each of the child paragraph elements.
// I have given unique values to the property key for each child
const childParagraphOne = React.createElement('p',{key: 'para1'},'Hello World!');
const childParagraphTwo = React.createElement('p',{key: 'para2'},'Welcome to my website');

const container = React.createElement('div',{className: 'greetings'},[childParagraphOne,childParagraphTwo]);

reactProjectRoot.render(container);

Katakanlah Anda memiliki wadah induk yang memiliki tiga elemen anak dengan tag HTML yang sama dan sudah dirender di browser. Sekarang Anda menambahkan elemen turunan keempat dengan tag HTML yang sama ke penampung induk dalam kode Anda.

Pustaka React saat membuat tampilan menggunakan fungsi React.createElement() akan membuat pohon DOM virtual yang akan langsung diperbarui tanpa langsung memperbarui pohon DOM di browser. Dengan anak-anak yang memiliki properti kunci unik, pustaka ReactDOM yang bertanggung jawab untuk rendering di browser tidak harus merender ulang semua anak dari wadah induk di browser jika anak baru diperkenalkan (ini adalah anak keempat). Pustaka ReactDOM mengetahui bahwa anak baru adalah satu-satunya yang perlu dirender dan anak-anak lain telah dirender dan mereka ada di pohon DOM browser dengan membandingkan nilai properti kunci dari elemen anak di pohon DOM browser dan pohon DOM virtual. Jadi perpustakaan ReactDOM memastikan untuk merender hanya perubahan yang diperlukan di browser. Ini membuat React efisien.