Join our newsletter!

Enter your email to receive our latest newsletter.

Don't worry, we don't spam

M Nawwaf Q

By M Nawwaf Q

framework# reactjs# javacscript# tutorial# lapantiga# developer react

4 bulan yang lalu

React JS Membuat aplikasi todo-list #1

React.js adalah salah satu library JavaScript paling populer untuk develo antarmuka pengguna interaktif. Di artikel ini, kita akan membahas cara membuat aplikasi Todo List sederhana menggunakan React. Project ini cocok bagi pemula untuk memahami konsep-konsep dasar React seperti komponen, state, dan event handling.

Persiapan Awal: Instalasi React
Pertama, pastikan Anda sudah menginstal Node.js di komputer Anda. Selanjutnya, buat project React baru dengan perintah berikut di terminal:

npx create-react-app todo-app

Setelah instalasi selesai, pindah ke direktori project Anda. Kemudian jalankan aplikasi dengan perintah:

npm start

Saat anda jalankan, maka aplikasi React akan terbuka secara default di localhost:3000

Struktur data aplikasi todo-list

Kita akan membuat beberapa komponen:

  1. TodoApp: Komponen utama untuk mengelola state.
  2. TodoForm: Form untuk menambahkan task baru.
  3. TodoItem: Item todo yang bisa ditampilkan atau dihapus.
#1: Membuat Komponen TodoApp

Buka file src/App.js dan ganti isinya dengan kode berikut:
import React, { useState } from 'react';
import TodoForm from './TodoForm';
import TodoItem from './TodoItem';

function TodoApp() {
const [todos, setTodos] = useState([]);

// Menambahkan todo baru
const addTodo = (text) => {
const newTodos = [...todos, { text, id: Date.now() }];
setTodos(newTodos);
};

// Menghapus todo berdasarkan ID
const removeTodo = (id) => {
const newTodos = todos.filter((todo) => todo.id !== id);
setTodos(newTodos);
};

return (
<div className="todo-app">
<h1>Todo List</h1>
<TodoForm addTodo={addTodo} />
<ul>
{todos.map((todo) => (
<TodoItem key={todo.id} todo={todo} removeTodo={removeTodo} />
))}
</ul>
</div>
);
}

export default TodoApp;



Pada kode di atas, kita menggunakan state untuk menyimpan daftar todo. Fungsi addTodo menambahkan task baru, dan removeTodo menghapus task berdasarkan ID.

# 2: Membuat Komponen TodoForm

Buat file baru di src dengan nama TodoForm.js dan tambahkan kode berikut:

import React, { useState } from 'react';

function TodoForm({ addTodo }) {
const [input, setInput] = useState('');

const handleSubmit = (e) => {
e.preventDefault();
if (!input) return;
addTodo(input);
setInput(''); // Reset input field
};

return (
<form onSubmit={handleSubmit}>
<input
type="text"
placeholder="Add a todo"
value={input}
onChange={(e) => setInput(e.target.value)}
/>
<button type="submit">Add</button>
</form>
);
}

export default TodoForm;



Komponen TodoForm ini menangani input dari pengguna dan memanggil fungsi addTodo saat form dikirim. Todo-item dan styling tampilan akan di bahas pada artikel selanjutnya, Terima kasih.

Wassalam

Related Articles

Apa itu UDID dan untuk apa ?

A Febrian H

apple# udid# imei# privasi#

Apa itu UDID dan untuk apa ?

UDID (Unique Device Identifier) adalah sebuah identifier unik yang digunakan oleh Apple untuk mengidentifikasi perangkat iOS secara individual. Setiap...

Read More
Bahasa Pemrograman Terpopuler 2021

Ferryanto

Bahasa Pemrograman Terpopuler 2021# java# python# javascript

Bahasa Pemrograman Terpopuler 2021

Pernahkan kamu memikirkan bahasa pemrograman apa saja yang banyak dipakai di seluruh dunia sampai saat ini? Mungkin kamu berfikir bahwa bahasa pemrogr...

Read More
Laravel Tutorial Memperoses datatables server side menggunakan Yajra

Ferryanto

yajra# datatables# laravel# php# js# javascript# query# laravel eloquent

Laravel Tutorial Memperoses datatables server side menggunakan Yajra

Tutorial kali ini kita akan mencoba menampilkan data list user dengan yajra datatables dengan mekanisme server side. sehingga load time saat ditampilk...

Read More
PII dan SPII

Ferryanto

cybersecurty# security# pii# spii

PII dan SPII

PII (Personally Identifiable Information) dan SPII (Sensitive Personally Identifiable Information) adalah dua istilah yang digunakan dalam konteks per...

Read More