Pengenalan React

WARNING

Sebelum materi ini dimulai, pastikan:

• Visual Studio Code sudah terpasang
• NodeJS sudah terpasang
• (Optional), Install React Developer Tools Extension
• Untuk Firefox, bisa klik di sini
• Untuk Chrome, bisa klik di sini

Agenda

Apa saja yang akan dibahas?

• Apa itu React
• Inisialisasi React
• DOM vs React
• Core Concept React
• QnA
• Waktunya Tantangan

Apa itu React

Sebelum kita masuk ke React...

Ada baiknya kita mengetahui hal ini terlebih dahulu...

Apakah itu Pemrograman secara Imperatif vs Deklaratif

Imperatif vs Deklaratif

Imperatif vs Deklaratif (ii)

Mari kita analogikan: Pesan Pizza

Imperatif

1. Telepon Koki Pizza
2. Memberikan urutan membuat Pizza ke Kokinya secara Detail
3. Meminta Koki untuk membungkus Pizza dan memberikan ke Teller
4. Meminta Teller untuk memberikan ke delivery dan mengarahkan delivery sampai dengan tujuan
5. Menerima Pizza dan bayar

Deklaratif

1. Telpon Penjual Pizza, kasih Alamat
2. Duduk manis, menunggu, pizza tiba tiba sampai, bayar

Pilih yang mana?

Imperatif vs Deklaratif (iii)

Mari kita melihat secara kodingan

<script type="text/javascript">
  const app = document.getElementById('app');
  const header = document.createElement('h1');
  const headerContent = document.createTextNode('Mari bikin Secara DOM');
  header.appendChild(headerContent);
  app.appendChild(header);
</script>

<script type="text/jsx">
  const app = document.getElementById('app');
  ReactDOM.render(<h1>Mari bikin secara React</h1>, app);
</script>

Pilih yang mana?

Jadi React itu adalah...

• Sebuah Pustaka (Library) UI yang Deklaratif (ingat yah, BUKAN Framework)
• Kita bisa memberitahukan apa yang kita inginkan dari sisi UI ke React, dan React akan mikirin harus gimana untuk meng-update DOM-nya

Sejarah React

React Sangat Populer

Perusahaan pengguna React

Inisialisasi React

Tanpa ba bi bu lagi ...

Mari buat project React !

Dengan menggunakan create-react-app atau CRA

# npx create-react-app <nama-project-yang-ingin-dibuat>
npx create-react-app app-react-pertamaku
cd app-react-pertamaku

WARNING:

Perintah di atas memerlukan waktu yang cukup lama, dan kuota yang cukup besar yah !

Per Mei 2022, satu project React dengan CRA adalah sekitar 300MB ++

Struktur Folder React Project

Pada saat CRA dibuat, kira kira struktur foldernya adalah sebagai berikut:

app-react-pertamaku
│   .gitignore
│   package-lock.json
│   package.json
│   README.md
│
└───node_modules
│ 
└───public
│   
└───src
│   │   App.css
│   │   App.js
│   │   App.test.js
│   │   ...
│   ...

Struktur Folder React Project (ii)

node_modules

• Merupakan barang paling berat satu semesta
• Tempat menaruh dependency (package) eksternal dari project kita
• Ketika kita mengetik npm install maka package tersebut akan didownload dan diletakkan di sini

Struktur Folder React Project (iii)

public

• Tempat menaruh file yang statik (index.html, pustaka javascript, gambar, dan aset lainnya)
• File yang diletakkan pada folder ini TIDAK AKAN diproses oleh Webpack
• (Webpack merupakan tools bundler dari project berbasis CRA)
• (bundler adalah tools untuk membuat kode kita menjadi lebih terstruktur dan kecil ketika dijalankan di production)

Struktur Folder React Project (iv)

src

• Tempat menaruh file yang akan diproses oleh webpack
• mis: App.jsx / App.js yang memiliki file JSX harus diproses oleh webpack supaya bisa menjadi JavaScript biasa (istilahnya di-Transpile)
• App.js merupakan file komponen utama, dan index.js merupakan "gerbang utama" (entry point) untuk menjembatani html dengan aplikasi React yang dibuat

Struktur Folder React Project (v)

package.json & package_lock.json

• Berisi listing dari package / dependency yang dipasang pada node_modules
• Selain listing, berisi juga metadata dari project yang sedang dibuat
• package_lock.json berisi "kunci" untuk memastikan package yang akan didownload nantinya adalah sama dengan yang diinginkan

Yuk jalanin Aplikasi Reactnya

Cara menjalankannya adalah dengan

npm run start

Yes aplikasi React-nya berjalan !!!

DOM vs React

Padahal kan dengan DOM bisa bisa saja.

Kenapa React bisa selaku itu sih?

Mari kita coba lihat dari kode yang dibuat dengan DOM vs dibuat dengan React

DOM vs React (ii)

<!-- Bagian Body -->
<p>Halo DOM !</p>
<p>Bahasaku:</p>
<ul id="listBahasa"></ul>
<!-- Bagian Script (DOM Manipulasi) -->
<script type="text/javascript">
  const kumpulanBahasa = ['HTML', 'CSS', 'JavaScript'];
  const penahanUl = document.getElementById('listBahasa');
  // Untuk setiap list kita akan buatkan node li nya
  let nodesLi = kumpulanBahasa.map((bahasa) => {
    // Buat element li
    const penahanLi = document.createElement('li');
    penahanLi.textContent = bahasa;
    return penahanLi;
  });
  // Kita buatkan si nodesnya
  penahanUl.append(...nodesLi);
  // ini sama saja dengan
  // penahanUl.append(nodesLi[0], nodesLi[1], nodesLi[2]);
</script>

// Bagian Body
<div id="app"></div>
// Bagian Script (React)
import React from 'react';

export default function App() {
  const kumpulanBahasa = ['JSX', 'CSS', 'React'];
  return (
    // Element HTML di sini (namanya JSX)
    <div>
      <p>Halo React !</p>
      <p>Bahasaku:</p>
      {/* Langsung kita buatkan listnya */}
      {kumpulanBahasa.map((bahasa) => {
        // Langsung kita returnkan list yang baru
        return <li>{bahasa}</li>;
      })}
    </div>
  );
}

Pilih yang mana?

Core Concept React

Konsep Utama dalam React:

• JSX
• Komponen
• Props
• Render Kondisional (Conditional Rendering)
• State (Sneak Peek)

JSX

Umumnya pada HTML standar ataupun Pustaka / Framework lainnya, kita menuliskan "JS" di dalam HTML

• =>

  <div *ngFor="let user of users">

• =>

  <div v-for="user in users">

