BELAJAR REACTJS - MEMBUAT APLIKASI LIST KEGIATAN HARIAN

 Dalam benyak referensi ReactJS yang saya pelajari, biasanya untuk memahami dasar-dasar react mengambil contoh pembuatan Aplikasi harian atau to do list.

1.   Membuat Form Aktivitas Harian

Pertama, tentu harus menyiapkan form untuk input data aktivitas harian.

a.      Langkah 1

Kita buat Aplikasi di folder yang kita inginkan kemudian kita buat apps sbb:

Create-react-app appkegiatan

b.      Kemudian npm start

Kemudian buka di VSCode Anda.

c.      Tulis Script App.js sbb:

 

import React, { Component } from 'react';

import './App.css';

 

class App extends Component { 

  render() {

    return (

      <div>

        <h3>Membuat Aplikasi List Kegiatan dengan React JS</h3>

        <hr />

        <form ref="formulir">

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

          <br />

          <input type='text' ref="activitas" placeholder='data kegiatan' />

          <br />

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

        </form>

      </div>

    );

  }

}

 

export default App;

 

 

Penjelasan script:

<form ref="formulir">

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

          <br />

          <input type='text' ref="activitas" placeholder='data kegiatan' />

          <br />

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

        </form>

 

Keterangan:

Membuat form dengan dua input (jam kegiatan dan data kegiatan) dan juga satu tombol simpan. Yang perlu di perhatikan adalah ref yang terdapat di baris kode tersebut , karena ref mengandung indentitas (name) dari form input.

 

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

 

Keterangan : Kode diatas kita memberikan event pada tombol yang akan beraksi Ketika di klik (onClick)  yang akan menjalankan fungsi dengan nama addTodo ({this.addTodo}) yang akan kita buat pada bab selanjutnya.

 

2.      Menambah File App.css

body {

 text-align: center;

  padding: 10;

  margin: 10;

}

 

input {

  width: 60%;

  padding: 20px;

  margin: 10px;

}

 

input[type=button] {

  margin: 10px;

  text-decoration: none;

  background-color: #04AA6D;

}

 

ul {

  list-style-type: none;

}

 

 

3.      Menambah dan Menghapus Data Activitas Harian

import React, { Component } from 'react';

import './App.css';

 

class App extends Component {

  constructor() {

    super();

    this.state = {todos: []}

  }

 

  addTodo = (e) => {

    e.preventDefault();

 

    let jam   = this.refs.jam.value;

    let activitas   = this.refs.activitas.value;

 

    this.state.todos.push({jam, activitas});

 

    this.setState({todos: this.state.todos});

 

    this.refs.formulir.reset();

    this.refs.jam.focus();

 

  }

 

 hapusTodo = (i)  => {

    this.state.todos.splice(i,1);

    this.setState({todoos: this.state.todos});

  }

  render() {

    return (

      <div>

        <h3>Membuat Aplikasi List Kegiatan dengan React JS</h3>

        <hr />

        <form ref="formulir">

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

          <br />

          <input type='text' ref="activitas" placeholder='data kegiatan' />

          <br />

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

        </form>

        <hr />

        <div>

          <ul>

            {this.state.todos.map((data, i) =>

            <div>

              <li key={i}>

                  <button onClick={()=>this.hapusTodo(i)}>

                    Hapus

                  </button>

                  {data.jam} : {data.activitas}

              </li>

            </div>

            )}

          </ul>

        </div>

      </div>

    );

  }

}

 

export default App;

 

 

Penjelasan Script:

constructor() {

    super();

    this.state = {todos: []}

  }

 

Ket: inisialisasi state dengan contructor, dimana dibuat state dengan nama todos dengan nilai awalnya kosong dalam bentuk array.

 

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

 

Ket: menjalankan fungsi addTodo setiap tombol di klik, dengan mengubah state yang awalnya kosong menjadi sesuai dengan yang di isi melalui form input.

addTodo = (e) => {

    e.preventDefault();

 

    let jam   = this.refs.jam.value;

    let activitas   = this.refs.activitas.value;

 

    this.state.todos.push({jam, activitas});

 

    this.setState({todos: this.state.todos});

 

    this.refs.formulir.reset();

    this.refs.jam.focus();

 

  }

 

Ket: membuat fungsi dengan nama addTodo, di dalam fungsi tersebut juga ada 2 nilai yaitu jam dan activitas. Yang disimpan dalam variable (let) juga dengan nama jam dan activitas.

 

Menghapus Kegiatan:

hapusTodo = (i) => {

        this.state.todos.splice(i,1);

        this.setState({todos: this.state.todos})

    }

 

 

Fungsi splice adalah kebalikan dari fungs