But this is not a valid JavaScript syntax!
You are right! JSX is not a valid JavaScript syntax. It needs to be transformed into a valid JavaScript syntax before it can be executed by the JavaScript engine. This is where the transpiler comes into play. The transpiler is a tool that converts magical stuff, including the JSX syntax into the equivalent JavaScript code. Some of the most popular transpilers for JSX are Babel, TypeScript, SWC, esbuild, etc.If you are TypeScript user, you dont even need to add anything else to your
project, just use the
@jsx
pragma and you are good to go.The JSX pragma
The JSX pragma is a comment that tells the transpiler how to transform JSX into the equivalent JavaScript code. The pragma is used to define the function that will be called when the JSX syntax is encountered. The pragma is defined at the top of the file and is usually in the form of a comment.JSX.createElement
function to transform the JSX syntax into the equivalent JavaScript code. The JSX.Fragment
is used to wrap multiple elements in a single parent element. These functions are exported by canvacord
as JSX
namespace.
TypeScript global JSX pragma
You can also set the pragma globally in your project by adding the following to yourtsconfig.json
file:
Don’t want to/Can’t use JSX?
If you don’t want to use JSX or can’t use JSX in your project, you can still use Canvacord. Canvacord provides a way to create images without using JSX. You can use theBuilder
class to create images without using JSX. The Builder
class provides a way to create images using a more traditional approach.