瀏覽器無法識別使用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

回答

相關問題