React Developer

PROA

Professional Academy

Komponen React

Agenda

Apa saja yang akan dibahas?

  • Review React
  • Event Handler
  • State
  • QnA
  • Waktunya Tantangan

Review React

Mari kita nyoba bikin proyek React kembali yah !

Kita akan coba untuk membuat aplikasi ToDoList dengan React.

  • Buka terminal, lalu ketikkan npx create-react-app project-todolist
  • Selanjutnya kita akan membuat Component ToDo List Sederhana terlebih dahulu
  • Buat dua file dengan nama
    • src/components/ToDoForm.jsx dan
    • src/components/ToDoList.jsx
  • Buka file index.js, comment bagian import index.css
  • Buka file App.js, comment bagian import logo dan import css
  • Selanjutnya kita akan menuliskan kode untuk ToDoForm.jsx terlebih dahulu yah

Review React (ii)

Kode ToDoForm.jsx

import React from 'react';

function ToDoForm() {
  return (
    <form action="">
      <div style={{ marginBottom: "0.25em" }}>
        <label style={{ marginRight: "0.25em" }} htmlFor="todoButton">
          Input Kerjaan Baru
        </label>
        <input type="text" name="todo-button" id="todoButton" />
      </div>
      <div>
        <button type="submit">Tambah ToDo</button>
      </div>
    </form>
  );
}

export default ToDoForm;

Selanjutnya kita akan menuliskan kode ToDoList.jsx

Review React (iii)

Kode ToDoList.jsx

import React from 'react';

const todos = ["Belajar React Fundamental", "Ngoding Sampai Bisa"];

function ToDoList() {
  return (
    // Ini namanya Fragment, penahan (seperti div)
    <>
      <h3>Listing ToDo List</h3>
      <ul>
        {todos.map((todo) => {
          return <li>{todo}</li>;
        })}
      </ul>
    </>
  );
}

export default ToDoList;

Selanjutnya kita akan menggunakannya pada file App.js

Review React (iv)

Kode App.js

import React from 'react';
import ToDoForm from './components/ToDoForm';
import ToDoList from './components/ToDoList';

function App() {
  return (
    <div className="App">
      <header>
        <h1>Aplikasi ToDo List</h1>
      </header>
      <section style={{ margin: '1em 0em' }}>
        <ToDoForm />
        <ToDoList />
      </section>
      <footer>
        <h3>Dibuat oleh orang tidak jelas &copy; 2022</h3>
      </footer>
    </div>
  );
}

export default App;

Nah sampai di sini kita sudah berhasil membuat kerangka ToDoList sederhana

Review React (v)

Untuk kode proyek ToDo tadi dapat dilihat di sini yah.

Nah masih ada yang terasa aneh dengan ToDo yang baru dibuat kan?

Aplikasinya masih belum bisa baca data yang dikirimkan oleh user !

Untuk bisa menyelesaikan ini, kita harus mengerti terlebih dahulu apa itu State dan Event Handler di React ini yah !

Event Handler

Masih ingat dengan DOM? kita bisa menggunakan Event Handler di dalam DOM bukan?

Contoh Event Handler

  • bila ada sebuah button maka bisa memiliki event click
  • bila ada sebuah form maka bisa memiliki event submit
  • bila ada sebuah input maka bisa memiliki event change
  • bila ada sebuah select option maka juga bisa memiliki event change

Pertanyaan sekarang: bagaimana cara menggunakannya pada React?

Mari kita kembali ke proyek ToDo yang dibuat tadi

Event Handler (ii)

Demo

Buat file src/components/ToDoIncrement.jsx 

import React from 'react';

let increment = 0;

function ToDoIncrement() {
  return (
    <>
      <div>{increment}</div>
      <div>
        <button>Nambah</button>
      </div>
    </>
  );
}

export default ToDoIncrement;

Selanjutnya kita akan memodifikasi file App.js

Event Handler (iii)

Modifikasi file App.js 

import React from 'react';
...
import ToDoIncrement from './components/ToDoIncrement';

function App() {
  return (
    <div className="App">
      <header>
        <h1>Aplikasi ToDo List</h1>
      </header>

      <section>
        <ToDoIncrement />
      </section>

      ...
    </div>
  );
}

export default App;

Selanjutnya kita akan modifikasi lagi file ToDoIncrement.jsx

Event Handler (iv)

Modifikasi file ToDoIncrement.jsx 

import React from 'react';

let increment = 0;

