Браузер не распознает JSX, используя React

В настоящее время я строил мини-поисковую машину, изучая JavaScript и основы React. Я построил функциональный движок, используя prompt(), а затем цикл for, чтобы найти совпадения, а затем возвращать разные результаты на основе атрибутов определенных состояний.Браузер не распознает JSX, используя React

index.html:

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>Venos</title> 
    <script src="https://unpkg.com/[email protected]/dist/react.js"></script> 
    <script src="https://unpkg.com/[email protected]/dist/react-dom.js"></script> 
    <script src="index.js"></script> 
</head> 
<body> 
    <div id="app"> 
    <div id="react-app"> 

    </div> 
    </div> 
</body> 
</html>

index.js:

var searchInput = prompt('Search: '); 

var states = { 
    'North Dakota': {capital: {name: 'Bismarck', namedAfter: 'Ferdinand Bismarck'}, region: 'Mid-west'}, 
    Minnesota: {capital: 'Saint paul', region: 'Mid-west'}, 
    Montana: {capital: 'Helena', region: 'Mid-west'}, 
    Wisconsin: {capital: 'Madison', region: 'Mid-west'} 
}; 

var searchCapitals = function(givenWord){ 
    for (var key in states) { 
    if (givenWord.toLowerCase() === key.toLowerCase()) { 
     var found = true 
     var foundKey = key 
     break; 
    } 
    } 
    if (found == true){ 
    if (states[foundKey].capital.name){ 
     var foundSearchComplex = (
     <div> 
     // html built from {'Search found: ' + foundKey + ' (capital: ' + states[foundKey].capital.name + ' (named after ' + states[foundKey].capital.namedAfter + '), region: ' + states[foundKey].region + ')'} 
      <h4>Search Found</h4> 
      <ul> 
      <li>Capital: {states[foundKey].capital.name}</li> 
      <li>Capital named after: {states[foundKey].capital.namedAfter}</li> 
      <li>Region: {states[foundKey].region}</li> 
      </ul> 
     </div> 
    ) 
     ReactDOM.render(foundSearchComplex, document.getElementById('react-app')); 
    } else 
     var foundSearchSimple = (
     // html built from {'Search found: ' + foundKey + ' (capital: ' + states[foundKey].capital.name + , region: ' + states[foundKey].region + ')'} 
     <div> 
      <h4>Search Found</h4> 
      <ul> 
      <li>Capital: {states[foundKey].capital.name}</li> 
      <li>Region: {states[foundKey].region}</li> 
      </ul> 
     </div> 
     }; 
     ReactDOM.render(foundSearchSimple, document.getElementById('react-app')); 
    } else { 
    console.log('No results found.') 
    } 
) 

searchCapitals(searchInput);

Ошибки найдено:

index.js:21 Uncaught SyntaxError: Unexpected token <

Я понимаю, что я четко писать что-то неправильно. Я просто не понимаю, что :(

источник

2016-12-19 Jason Procka

Могу ли я спросить, почему вы используете '{}', когда вы объявляете foundSearchComplex и нашлиSearchSimple? Поскольку вы пытаетесь сделать их, вы должны использовать '()' вместо этого, когда объявляете их –

Я исправил. Ошибка по-прежнему сохраняется. –

Вам нужен транспилер для перевода кода – Li357

JSX не поддерживается, как правило, в браузере на момент написания (там могут быть исключения, ни, что я могу вспомнить с рук).

Ваш лучший ставка запустить свой код через transpiler как Бабель.

https://facebook.github.io/react/docs/installation.html#enabling-es6-and-jsx

Side 2с

Это один из (немногих) вещей, которые делают Реагировать не как Approachable а, некоторые другие библиотеки.

Но!:

а) помните, что вам не нужно JSX использовать React (хотя имо делает его гораздо проще) и
б), пожалуйста, проверьте https://github.com/facebookincubator/create-react-app Это удивительный способ, чтобы начать работу, не заботясь о всех инструменты сборки и многое другое. Хотелось бы, чтобы он существовал, когда я начал с React.

источник

2016-12-20 04:15:52 Chris

Вам нужен транспилер для преобразования вашего JSX в обычный Javascript, который могут понять браузеры. Самым распространенным транспилером сейчас является Вавилон.

https://babeljs.io/

Если вы используете Webpack как часть рабочего процесса, то включающего Babel transpilation в том, что это путь.

источник

2016-12-20 05:05:40 Rich

Браузер не распознает JSX, используя React

ответ

Смежные вопросы