JSX and Rendering
Describe interface trees with JSX expressions, attributes, fragments, and pure rendering.
JSX is syntax for describing a React element tree. It looks like HTML but follows JavaScript rules and compiles into object creation.
Expressions inside markup
LessonTitle.tsx
export function LessonTitle({ course, lesson }: { course: string; lesson: string }) {
const label = `${course} · ${lesson}`;
return <h1 className="lesson-title" aria-label={label}>{label}</h1>;
}
Use curly braces for JavaScript expressions. Most DOM attributes use camelCase, while aria-* and data-* keep their HTML spelling.
Return one tree
Course.tsx
return (
<>
<CourseHeader />
<LessonList />
</>
);
Fragments group siblings without adding a DOM wrapper. Rendering should stay pure: the same props and state should describe the same output without changing outside values.
Keep this
Use expressions inside a single returned tree, keep render logic pure, and let components describe rather than manually mutate the DOM.
学习位置已保存在此设备上。