5

I'm going through the React Tutorial (http://facebook.github.io/react/docs/animation.html) 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:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">

      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 (
              <div key={item} onClick={this.handleRemove.bind(this, i)}>
                {item}
              </div>
            );
          }.bind(this));
          return (
            <div>
              <button onClick={this.handleAdd}>Add Item</button>
              <ReactCSSTransitionGroup transitionName="example" transitionEnterTimeout={500} transitionLeaveTimeout={300}>
                {items}
              </ReactCSSTransitionGroup>
            </div>
          );
        }
      });

      ReactDOM.render(
        <TodoList />,
        document.getElementById('example')
      );

    </script>
  </body>
</html>
Filip Bujaroski
  • 201
  • 3
  • 4
  • 2
    http://stackoverflow.com/questions/35844607/require-reactjs-modules-without-browserify-webpack-or-babel/35845153 - From my understanding you'd either use React and React DOM or could potentially use something like Webpack. Since it seems like you're using neither it doesn't know how to call require(). – Dresden May 20 '16 at 23:33
  • Hi, The program doesn't work when I add this to the top of the file either (with fb.me in front of them, but StackOverflow doesn't let me post that): Which should be the React and React DOM that you're referring to. Any ideas? – Filip Bujaroski May 23 '16 at 18:18
  • hey, found answer here: http://stackoverflow.com/questions/33900132/reactjs-require-not-defined – BigName May 29 '16 at 19:25

0 Answers0