Aplikasi Todo List Menggunakan React JS Berbasis Website Responsif

React JS — Todo List Apps

Aplikasi todolist sederhana menggunakan state pada react js, memungkinkan menambahkan dan menghapus todolist

Latar Belakang

Semenjak awal rilisnya pada tanggal 29 Juni 2013 sampai sekarang, framework react js banyak dipakai oleh para developer untuk membuat front end aplikasi website, hal ini membuat saya penasaran untuk mencobanya. Saya melihat banyak orang — orang yang pertama kali menggunakan framework react js membuat aplikasi todo list untuk pembelajarannya, dari situ saya juga memutuskan untuk membuat aplikasi todo list versi saya sendiri menggunakan react js.

Prerequisities / Persiapan

Untuk pembuatan aplikasi menggunakan react js kita membutuhkan NPM dan Node JS untuk menginstallnya silahkan kunjungi website berikut https://nodejs.org/en/download/ dan install sesuai dengan device yang temen — temen pakai. Setelah menginstall Node JS dan NPM temen — temen bisa cek dengan cara menjalankan syntax berikut pada terminal:

node -v
npm -v

Syntax di atas berfungsi untuk mengecek versi dari node js dan npm serta mengecek apakah sudah terinstall di pc masing — masing.

Instalasi Aplikasi React JS

Untuk instalasi react js temen — temen bisa buka terminal, masuk ke direktori yang temen — temen inginkan untuk menyimpan file projectnya, lalu jalankan syntax di bawah:

npx create-react-app todolist-apps

Setelah menjalankan syntax di atas temen — temen bisa buka folder projek-nya (todolist-apps) di direktori yang temen — temen pilih sebelumnya pada aplikasi text editor masing — masing, kira — kira berikut struktur folder dari aplikasi react js:

Struktur folder aplikasi react js

Konten Utama Aplikasi

Pertama — tama buka file src/App.js, lalu isi dengan kodingan berikut:

import React, { useState } from "react";
import './App.css';
import Todo from './components/Todo';
const App = () => {
const [task, setTask] = useState('');
const [taskLists, setTaskLists] = useState([]);
const handleAddTask = () => {
setTaskLists([...taskLists, task]);
setTask('');
}
const doneTask = (index) => {
let tempTaskLists = [...taskLists];
tempTaskLists.splice(index, 1);
setTaskLists(tempTaskLists);
}
return (
<div className="App">
<div className="container">
<div className="navbar">
<h4>My Todo List</h4>
</div>
<div className="content">
{
taskLists.length > 0
?
taskLists.map((task, index) => {
return <Todo key={index} task={task} onClick={() => doneTask(index)} />
})
:
<p><i>You haven't create todo list yet.</i></p>
}
</div>
<div className="form-add">
<input type="text" className="input-todo" placeholder="Write A Task" onChange={text => setTask(text.target.value)} value={task} />
<button type="button" className="btn-add rounded-button" onClick={() => handleAddTask()}>+</button>
</div>
</div>
</div>
);
}
export default App;

Untuk styiling nya isi file src/App.css dengan kodingan berikut:

.App {
background-color: #efebeb;
margin: 0;
font-family: 'Roboto';
}
.container {
display: flex;
flex: 1;
flex-direction: column;
max-width: 465px;
min-height: 100vh;
max-height: 100vh;
margin-right: auto;
margin-left: auto;
background-color: #fff;
position: relative;
}
.navbar {
display: flex;
justify-content: space-between;
padding: 5px 15px;
background-color: #bfecf9;
height: 60px;
box-shadow: -2px 6px 10px -8px #c7c7c7;
}
.content {
display: flex;
flex-direction: column;
padding: 15px 15px;
padding-bottom: 100px;
overflow: auto;
}
.rounded-button {
cursor: pointer;
width: 50px;
height: 50px;
border: none;
border-radius: 50%;
box-shadow: 4px 6px 15px -8px #000;
}
.btn-add {
background-color: #86dcf5;
}
.todo-list {
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 5px 10px;
margin: 10px 0;
background-color: #eef8fb;
border-radius: 5px;
box-shadow: 1px 8px 8px -6px #c7c7c7;
}
.form-add {
display: flex;
flex-wrap: wrap;
flex-direction: 'row';
justify-content: space-around;
align-items: center;
position: absolute;
bottom: 25px;
width: 100%;
/* right: 25px; */
}
.input-todo {
border: 1px solid #C0C0C0;
width: 300px;
border-radius: 25px;
padding: 15px;
background-color: #fff;
text-align: center;
}
.btn-done {
width: 65px;
height: 40px;
cursor: pointer;
font-size: 0.7em;
color: #fff;
background-color: #86dcf5;
border: none;
border-radius: 15px;
padding: 5px;
margin-top: auto;
margin-bottom: auto;
}

Selanjutnya, untuk konten / komponen list dari todo listnya temen — temen buat folder baru bernama components di dalam folder src , lalu buat file bernama Todo.js, lalu isi dengan kodingan berikut :

import React from "react";
const Todo = (props) => {
return (
<div className="todo-list">
<p>{props.task}</p>
<button className="btn-done" onClick={props.onClick}>Done</button>
</div>
)
}
export default Todo;

Setelah 3 file di atas diisi, temen — temen bisa menjalankan aplikasinya dengan syntax di bawah ini di terminal :

npm start

Setelah itu buka http://localhost:3000 pada aplikasi browser masing — masing, aplikasi berhasil dibuat dan dijalankan, kira — kira berikut demo aplikasinya:

Penutup

Sekian untuk langkah — langkah pembuatan aplikasi todo list menggunakan react js, untuk temen — temen yang ingin source code-nya bisa kunjungi repository saya di github berikut https://github.com/anwarrifaldi/todolist-apps-reactjs.

Semoga dengan ini temen — temen bisa terbantu dan termotivasi untuk belajar lebih lanjut mengenai react js, dan jangan lupa keep curious 🧐.