Overwhelming syntax on react-motion

Question

I wanted to use https://github.com/chenglou/react-motion but when I look at the very 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 got overwhelmed with the ES6 syntax and the JSX syntax. I tried translating it on the babel REPL but it strips out 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 translate to in pre-ES6 JSX syntax?

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>

could 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.

They only two things that are very different (with links to appropriate docs):

• The import syntax, which also uses a form that resembles (and works like) destructuring
• Arrow functions which allow you to concisely define functions

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

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