title: React: Uncaught ReferenceError: require is not defined
body: <p>I'm going through the React Tutorial (<a href="http://facebook.github.io/react/docs/animation.html" rel="noreferrer">http://facebook.github.io/react/docs/animation.html</a>) and I can't get the animation part to work. When I try to open my code (below) in a browser, it gives me the error "Uncaught ReferenceError: require is not defined". require is only used in the first line of the JS code.
  I only have 1 html file called react.html in which I've been doing everything. Here's my code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;meta charset="UTF-8" /&gt;
      &lt;title&gt;Hello React&lt;/title&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div id="example"&gt;&lt;/div&gt;
      &lt;script type="text/babel"&gt;
  
        var ReactCSSTransitionGroup = require('react-addons-css-transition-group');
  
        var TodoList = React.createClass({
          getInitialState: function() {
            return {items: ['hello', 'world', 'click', 'me']};
          },
          handleAdd: function() {
            var newItems =
              this.state.items.concat([prompt('Enter some text')]);
            this.setState({items: newItems});
          },
          handleRemove: function(i) {
            var newItems = this.state.items.slice();
            newItems.splice(i, 1);
            this.setState({items: newItems});
          },
          render: function() {
            var items = this.state.items.map(function(item, i) {
              return (
                &lt;div key={item} onClick={this.handleRemove.bind(this, i)}&gt;
                  {item}
                &lt;/div&gt;
              );
            }.bind(this));
            return (
              &lt;div&gt;
                &lt;button onClick={this.handleAdd}&gt;Add Item&lt;/button&gt;
                &lt;ReactCSSTransitionGroup transitionName="example" transitionEnterTimeout={500} transitionLeaveTimeout={300}&gt;
                  {items}
                &lt;/ReactCSSTransitionGroup&gt;
              &lt;/div&gt;
            );
          }
        });
  
        ReactDOM.render(
          &lt;TodoList /&gt;,
          document.getElementById('example')
        );
  
      &lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>