מבוא
אחד המושגים המרכזיים בעולם הפיתוח הוא REST API. במאמר זה נסביר מה זה REST API, נדון במימוש CRUD (יצירה, קריאה, עדכון ומחיקה) ב-React, ונספק דוגמאות קוד באמצעות השירות של jsonplaceholder. המאמר כתוב בסגנון של מתכנת שמסביר ומנחה כיצד לבצע את המימוש בפועל, עם דגש על SEO.
מה זה REST API?
REST הוא סגנון ארכיטקטורה לעיצוב שירותי רשת שמאפשרים לתקשר עם שרתים באמצעות API. אם ננסה להסביר בתמצית מה זה API, אז API הוא ממשק שמאפשר לתוכנות שונות לתקשר ביניהן. REST API מאפשר למפתחי אתרים וגישה לנתונים ולפונקציות בשרת בצורה מאורגנת וסטנדרטית לפי צורות תקשורת מוגדרות מראש.
מה זה CRUD?
CRUD הם ראשי תיבות של הפעולות הבסיסיות שניתן לבצע על נתונים במסד נתונים:
- Create (יצירה): הוספת רשומה חדשה – לרוב נבצע על ידי בקשת HTTP מסוג POST.
- Read (קריאה): שליפת רשומות קיימות – לרוב נבצע על ידי בקשת HTTP מסוג GET.
- Update (עדכון): עדכון רשומה קיימת – לרוב נבצע על ידי בקשת HTTP מסוג PUT.
- Delete (מחיקה): מחיקת רשומה קיימת – לרוב נבצע על ידי בקשת HTTP מסוג DELETE.
להלן טבלה המפרטת את סוגי הבקשות ב-REST API, הפעולות שהן מבצעות והשאילתות המתאימות במסד הנתונים:
| פעולה | סוג בקשה | שאילתא במסד נתונים |
|---|---|---|
| CREATE | POST | INSERT INTO |
| READ | GET | SELECT |
| UPDATE | PUT | UPDATE |
| DELETE | DELETE | DELETE FROM |
טבלה זו מסבירה את הקשר בין סוגי הבקשות ב-REST API לבין השאילתות המתאימות שמבוצעות במסד הנתונים עבור כל פעולה.
הכנות
במאמר זה נשתמש ב-JSONPlaceholder כשירות API המדמה מסד נתונים. נתחיל בפרויקט React חדש באמצעות create-react-app:
npx create-react-app rest-api-crud
cd rest-api-crud
npm start
יצירת REST API Service
נתחיל ביצירת שירות API שיטפל בכל הבקשות שלנו:
// src/services/api.js
export const API_URL = 'https://jsonplaceholder.typicode.com';
export const fetchData = async (endpoint) => {
const response = await fetch(`${API_URL}/${endpoint}`);
return response.json();
};
export const createData = async (endpoint, data) => {
const response = await fetch(`${API_URL}/${endpoint}`, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(data)
});
return response.json();
};
export const updateData = async (endpoint, data) => {
const response = await fetch(`${API_URL}/${endpoint}`, {
method: 'PUT',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(data)
});
return response.json();
};
export const deleteData = async (endpoint) => {
const response = await fetch(`${API_URL}/${endpoint}`, {
method: 'DELETE'
});
return response.json();
};
מימוש CRUD ב-React
יצירת רכיב להצגת נתונים (Read)
// src/components/AddPost.js
import React, { useState } from 'react';
import { createData } from '../services/api';
const AddPost = () => {
const [title, setTitle] = useState('');
const [body, setBody] = useState('');
const handleSubmit = async (e) => {
e.preventDefault();
const newPost = { title, body };
const createdPost = await createData('posts', newPost);
console.log('Post Created:', createdPost);
};
return (
<div>
<h1>הוסף פוסט חדש</h1>
<form onSubmit={handleSubmit}>
<div>
<label>כותרת:</label>
<input
type="text"
value={title}
onChange={(e) => setTitle(e.target.value)}
/>
</div>
<div>
<label>תוכן:</label>
<textarea
value={body}
onChange={(e) => setBody(e.target.value)}
/>
</div>
<button type="submit">הוסף פוסט</button>
</form>
</div>
);
};
export default AddPost;
יצירת רכיב לעדכון נתונים (Update)
// src/components/UpdatePost.js
import React, { useState, useEffect } from 'react';
import { fetchData, updateData } from '../services/api';
const UpdatePost = ({ postId }) => {
const [title, setTitle] = useState('');
const [body, setBody] = useState('');
useEffect(() => {
const getPost = async () => {
const post = await fetchData(`posts/${postId}`);
setTitle(post.title);
setBody(post.body);
};
getPost();
}, [postId]);
const handleSubmit = async (e) => {
e.preventDefault();
const updatedPost = { title, body };
const result = await updateData(`posts/${postId}`, updatedPost);
console.log('Post Updated:', result);
};
return (
<div>
<h1>עדכן פוסט</h1>
<form onSubmit={handleSubmit}>
<div>
<label>כותרת:</label>
<input
type="text"
value={title}
onChange={(e) => setTitle(e.target.value)}
/>
</div>
<div>
<label>תוכן:</label>
<textarea
value={body}
onChange={(e) => setBody(e.target.value)}
/>
</div>
<button type="submit">עדכן פוסט</button>
</form>
</div>
);
};
export default UpdatePost;
יצירת רכיב למחיקת נתונים (Delete)
// src/components/DeletePost.js
import React from 'react';
import { deleteData } from '../services/api';
const DeletePost = ({ postId }) => {
const handleDelete = async () => {
await deleteData(`posts/${postId}`);
console.log(`Post ${postId} deleted`);
};
return (
<button onClick={handleDelete}>מחק פוסט</button>
);
};
export default DeletePost;
סיכום
במאמר זה למדנו על REST API ומימוש CRUD באמצעות React ו-JSONPlaceholder. עברנו על דוגמאות קוד שונות שכללו יצירה, קריאה, עדכון ומחיקה של נתונים. באמצעות רכיבים אלה ניתן לבנות יישומים שלמים המתממשקים עם REST API בצורה נוחה ויעילה.
אם אתם מעוניינים בביצוע הכשרה ייעודית בריאקט, מוזמנים לדבר איתנו על קורס React.
