And creator of the famous...

Understand your environment

ES6

ECMAScript 2015

Not fully implemented across all platforms

Babel

Implementation of ES6

Compiles JavaScript to... JavaScript! (ES5)

Supports plugins and presets

JSX

Specification of JS + XML

It is not React!

Compiles down to plain JavaScript

JSX Internals

<Text>

</Text>

Hi, Lorena

JSXElement
    JSXOpeningElement
        JSXIdentifier (name) 'Text'
    (children) JSXText (value) 'Hi, Lorena'
    JSXClosingElement
        JSXIdentifier: (name) 'Text'

<Text>

</Text>

Hi, Lorena

React.createElement(
    'Text',
    null,
    'Hi, Lorena'
)

JSX is not restricted to React

The JSX Babel plugin receives a pragma
React uses react.createElement
Preact uses h
...and you can pass your own renderer!

So, you can transform...

Runtime

Compilation

function compile(tag, props, ...children) {
  return React.createElement(
    tag.split('').reverse().join(''),
    props,
    children
  );
}

export default ({ t }) => ({
  visitor: {
    JSXIdentifier({ node }) {
      node.name = node.name
      	.split('')
        .reverse()
        .join('');
    }
  }
});

The compiler is your friend

Every new language construct is a plugin
You can override operators
A good challenge is to reimplement React!
Port to other platforms

And creator of the famous...

TOC

Understand your environment

ES6

Babel

JSX

JSX Internals

JSX is not restricted to React

So, you can transform...

Runtime

Compilation

The compiler is your friend