Uncaught ReferenceError: *< the function is here>* is not defined in react, what Im I doing wrong here?
<p>I'm trying to make an ingredients list with an input bar.I just started to learn react so I'm really a noob. </p>

<p>The console says ListManager is not defined. I couldn't find any syntax error, but I could've just missed them for all I know.</p>

<p>ListManager.jsx   </p>

<pre><code>var React = require('react');
var List = require('./List.jsx');

var ListManager = React.createClass({
  getInitialState: function() {
      return {items:[], newItemText:''};

  },

  onChange: function(e) {
    this.setState({newItemText: e.target.value});
  },

  handleSubmit: function(e) {
      e.preventDefualt();

      var currentItems = this.state.items;

      currentItems.push(this.state.newItemText);

      this.setState({items: currentItems, newItemText: ''});

  },

  render: function () {
    return (
      &lt;div&gt;
        &lt;h3&gt;
          {this.props.title}
        &lt;/h3&gt;
        &lt;form onSubmit ={this.handleSubmit}&gt;
         &lt;input  onChange={this.onChange} value={this.state.newItemText} /&gt;
         &lt;button&gt;Add&lt;/button&gt;
        &lt;/form&gt;
        &lt;List items ={this.state.items} /&gt;

      &lt;/div&gt;
    );

  }
});

module.exports = ListManager;
</code></pre>

<p>List.jsx</p>

<pre><code>var React = require('react');
var ListItem = require('./ListItem.jsx');

var List = React.createClass({
    render: function() {

        var createItem = function(text, index)  {
            return &lt;ListItem key = {index + text} text = {text} /&gt;;
        };
      return (
        &lt;ul&gt;{this.props.items.map(createItem)}&lt;/ul&gt;);
    }
});

module.exports = List;
</code></pre>

<p>The console error states: </p>

<blockquote>
  <p>Uncaught ReferenceError: ListManager is not defined</p>
</blockquote>