JSFiddle - React, Tailwind, and code Playground

by gabs00

HTML

<script src="http://fb.me/react-with-addons-0.12.0.js"></script>
<script src="http://fb.me/JSXTransformer-0.12.0.js"></script>
<script src="http://fb.me/react-js-fiddle-integration.js"></script>

JavaScript 1.7

var Title;
var Link;
var Description;
var Img;
var Card;
var El;

var article = {
    title:"Hello World",
    img:"http://www.gabar.us/img/self_portrait.jpg",
    description:"Testing React",
    link:"www.gabar.us"
};

Link = React.createClass({
    render: function () {
        return <div>
            <a href={this.props.link}>Read More...</a>
            </div>
    }
});
Description = React.createClass({
    render: function () {
        return (
            <div>
            {this.props.description}
            </div>
        );
    }
});
Img = React.createClass({
    render: function () {
        return (
            <div>
            <img src={this.props.img} />
            </div>
        );
    }
});
Title = React.createClass({
    render: function () {
        return (
            <div>
            {this.props.title}
            </div>
        );
    }
});

Card = React.createClass({
    render: function () {
        var data = this.props.data;
        return <div>
            <Title title={data.title} />
            <Description description={data.description} />
            <Img src={data.img} />
            <Link link={data.link} />
        </div>;
    }
});

React.render(<Card data={article}/>, document.body);