ربط React بالـ API

import { useState, useEffect } from 'react'; const API = 'http://localhost:3000'; export default function App() {  const [books, setBooks] = useState([]);  const [loading, setLoading] = useState(true);  const [error, setError] = useState(null);   useEffect(() => {    fetch(`${API}/api/books`)      .then(res => {        if (!res.ok) throw new Error('فشل الطلب: ' + res.status);        return res.json();      })      .then(data => setBooks(data))      .catch(err => setError(err.message))      .finally(() => setLoading(false));  }, []);   if (loading) return <p>⏳ جارٍ التحميل…</p>;  if (error) return <p className="err">⚠ {error}</p>;  return (    <ul>      {books.map(b => <li key={b.id}>{b.title} — {b.author}</li>)}    </ul>  );}

// الخادم: Express على المنفذ 3000const express = require('express');const cors = require('cors');const app = express();app.use(cors({ origin: 'http://localhost:5173' }));app.use(express.json()); let books = [  { id: 1, title: 'تعلم JavaScript', author: 'سارة' },  { id: 2, title: 'أساسيات الويب', author: 'خالد' },]; app.get('/api/books', (req, res) => res.json(books)); app.post('/api/books', (req, res) => {  const { title, author } = req.body;  if (!title || !author) return res.status(400).json({ error: 'العنوان والمؤلف مطلوبان' });  const book = { id: books.length + 1, title, author };  books.push(book);  res.status(201).json(book);}); app.listen(3000);

import { useState, useEffect } from 'react'; const API = 'http://localhost:3000'; export default function App() {  const [books, setBooks] = useState([]);  const [title, setTitle] = useState('');  const [author, setAuthor] = useState('');  const [error, setError] = useState('');  const [saving, setSaving] = useState(false);   useEffect(() => {    fetch(`${API}/api/books`).then(r => r.json()).then(setBooks);  }, []);   async function add(e) {    e.preventDefault();    setSaving(true); setError('');    const res = await fetch(`${API}/api/books`, {      method: 'POST',      headers: { 'Content-Type': 'application/json' },      body: JSON.stringify({ title, author }),    });    const data = await res.json();    setSaving(false);    if (!res.ok) return setError(data.error);       // رسالة الخادم نفسها    setBooks([...books, data]);                       // أضف ما أعاده الخادم    setTitle(''); setAuthor('');  }   return (    <div>      <form onSubmit={add}>        <input value={title} onChange={e => setTitle(e.target.value)} placeholder="العنوان" />        <input value={author} onChange={e => setAuthor(e.target.value)} placeholder="المؤلف" />        <button disabled={saving}>{saving ? '…' : 'أضف'}</button>      </form>      {error && <p className="err">⚠ {error}</p>}      <ul>{books.map(b => <li key={b.id}>{b.title} — {b.author}</li>)}</ul>    </div>  );}

// الخادم: Express على المنفذ 3000const express = require('express');const cors = require('cors');const app = express();app.use(cors({ origin: 'http://localhost:5173' }));app.use(express.json()); let books = [  { id: 1, title: 'تعلم JavaScript', author: 'سارة' },  { id: 2, title: 'أساسيات الويب', author: 'خالد' },]; app.get('/api/books', (req, res) => res.json(books)); app.post('/api/books', (req, res) => {  const { title, author } = req.body;  if (!title || !author) return res.status(400).json({ error: 'العنوان والمؤلف مطلوبان' });  const book = { id: books.length + 1, title, author };  books.push(book);  res.status(201).json(book);}); app.listen(3000);

import { useState, useEffect } from 'react';import { api } from './api.js'; export default function App() {  const [books, setBooks] = useState([]);  const [msg, setMsg] = useState('');   useEffect(() => { api.get('/api/books').then(setBooks); }, []);   async function quickAdd() {    try {      const b = await api.post('/api/books', { title: 'كتاب سريع', author: 'المكتبة' });      setBooks(prev => [...prev, b]);      setMsg('أُضيف #' + b.id);    } catch (err) {      setMsg('⚠ ' + err.message);    }  }   return (    <div>      <button onClick={quickAdd}>إضافة سريعة</button> <span className="msg">{msg}</span>      <p>عدد الكتب: <b>{books.length}</b></p>    </div>  );}

// api.js: كل التواصل مع الخادم في مكان واحدconst BASE = 'http://localhost:3000';let token = null;                                  // يُضبط بعد تسجيل الدخولexport const setToken = (t) => { token = t; }; async function request(method, path, body) {  const res = await fetch(BASE + path, {    method,    headers: {      'Content-Type': 'application/json',      ...(token && { Authorization: `Bearer ${token}` }),    },    body: body ? JSON.stringify(body) : undefined,  });  const data = res.status === 204 ? null : await res.json();  if (!res.ok) throw new Error(data?.error || 'خطأ ' + res.status);  return data;} export const api = {  get: (p) => request('GET', p),  post: (p, b) => request('POST', p, b),  patch: (p, b) => request('PATCH', p, b),  del: (p) => request('DELETE', p),};

// الخادم: Express على المنفذ 3000const express = require('express');const cors = require('cors');const app = express();app.use(cors({ origin: 'http://localhost:5173' }));app.use(express.json()); let books = [  { id: 1, title: 'تعلم JavaScript', author: 'سارة' },  { id: 2, title: 'أساسيات الويب', author: 'خالد' },]; app.get('/api/books', (req, res) => res.json(books)); app.post('/api/books', (req, res) => {  const { title, author } = req.body;  if (!title || !author) return res.status(400).json({ error: 'العنوان والمؤلف مطلوبان' });  const book = { id: books.length + 1, title, author };  books.push(book);  res.status(201).json(book);}); app.listen(3000);

import { useState } from 'react'; const API = 'http://localhost:3000'; export default function App() {  const [token, setToken] = useState(null);  const [secret, setSecret] = useState('');  const [pass, setPass] = useState('');  const [err, setErr] = useState('');   async function login(e) {    e.preventDefault();    const res = await fetch(`${API}/api/login`, {      method: 'POST', headers: { 'Content-Type': 'application/json' },      body: JSON.stringify({ password: pass }),    });    const data = await res.json();    if (!res.ok) return setErr(data.error);    setToken(data.token); setErr('');  }   async function load() {    const res = await fetch(`${API}/api/secret`, { headers: { Authorization: `Bearer ${token}` } });    setSecret((await res.json()).msg);  }   if (!token) return (    <form onSubmit={login}>      <input type="password" value={pass} onChange={e => setPass(e.target.value)} placeholder="كلمة المرور" />      <button>دخول</button>      {err && <p className="err">{err}</p>}    </form>  );  return (    <div>      <p>✓ مسجّل الدخول</p>      <button onClick={load}>اعرض المحتوى المحمي</button> <b className="secret">{secret}</b>      <button onClick={() => setToken(null)}>خروج</button>    </div>  );}

const express = require('express');const jwt = require('jsonwebtoken');const app = express();app.use(express.json());const SECRET = 'demo-secret-r18'; app.post('/api/login', (req, res) => {  if (req.body.password !== '1234') return res.status(401).json({ error: 'كلمة المرور غير صحيحة' });  res.json({ token: jwt.sign({ sub: 1 }, SECRET, { expiresIn: '15m' }) });}); app.get('/api/secret', (req, res) => {  try {    jwt.verify((req.headers.authorization || '').slice(7), SECRET);    res.json({ msg: 'الدرجات النهائية تُنشر الأحد 🎉' });  } catch {    res.status(401).json({ msg: 'ممنوع' });  }}); app.listen(3000);