JSFiddle - React, Tailwind, and code Playground

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

// 참고: 동적으로 생성되는 모델의 경우 보통은 `Array.prototype.map` 을 이용하여 배열 형태 모델을 기술하고, key를 배정하지만
// 글의 목적에 맞게 간단하게 쓰기 위하여 정적으로 기술합니다. 
var ShoppingCart = React.createClass({
    render () {
        return <div>
            <ShoppingItem name="kimchi" available={true} />
            <ShoppingItem name="rice" available={true} />
            <ShoppingItem name="curry" available={false} />
        </div>
    } 
});

// 참고: 기존 html 엘리먼트가 아닌 한, 컴포넌트들의 이름은 대문자로 쓰여져야 합니다.
var ShoppingItem = React.createClass({
    render () {
        return <div>
            <div>상품명: {this.props.name} / 구입가능: {this.props.available ? '가능' : '불가능'}</div> 
        </div>
    } 
});


React.render(<ShoppingCart />, document.body);