CODEWITHSUNDEEP
reactjs
Dean Christian Armada
Dean Christian Armada

Reputation: 7384

Reactjs require not defined

I admit that I am a newbie in ReactJS but I am encountering a very weird issue. I am doing the first part of animations tutorial of react here https://facebook.github.io/react/docs/animation.html and I am always having a "Uncaught ReferenceError: require is not defined". Please help below is my whole code:

<html>
  <head>
    <meta charset="utf-8" />
    <title>Django React Personal Project</title>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.2/react.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.2/react-dom.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.2/marked.min.js"></script>
  </head>
  <body>
    <div id="content"></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;
    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('content')
);
</script>
</body>
</html>

Upvotes: 2

Views: 3727

Answers (1)

Jonny Buchanan
Jonny Buchanan

Reputation: 62813

Use the react-with-addons bundle if you want to use the addons via <script> tags.

var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;

Upvotes: 2

Related Questions