React: Render issue with custom components

Question

I just have started learn React. I have problem with rendering my components. This is my JSX code:

"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'));

and this is result in browser

<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>

As you can see my components (aaa,bbb,ccc,ddd) are not rendered properly. Only Button from office-ui-fabric-react works. There is no error from babel or webpack so I have no idea what is wrong.

Answer 1

React component must begin with an Upper-case letter:

Aaa
Bbb
Ccc

From React:

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')

）;