JSX and Rendering

function CourseCard({ title, lessonCount }) {n    return (n        <div className="card">n            <h3>{title}</h3>n            <p>{lessonCount} lessons</p>n        </div>n    );n}

Embedding JavaScript expressions

Curly braces {} inside JSX drop back into plain JavaScript — {title} above inserts the value of the title variable directly into the markup. Any valid JavaScript expression works: a function call, a ternary, basic arithmetic.

className, not class

Since JSX compiles to JavaScript, and class is a reserved JavaScript keyword (covered in the JavaScript course’s classes lesson), React uses className instead of HTML’s class attribute. This trips up almost everyone coming from plain HTML at least once.

Rendering a list

const courses = ["Python", "React", "SQL"];nnfunction CourseList() {n    return (n        <ul>n            {courses.map(course => <li key={course}>{course}</li>)}n        </ul>n    );n}

The key attribute is not optional when rendering a list — it must be a unique, stable identifier for each item, and it is how React efficiently figures out which items changed, were added, or were removed between renders, rather than re-rendering the entire list from scratch every time.

One root element

A component must return a single root element — wrap multiple sibling elements in a <div>, or use <>...</> (a Fragment) when you don’t want an extra wrapping element in the actual rendered HTML.