Как исправить неожиданный токен <в visual studio при добавлении кода JavaScript

Question

Я изменил код на этом сайте https://codepen.io/mgmarlow/pen/YwJGRe, чтобы иметь шесть столбцов вместо двух, когда я добавляю код в Visual Studio, я получаю синтаксическую ошибку.

Я пытался скопироватьи вставьте исходный код JavaScript из https://codepen.io/mgmarlow/pen/YwJGRe на этот сайт проверки JavaScript http://esprima.org/demo/validate.html и там также указано, что синтаксическая ошибка Неожиданный токен <</p>

Вероятно, это простая проблема, но я незнаком с 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>
    );
  }
}

Answer 1

Это JSX, который является синтаксисом шаблонов Javascript, который компилируется в необработанный Javascript.Он чаще всего используется в приложениях React как способ использования HTML-подобного синтаксиса внутри компонентов.

Вам либо нужно запустить инструмент связывания, такой как Webpack, для компиляции JSX в javascript, либо использовать необработанный синтаксис javascript,Пример:

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

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