React Hello World (JSX)

Starting point for creating JSFiddles with React. This uses React with Addons.

by justindeal

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.12.2/JSXTransformer.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.12.2/react-with-addons.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration.js"></script>

JavaScript 1.7

// Function from the outside world that takes a parameter.
var sayHello = function (name) {
    alert('Hello, ' + name + '!');
};

// Silly little component.
var Greeter = React.createClass({
    // Intercept click so we can say hello to Joe.
    onHelloJoe: function () {
        // Passing an extra arg to callback passed in on props.
        // JSX attribute onGreet passed in is available as this.props.onGreet.
        this.props.onGreet('Joe');
    },
    
    // Intercept click so we can say hello to Mary.
    onHelloMary: function () {
        // Passing an extra arg to callback passed in on props.
        // JSX attribute onGreet passed in is available as this.props.onGreet.
        this.props.onGreet('Mary');
    },
    
    render: function () {
        // Wire onClick to methods of this component.
        return (
            <div>
                <button onClick={this.onHelloJoe}>Say Hello to Joe</button>
                <button onClick={this.onHelloMary}>Say Hello to Mary</button>
            </div>
        );
    }
});

React.render(
    // Pass in our function from the outside world as a prop.
    <Greeter onGreet={sayHello}/>,
    document.body
);