javascript - React JSX - Babel Transpilation - How does it work? -

i'm starting react , have experience es6, , trying wrap head around basic component definition, found @ react-redux-starterkit

export const counter = (props) => (   <div style={{ margin: '0 auto' }} >     <h2>counter: {props.counter}</h2>     <button classname='btn btn-default' onclick={props.increment}>       increment     </button>     {' '}     <button classname='btn btn-default' onclick={props.doubleasync}>       double (async)     </button>   </div> )  export default counter 

when ran through babel's online transpiler, found transpiled to:

'use strict';  object.defineproperty(exports, "__esmodule", {   value: true }); var counter = exports.counter = function counter(props) {   return react.createelement(     'div',     { style: { margin: '0 auto' } },     react.createelement(       'h2',       null,       'counter: ',       props.counter     ),     react.createelement(       'button',       { classname: 'btn btn-default', onclick: props.increment },       'increment'     ),     ' ',     react.createelement(       'button',       { classname: 'btn btn-default', onclick: props.doubleasync },       'double (async)'     )   ); };  exports.default = counter; 

clearly, has transpiled because had checked react option.

but having trouble understanding syntax. instance, see first there export const counter statement, exports constant named counter function. presuming constant because nothing in class should able change in future.

but @ end, there export default counter, exported when file imported another.

what don't understand is, how react.createelement come in here? haven't imported react in file. don't see normal jsx class based syntax see in tutorials. how jsx transpiled on babel? apologies rookie question.

"is how jsx transpiled on babel"

yes. in react, jsx used declarative form of "call react.createelement these components , props."

that's why react files use jsx fail compile if forget import react "react", don't explicitly reference react.