React：カスタムコンポーネントのレンダリングの問題

Question

私はちょうどReactを学び始めました。コンポーネントのレンダリングに問題があります。 これは私のJSXコードです：

"use strict"; 
import React from 'react'; 
import { render } from 'react-dom'; 
import ddd from './Components/ddd'; 
import { Button } from 'office-ui-fabric-react/lib/Button'; 


const aaa =() => { 
    return (<span>AAA component</span>); 
} 

class ccc extends React.Component { 
    render(){return (<span>CCC component</span>);} 
} 

const bbb = React.createClass({ 
    render: function() { 
     return (<span>BBB component</span>); 
    } 
}); 

render(<div> 
      <aaa/>    
      <bbb/> 
      <ccc/>    
      <ddd/> 
      <Button>Button Component</Button> 
     </div> 
    ,document.getElementById('content')); 

、これはあなたが私のコンポーネント（AAA、BBB、CCC、DDD）が正しくレンダリングされません見ることができるように、ブラウザ

<div id="content"> 
    <div data-reactroot=""> 
     <aaa/> 
     <bbb/> 
     <ccc/> 
     <ddd/> 
     <button aria-labelledby="Button0" class="ms-Button"> 
      <span class="ms-Button-label" id="Button0">Button Component</span> 
     </button> 
    </div> 
</div> 

の結果です。 office-ui-fabric-reactのボタンのみが動作します。 babelやwebpackからのエラーはありませんので、何が間違っているのか分かりません。

Aaa 
Bbb 
Ccc 

リアクトから：

Answer 1

コンポーネントは大文字で始まる必要があり反応させ

To render a React Component, just create a local variable that starts with an upper-case letter

Answer 2

var bbbComponent = new Bbb(), 
cccComponent = new Ccc(), 
dddComponent = new Ddd() /* assuming ddd is a component */; 

render(
<div> 
    {aaa()} 
    {bbbComponent} 
    {cccComponent} 
    {dddComponent} 
    <Button>Button Component</Button> 
</div> 
,document.getElementById('content') 

）。