Beyond JSX
JSX is a syntax sugar that allows us to use React components in an HTML like manner. A component needs to adhere to certain interface conventions, otherwise it can't be used in JSX. This section will go into detail on how the JSX transformation works and what React APIs are used underneath.
Note: This section requires knowledge about the low level apis for creating elements, such as React.createElement
or ReactDOMRe.createDOMElementVariadic
.
Note: This page assumes your
bsconfig.json
to be set to"reason": { "react-jsx": 3 }
to apply the right JSX transformations.
Component Types
A plain React component is defined as a ('props) => React.element
function. You can also express a component more efficiently with our shorthand type React.component<'props>
.
Here are some examples on how to define your own component types (often useful when interoping with existing JS code, or passing around components):
RES// Plain function type
type friendComp =
({"name": string, "online": bool}) => React.element;
// Equivalent to
// ({"padding": string, "children": React.element}) => React.element
type containerComp =
React.component<{
"padding": string,
"children": React.element
}>;
The types above are pretty low level (basically the JS representation of a React component), but since ReScript React has its own ways of defining React components in a more language specific way, let's have a closer look on the anatomy of such a construct.
JSX Component Interface
A ReScript React component needs to be a (sub-)module with a make
and makeProps
function to be usable in JSX. To make things easier, we provide a @react.component
decorator to create those functions for you:
In the expanded output:
makeProps
: A function that receives multiple labeled arguments (according to prop names) and returns the value that is consumed by make(props)make
: A convertedmake
function that complies to the component interface(props) => React.element
Note: The makeProps
function will also always contain a ~key
prop.
Special Case React.forwardRef
The @react.component
decorator also works for React.forwardRef
calls:
As shown in the expanded output above, our decorator desugars the function passed to React.forwardRef
in the same manner as a typical component make
function. It also creates a makeProps
function with a ref
prop, so we can use it in our JSX call (<FancyInput ref=.../>
).
So now that we know how the ReScript React component transformation works, let's have a look on how ReScript transforms our JSX constructs.
JSX Under the Hood
Whenever we are using JSX with a custom component ("capitalized JSX"), we are actually using React.createElement
to create a new element. Here is an example of a React component without children:
As you can see, it uses Friend.make
and Friend.makeProps
to call the React.createElement
API. In case you are providing children, it will use React.createElementVariadic
instead (which is just a different binding for React.createElement
):
Note that the ~children=React.null
prop has no relevance since React will only care about the children array passed as a third argument.
Dom Elements
"Uncapitalized JSX" expressions are treated as DOM elements and will be converted to ReactDOMRe.createDOMElementVariadic
calls:
The same goes for uncapitalized JSX with children: