どのようにして、transform-react-jsxでBabelを入手して、module.exports（ACEエディタ用）を使用しないでコンポーネントを適切に変換できますか？

Question

最初にいくつかの背景：私は1週間前にコーディングのチャレ​​ンジのために作ったReact-Cloneのインタラクティブな "Try It"を設定しようとしています。

const Trends = EX.component({ 
componentName: 'trends', 
componentRender: (props) => { 
    return (
    <div class="col-xs-12"> 
     <h2>{props.ex_thing.stuff}</h2> 
    </div> 
) 
} 
}); 
module.exports = Trends; 

親コンポーネントを：私はバベルとのWebPACKを使用するか、私は以下のように、作品がうまく行わリアクトクローンをbrowserifyとき例えば、ここで、私はとにかく

Create Componentに取り組んでいたサンプルの一つであります：

const Trends = require("./trends.js"); 

<Trends ex_thing={anObject} /> 

//compiles to: 

Trends({ex_thing: anObject}) 

でも！ commonJSなしでコンポーネントを定義すると、にEX.node（ "Trends"、{ex_thing：anObject}）がコンパイルされます。参考文献：EX.nodeは、私が作成したReact-Cloneに使用しているものです。

ここでのGoogleドライブ上の私は2つのHTMLファイルにworks.htmlとbroken.htmlを壊れている別のと呼ばれる作品1を持って、それが設定ゼロを必要とし、ちょうどクロームTwo HTML filesをクリックし、開いた

違いはworks.htmlです。コンポーネントではなく要素のようにコンパイルするので、コンポーネントNameTagをJSXに書きません。コンパイルされたコードはコンソールに記録されます。ないEX.node（ '名札'、{ex_person：ITM}）：

は、どのように私はバベルが名札に名札（{ITM ex_personを}）をコンパイルするために得ることができますか？

はあなた