Uncaught SyntaxError: embedded: Unexpected token var Comment = React.createClass({...});

Question

Hey great folks of Stack Overflow. I am learning REACTJS right now. And it's throwing this error: Uncaught SyntaxError: embedded: Unexpected token var Comment = React.createClass({...});

Here's my code: `

<body>

<div id="example">

</div>

<div id="container">

</div>
<script type="text/babel">

var Comment = React.createClass({...});

var Board = React.createClass({
  getinitialState: function(){
    return{
      comments: [
        "I like bacon.",
        "Want to get ice cream?",
        "Okay, we've got enough comments now."
      ]
    }
  },
  render: function() {
      return(
        <div className="board">
          {
            this.state.comments.map(function(text, i){
              return(<Comment key={i}>{text}</Comment>);
            })
          }

        </div>
    );
  } 

})
ReactDOM.render(<Board/>, document.getElementById("container"));



</script>








  <script src="https://npmcdn.com/[email protected]/dist/react.min.js"></script>
  <script src="https://npmcdn.com/[email protected]/dist/react-dom.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script> <!-- older transpiler 5.8.24 works with this app-->

</body>

`

I am not sure what's going on here. I'm trying to create a component via var Comment which should have an array which is "var Comment = React.createClass({..}); I don't know why it's not recognizing it as an array that would be used. I would definitely appreciate some help on this, good folks of StackOverflow.

Shubham Khatri · Accepted Answer · 2016-08-25 04:03:07Z

1

You are writing your React code in JSX which is not understood by the script tag. In order to run the React code either use the webpack or browserify to bundle your jsx into a .js file and then include that .js file in the script tag or in order to test your code use the JSFIDDLE to write your code . It has integration for JSX.

Sample webpack.config.js

var webpack = require('webpack');
var path = require('path');

var BUILD_DIR = path.resolve(__dirname, 'src');
var APP_DIR = path.resolve(__dirname, 'src');

var config = {
  entry: APP_DIR + '/index.jsx',
  output: {
    path: BUILD_DIR,
    filename: 'bundle.js'
  }
};

module.exports = config;

index.jsx

import React from 'react';
import ReactDOM from 'react-dom';
var Board = React.createClass({
  getinitialState: function(){
    return{
      comments: [
        "I like bacon.",
        "Want to get ice cream?",
        "Okay, we've got enough comments now."
      ]
    }
  },
  render: function() {
      return(
        <div className="board">
          {
            this.state.comments.map(function(text, i){
              return(<Comment key={i}>{text}</Comment>);
            })
          }

        </div>
    );
  } 

})
ReactDOM.render(<Board/>, document.getElementById("container"));

index.html

<body>

<div id="example">

</div>

<div id="container">

</div>
<script src="./src/bundle.js"></script>
</body>

You also need to have a package.json to provide all the dependencies.

Here is a good video tutorial series that can help you with all the configuration

answered Aug 25, 2016 at 4:03

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

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

4 Comments

Marcode777 Over a year ago

Hey Shubham Khatri, thank you so much for your very very detailed response. I can tell from it that you are an expert. I will look into this. Thanks so much again.

Marcode777 Over a year ago

Now when npm install and then type webpack, it's saying "-bash: webpack: command not found" Could this be permissions? When I type "whoami" though, the author is me, so I don't understand yet.

Shubham Khatri Over a year ago

use npm install -S webpack is the command to install webpack provided you have the package.json and npm install -g webpack to install webpack globally.

Marcode777 Over a year ago

Thanks, I figured that's what I missed before, and after doing that, it's working properly now. Thanks again Shubham and everyone else who was nice enough to respond! Thank you, good folks of StackOverflow.

vijayst · Accepted Answer · 2016-08-25 02:57:11Z

0

JSX syntax is not understood by the script tag. The JSX needs to be compiled to JavaScript. Try out your example in JSFiddle. JSFiddle has integration scripts to work with React.

<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js">
</script>

answered Aug 25, 2016 at 2:57

vijayst

22.1k18 gold badges73 silver badges113 bronze badges

1 Comment

Marcode777 Over a year ago

Hi Vijay, thanks for answering my question. However, I already have the babel cloudflare script at the bottom. This is what you're talking about, is it not?

Nahush Farkande · Accepted Answer · 2016-08-25 04:55:13Z

0

You can try moving your JSX code to a new .jsx file and referencing that file in your .html

answered Aug 25, 2016 at 4:55

Nahush Farkande

5,6863 gold badges27 silver badges36 bronze badges

1 Comment

Marcode777 Over a year ago

Thank you, Nahush Farkande.

Amaya Zhou · Accepted Answer · 2017-12-29 22:06:19Z

0

I met the same problem with you, seems we were watching the same tutorial video :)

Anyway, getinitialState should be getInitialState. Watch out the 4th letter.

answered Dec 29, 2017 at 22:06

Amaya Zhou

1

Comments

Ajay Kumar · Accepted Answer · 2018-02-06 16:23:58Z

Do the one change in your snippet codes which it is given in above section. Correct minor spelling mistake here.

getinitialState() should be getInitialState().

ES5 use getInitialState() to initialize the state variables i.e React.createClass(..).

ES6 use constructor() to initialized the state variables i.e class Comment extends React.Component(..)

Here is another example of ES6, please check out this.

    <!DOCTYPE html>
    <html>

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <title></title>
    </head>

    <body>
        <div id="content"></div>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.js"></script>
        <script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js'></script>


        <script type="text/babel">

            class CommentBox extends React.Component{
            constructor(props){
                super(props);
                this.state = {
                editable : false,
                commentMsg : ">>"
                };
            }

            save(event){
                this.setState({commentMsg:event.target.value})
            }
            remove(){
                this.setState({
                    editable:false
                })
            }
            edit(){
                this.setState({
                    editable:true
                })
            }
            renderForm(){
                return (
                <div className="row">
                    <div>{this.props.children}</div>
                    <div><textArea name="commentBox" onChange={this.save.bind(this)}></textArea></div>
                    <button type="button" className="btn btn-danger">Save</button>
                    <button type="button" className="btn btn-success" onClick={this.remove.bind(this)}>Remove</button>
                    {this.state.commentMsg}
                </div>
                );
            }
            renderHtml(){  
                return (
                    <div className="row">
                    <div>{this.props.children}</div>    
                    <div>{this.state.commentMsg}</div>
                    <button type="button" className="btn btn-danger" onClick={this.edit.bind(this)}>Edit</button>
                    <button type="button" className="btn btn-success" onClick={this.remove.bind(this)}>Remove</button>
                    </div>
                );
            }

            render() {
                if(this.state.editable){
                    return this.renderForm(this);
                }else{
                    return this.renderHtml(this);
                }
            }
            }

        class Board extends React.Component{
            constructor(props){
                super(props);
                this.state ={
                    comments:[
                        'Techical Comments',
                        'Wordpress Comments',
                        'Facebook Comments'
                    ]
                }
            }

            render(){
                return(
                    <div className="container-fluid">{
                    this.state.comments.map(function(text,i){
                        return (
                            <CommentBox key={i}>{text}</CommentBox> 
                        );
                    })
                    }
                    </div>
                );
            }
        } 
        ReactDOM.render(
            <Board />
            , document.getElementById('content'))
        </script>
    </body>

    </html>

Collectives™ on Stack Overflow

Uncaught SyntaxError: embedded: Unexpected token var Comment = React.createClass({...});

5 Answers 5

4 Comments

1 Comment

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

4 Comments

1 Comment

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related