- For example, babel transpile the JSX from above to:Try it on babel REPLThe only thing we need to add to Didact to support JSX is a createElement function, and that’s all, the rest of the work is done by the preprocessor.
- The first argument of the function is the type of the element, the second is an object with element props, and all the following arguments are children.
- Text children are passed as strings to the createElement function, and Didact needs the text elements to have type and props as the rest of the elements.
- So we will convert to a text element every arg that isn’t yet an element:I also filtered the list of children to exclude null, undefined and false args, we won’t render those so there is no need to add them to props.children.SummaryWe haven’t added any real power to Didact in this post, but we now have an improved developer experience since we can use JSX to define elements.
- Note that the codepen is using babel to transpile the JSX, the comment at the beginning /** @jsx createElement */ tells babel with function to use.You can find the current version of the code on GitHub.Next post coming soon…Thanks for reading.
This story is part of a series where we build a working version of React keeping the code as simple as possible. In this post we simplify the creation of elements and add support for JSX.
This story is part of a series where we build a working version of React keeping the code as simple as possible:
Last time we introduced Didact Elements, which are a very verbose way to describe what we want to get rendered to the DOM. In this post we will see how to simplify the creation of elements using JSX.
JSX provides some syntactic sugar to create elements. Instead of:
We can have:
function, and that’s all, the rest of the work is done by the preprocessor. The first argument of the function is the
. It’s easier to put it into code:
as the rest of the elements. So we will convert to a text element every arg that isn’t yet an element:
tells babel with function to use.
You can find the current version of the code on GitHub.