Untuk Pemula, Belajar React Kok Minta Cepet?

Waaah… rasanya agak aneh sih ini. Udah berapa lama yaa saya tidak menuliskan hal-hal teknis seperti ini? Bahkan judulnya saja sudah sangat tidak teknis. Tapi beneran lho, emang bisa ya belajar React secara “instan”? Saya rasa TIDAK BISA. Saya gak mau aja bikin teman-teman kecewa dengan ekspektasi.

But anyway, yaudah lah yaa… terlepas dari lama tidaknya proses belajar, yang penting kita menikmatinya. Oke, kali ini saya bakal memberikan tutorial sederhana cara membuat Stepper Component. Salah satu Component yang paling dijulidin teman kantor saya wkwk, “Fal, ini kenapa sih di projectmu selalu ada Stepper Component?”. Tapi gapapa, karena saya belajar banyak dari stepper component ini.

Pertama, kita ngebentuk dulu basic template komponennya.

import React from "react";

const Stepper = () => {
  return (
    <div
      style={{
        margin: "40% auto",
        display: "flex",
        justifyContent: "space-between",
        maxWidth: 95,
        fontSize: 25
      }}
    >
      <button>-</button>
      <div>0</div>
      <button>+</button>
    </div>
  );
};

export default Stepper;

Setelah itu kita buatkan state, agar angkanya bisa diganti secara dinamis. Hmm… kita pake hooks langsung kali yaa? biar kekinian. Haha.

import React, { useState } from "react";

const Stepper = () => {
  const [counter, setCounter] = useState(0)
  return (
    <div
      style={{
        margin: "40% auto",
        display: "flex",
        justifyContent: "space-between",
        maxWidth: 95,
        fontSize: 25
      }}
    >
      <button>-</button>
      <div>{counter}</div>
      <button>+</button>
    </div>
  );
};

export default Stepper;

Pssstts… coba deh iseng-iseng ganti angka “0” nya jadi angka lain, nanti liat apa yang berubah. Yaa biar paham aja sih. kalau gak mau yaa gapapa.

Oke lanjut, setelah itu tambahkan function baru untuk melakukan penambahan angka. Jadi semisal nih angkanya 0. Ketika function ini dijalankan angkanya jadi 1. Gitu. Kalo dijalankan lagi jadi 2, kalau dijalankan lagi jadi 3, dst. Gitu lah pokoknya.

import React, { useState } from "react";

const Stepper = () => {
  const [counter, setCounter] = useState(0);
  const tambahkanAngka = () => {
    setCounter(counter + 1)
  }
  return (
    <div
      style={{
        margin: "40% auto",
        display: "flex",
        justifyContent: "space-between",
        maxWidth: 95,
        fontSize: 25
      }}
    >
      <button>-</button>
      <div>{counter}</div>
      <button>+</button>
    </div>
  );
};

export default Stepper;

Naah function itu gak bakal jalan dengan sendirinya. Jadi perlu ada pemicu atau “triggerer”. Kebetulan nih kita punya tombol “+” (tambah). Gimana kalau kita jalankan function itu saat user melakukan click pada tombol “+”? gini caranya.

import React, { useState } from "react";

const Stepper = () => {
  const [counter, setCounter] = useState(0);
  const tambahkanAngka = () => {
    setCounter(counter + 1)
  }
  return (
    <div
      style={{
        margin: "40% auto",
        display: "flex",
        justifyContent: "space-between",
        maxWidth: 95,
        fontSize: 25
      }}
    >
      <button>-</button>
      <div>{counter}</div>
      <button onClick={tambahkanAngka}>+</button>
    </div>
  );
};

export default Stepper;

Cieh udah bisa nambah sekarang. Nah itu guis yang namanya “event handling” di React. Jadi kita sedang melakukan “handling” pada event click di tombol “+”.

Pada saat tombol “+” di-click, maka function tambahkanAngka akan dijalankan sesuai state saat ini. Misal saat ini angkanya 0, yaa berarti 0 + 1. Semisal angka saat ini 1, yaa berarti 1 + 1, dst.

Udah ketebak kan yaa gimana cara kita bikin tombol “-” (Minus) bekerja? iya, betul, tinggal bikin aja function baru untuk melakukan pengurangan, terus tempelin deh ke tombol “-“. Seperti ini:

import React, { useState } from "react";

const Stepper = () => {
  const [counter, setCounter] = useState(0);
  const tambahkanAngka = () => {
    setCounter(counter + 1);
  };
  const kurangiAngka = () => {
    setCounter(counter - 1);
  };
  return (
    <div
      style={{
        margin: "40% auto",
        display: "flex",
        justifyContent: "space-between",
        maxWidth: 95,
        fontSize: 25
      }}
    >
      <button onClick={kurangiAngka}>-</button>
      <div>{counter}</div>
      <button onClick={tambahkanAngka}>+</button>
    </div>
  );
};

export default Stepper;

Gampang toh? Tapi sadar gak sih kalo angkanya bisa sampai minus? Cobain deh wkwk. Nah solusinya gimana? yaa berarti kita tambahkan validasi pada function “kurangiAngka”. Gini cara validasinya.

const kurangiAngka = () => {
  if (counter > 0) {
    setCounter(counter - 1);
  }
};

Nah, sekarang, function “kurangiAngka” hanya akan bekerja apabila angkanya lebih dari 0

Asik gak? Kita juga bisa lho memberi batasan pada angka maksimal. Misal nih, kita maunya angka maksimalnya adalah 10, yaudah sih tinggal kita tambahkan validasinya di tombol “+”. Mau liat? gini nih.

const ANGKA_MAKSIMAL = 10
  const tambahkanAngka = () => {
    if (counter < ANGKA_MAKSIMAL) {
      setCounter(counter + 1);
    }
  };

Jadinya kayak gini nih…

Udah ya? udah pada nyobain belom sih? percuma lho kalo cuman baca-baca doang. Dipraktikkin yaaa…

Oh iya guis, saya mau kasih tau, kebetulan saya sedang ada project yang menurut saya bakal membantu teman-teman yang sedang bingung mencari jati dirinya atau yang sedang bingung setelah kuliah mau ngapain. Project ini bernama setelahkuliah.com. Saya ingin membangkitkan self-awareness dari teman-teman agar lebih semangat dan purposefull dalam menjalani “kehidupan”. Yaaa mau ngabarin itu aja sih. semoga bermanfaat yaaa…

Satu lagi, jangan lupa praktik! mau full codenya? huft… yaudah nih aku tulisin.

import React, { useState } from "react";

const Stepper = () => {
  const [counter, setCounter] = useState(0);
  const ANGKA_MAKSIMAL = 10
  const tambahkanAngka = () => {
    if (counter < ANGKA_MAKSIMAL) {
      setCounter(counter + 1);
    }
  };
  const kurangiAngka = () => {
    if (counter > 0) {
      setCounter(counter - 1);
    }
  };
  return (
    <div
      style={{
        margin: "40% auto",
        display: "flex",
        justifyContent: "space-between",
        maxWidth: 95,
        fontSize: 25
      }}
    >
      <button onClick={kurangiAngka}>-</button>
      <div>{counter}</div>
      <button onClick={tambahkanAngka}>+</button>
    </div>
  );
};

export default Stepper;

Udah dulu yaa? Makasih yaaa sudah mau membaca sampai akhir. Ketemu di setelahkuliah.com yaa? wkwk. see you~