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

2 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

Penjelasan singkat teknologi Blockchain

M Nawwaf Q

blockhain

Penjelasan singkat teknologi Blockchain

Teknologi Blockchain adalah sebuah sistem penyimpanan data digital yang terdiri dari serangkaian catatan (blok) yang saling terhubung dan diamankan me...

Read More
Panduan untuk menggunakan MySQL Connector di Python

Ferryanto

Python

Panduan untuk menggunakan MySQL Connector di Python

mysql-connector-python adalah library resmi yang dikembangkan oleh MySQL untuk menghubungkan aplikasi Python dengan database MySQL. Anda dapat mengelo...

Read More
Penjelasan tentang Laravel Eloquent

Ferryanto

laravel# Eloquent# orm# framework# php

Penjelasan tentang Laravel Eloquent

Eloquent adalah ORM (Object-Relational Mapping) yang disediakan oleh Laravel. Eloquent memungkinkan pengguna untuk berinteraksi dengan database menggu...

Read More
Alasan kenapa aplikasi saya menggunakan NoSQL?

Ferryanto

nosql# db relasional# mongodb# database# lapantiga

Alasan kenapa aplikasi saya menggunakan NoSQL?

Teknologi NoSQL (Not Only SQL) adalah sebuah pendekatan atau paradigma dalam pengelolaan basis data yang berbeda dengan pendekatan relasional tradisio...

Read More