useState használata
Állapotkezelés React-ben TypeScript-tel
import { useState } from 'react';
// típusos tömb állapot
const [courses, setCourses] = useState([]);
// string vagy null állapot
const [error, setError] = useState(null);
// objektum alapú állapot (ID -> string)
const [applyStatus, setApplyStatus] = useState>({});
useEffect - Adatok betöltése
Adatok lekérése a backendről komponens betöltésekor
import { useEffect, useState } from 'react';
useEffect(() => {
const loadData = async () => {
try {
const res = await fetch('http://localhost:3000/api/courses');
const data = await res.json();
if (!res.ok) {
setError(data.error);
return;
}
setCourses(data.data);
} catch (err) {
setError('Hiba az adatok lekérésekor!');
}
};
loadData();
}, []); // üres dependency array = csak egyszer fut le
POST kérés kezelése
Adatok küldése a backend-nek
const handleSubmit = async (id: number) => {
try {
const res = await fetch(`http://localhost:3000/api/courses/${id}/apply`, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ userId: 123 })
});
const data = await res.json();
if (res.status === 201) {
setApplyStatus(prev => ({
...prev,
[id]: 'Sikeres jelentkezés!'
}));
} else {
setApplyStatus(prev => ({
...prev,
[id]: data.error
}));
}
} catch (err) {
setApplyStatus(prev => ({
...prev,
[id]: 'Hiba a jelentkezéskor!'
}));
}
};
Segédfüggvény - Switch/Case
Típus alapú képválasztás
const getTypeImage = (type: string): string => {
switch(type) {
case 'solo': return '/images/solo.svg';
case 'partner': return '/images/partner.svg';
case 'group': return '/images/group.svg';
default: return '';
}
};
Lista renderelés map()-pel
Tömb elemeinek megjelenítése JSX-ben
{courses.map(course => (
{course.name}
Hossz: {course.length} perc
Tanár: {course.instructor}
handleClick(course.id)}
>
Jelentkezés
))}
Feltételes renderelés és osztályok
Dinamikus tartalomkezelés React-ben
// Hibaüzenet megjelenítése, ha van
{error && {error}
}
// Dinamikus CSS osztályok
{applyStatus[course.id] || ""}
TypeScript interface
Típusos adatszerkezetek definiálása
interface Course {
id: number;
name: string;
length: number;
instructor: string;
type: 'solo' | 'partner' | 'group';
}
// használat
const [courses, setCourses] = useState([]);
Bootstrap import
Bootstrap CSS betöltése React projektben
import 'bootstrap/dist/css/bootstrap.min.css';