1. **Buat Folder Project**
Pertama, buat folder project di lokasi yang kamu inginkan:
```bash
mkdir D:\Projects\web-react
cd D:\Projects\web-react
2. **Inisialisasi Project React**
Setelah masuk ke dalam folder, jalankan perintah berikut untuk membuat project React baru:
```bash
npx create-react-app .
(`.` digunakan untuk menginisialisasi project React di folder yang sudah ada, yaitu `D:\Projects\web-react`.)
3. **Install Dependencies (React Query dan Axios)**
Setelah inisialisasi, install **React Query** dan **Axios**:
```bash
npm install react-query axios
Jika kamu ingin menggunakan **React Query Devtools** untuk debugging:
```bash
npm install @tanstack/react-query-devtools
Selanjutnya, kamu bisa mengikuti panduan implementasi **React Query** dari langkah-langkah sebelumnya untuk membuat komponen **TodoList** dan **AddTodo**.
Setelah project diinisialisasi dan semua dependencies terinstal, kita lanjutkan ke langkah berikutnya, yaitu implementasi fitur **TodoList** dan **AddTodo** dengan menggunakan **React Query**.
### 1. **Setup QueryClientProvider di index.js**
Agar React Query bisa digunakan di seluruh aplikasi, kita perlu membungkus aplikasi dengan `QueryClientProvider`. Buka file `src/index.js` dan tambahkan konfigurasi berikut:
```javascript
// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { QueryClient, QueryClientProvider } from 'react-query';
import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
import App from './App';
// Membuat instance QueryClient
const queryClient = new QueryClient();
ReactDOM.render(
<QueryClientProvider client={queryClient}>
<App />
{/* React Query Devtools untuk debugging */}
<ReactQueryDevtools initialIsOpen={false} />
</QueryClientProvider>,
document.getElementById('root')
);
### 2. **Buat Komponen TodoList**
Sekarang kita buat komponen `TodoList.js` yang akan mengambil data dari API dan menampilkan daftar tugas.
- Buat folder `components` di dalam folder `src`:
```bash
mkdir src/components
- Buat file `TodoList.js` di dalam folder `components`:
```bash
touch src/components/TodoList.js
- Tambahkan kode berikut di `TodoList.js` untuk mengambil dan menampilkan data dari API menggunakan React Query:
```javascript
// src/components/TodoList.js
import React from 'react';
import { useQuery } from 'react-query';
import axios from 'axios';
// Fungsi untuk fetch data dari API
const fetchTasks = async () => {
const response = await axios.get('https://jsonplaceholder.typicode.com/todos?_limit=5');
return response.data;
};
const TodoList = () => {
// Menggunakan useQuery untuk fetch tasks
const { data: tasks, isLoading, isError } = useQuery('tasks', fetchTasks);
if (isLoading) return <div>Loading tasks...</div>;
if (isError) return <div>Error loading tasks</div>;
return (
<div>
<h1>Todo List</h1>
<ul>
{tasks.map(task => (
<li key={task.id}>
{task.title} {task.completed ? "(Completed)" : ""}
</li>
))}
</ul>
</div>
);
};
export default TodoList;
### 3. **Buat Komponen AddTodo**
Untuk menambahkan tugas baru, kita gunakan `useMutation` dari React Query.
- Buat file `AddTodo.js` di dalam folder `components`:
```bash
touch src/components/AddTodo.js
- Tambahkan kode berikut di `AddTodo.js`:
```javascript
// src/components/AddTodo.js
import React, { useState } from 'react';
import { useMutation, useQueryClient } from 'react-query';
import axios from 'axios';
// Fungsi untuk menambah task baru ke API
const addTask = async (newTask) => {
const response = await axios.post('https://jsonplaceholder.typicode.com/todos', newTask);
return response.data;
};
const AddTodo = () => {
const [task, setTask] = useState('');
const queryClient = useQueryClient();
// Menggunakan useMutation untuk menambah task baru
const mutation = useMutation(addTask, {
onSuccess: () => {
// Invalidate dan refetch tasks setelah task ditambahkan
queryClient.invalidateQueries('tasks');
},
});
const handleSubmit = (e) => {
e.preventDefault();
if (task) {
mutation.mutate({ title: task, completed: false });
setTask('');
}
};
return (
<form onSubmit={handleSubmit}>
<input
type="text"
value={task}
onChange={(e) => setTask(e.target.value)}
placeholder="Add a new task"
/>
<button type="submit">Add Task</button>
{mutation.isLoading && <p>Adding task...</p>}
{mutation.isError && <p>Error adding task.</p>}
{mutation.isSuccess && <p>Task added!</p>}
</form>
);
};
export default AddTodo;
### 4. **Menggabungkan Komponen di App.js**
Sekarang kita gabungkan komponen-komponen tersebut di `App.js`.
- Buka file `src/App.js` dan tambahkan kode berikut:
```javascript
// src/App.js
import React from 'react';
import TodoList from './components/TodoList';
import AddTodo from './components/AddTodo';
function App() {
return (
<div>
<h1>Todo App with React Query</h1>
<AddTodo />
<TodoList />
</div>
);
}
export default App;
### 5. **Jalankan Aplikasi**
Setelah semua langkah selesai, jalankan aplikasi dengan perintah berikut:
```bash
npm start
Aplikasi Todo List kamu sekarang akan menampilkan daftar tugas yang diambil dari API, dan kamu bisa menambah tugas baru menggunakan form yang telah dibuat.
### Ringkasan:
- **React Query** membantu mengelola pengambilan data secara efisien, caching, dan mutasi data dengan API.
- Kita menggunakan **`useQuery`** untuk mengambil data dari API dan **`useMutation`** untuk menambah data baru.
- **QueryClientProvider** digunakan untuk menyediakan instance `QueryClient` ke seluruh aplikasi, dan **React Query Devtools** bisa membantu dalam debugging.
Dengan ini, aplikasi Todo List berbasis React Query sudah siap. Kamu bisa menambah fitur lain seperti menghapus atau mengedit tugas sesuai kebutuhan!