Browser doesn't recognize JSX using React

Question

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 :(

So may I ask, why do you use '{ }' when you declare foundSearchComplex, and foundSearchSimple? Since you try to render them you should use ' ( ) ' instead when you declare them — Cagri Yardimci
– Cagri Yardimci, Commented Dec 19, 2016 at 23:21

Joe · Accepted Answer · 2020-12-01 12:14:01Z

1

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.

answered Dec 1, 2020 at 12:14

Joe

611 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

n0099 · Accepted Answer · 2024-06-10 09:39:40Z

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.

edited Jun 10, 2024 at 9:39

n0099

1,6431 gold badge13 silver badges21 bronze badges

answered Dec 20, 2016 at 4:15

Chris

58.9k34 gold badges158 silver badges198 bronze badges

Comments

Rich · Accepted Answer · 2016-12-20 05:05:40Z

0

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.

answered Dec 20, 2016 at 5:05

Rich

9421 gold badge10 silver badges20 bronze badges

Comments

Juliet OGE · Accepted Answer · 2023-03-25 14:51:58Z

0

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.

answered Mar 25, 2023 at 14:51

Juliet OGE

1

Collectives™ on Stack Overflow

Browser doesn't recognize JSX using React

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related