React Untuk Pemula

Apa itu React?

React adalah sebuah library Javascript untuk membuat UI buatan , walaupun banyak yang salah bilang kalau React itu framework.

React dikeluarkan tahun 2013 dan menjadi salah satu teknologi web yang populer dan diminati pada tahun 2021.

Jadi apa yang membuat React sangat special? Simplicity.

Component & JSX

React memiliki istilah yang bernama component.

Component hanyalah sebuah function javascript yang memiliki nilai kembalian sebuah HTML.

function Item() {
  return <p>Goodbye World!</p>
}

Gimana ceritanya bisa ada syntax HTML di Javascript? I’m glad you asked.

Syntax HTML yang ada di React/Javascript disebut JSX.

Bisa dibilang ini cuman bentuk custom advanced dari HTML yang dibuat oleh orang React.

Jika di HTML ada class, maka di JSX ada className.

function Item() {
  return <p className="test">Goodbye World!</p>
}

Jika kita sudah membuat sebuah component, kita bisa memanggilnya seperti tag HTML biasa.

function Item() {
  return <p className="test">Goodbye World!</p>
}

<Item/>

Props & Children

Jika kalian bertanya lagi, terus apa bedanya dengan menulis HTML? I’m glad you asked, twice.

Coba ingat-ingat, apa tujuan sebuah program dimasukkan ke dalam sebuah function?

Agar program itu bisa kita panggil berkali-kali tanpa harus menulis kodingan yang sama bukan?

Di HTML, jika ingin membuat 5 paragraph, kita harus melakukannya seperti ini.

<p class="test">Goodbye World!</p>
<p class="test">Goodbye World!</p>
<p class="test">Goodbye World!</p>
<p class="test">Goodbye World!</p>
<p class="test">Goodbye World!</p>

Jika di React, cukup panggil componentnya saja sebanyak 5x.

<Item/> // Gak tau kenapa ini beda sendiri
<Item/>
<Item/>
<Item/>
<Item/>

Tapi ada tujuan lain kenapa kita menggunakan function? Yaa, parameter.

Program bisa dipanggil berkali-kali dengan nilai yang berbeda.

Kita bisa memasukkan argumen ke dalam fungsi yang memiliki parameter dan itu bisa kita lakukan terhadap component.

Parameter pada component disebut props. Props hanyalah sebuah object atau dictionary jika kalian paham python.

Cukup taruh props di parameter function.

function Item(props) {
  return <p className={props.myClass}>Goodbye World!</p>
}

<Item />

Hmm, dari mana datangnya props.myClass?

Seperti yang sudah dijelaskan di atas, props hanyalah sebuah object dan cara mengakses sebuah object adalah dengan cara memanggil key-nya.

Dan cara memberi nilainya adalah sama seperti kita memberi attribute pada HTML.

function Item(props) {
  return <p className={props.myClass}>Goodbye World!</p>
}

<Item myClass="test"/> // <== Begini

Bagaimana kalau saya ingin di dalam component, bisa diisi component atau jsx yang lain?

React menyediakan props khusus bernama props.children.

function Item(props) {
  return <p className={props.myClass}>
    {props.children}
  </p>
}

<Item myClass="test"> // <== Gak tau kenapa beda sendiri
  Good Bye World!
</Item>

<Item myClass="test-2"> 
  The World, berhentikanlah waktu
</Item>

How To Start React

Oke, kita sudah belajar core dari React, lalu gimana cara mulainya? I’m glad you asked, again.

Pertama, install Node dulu. Download yang LTS.

Jika sudah, pastikan npm sudah ada di PATH. Jalankan npm --version di terminal atau CMD kalian.

Saya tidak akan pakai cara yang biasa dipakai banyak orang menggunakan npx, cuz, it’s too mainstream 😎.

Sebagai gantinya, kita akan menggunakan Vite . Apa ini? Itu tidak penting, untuk sekarang.

Jalankan perintah di bawah ini.

npm init vite

Jika sudah kalian akan diminta memasukkan nama project (dan akan jadi nama folder yang dibuat ).

Selanjutnya, kalian akan diminta memilih framework, pilih react.

Lalu, kalian akan diminta memilih variantnya, pilih react.

Enter, maka kalian sudah membuat projectnya.

Jalankan perintah yang muncul di bawah saat kalian sudah membuat projectnya.

cd test-react
npm install
npm run dev

Jika sudah maka akan muncul tampilan seperti ini.

Buka http://localhost:3000 dan kalian akan melihat hasilnya.

Seperti yang bisa kalian lihat, jika ingin membuat perubahan, ubah file App.jsx. Kalian bisa bermain-main disitu dulu untuk sementara.

Akhir Kata…

Ada alasan kenapa React disebut Library dan bukan framework.

React tidak memiliki fitur routing, state management, animation, dsb. Tapi kenapa masih banyak orang yang pakai?

Massive Ecosystem.

Akan selalu ada components yang dibuat oleh orang-orang diluar sana sehingga kalian tidak perlu membuat components dari awal.

Kalian butuh static site? Ada Gatsby

Kalian butuh server side rendering? Ada Next.js

Butuh animasi? Ada Spring

Mau buat form? Ada Formic

Butuh state management? Noh => Redux , Mobx , Recoil

Sebagai tambahan kalau kalian bosen di Web, kalian bisa membuat aplikasi mobile menggunakan React Native

Okee, itu aja, adios.