andreypopp / react-quickstart

[DEPRECATED] React project template with server-side UI rendering and routing
371 stars 47 forks source link

How to use react-forms with react-quickstart? #22

Open DinoJay opened 9 years ago

DinoJay commented 9 years ago

Hey People,

I try to incorporate the getting started example from react-forms into this project structure But then I get this syntax error.

node_modules/react-forms/lib/index.js:30 FormMixin, FormContextMixin, FormElementMixin, ^ SyntaxError: Unexpected token , at Module._compile (module.js:439:25) at Object.require.extensions.(anonymous function) as .js at Module.load (module.js:356:32) at Function.Module._load (module.js:312:12) at Module.require (module.js:364:17) at require (module.js:380:17) at Object. (/home/djan/dev/react-quickstart/pages/main.js:8:18) at Module._compile (module.js:456:26) at Object.require.extensions.(anonymous function) as .js at Module.load (module.js:356:32) Program node server.js exited with code 8

Starting child process with 'node server.js'

Here my code:


  var React       = require('react');                                      
var Schema = ReactForms.schema.Schema;                                   
var Property = ReactForms.schema.Property;                               
var Form = ReactForms.Form;   

  var schema = (                                                           
    <Schema>                                                               
    . <Property name="firstName" />                                        
    . <Property name="lastName" />                                         
    . <Property name="age" type="number" />                                
    </Schema>                                                              
  );                                                                       

  var MainPage = React.createClass({                                       

    render: function() {                                                       
    . return (                                                             
    . . <div className="container">                                        
    . . . <div className="col-md-9 home">                                      
. . . . <div className="navbar navbar-default">                        
    . . . . . <div className="navbar-header">                              
    . . . . . . <a href="/" className="navbar-brand"></a>                  
    . . . . . </div>                                                       
    . . . . </div>                                                         
    . . . . <h1>Hello, anonymous!</h1>                                     
    . . . . . <ul className="nav nav-pills">                               
    . . . . . . <li className="active"><a href="/">Home</a></li>           
    . . . . . . <li><a href="/tasks">Todo List</a></li>                    
    . . . . . . <li><a href="/register">Register</a></li>                  
    . . . . . </ul>                                                        
    . . . . . <Form schema={schema} />                                     
    . . . </div>                                                           
    . . </div>                                                             
    . );    

To be complete, here is also my package.json.

{                                                                          
  name: react-quickstart,                                                  
  version: 0.0.0,                                                          
  description: React project,                                              
  main: ./server.js,                                                       
  browser: ./client.js,                                                    
  browserify: {                                                            
  . transform: [                                                           
  . . [reactify, {harmony: true}]                                          
  . ]                                                                      
  },                                                                       
  dependencies: {                                                          
  . react: 0.11.0,                                                         
  . react-forms:0.6.3,                                                     
  . react-async: 1.0.2,                                                    
  . react-router-component: 0.22.0,                                        
  . react-bootstrap:0.12.0,                                                
  . node-jsx: ~0.10.0,                                                     
  . express: ~4.9.0,                                                       
  . body-parser:1.9.1,                                                     
  . less-middleware: 1.0.4,                                                  
 . errorhandler: 1.1.1,                                                   
  . connect-flash:0.1.1,                                                   
  . passport:0.2.1,                                                        
  . superagent: ~0.18.0,                                                   
  . fibers: ~1.0.1                                                         
  },                         
devDependencies: {                                                       
  . reactify: ~0.13.1,                                                     
  . envify: ~1.2.0,                                                          
  . browserify: ~3.44.2,                                                   
  . connect-browserify: ~2.0.1,                                            
  . uglify-js: ~2.4.13,                                                    
  . supervisor: ~0.6.0                                                     
  },                                                                       
  scripts: {                                                               
  . test: echo \"Error: no test specified\" && exit 1,                     
  . start: supervisor -i node_modules -e js,jsx server.js,                 
  . build: NODE_ENV=production browserify ./ | uglifyjs -cm 2>/dev/null    > ./assets/bundle.js,                                                      
  . start-prod: NODE_ENV=production node server.js,                        
  . clean: rm -f ./assets/bundle.js                                        
  },                                                                       
  author: "",                                                              
  license: MIT                                                             
}

Can you help me? I do not see what's wrong.

Best regards Jan