JSX

As an alternative to defining the HTML a Clip’s via EJS templates, you can use JSX. In order to do so you need to pass your HTML as a function (and not just as string as you normally do with EJS) that takes as argument the initParams.

Example

const MotorCortex = require(‘@kissmybutton/motorcortex’);
const myClip = new MotorCortex.Clip({
host: document.getElementById(‘my-id’)
,html: (initParams)=>
<div>
<div>whoa! You can use JSX</div>
</div>
,css: `div{ width: 100% }`,
initParams: {
copy:A copy sample”,
flag: true,
color: “#0000FF”
}
});

Enabling JSX

In order to use JSX in your project you need to add

  • @babel/plugin-syntax-jsx and
  • @babel/plugin-transform-react-jsx on your package.json.

Once you do so on your “plugins” key of your .babelrc file you need to put:

"plugins": [
"@babel/plugin-syntax-jsx",
["@babel/plugin-transform-react-jsx",
{
"pragma": "MotorCortex.utils.createDOMElement"
}]
]

and you’re ready to go.