CODEWITHSUNDEEP
javascriptasp.netjsx
J.C
J.C

Reputation: 752

How to fix Unexpected token < in visual studio when adding JavaScript code

I have modified the code on this website https://codepen.io/mgmarlow/pen/YwJGRe to have six columns instead of two, when I add the code into Visual Studio I get a syntax error.

I have tried to copy and paste the original JavaScript code from https://codepen.io/mgmarlow/pen/YwJGRe to this JavaScript validation site http://esprima.org/demo/validate.html and it also says syntax error Unexpected token <

It is probably a simple problem, but I am not familiar with JavaScript. 

 render () {
return (
  <div className="container">
    <div id="block1" className="container">
      <Card body="Card 3"/>
      <Card body="Card 4"/>
    </div>
        <div id="block2" className="container">
      <Card body="Card 5"/>
      <Card body="Card 6"/>
    </div>            

    <div id="block3" className="container">
      <Card body="Card 1"/>
      <Card body="Card 2"/>
    </div>
    <div id="block4" className="container">
      <Card body="Card 7"/>
      <Card body="Card 8"/>
    </div>
        <div id="block5" className="container">
      <Card body="Card 9"/>
      <Card body="Card 10"/>
    </div>            

    <div id="block6" className="container">
      <Card body="Card 11"/>
      <Card body="Card 12"/>
    </div>
  </div>
    );
  }
}

Upvotes: 0

Views: 2074

Answers (1)

Soviut
Soviut

Reputation: 91585

This is JSX which is a Javascript templating syntax which compiles to raw Javascript. It is most commonly used in React applications as a way to use HTML-like syntax inside components.

You either need to be running a bundling tool like Webpack to compile the JSX to javascript, or use the raw javascript syntax. Example:

var rootElement =
  React.createElement('div', {}, 
    React.createElement('h1', {}, "Contacts")
  )

ReactDOM.render(rootElement, document.getElementById('react-app'))

Upvotes: 1

Related Questions