Chapter 96: React DOM — Common Components

Core Idea

Every built-in HTML tag (<div>, <span>, <img>, etc.) accepts a well-defined set of React-specific prop conventions on top of standard HTML attributes — className instead of class, camelCase event handlers, camelCase style/ARIA-adjacent attribute names — that this reference documents as the shared contract across all host elements.

Key Concepts

• Shared props across virtually every host element: className (CSS classes), style (a camelCased object, not a CSS string, per Ch 14), id, ref (Ch 62/35), dangerouslySetInnerHTML (the explicit, intentionally-scary escape hatch for injecting raw HTML — bypasses React's usual text-escaping, so only ever use it with trusted/sanitized content), and every standard DOM event handler prop (onClick, onChange, etc., per Ch 20).
• dangerouslySetInnerHTML={{ __html: markup }}: the double-brace/__html key shape is deliberately awkward — a reminder that this bypasses React's automatic escaping and is a real XSS risk if markup isn't from a trusted, sanitized source.
• aria-* and data-* keep their hyphenated HTML form (Ch 13's exception to the camelCase rule) — every other multi-word attribute follows camelCase.
• Controlled vs. uncontrolled form elements (previewed here, detailed in Ch 97-100): whether a form element's value is driven by React state (value + onChange) or left to the DOM's own internal state (defaultValue, read via a ref when needed) is a recurring theme across every specific form-element chapter that follows.

Code Examples

<div
  className="card"
  style={{ padding: 16 }}
  onClick={() => console.log('clicked')}
  data-testid="card-1"
/>

• What it demonstrates: the standard prop shape shared by any host element — camelCase style object, camelCase event handler, hyphenated data-* attribute preserved as-is.

Key Takeaways

1. This chapter's prop conventions (className, camelCase style, camelCase events, hyphenated aria-*/data-*) apply to every built-in element, not just the ones with their own dedicated chapters.
2. dangerouslySetInnerHTML is intentionally verbose/awkward to use as a built-in warning sign — treat any use of it as a security-review point.
3. The controlled/uncontrolled distinction introduced here is the organizing idea for every subsequent form-element-specific chapter.

Connects To

• Ch 13 (Writing Markup with JSX) and Ch 14 (JavaScript in JSX with Curly Braces): the className/style conventions formalized here.
• Ch 97-100 (form, input, select, textarea): the element-specific controlled/uncontrolled details this chapter previews.