ecmascript 6 - Reactjs: Destructuring and formatting of params? -

working through reactjs tutorial , found (imo) neat little feature that's demonstrating destructuring of react parameters jsx object so:

import react, { component } 'react';  export default class mybutton extends component {     render() {         return (             <a {...this.props} >discover things!</a>         );     }; } 

and example of use:

<mybutton classname='btn btn-primary' href="//02geek.com" target="_blank" /> 

and result:

<a class="btn btn-primary" href="//02geek.com" target="_blank" >discover things!</a> 

the more i'm looking @ , google it, more perplexed i'm getting. who/what responsible taking properties passed client, , mybutton component's ... notation, formatting out this?

i'm assuming react/jsx hocus pocus? i'm not including 3rd party transformers i'm aware of might doing this. pretty basic stuff now.

when use custom component mybutton looks kind of html-tag you're setting attributes on (like classname , href). setting component (mybutton) properties (or props). if console.log(this.props.classname) inside of mybutton (in example) print "btn btn-primary".

so props set when use <mybutton classname='btn btn-primary' href="//02geek.com" target="_blank" /> available inside mybutton, through this.props.

what happens inside mybutton takes this.props object (the 1 values { classname: 'btn btn-primary'}) , spreads them ordinary <a>-tag. means a-tag these values passed down attributes. in example it's exact equivalent of this:

<a clasname={this.props.classname} href={this.props.href} target={this.props.target} >discover things!</a> 

jsx (read more here), lets deal html inside of javascript way, translate above

react.createelement(   'a',    {       classname: "btn btn-primary",      href: "//02geek.com",      target: "_blank"   },   "discover things!" ); 

as last step, react make final translation "classname" just="class" ("class" can't used inside of javascript because it's a reserved word).

so when these steps done, react takes care of turning react.createelement calls actual dom elements can see in browser. in case output is:

<a class="btn btn-primary" href="//02geek.com" target="_blank" >discover things!</a>