Understanding JSXEdit this page
How Solid uses JSX
Solid was designed to align closely with HTML standards.
It offers a distinct advantage, however: to copy/paste solutions from resources like Stack Overflow; and to allow direct usage of templates from design tools.
Solid sets itself apart by using JSX immediately as it returns DOM elements.
This lets you use dynamic expressions within your HTML by allowing variables and functions to be references with the use of curly braces (
Using JSX in Solid
Return a single root element
Where HTML lets you have disconnected tags at the top level, JSX requires that a component to return a single root element.
When working with JSX, parts of your code are translated into structured HTML that is placed at the start of the file. Static elements are processed differently from dynamic ones, which might change based on data or user actions. For dynamic elements, special markers are added for better handling during rendering.
Having a single root creates a consistent and manageable hierarchy to optimize rendering and updates.
JSX maintains the familiar nested, tree-like structure found in HTML. As a result, parent-child relationships between elements become easier to follow.
Close all tags
Self-closing tags are a must in JSX.
Unlike in HTML, where elements like
<br> don't require explicit closure, JSX requires consistent self-closing tags.
This helps to avoid potential rendering issues.
Properties vs. attributes
HTML attributes and JSX properties may seem similar, but they serve different purposes and behave differently. Both offer ways to specify configurations or pass information. However, HTML is used for standard web content and JSX creates Solid's component logic.
HTML attributes are values set directly on HTML elements. They provide additional information about an element to guide its initial behavior and state. These attributes are often translated into properties on DOM objects once the browser parses the HTML.
- Event listeners such as
onClickcan be in camelCase or lowercase. (Note: When using ESLint, you will get a warning if you use lowercase.)
- In cases where you can dynamically specify a value, you can replace the
"with curly braces (
If you wish to pass objects in JSX, such as with inline styling, you will have to use double curly braces (
JSX properties (props)
JSX properties, commonly known as "props," help with the passing of data and configurations to components within an application. They connect the component with the data it requires, for seamless data flows and dynamic interactions.
Static vs. dynamic attributes: In Solid's JSX, static attributes are integrated directly into the HTML template. Dynamic attributes, however, are not and instead rely on state and other reactive data sources. This allows the content or styling of an element to change in response to interactions or other changes within an application.
Dynamic data transfer: Props are important when using dynamic data. They let components react in real-time to changes, resulting in a responsive application.Info:
Expressions, whether fixed or dynamic, get applied in the order defined within the JSX. This 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
When order influences an element's behavior, users must define the expressions in the order that the element is expected.
For how to use props effectively in Solid, explore the props page.