Awesome

JSX to Shaco

This is a module to use with babel-plugin-transform-jsx and create Shaco Elements using JSX. This allow you to use JSX inside the view function

Install

First install the necesary dependencies

npm install --save-dev babel-plugin-transform-jsx jsx-to-shaco

Add to your package.json babel configuration the babel-plugin-transform-jsx and set the jsx-to-shaco module:

"plugins": [
	[
		"transform-jsx", { "module": "jsx-to-shaco" }
	]
]

if your are using browserify, your browserify configuration on your package.json maybe will se something like this

"browserify": {
	"transform": [
		[
			"babelify",
			{
				"plugins": [
					[
						"transform-jsx", { "module": "jsx-to-shaco" }
					]
				],
				"presets": [
					"es2015",
					"stage-2"
				]
			}
		]
	]
}

Example view function

The view function inside a component must have this structore

... // Omitted other parts of the Shaco.ComponentFactory object
view: function() {
	// you can put variables in here
	return (
			<div>
			<h1>Hello World</h1>
			<p>{this.state.usingVariables}</p>
			</div>
		   )
}
...

Using loops

view: function() {
	return (
			<ul>
			{ this.state.someArray.map((someOne, index) => {
					return (
							<li key={index}> { someOne} </li>
						   )
					})}
			</ul>
		   )
}

Passing State to another component

view: function() {
	return (
			<todo-item state={stateObj}></todo-item>
		   )
}

You can use normal HTML attributes like

• class
• onclick
• onsubmit
• etc

No camel case needed, only regular HTML definition