浏览器无法识别使用React的JSX

我正在构建迷你搜索引擎，因为我正在学习JavaScript和React的基础知识。我使用prompt（）构建了函数引擎，然后使用for循环来查找匹配，然后根据某些状态的属性返回不同的结果。浏览器无法识别使用React的JSX

的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和foundSearchSimple时使用'{}'？既然你尝试渲染它们，你应该使用'（）'，而不是当你声明它们时 –

我修正了。错误仍然存在。 –

你需要一个译员来编译代码 – Li357

JSX不是一般的浏览器，在写这篇文章时支持（有可能是例外，没有，我能想到离手的）。

你最好的办法是通过像巴贝尔一个transpiler来运行代码。

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

2C侧

这是的（少数）的东西，使发生反应，平易近人一还有其他一些图书馆。

但是！：

一）记得你不需要JSX使用作出反应（尽管IMO使得它更容易）和
二）请检查https://github.com/facebookincubator/create-react-app它得到，而不必担心一切都始于一个真棒方式构建工具和什么。我希望它在我开始使用React时存在。

来源

2016-12-20 04:15:52 Chris

您需要一个转译器将您的JSX转换为浏览器可以理解的常规Javascript。目前使用最广泛的译员是Babel。

https://babeljs.io/

如果您使用的WebPack为您的工作流程，然后结合通天transpilation成的部分是要走的路。

来源

2016-12-20 05:05:40 Rich

浏览器无法识别使用React的JSX

回答

相关问题