12:52
React 19 Tutorial - 7 - Rules of JSX
Codevolution
Overview
This video explains the fundamental rules of JSX, a syntax extension for JavaScript used in React. It clarifies that JSX is not HTML but JavaScript, and therefore follows specific rules. The tutorial covers four key rules: components must return a single root element (using `<div>` or React Fragments), all tags must be self-closed, attribute names use camel case (e.g., `className` instead of `class`), and JavaScript expressions can be embedded within curly braces `{}`. Understanding these rules is crucial for writing effective React components.
How was this?
Save this permanently with flashcards, quizzes, and AI chat
Chapters
- Every React component must return a single root JSX element.
- Multiple adjacent elements must be wrapped in a parent container like a `<div>`.
- React Fragments (`<React.Fragment>` or `<>...</>`) can group elements without adding an extra node to the DOM.
- Fragments are preferred when an extra `<div>` would interfere with styling or structure.
This rule ensures that the output of a component is a single, cohesive unit that React can manage, preventing errors and maintaining a clean DOM structure.
A `UserProfile` component returning an `<h1>` and a `<p>` must wrap them in a `<div>` or `<>...</>` because they are adjacent elements.
- All JSX tags, including self-closing HTML tags, must be properly closed.
- HTML tags like `<input>` or `<br>` require a forward slash before the closing bracket in JSX (e.g., `<input />`, `<br />`).
- This rule applies to all void elements like `<img>`, `<hr>`, `<meta>`, and `<link>`.
This enforces a consistent syntax derived from XML, making JSX more predictable and preventing parsing errors that would occur if tags were left unclosed.
A `<form>` with `<input>` and `<br>` tags in HTML must be written as `<input />` and `<br />` in JSX to be valid.
- JSX attributes that conflict with JavaScript reserved words or follow JavaScript naming conventions must use camel case.
- For example, `class` becomes `className`, and `for` becomes `htmlFor`.
- Other attributes like `tabindex` are also converted to camel case (`tabIndex`).
- React provides helpful console warnings suggesting the correct camel case attribute name if an incorrect one is used.
This rule ensures that HTML attributes can be correctly translated into JavaScript object properties when React processes JSX, avoiding conflicts with JavaScript's syntax and keywords.
An HTML attribute `class="my-class"` must be written as `className="my-class"` in JSX.
- JSX allows embedding any valid JavaScript expression within curly braces `{}`.
- This enables dynamic rendering of content, variables, calculations, function calls, and conditional logic (like ternary operators).
- Expressions inside curly braces are evaluated by JavaScript, and their results are rendered in the UI.
- This feature bridges the gap between JavaScript's logic and JSX's declarative markup.
This is a core feature that makes React powerful, allowing developers to seamlessly integrate dynamic data and logic directly into their UI components.
Displaying a user's name stored in a `const name = 'Alice';` variable is done by writing `{name}` within the JSX, and performing a calculation like `{2024 - birthYear}`.
Key takeaways
- JSX is not HTML; it's a JavaScript syntax extension with its own set of rules.
- Components must return a single root element, often achieved using React Fragments (`<>...</>`) to avoid unnecessary DOM nodes.
- All HTML tags in JSX, including self-closing ones, must be explicitly closed (e.g., `<img />`).
- Attribute names in JSX follow JavaScript's camel case convention (e.g., `className`, `onClick`).
- Curly braces `{}` are the gateway to embedding JavaScript expressions, variables, and logic directly within JSX.
- Understanding the 'why' behind these rules (their connection to JavaScript) makes them easier to remember and apply.
Key terms
JSXReact ComponentRoot ElementReact FragmentSelf-Closing TagCamel CaseJavaScript ExpressionDOM (Document Object Model)
Test your understanding
- Why must every React component return a single root element in JSX?
- How does a React Fragment differ from a `<div>` when used to wrap multiple JSX elements?
- What is the JSX rule for closing tags, and how does it differ from standard HTML for elements like `<input>`?
- Explain why HTML attributes like `class` and `for` are renamed in JSX, and what their JSX equivalents are.
- How can you dynamically display the result of a JavaScript calculation within your JSX markup?