Question

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

的index.html：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Venos</title>
  <script src="https://unpkg.com/react@15/dist/react.js"></script>
  <script src="https://unpkg.com/react-dom@15/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 <

我明白我写错了。我只是不明白:(

Answer 1

在撰写本文时，浏览器通常不支持JSX（可能有例外情况，我无法想到这些例外情况）。

您最好的选择是通过像Babel这样的转发器运行您的代码。

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

Side 2c

这是使得React不像其他一些库那样平易近人的事情之一。

但是：

a）记住你不需要JSX来使用React（尽管imo让它更容易）和
b）请查看https://github.com/facebookincubator/create-react-app这是一个很棒的入门方式，而不用担心所有的构建工具和诸如此类的东西。我希望当我开始使用React时它就存在了。

Answer 2

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

https://babeljs.io/

如果您正在使用Webpack作为工作流程的一部分，那么将Babel转换结合到其中就可以了。

Answer 3

您需要一个编译器才能将JSX转换为浏览器可以理解的常规Javascript。

通过浏览器在项目中尝试JSX的最快方法是将此标签添加到您的页面：

<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

现在，您可以通过向其添加type="text/babel"属性在任何标签中使用JSX。

浏览器无法使用React识别JSX

3 个答案: