The element
function used to create virtual elements is compatible with JSX through Babel. When using Babel you just need to set the jsxPragma
. This allows you to automatically transform HTML in your code into element
calls.
Be sure to install babel-preset-es2015 and babel-plugin-transform-react-jsx.
npm install babel-preset-es2015
npm install babel-plugin-transform-react-jsx
You will need to set the pragma
. Here’s an example .babelrc
that sets the pragma:
{
"presets": ["es2015"],
"plugins": [
["transform-react-jsx", {"pragma": "element"}]
]
}
Alternatively, you can specify it in each of your files with a @jsx
pragma comment:
/* @jsx element */
import { element } from 'deku'
From here, you can use browserify with babelify to build your final .js package.
npm install --save browserify
npm install --save babelify
# compile the entry point `index.js` to `dist/application.js`
browserify -t babelify index.js -o dist/application.js
Alternatively, you can also use babel-cli to compile your JS files.
JSX is just syntax sugar for creating object trees. You can use Deku perfectly fine without JSX, but if you’re already using Babel you can use JSX without any extra work.
Instead of writing each element
call:
function render (model) {
return (
element('button', { class: 'Button' }, [
element('span', { class: 'Button-text' }, ['Click Me!'])
])
)
}
You can write HTML:
function render (model) {
return (
<button class='Button'>
<span class='Button-text'>Click Me!</span>
</button>
)
}
This page is taken from Deku’s documentation.