React Fundamentals, JSX Syntax & Virtual DOM

JSX & Functional Components

JSX allows you to write HTML-like markup inside JavaScript files with full expression evaluation:

export default function CourseCard({ title, lessonsCount, isFree }) {
    return (
        <div className="p-6 rounded-2xl bg-slate-900 border border-slate-800">
            <h3 className="text-xl font-bold text-white">{title}</h3>
            <p className="text-slate-400 text-sm">Lessons: {lessonsCount}</p>
            <span className={`badge ${isFree ? 'bg-emerald-500' : 'bg-indigo-600'}`}>
                {isFree ? 'Free Access' : 'Pro Course'}
            </span>
        </div>
    );
}