Devour/devour_data/docs/understanding-jsx.json

{
  "id": "0f4f295f7628e3fede277581",
  "source": "solid:signals",
  "type": "github-document",
  "title": "understanding-jsx",
  "content": "---\ntitle: Understanding JSX\norder: 2\nuse_cases: \u003e-\n  writing components, html in javascript, dynamic content, templating, props\n  passing, event handling\ntags:\n  - jsx\n  - components\n  - templates\n  - props\n  - html\n  - syntax\nversion: '1.0'\ndescription: \u003e-\n  Write HTML-like syntax in JavaScript with JSX to create reactive components\n  with dynamic expressions and event handlers.\n---\n\nJSX is an extension for JavaScript.\nIt allows you to write HTML-like code inside your JavaScript file which keeps your rendering logic and content in the same place.\nThis provides a concise and readable way to create and represent components.\n\n## How Solid uses JSX\n\nSolid was designed to align closely with HTML standards.\n\n```jsx\nconst element = \u003ch1\u003eI'm JSX!!\u003c/h1\u003e\n```\n\nIt offers a distinct advantage, however: to copy/paste solutions from resources like Stack Overflow; and to allow direct usage of templates from design tools.\nSolid sets itself apart by using JSX immediately as it returns [DOM](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction) elements.\nThis lets you use dynamic expressions within your HTML by allowing variables and functions to be references with the use of curly braces (`{ }`):\n\n```jsx\nconst Component = () =\u003e {\n\tconst animal = { breed: \"cat\", name: \"Midnight\" }\n\n\treturn (\n\t\t\u003cp\u003e\n\t\t\tI have a {animal.breed} named {animal.name}!\n\t\t\u003c/p\u003e\n\t)\n}\n```\n\nThis means JavaScript content can be rendered on web pages based on an application's state or logic.\n\nAdditionally, Solid's [reactive](/concepts/intro-to-reactivity) system introduces [fine-grained reactivity](/advanced-concepts/fine-grained-reactivity) with JSX.\nThis updates only the necessary parts of the DOM when changes occur in the underlying state.\n\n## Using JSX in Solid\n\n### Return a single root element\n\nWhere HTML lets you have disconnected tags at the top level, JSX requires that a component to return a single root element.\n\n:::advanced\nWhen working with JSX, parts of your code are translated into structured HTML that is placed at the start of the file.\nStatic elements are processed differently from dynamic ones, which might change based on data or user actions.\nFor dynamic elements, special markers are added for better handling during rendering.\n\nHaving a single root creates a consistent and manageable hierarchy to optimize rendering and updates.\n:::\n\nJSX maintains the familiar nested, tree-like structure found in HTML.\nAs a result, parent-child relationships between elements become easier to follow.\n\n### Close all tags\n\nSelf-closing tags are a must in JSX.\nUnlike in HTML, where elements like `\u003cinput\u003e`, `\u003cimg\u003e`, or `\u003cbr\u003e` don't require explicit closure, JSX requires consistent self-closing tags.\nThis helps to avoid potential rendering issues.\n\n```jsx\n\u003cimg src=\"./image-here.png\" /\u003e\n```\n\n### Properties vs. attributes\n\nHTML attributes and JSX properties may seem similar, but they serve different purposes and behave differently.\nBoth offer ways to specify configurations or pass information.\nHowever, HTML is used for standard web content and JSX creates Solid's component logic.\n\n#### HTML attributes\n\n[HTML attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes) are values set directly on HTML elements.\nThey provide additional information about an element to guide its initial behavior and state.\nThese attributes are often translated into properties on DOM objects once the browser parses the HTML.\n\nIn JSX files, HTML attributes are used much like regular HTML, with a few key differences due to the blend of HTML and JavaScript:\n\n- Event listeners such as `onClick` can be in camelCase or lowercase.\n  (**Note:** When using ESLint, you will get a warning if you use lowercase.)\n- In cases where you can dynamically specify a value, you can replace the `\"` and `\"` with curly braces (`{ }`):\n\n```jsx\n\u003cbutton class=\"myClass\" onClick={handleClick}\u003e\n\tClick me!\n\u003c/button\u003e\n```\n\n    \t:::note\n    \t  If you wish to pass objects in JSX, such as with inline styling, you will have to use double curly braces (`{{ }}`).\n\n```jsx\n\u003cbutton style={{\n\tcolor: 'red',\n\tfont-size: '2rem',\n\t}}\u003e\n  Click me!\n\u003c/button\u003e\n```\n:::\n\n### JSX properties (props)\n\nJSX properties, commonly known as \"props,\" help with the passing of data and configurations to components within an application.\nThey connect the component with the data it requires, for seamless data flows and dynamic interactions.\n\n#### Core concepts\n\n- **Static props**:\n  In Solid's JSX, static props are integrated directly into the HTML by cloning the template and using them as attributes.\n\n - **Dynamic props**:\n Dynamic props rely on state, allowing the content or properties to be dynamic.\n An example is changing the style of an element in response to interactions within an application.\n This can be expressed in the form of signals (`value={value()}`).\n\n- **Data transfer**:\n  Props are also used to fill components with data that comes from resources, like [`createResource`](/reference/basic-reactivity/create-resource) calls.\n  This results in components that react in real-time to data changes.\n\n:::note\nExpressions, whether fixed or dynamic, get applied *in the order defined within the JSX*.\nThis works for a wide range of DOM elements, but will not work with elements that require attributes to be defined in a special order, such as input types with `type='range'`.\n\nWhen order influences an element's behavior, users must define the expressions in the order that the element is expected.\n:::\n\nFor how to use props effectively in Solid, explore the [props page](/concepts/components/props).",
  "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/concepts/understanding-jsx.mdx",
  "metadata": {
    "path": "src/routes/concepts/understanding-jsx.mdx",
    "repo": "solidjs/solid-docs",
    "repo_url": "https://github.com/solidjs/solid-docs.git",
    "size": 5599,
    "source_type": "github"
  },
  "hash": "6875b894c882464099ad3c6815de61eb23e62e584e869b62fdf3f873ad9440f8",
  "timestamp": "2026-02-23T11:43:00.186951774+01:00"
}