the-gigi/React.js playground

## React.js playground
<html>
  <head>
    <title>Simple React.js skeleton</title>
    <script src="https://fb.me/react-0.13.1.js"></script>
    <script src="https://fb.me/JSXTransformer-0.13.1.js"></script>
  </head>
  <body>
    <div id="content"></div>
    <script type="text/jsx">
        var green_bullet = "http://upload.wikimedia.org/wikipedia/commons/6/68/Bullet-green.png"
        var red_bullet = "http://upload.wikimedia.org/wikipedia/commons/e/e2/Bullet-red.png"
        var yellow_bullet = "http://upload.wikimedia.org/wikipedia/commons/2/23/Bullet-ambar.png"

        var ColorText = React.createClass({
            render: function() {
                var style = {
                      color: 'blue',
                      backgroundColor: 'red',
                      fontSize: 50,
                      padding: 5,
                      verticalAlign: 'top'
                    };

                return <span style={style}>{this.props.text}</span> ;
            }
        });

        var Image = React.createClass({
            render: function() {
                var style = {
                      padding: this.props.padding,
                      width: 40,
                      height: 40
                    };

                return <img style={style} src={this.props.url} />;
            }
        });


        var IconText = React.createClass({
            render: function() {
                var style = {
                      padding: this.props.padding
                    };

                return  <span>
                            <Image url={this.props.image_url}
                                   padding={this.props.padding}
                            />
                            <ColorText text={this.props.text} />
                        </span> ;
            }
        });

        var IconTextList = React.createClass({
            render: function() {
                var style = {
                    backgroundColor: 'black'
                };
                var items = this.props.items;
                var list = items.map(function(x) {
                    return <li>
                              <IconText text={x[0]}
                                        image_url={x[1]}
                                        padding='5'
                              />
                           </li>
                });
                return <ul style={style}>{list}</ul> ;
            }
        });


        /*
        React.render(<ColorText text="Yeah, it works!!!"/> ,
                     document.getElementById('content'));


        React.render(<IconText text="Yeah, it works!!!"
                               padding="5"
                               image_url=green_bullet
                     /> ,
                     document.getElementById('content'));
        */


        var items = [
            ['Item 1', green_bullet],
            ['Item 2', yellow_bullet],
            ['Item 3', green_bullet],
            ['Item 4', yellow_bullet]
        ];
        React.render(<IconTextList items={items} /> ,
                     document.getElementById('content'));

    </script>
  </body>
</html>
	<html>
	<head>
	<title>Simple React.js skeleton</title>
	<script src="https://fb.me/react-0.13.1.js"></script>
	<script src="https://fb.me/JSXTransformer-0.13.1.js"></script>
	</head>
	<body>
	<div id="content"></div>
	<script type="text/jsx">
	var green_bullet = "http://upload.wikimedia.org/wikipedia/commons/6/68/Bullet-green.png"
	var red_bullet = "http://upload.wikimedia.org/wikipedia/commons/e/e2/Bullet-red.png"
	var yellow_bullet = "http://upload.wikimedia.org/wikipedia/commons/2/23/Bullet-ambar.png"

	var ColorText = React.createClass({
	render: function() {
	var style = {
	color: 'blue',
	backgroundColor: 'red',
	fontSize: 50,
	padding: 5,
	verticalAlign: 'top'
	};

	return <span style={style}>{this.props.text}</span> ;
	}
	});

	var Image = React.createClass({
	render: function() {
	var style = {
	padding: this.props.padding,
	width: 40,
	height: 40
	};

	return <img style={style} src={this.props.url} />;
	}
	});



	var IconText = React.createClass({
	render: function() {
	var style = {
	padding: this.props.padding
	};

	return <span>
	<Image url={this.props.image_url}
	padding={this.props.padding}
	/>
	<ColorText text={this.props.text} />
	</span> ;
	}
	});

	var IconTextList = React.createClass({
	render: function() {
	var style = {
	backgroundColor: 'black'
	};
	var items = this.props.items;
	var list = items.map(function(x) {
	return <li>
	<IconText text={x[0]}
	image_url={x[1]}
	padding='5'
	/>
	</li>
	});
	return <ul style={style}>{list}</ul> ;
	}
	});


	/*
	React.render(<ColorText text="Yeah, it works!!!"/> ,
	document.getElementById('content'));




	React.render(<IconText text="Yeah, it works!!!"
	padding="5"
	image_url=green_bullet
	/> ,
	document.getElementById('content'));
	*/


	var items = [
	['Item 1', green_bullet],
	['Item 2', yellow_bullet],
	['Item 3', green_bullet],
	['Item 4', yellow_bullet]
	];
	React.render(<IconTextList items={items} /> ,
	document.getElementById('content'));

	</script>
	</body>
	</html>