Studi Kasus: Membuat App List Kegiatan di React JS

 Studi Kasus: Membuat App List Kegiatan di React JS

Dalam studi kasus ini, kita akan mbuat aplikasi list kegiatan yang nantinya akan menangani data yang di input kedalam sebuah form, yang sering dikenal dengan istilah CRUD (Create, Read, Update, dan Delete).

1.   Membuat Form Aktivitas Kegiatan

Langkah 1 silahkan buat app baru dengan nama appkegiatan

Berhasil membuat aplikasi appkegiatan

Kemudian masuk ke VS Code dan juga Run aplikasi dengan Code .

 

2.   Syntak App List Kegiatan

Tulis sintak berikut di app.js

import React, {Component} from "react";

 

class App extends Component {

      render() {

          return (

            <div>

            <h3>Aplikasi Aktivitas Harian</h3>

            <form ref="formulir">

                <input type="text" ref="jam" placeholder="Jam Aktivitas kegiatan" />

                <input type="text" ref="aktivitas" placeholder="Masukkan Aktivitas kegiatan" />

                <button onClick={this.addTodo}>Simpan</button>

            </form>

            </div>

          );    

      }

  }

 

 

export default App;

 

 

Hasil:

3.   Penjelasan Syntak

4.  <form ref="formulir">

5.                  <input type="text" ref="jam" placeholder="Jam Aktivitas kegiatan" />

6.                  <input type="text" ref="aktivitas" placeholder="Masukkan Aktivitas kegiatan" />

7.                  <button onClick={this.addTodo}>Simpan</button>

8.              </form>

 

Sintak di atas digunakan untuk membuat dorm dengan 2 aktivitas (yaitu jam dan jenis kegiatan) dan satu tombol simpan. Yang perlu diperhatikan adalah ref yang terdapat pada input data diatas, ref ini merupakan identitas dari form input.

<button onClick={this.addTodo}>Simpan</button>

 

Kita memberikan event pada tombol yang akan beraksi Ketika di klik (onClick) yang akan menjalankan fungsi dengan nama addTodo ({this.addTodo})

Nah, Syntak ini akan kita lanjutkan ke pembahasan selanjutnya.

Semoga bermanfaat dan terus belajar