• =>

  {{#each user in users}}

Namun pada JSX, kita akan menuliskan HTML di dalam "JS" !

• =>

  {users.map(createUser)}

JSX (ii)

• JSX (JavaSCript XML) membolehkan kita untuk menuliskan kode yang mirip XML untuk kepentingan simplisitas dan elegan, kemudian akan dikonversi (transpile) menjadi fungsi JS
• Terlihat seperti gabungan dari JavaScript dan HTML

class HaloDunia extends React.Component {
  render() {
    return (
      // Ini adalah penulisan JSXnya
      <h1 className='hola'>Halo {this.nama}!</h1>
    );
  }
}

Catatan: Dalam JSX, penulisan JavaScript ada di dalam kurung kurawal { ... }

JSX (iii)

Perlu diingat juga bahwa JSX itu TIDAK SAMA dengan HTML

class Halo extends React.Component {
  render() {
    return (
      <div className="container">
        <h1>Baru mulai React nih !</h1>
      </div>
    )
  }
}

ReactDOM.render(<Halo />, nodeUtama);

class Halo extends React.Component {
  render() {
    return (
      React.createElement("div", {className: "container"}, 
        React.createElement("h1", null, "Baru mulai React nih !")
      );
    )
  }
}

ReactDOM.render(React.createElement(Halo, null), nodeUtama);

Komponen

• Anggap saja Komponen itu adalah seperti blok LEGO, yang bisa digabungkan untuk membuat suatu struktur bangunan
• Modularitas seperti ini memperbolehkan kita untuk menambahkan, mengganti, ataupun menghancurkan komponen tanpa perlu menyentuh aplikasi / komponen lainnya

Komponen (ii)

Tulisan dalam Component

Sebuah Button

Card Component

Image Component

Tulisan dalam Component

Text Component

Sebuah Button

Button Component

Komponen (iii)

• Komponen itu mirip dengan Fungsi
• Input, berupa props dan state
• Output, berupa UI yang dideklarasikan
• Komponen itu SANGAT MANTAP karena unsur dapat digunakan kembali reusability
• Sekali komponen sudah didefinisikan, bisa dipakai berkali-kali di mana saja, hanya butuh supply data ke dalam komponen
• Cara penulisan komponen
• Class Component (lebih powerful, namun lebih susah penggunaannya)
• Functional Component (SANGAT DIREKOMENDASIKAN karena jauh lebih mudah)

Komponen - Demo

Pada demo ini kita akan membuat folder components di dalam folder src, kemudian kita akan membuat 2 buah file dengan nama ButtonClass dan ButtonFunctional

Demo dapat dilihat di sini

Walaupun demo ini diberikan, SANGAT DISARANKAN untuk mencoba mengetiknya sendiri di dalam VSCode, karena tulisan tangan sendiri akan jauh lebih teringat oleh memori tangan kita (muscle memory never lies) dan bisa menambah jam terbang kita terhadap React !

Komponen - Demo (Hasil Akhir)

Hasil akhir dari demonya adalah sebagai berikut:

Hasil output bisa berbeda apabila diketik secara manual

dikarenakan adanya CSS yang telah disuntik ke dalam component

Props

Masih ingat HTML kan?

Atribut pada HTML bisa diartikan sebagai Data yang bisa mengubah suatu keadaan dari element

<img src="https://placekitten.com/120">
<img src="https://placekitten.com/240">

<a href="https://www.google.com/">Google</a>
<a href="https://www.youtube.com/">Youtube<a>

Nah dengan cara yang mirip seperti ini juga, kita bisa men-transfer data sebagai property ke dalam sebuah Komponen React

Hal ini disebut dengan props

Mari kita coba modifikasi kode sebelumnya dengan props

Props (ii)

Cara deklarasi Props

...
// Before Props
export default function App() {
  return (
    <div style={{ display: 'flex', flexDirection: 'row', gap: '0.5em' }}>
      <ButtonClass />
      <ButtonFunctional />
    </div>
  );
}
...

...
// After props
export default function App() {
  return (
    <div style={{ display: 'flex', flexDirection: 'row', gap: '0.5em' }}>
      {/* 
        Sekarang kita akan mencoba untuk melemparkan data via props 
        asumsi nama props yang akan digunakan adalah "text"
      */}
      <ButtonClass text="Button Class" />
      <ButtonFunctional text="Button Functional" />
    </div>
  );
}
...

Props (iii)

Cara menggunakan props (Functional)

import React from 'react';

// Cara 1: props dideclare sebagai parameter di dalam fungsi
const ButtonFunctional = (props) => {
  // Lalu tinggal digunakan (asumsikan sebagai object)
  return <button>{props.text}</button>;
};

export default ButtonFunctional;

import React from 'react';

// Cara 2: props dideclare sebagai parameter di dalam fungsi kemudian
//   destructuring dalam fungsi
const ButtonFunctional = (props) => {
  // Lalu destructuring

  // Berawal dari
  // const text = props.text;

  // Disingkat jadi cara bawah (istilahnya destructuring)
  const { text } = props;

  // Gunakan, tanpa perlu gunakan kata-kata props
  return <button>{text}</button>;
};

export default ButtonFunctional;

import React from 'react';

// Cara 3: props langsung di-destructuring sesuai kebutuhan
const ButtonFunctional = ({ text }) => {
  // Gunakan, tanpa perlu gunakan kata-kata props
  return <button>{text}</button>;
};

export default ButtonFunctional;

Props (iv)

Cara menggunakan props (Class)

import React, { Component } from 'react';

class ButtonClass extends Component {
  // Cara 1: Karena ini merupakan class React.Component,
  //   maka kita bisa memasukkan propsnya ke dalam super
  //   di dalam constructor
  constructor(props) {
    // di sini kita passing propsnya via super
    // super adalah method untuk memanggil constructor dari parent
    super(props);
  }

  render() {
    // rendernya sekarang akan kita panggil dari props (object)
    // props memiliki property dengan nama "text"
    return <button>{this.props.text}</button>;
  }
}

export default ButtonClass;

import React, { Component } from 'react';

class ButtonClass extends Component {
  // Cara 2: Langsung gunakan this.props
  //   karena pada ES2015 diperkenalkan sesuatu yang dinamakan
  //   default class constructor
  //   Maka di sini kita bisa skip bagian constructor(props) {...}
  //   tersebut, karena sudah di-defaultkan
  render() {
    // rendernya sekarang akan kita panggil dari props (object)
    // props memiliki property dengan nama "text"
    return <button>{this.props.text}</button>;
  }
}

export default ButtonClass;

Contoh kode props Class dan Functional dapat dilihat di sini

Extra: Conditional Rendering

Bagaimana bila sekarang kita ingin menggunakan props, tapi ingin memiliki "default value" (nilai default bila props tidak digunakan)?

Salah satu solusinya adalah dengan menggunakan conditional rendering ini.

Kunci utamanya adalah dengan menggunakan ternary operator

kondisi ? exprJikaBenar : exprJikaSalah

Contoh kode conditional rendering dapat dilihat di sini

State (Sneak Peek)

To be Continue...

Kepala sudah panas dan overheat bukan?

Sebenarnya masih ada beberapa hal utama dari React yang belum kita pelajari loh...

Kita simpan untuk pertemuan selanjutnya yah !

QnA

Waktunya Tantangan

Referensi

• https://2muchcoffee.com/blog/best-examples-of-websites-built-with-react/
• https://www.freecodecamp.org/news/html-vs-jsx-whats-the-difference/
• https://www.techdiagonal.com/reactjs_courses/beginner/reactjs-component-state/
• https://beta.reactjs.org/