React Studio 101

Probando React sin JSX

by rulokc

HTML

<script src="http://fb.me/react-with-addons-0.10.0.js"></script>
<header>
    <h1 class="logo">LOGO</h1>
</header>
<section class="main">
    <h1 class="title">TITLE</h1>
    <div class="content">CONTENT</div>
</section>
<footer>
    FOOTER
</footer>

CSS

header {
    background-color: #eef;
}
header h1.logo {
    margin: 0;
}
.main {
    border: 1px solid #eef;
    padding: 10px;
}
footer {
    background-color: #eef;
    text-align: center;
}

JavaScript

var Hello = React.createClass({
    render: function() {
        return React.DOM.div({}, 'Hello ' + this.props.name + '!');
    }
});
 
React.renderComponent(Hello({name: 'World'}), document.querySelector('.main .content'));