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

5 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

Siapkan hal ini jika anda punya rencana ingin membangun aplikasi

Ferryanto

aplikasi# android# ios# full stack# flutter# start up# bikin aplikasi

Siapkan hal ini jika anda punya rencana ingin membangun aplikasi

Sebelum membangun aplikasi, ada beberapa hal yang perlu dilakukan. Beberapa hal diantaranya adalah sebagai berikut;a. Tentukan tujuan aplikasi Anda: P...

Read More
Kelebihan dan Kelemahan Menggunakan Teknologi NoSQL

Ferryanto

nosql# db relasional# mongodb# database# lapantiga

Kelebihan dan Kelemahan Menggunakan Teknologi NoSQL

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

Read More
Monolithic vs microservice, pilih yang mana ?

Ferryanto

Monolithic# microservice# ske

Monolithic vs microservice, pilih yang mana ?

Monolithic dan microservice adalah dua pendekatan yang berbeda dalam pengembangan perangkat lunak. Berikut adalah perbedaan antara monolitik dan arsit...

Read More
Perbedaan fungsi Query yang sering digunakan pada Laravel

Ferryanto

laravel# laravel developer# query# findorfail# mobile aplication# web development

Perbedaan fungsi Query yang sering digunakan pada Laravel

Kali ini kita akan sedikit menjelaskan fungsi query yang sering di gunakan pada Controller Anda. diantaranya adalah ;1. find($id)  Mengambil...

Read More