Element

Represents an element in the application's render tree.

Definition

Element primitives can be constructed outside of views though they will not be connected to render tree until they are used within a rendered view. If an element has no children then it can be written as self-closing.

const URL = "https://example.com/image.png";

const ELEMENT = <img src=URL></img>;
const SELF_CLOSING = <img src=URL />;

Adding Parentheses

Most property expressions do not require explicitly adding parentheses, but for complex expressions it can help to better indicate the end of an expression.

const ELEMENT = <div
  data-simple-num=123
  data-complex-num=(123 + 456 + 789)
/>;

Inline Expressions

Expressions can be added inline by wrapping it in braces ({ }) to provide the inner content of an element.

import { greet } from "@/functions";

const HEADER = <h1>{greet("Human Being")}</h1>;

Text Content

Simple textual content can be added inline to provide the inner content of an element.

const HEADER = <h1>Hello, World!</h1>;

Nested Elements

Compose together elements in a way familiar to anyone who has used XML or HTML.

const PAGE = <section>
  <h1>Welcome</h1>
  <main>👋</main>
</section>;

Mixed Content

Elements can also contain mixed content of all the types listed above.

const MESSY = <div>
  Welcome!
  {123}
  <main>🗑</main>
</div>;