react.js

/**
 * Created by cesar on 28/10/16.
 */

$(function () {

    class BtnAdd extends React.Component{

        render() {
            return (
                <a href={this.props.link} className="button is-light is-small">Adicionar Musica</a>
            );
        }

    }

    class Card extends React.Component{
        render() {
            return (
                <div className="media wow fadeInUp animated slide"  data-wow-delay=".3s">
                    <div className="media-body">
                        {this.props.children}
                    </div>
                </div>
            )
        }
    }

    var ListMusicas = React.createClass({

        getInitialState : function () {
            return {data: []};
        },

        load : function () {
            var _this = this;
            $.get(_this.props.source, function (result) {
                this.setState({data: result});
            }.bind(_this))
        },  

        componentDidMount : function () {
            this.load();
        },

        render : function () {

            var _this = this;

            return(
                <div>
                    {
                        _this.state.data.map(function (musica) {

                            var linkAnexos = "/user/musica/"+ musica.id +"/anexos";

                            return (
                                <Card key={musica.id} >
                                    <h4 className="media-heading"><a href={linkAnexos}>{musica.nome}</a></h4>
                                </Card>
                            )
                        })
                    }
                </div>
            )
        }
    });

    var View = React.createClass({

        render : function () {

            var addMusica = '';

            if ("ROLE_ADMIN" == this.props.user) {
                addMusica = <BtnAdd link={this.props.link}/>
            }

            return (
                <div>
                    {addMusica}
                    <hr className="small" />
                    <ListMusicas source={this.props.source} />
                </div>
            )
        }

    });



    var source = $("#musicas").attr("data-source");
    var sourceLink = $("#musicas").attr("data-add-musica");
    var user = $("#musicas").attr("data-user");

    ReactDOM.render(
        <div>
            <View source={source} link={sourceLink} user={user} />
        </div>,
            document.getElementById('musicas')
    );
});