New newsletter dynamic form in a route.

assets/js/src/newsletters/form.jsx

@@ -1,5 +1,5 @@
 define(
-  'newsletters_form',
+  'form',
   [
     'react',
     'jquery',
@@ -11,7 +11,7 @@ define(
     MailPoet
   ) {
 
-  var NewslettersForm = React.createClass({
+    var Form = React.createClass({
       getInitialState: function() {
         return {
           disabled: false
@@ -59,6 +59,8 @@ define(
 
       render: function() {
         return (
+          <div>
+            <h1>New</h1>
             <form className="newslettersForm" onSubmit={this.handleSubmit}>
               <input type="text" placeholder="Subject" ref="subject" />
               <br />
@@ -66,15 +68,10 @@ define(
               <br />
               <input type="submit" value="Save" disabled={this.state.locked} />
             </form>
+          </div>
         );
       }
     });
 
-  var element = jQuery('#newsletters_form');
-  if(element.length > 0) {
-    React.render(
-        <NewslettersForm />,
-        element[0]
-        );
-  }
+    return Form;
   });

assets/js/src/newsletters/newsletters.jsx

@@ -3,13 +3,11 @@ define(
   [
     'react',
     'react-router',
-    'mailpoet',
     'newsletters/form.jsx'
   ],
   function(
     React,
     Router,
-    MailPoet,
     Form
   ) {
 
@@ -28,7 +26,7 @@ define(
                   <Link to="listing">Newsletters</Link>
                 </li>
                 <li>
-                  <Link to="single">New</Link>
+                  <Link to="form">New</Link>
                 </li>
               </ul>
             </header>
@@ -49,20 +47,10 @@ define(
       }
     });
 
-    var Single = React.createClass({
-      render: function () {
-        return (
-          <div>
-            <h1>New</h1>
-          </div>
-        );
-      }
-    });
-
     var routes = (
       <Route name="app" path="/" handler={App}>
         <Route name="listing" handler={Listing}/>
-        <Route name="single" handler={Single}/>
+        <Route name="form" handler={Form}/>
         <DefaultRoute handler={Listing}/>
       </Route>
     );