Hogyan kell megalkotni egy kapcsolatot a Laravel és a React között
## 1. Fázis: Backend (Laravel 12) Alapozás
1. Projekt létrehozása:
composer create-project laravel/laravel todo-backend
cd todo-backend
2. Adatbázis beállítása: .env fájl szerkesztése
DB_DATABASE=todo_db
DB_USERNAME=root
DB_PASSWORD= (vagy a jelszavad)
3. API képesség telepítése (Laravel 11/12 specifikus):
php artisan install:api
4. Model és Migráció:
php artisan make:model
Todo -m
$table->id();
$table->string('title');
$table->boolean('completed')->default(false);
$table->timestamps();
Futtasd: `php artisan migrate`
5. **A Modell javítása (Mass Assignment -
A 500-as hiba ellen):**
Nyisd meg az `app/Models/Todo.php` fájlt:
protected
$fillable = ['title', 'completed'];
## 2. Fázis: Logika és Útvonalak
6.
**Kontroller létrehozása:**
`php artisan make:controller TodoController`
Az `app/Http/Controllers/TodoController.php` tartalma:
public function index() { return Todo::all();
}
public function store(Request $request) { return
Todo::create($request->all()); }
public function destroy(Todo $todo) { $todo->delete(); }
7.
**API Útvonalak rögzítése:**
A `routes/api.php`
fájlban:
use App\Http\Controllers\TodoController;
Route::apiResource('todos', TodoController::class);
8.
**CORS hiba feloldása:**
Futtasd: `php artisan
config:publish cors`
A
`config/cors.php` fájlban:
'allowed_origins' => ['*'],
## 3. Fázis: Frontend (React + Vite)
9.
**Projekt létrehozása (külön mappában):**
`npm create vite@latest todo-frontend -- --template react`
`cd todo-frontend`
`npm install`
`npm install axios`
10. **A Frontend kód megírása:**
Az `src/App.jsx` fájlban a kapcsolat
kiépítése:
import { useState, useEffect } from 'react';
import axios from 'axios';
const api = axios.create({ baseURL: 'http://127.0.0.1:8000/api' });
function App() {
const [todos, setTodos] = useState([]);
const [text, setText] = useState("");
useEffect(() => { fetchTodos(); }, []);
const fetchTodos = async () => {
const res = await api.get('/todos');
setTodos(res.data);
};
const handleAdd = async () => {
if (!text) return;
const res = await api.post('/todos', { title: text });
setTodos([...todos, res.data]);
setText("");
};
const handleDelete = async (id) => {
await api.delete(`/todos/${id}`);
setTodos(todos.filter(t => t.id !== id));
};
return (
<div>
<input value={text} onChange={(e) => setText(e.target.value)}
/>
<button
onClick={handleAdd}>Hozzáad</button>
<ul>
{todos.map(t => (
<li key={t.id}>{t.title}
<button onClick={() => handleDelete(t.id)}>X</button></li>
))}
</ul>
</div>
);
}
export default App;
## 4. Fázis: Futtatás
11. **Szerverek indítása:**
* **Terminál 1 (Backend):** `php artisan serve`
* **Terminál 2 (Frontend):** `npm run dev`