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.