Membuat aplikasi notes sederhana dengan react

Setelah kita mengetahui bagaimana cara menginstall dan menggunakan react dengan membuat helloworld app disini. Sekarang untuk lebih memahami react, kita akan membuat aplikasi notes.

Sebagaimana namanya, di aplikasi ini, kita akan membuat sebuah notes semacam sticky notes di windows yang berisi daftar catatan yang bisa berupa to do list atau catatan apapun sesuai keinginan kita. Disini kita akan membuat komponen list.

Baiklah, untuk menyingkat waktu, berikut langkah2 yang perlu dilakukan untuk membuat notes app dengan reactJs.

• Buat reactapp dengan nama notes: create-react-app notes
• Masuk ke folder frontend: cd notes
• Install reactstrap dan bootstrap: npm install reactstrap bootstrap
• Pindahkan semua file js dari App.js ke index.js
• Jalankan npm start untuk mengetest aplikasi

Setelah aplikasi berjalan, langkah berikutnya adalah membuat komponen ListGroup dan ListGroupItem. Berikut langkah2 untuk membuat komponen di reactJs:

• Buat folder components di bawah folder notes/src
• Buat file ListNotes.js dan copykan code berikut.

import React from 'react';
import { ListGroup, ListGroupItem } from 'reactstrap';

const ListNotes = ({notes, handleItemClick}) => {
    let notes_list = notes.map((note) => {
        return (
            <ListGroupItem key={note.id} href="#" onClick={(id) => handleItemClick(note.id)}>
                <p>{note.title}</p>
            </ListGroupItem>
        )
    });
    return (
        <ListGroup>
            {notes_list}
        </ListGroup>
    );
}

export default ListNotes;

Pada kode diatas, pertama kita buat konstanta ListNotes dengan parameter notes yang nantinya akan berisi data notes dan handleItemClick yang berfungsi sebagai event untuk menangani list ketika diclick. ListNotes ini akan mengembalikan komponen ListGroup yang berisi ListGroupItem berupa data notes. Untuk melihat komponen2 apa saja yang ada di reactstrap bisa dibaca disini.

Setelah membuat komponen, kita perlu membuat class yang digunakan sebagai tampilan utama dari react App. Class ini akan mengimport komponen2 sesuai kebutuhan. Main page untuk react App ada di file App.js. Untuk membuat class tambahkan kode berikut di App.js

import React, {Component} from 'react';
import {Button, Container, Row, Col} from 'reactstrap';
import ListNotes from './components/ListNotes';

class App extends Component {
    constructor(props) {
        super(props);

        this.state = {
            notes: notes_dummy,
            current_note_id: 0,
            is_creating: true,
            is_fetching: true,            
        }
        this.handleItemClick = this.handleItemClick.bind(this);    
        this.handleAddNote = this.handleAddNote.bind(this);    
    }

   handleItemClick(id) {        
        this.setState((prevState) => {
            return { current_note_id:id, is_creating:false}
        })
    } 

   handleAddNote() {
        this.setState((prevState) => {
            return { current_note_id:0, is_creating:true}
        })
    }
    
    render() {
        return (
            <React.Fragment>
                <Container>
                    <Row>
                        <Col xs="10">
                            <h2>Realtime Notes</h2>
                        </Col>
                        <Col xs="2">
                            <Button color="primary" onClick={this.handleAddNote}>Realtime Notes</Button>
                        </Col>
                    </Row>
                    <Row>
                        <Col xs="4">
                            <ListNotes notes={this.state.notes} handleItemClick={(id) => this.handleItemClick(id)} />
                        </Col>
                        <Col xs="8">
                            <p>Edit, update or delete</p>
                            {
                                this.state.is_creating ? "Creating" : `Editing note ${this.state.current_note_id}`
                            }
                        </Col>
                    </Row>
                </Container>
            </React.Fragment>
        );
    }
}

Pada class App diatas kita membuat dua method penting yaitu constructor dan render. Constructor biasanya digunakan untuk menginisiasi variabel dan nilai defaultnya. Sedangkan method render digunakan untuk membuat tampilan di reactApp.

Selain 2 method diatas, kita juga membuat 2 event yaitu handleItemClick dan handleAddNote. Event handleItemClick ini digunakan untuk mengontrol apa yang akan kita lakukan ketika ListGroupItem di click. Sedangkan handleAddNote digunakan untuk mengontrol apa yang terjadi ketika tombol Add Note diklik.

Langkah berikutnya, kita perlu membuat variabel notes_dummy. Karena dummy, maka variabel itu kita buat dan kita isi data static seperti berikut:

var notes_dummy = [
    {
        'id':1,
        'title': 'notes 1',
        'content': 'belajar react'
    },
    {
        'id':2,
        'title': 'notes 2',
        'content': 'belajar django'
    },
    {
        'id':3,
        'title': 'notes 3',
        'content': 'belajar laravel'
    },
];

Standard pertukaran data dalam react menggunakan format JSON. Data notes_dummy diatas selanjutnya dijadikan parameter input untuk komponen ListGroup yang sudah kita buat sebelumnya. Berikut tampilan notes App dengan react.