ブラウザは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

これはとして親しみないAに反応作る（数）のものの一つでありますいくつかの他のライブラリ。

しかし！：

A）あなたはIMOのそれははるかに容易になりますが）（リアクト使用するJSXを必要と
Bません覚えている）https://github.com/facebookincubator/create-react-appをチェックアウトするようにしてくださいそれはに関するすべての気にせずに始めるために素晴らしい方法ですビルドツールとそれ以外のもの。私はReactで始まったときにそれが存在したかったのです。

出典

2016-12-20 04:15:52 Chris

ブラウザーが理解できる通常のJavascriptにJSXを変換するには、トランスパイライザーが必要です。現在最も広く使われている蒸散器はバベルです。

https://babeljs.io/

あなたのワークフローの一部としてのWebPACKを使用している場合は、そのにバベルのtranspilationを組み込むことは移動するための方法です。

出典

2016-12-20 05:05:40 Rich

ブラウザはReactを使用してJSXを認識しません

答えて

関連する問題