function ToDoIncrement() {
  // Kita deklarasi fungsi ketika tombol ditekan
  function buttonNambahClickHandler() {
    console.log(increment);
    increment = increment + 1;
  }

  return (
    <>
      <span style={{ marginRight: '0.25em' }}>{increment}</span>
      <span>
        {/* Di sini kita deklarasi onClick untuk menambahkan event ketika tombol diklik */}
        <button onClick={buttonNambahClickHandler}>Nambah</button>
      </span>
    </>
  );
}

export default ToDoIncrement;

Mari jalankan kode dan lihat hasilnya !

Event Handler (v)

Kode yang ditulis sebelumnya dapat dilihat di sini

Mari kita coba analisis kode yang dibuat tadi:

  • Untuk dapat menggunakan event handler, kita membutuhkan sebuah fungsi yang digunakan untuk ditempelkan pada event handler
  • Untuk menempelkan fungsi, pada attribut yang menginginkan ada Event Handler, dapat menggunakan on<NamaEvent>, mis: onClick, onSubmit, dsb
  • Kita masih gagal untuk membuat data yang reaktif terhadap perubahan yang ada. Hal ini terjadi karena kita belum memahami dan menggunakan State

State

Dalam kasus Proyek ToDo yang dibuat sebelumnya, kita memiliki sebuah data dengan nama increment yang tidak reaktif (tidak berubah sesuai perubahan yang ada).

Untuk itu kita harus mengetahui bagaimana cara menggunakan State terlebih dahulu agar bisa berbagi data

State adalah suatu Object bawaan di dalam React yang digunakan untuk menampung data atau informasi dari suatu Komponen.

State dari suatu komponen bisa berubah kapanpun, dan ketika hal itu terjadi, maka komponen akan di-render ulang.

Berbeda dengan Props, yang digunakan untuk passing data ke komponen anak (children components), State digunakan untuk menyimpan data dari komponen yang nantinya harus dirender ke dalam tampilan yang ada.

State (ii)

Yuk sudah cukup ngomongin teorinya !

Mari sekarang kita belajar cara menuliskan State

Yuk kita lanjutkan untuk ToDoIncrement yang masih error yah !

Tenang, untuk proyek ToDo Listing tadi akan dibahas setelah ini yah !

State - Demo

Mari kita modifikasi lagi file ToDoIncrement.jsx 

// di sini jadinya harus import useState
import React, { useState } from 'react';

function ToDoIncrement() {
  // sekarang kita menggunakan useState untuk deklarasi increment
  // pada saat deklarasi, kita menggunakan array
  // indeks 0 adalah nama variabel yang ingin dideklarasikan
  // indeks 1 adalah nama fungsi yang digunakan untuk memutasi (mengganti) variabel
  const [increment, setIncrement] = useState(0);
  
  function buttonNambahClickHandler() {
    console.log(increment);
    // di sini karena kita ketahui bahwa setIncrement adalah fungsi
    // untuk memutasi (mengubah) si increment menjadi nilai baru
    setIncrement(increment + 1);
  }

  return (
    <>
      <span style={{ marginRight: '0.25em' }}>{increment}</span>
      <span>
        <button onClick={buttonNambahClickHandler}>Nambah</button>
      </span>
    </>
  );
}
export default ToDoIncrement;

State - Demo (ii)

Untuk Kode final yang dibuat sebelumnya dapat dilihat di sini yah

Perlu diingat bahwa walaupun state mutable, selalu perlakukan state seperti immutable ! (jangan lakukan reassign, tapi gunakan method setter / replacernya) !

Nah sekarang setelah mengetahui Event Handler dan State mari sekarang kita menyelesaikan ToDo List ini yah !

Combination

Sekarang kita akan menggabungkan yang sudah dipelajari pada minggu kemarin Props dengan materi yang baru dipelajari Event Handler dan State

Pertama, kita harus mengetahui karena "data" todos ini akan digunakan oleh dua Komponen anak, maka kita harus menaruh State nya di Komponen Orang tuanya (Parent Component). hal ini umum disebut dengan istilah Lifting up the state

Jadi mari buka kembali file App.js dan deklarasi state todos di App.js

Combination (ii)

Deklarasi state todos di App.js 

// Di sini kita harus menggunakan useState
import React, { useState } from 'react';

...

function App() {
  // deklarasi state todos
  // todos awalnya adalah array
  const [todos, setTodos] = useState([
    'Belajar React Fundamental',
    'Ngoding Sampai Bisa',
  ]);

  ...
}

