Reactjs require not defined

Question

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>

You have browserify installed ? github.com/substack/node-browserify — ashishmohite
– ashishmohite, Commented Nov 24, 2015 at 17:32
Did you start with this example or the basic getting started? Has it worked before? — OneCricketeer
– OneCricketeer, Commented Nov 24, 2015 at 17:33

Jonny Buchanan · Accepted Answer · 2015-11-24 18:24:38Z

2

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

var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;

answered Nov 24, 2015 at 18:24

Jonny Buchanan

62.9k17 gold badges147 silver badges150 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Dean Christian Armada Over a year ago

Good answer. Solved my problem by addingyour code and this two external scripts:

Collectives™ on Stack Overflow

Reactjs require not defined

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related