Browser doesn't recognize JSX using React

Question

Browser doesn't recognize JSX using React

3.3k Views Asked by Jason Procka At 03 April 2025 at 18:20

I'm currently building a mini-search engine as I'm learning JavaScript and the basics of React. I built the functional engine using prompt() and then a for loop to find matches and then return different results based upon the attributes of certain states.

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);

Errors found:

index.js:21 Uncaught SyntaxError: Unexpected token <

I understand that I'm clearly writing something wrong. I just don't understand what :(

Original Q&A

There are 4 best solutions below

**Chris** · Answer 1

JSX isn't generally supported in-browser at the time of writing (there might be exceptions, none that I can think of off-hand).

Your best bet is to run your code through a transpiler like Babel.

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

Side 2c

This is one of the (few) things that makes React not as approachable as some other libraries.

But!:

a) remember you don't need JSX to use React (although imo makes it far easier) and
b) please do check out https://github.com/facebookincubator/create-react-app It's an awesome way to get started without worrying about all the build tools and whatnot. I wish it existed when I started with React.

**Rich** · Answer 2

You need a transpiler to convert your JSX to regular Javascript that browsers can understand. The most widely used transpiler right now is Babel.

https://babeljs.io/

If you're using Webpack as part of your workflow then incorporating Babel transpilation into that is the way to go.

**Joe** · Answer 3

You need a transpiler to convert your JSX to regular Javascript that browsers can understand.

The quickest way to try JSX in your project via the browser is to add this tag to your page:

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

Now you can use JSX in any tag by adding type="text/babel" attribute to it.

**Juliet OGE** · Answer 4

JSX is combination of HTML and JavaScript that React uses. So if any file contains JSX file, Babel transpiler converts the JSX into JavaScript objects which becomes a valid JavaScript. Thus, Browser can't recognize JSX because there is no inherent implementation for the browser engines to read and understand them.

Browser doesn't recognize JSX using React

There are 4 best solutions below

Related Questions in REACTJS

Related Questions in JSX

Trending Questions

Popular # Hahtags

Popular Questions