React modal component

app.js

var App = React.createClass({
    getInitialState: function() {
        return { isModalOpen: false };
    },

    openModal: function() {
        this.setState({ isModalOpen: true });
    },

    closeModal: function() {
        this.setState({ isModalOpen: false });
    },

    render: function() {
        return (
          <div className="app">
            <h1>App</h1>
            <button onClick={this.openModal}>Open modal</button>
            <Modal isOpen={this.state.isModalOpen}
                   transitionName="modal-anim">
              <h3>My Modal</h3>
              <div className="body">
                <p>This is the modal&apos;s body.</p>
              </div>
              <button onClick={this.closeModal}>Close modal</button>
            </Modal>
          </div>
        );
    }
});

enter.css

.modal-anim-enter {
    opacity: 0.00;
    transform: scale(0.7);
    transition: all 0.2s;
}

.modal-anim-enter.modal-anim-enter-active {
    opacity: 1;
    transform: scale(1);
}

imports.js

var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;

leave.css

.modal-anim-leave {
    opacity: 1;
    transform: scale(1);
    transition: all 0.2s;
}

.modal-anim-leave.modal-anim-leave-active {
    opacity: 0.00;
    transform: scale(0.7);
}

modal.js

var Modal = React.createClass({
    render: function() {
        if(this.props.isOpen){
            return (
              <ReactCSSTransitionGroup transitionName={this.props.transitionName}>
                <div className="modal">
                  {this.props.children}
                </div>
              </ReactCSSTransitionGroup>
            );
        } else {
            return <ReactCSSTransitionGroup transitionName={this.props.transitionName} />;
        }
    }
});

render.js

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