Mengubah materi pengenalan react berdasarkan guideline

[mnindrazaka]

Berikut struktur materi berdasarkan guideline, silahkan berikan komentar apabila ada yang perlu ditambahkan

1. Permasalahan

• pada satu halaman website, terdiri dari berbagai fitur, dimana fitur - fitur pada satu halaman website tersebut akan dikembangkan dalam satu file javascript. Sehingga membuat script yang ditulis sangat banyak dan susah di maintain

• manipulasi DOM merupakan suatu proses yang membuat performa website menjadi slow, karena saat kita mengubah suatu element pada web, browser harus menghitung ulang layout, stylesheet, dan sebagainya https://stackoverflow.com/questions/6817093/but-whys-the-browser-dom-still-so-slow-after-10-years-of-effort

2. Penjelasan Materi Sebagai Solusi

• React merupakan library yang bersifat component based, dimana kita tidak menuliskan seluruh fitur yang ada pada satu halaman pada satu file. Satu file javascript nantinya akan berisi fitur pada satu component website, misalnya component button, search, list, dll

• React merupakan library yang menggunakan virtual dom. Virtual DOM akan mengcopy seluruh struktur DOM yang ada di browser, dan menyimpannya di memory. Apabila ada perubahan, maka yang diubah dulu adalah virtual DOM, baru kemudian dibandingkan dengan DOM yang asli untuk diubah pada bagian2 yang berbeda. Proses ini akan lebih cepat, karena virtual dom berada di memory, dan DOM yang diubah hanyalah bagian2 yang berbeda saja.

3. Penjelasan Detail Materi

• cara install dan menjalankan react
• penjelasan jsx
• cara membuat component react
• cara styling component react
• cara build react menjadi html

4. Contoh Kasus

Diberikan langkah - langkah untuk membuat sebuah component search menggunakan react. Component ini memiliki input text dan sebuah tombol untuk melakukan pencarian

const Search = () => {
 return (
  <div>
    <label>
      Search product
      <input type="text" placeholder="enter product name" />
    </label>
    <button>Search</button>
  </div>
 )
}