Suppressive syntax in response

Question

I wanted to use https://github.com/chenglou/react-motion , but when I look at the first example:

import {Motion, spring} from 'react-motion'; // In your render... <Motion defaultStyle={{x: 0}} style={{x: spring(10)}}> {value => <div>{value.x}</div>} </Motion> 

I am overloaded with ES6 syntax and JSX syntax. I tried translating it to babel REPL , but it removes the JSX syntax:

 "use strict"; React.createElement( Motion, { defaultStyle: { x: 0 }, style: { x: spring(10) } }, function (value) { return React.createElement( "div", null, value.x ); } ); 

What does this mean for JSX syntax up to ES6?

Answer 1

 import {Motion, spring} from 'react-motion'; // In your render... <Motion defaultStyle={{x: 0}} style={{x: spring(10)}}> {value => <div>{value.x}</div>} </Motion> 

can be written equivalently as

 var ReactMotion = require("react-motion"); var Motion = ReactMotion.Motion; var spring = ReactMotion.spring; // In your render... <Motion defaultStyle={{x: 0}} style={{x: spring(10)}}> {function (value) { return <div>{value.x}</div>; }} </Motion> 

without ES6 features, but using JSX.

Only two things that are very different (with links to related documents):

• Import syntax that also uses a form that resembles (and works like) destructuring
• Arrow functions that let you briefly define functions

Also, syntax like <Motion defaultStyle={{x: 0}} style={{x: spring(10)}}> often confused, but remember that attr={} allows you to pass a JS expression, and the expression is just an object literal. This is functionally equivalent to:

 var defaultStyle = {x: 0}; var style = {x: spring(10)}; <Motion defaultStyle={defaultStyle} style={style}>