Selanjutnya kita akan mendeklarasikan fungsi untuk menambah todos dan mendeklarasikan props pada Komponen anak di App.js

Combination (iii)

Deklarasi fungsi untuk menambah todos dan deklarasi Props di App.js 

...

function App() {
  ... // (di bawah useState)
  // di sini kita akan membuat sebuah function
  // yang digunakan untuk submitHandler di ToDoForm
  const formSubmitHandler = (todo) => {
    console.log('todo dari parent', todo);
    setTodos([...todos, todo]);
  };

  return (
    ...
      <section style={{ margin: '1em 0em' }}>
        {/* Di sini sekarang harus menggunakan props */}
        {/* Pada form kita harus melempar setTodos dan todos */}
        <ToDoForm propsSubmitHandler={formSubmitHandler} />
        {/* Pada list kita hanya butuh todos saja */}
        <ToDoList propsTodos={todos} />
      </section>
    ...
  )

Selanjutnya kita akan memodifikasi kode pada komponen ToDoList untuk bisa membaca data dari state yang sudah dibuat di App.js

Combination (iv)

Memodifikasi kode pada komponen ToDoList (file ToDoList.jsx) 

import React from 'react';

// Di sini tidak menggunakan todos lagi

// Di sini declare ada props yang ingin digunakan
function ToDoList(props) {
  return (
    <>
      <h3>Listing ToDo List</h3>
      <ul>
        {/* Di sini kita menggunakan props dengan nama propsTodos */}
        {/* Hasil lemparan dari App.js */}
        {props.propsTodos.map((todo) => {
          return <li>{todo}</li>;
        })}
      </ul>
    </>
  );
}

export default ToDoList;

Selanjutnya, adalah bagian paling panjang dan terakhir, yaitu memodifikasi komponen ToDoForm

Combination (v)

Memodifikasi kode pada komponen ToDoForm (file ToDoForm.jsx) 

// Di sini kita perlu menggunakan local state component ini saja
// jadi membutuhkan useState
import React, { useState } from 'react';

// ToDoForm menerima data dari App.js
// jadi ditangkap dengan props
function ToDoForm(props) {
  // ini adalah local state untuk menampung nilai dari input text
  const [inputTodo, setInputTodo] = useState('');

  // ini adalah fungsi yang digunakan untuk melihat perubahan nilai
  // dari input text
  const inputOnChangeHandler = (event) => {
    setInputTodo(event.target.value);
  };

  // ini adalah fungsi untuk submit form
  // perhatikan di sini ada menggunakan props.propsSubmitHandler
  // yang merupakan suatu fungsi (bisa di-invoke)
  const localSubmitHandler = (event) => {
    event.preventDefault();
    props.propsSubmitHandler(inputTodo);
    // setelah selesai, kosongkan input
    setInputTodo('');
  };

  ...

Combination (vi)

Memodifikasi kode pada komponen ToDoForm (file ToDoForm.jsx) 

  ...

  return (
    <form action="" onSubmit={localSubmitHandler}>
      <div style={{ marginBottom: '0.25em' }}>
        <label style={{ marginRight: '0.25em' }} htmlFor="todoButton">
          Input Kerjaan Baru
        </label>
        <input
          type="text"
          name="todo-button"
          id="todoButton"
          // Melihat valuenya apakah terkena setter
          value={inputTodo}
          // tiap kali nilainya berubah, akan trigger inputOnChangeHandler
          onChange={inputOnChangeHandler}
        />
      </div>
      <div>
        <button type="submit">Tambah ToDo</button>
      </div>
    </form>
  );

  ...

S-E-L-E-S-A-I ! sampai pada tahap ini Proyek ToDoList kita sudah selesai !

Combination - Recap

Cukup panjang yah kodenya ! selamat datang ke dunia React !

Sampai di sini artinya kita sudah mempelajari:

  • Pembuatan Component
  • Penggunaan Props
  • Penggunaan Event Handler
  • Penggunaan State

Selanjutnya kita harus memantapkan dari materi yang didapatkan lagi yah !

Untuk kode pembelajaran hari ini dapat dilihat sepenuhnya di sini

QnA

Waktunya Tantangan

Klik di sini

Referensi

  • https://beta.reactjs.org/learn/responding-to-events
  • https://www.simplilearn.com/tutorials/reactjs-tutorial/reactjs-state
  • https://beta.reactjs.org/learn/updating-objects-in-state#recap
withered-flowers (2022)