Menu
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 :(
797
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.
91
answered Sep 13 '25 12:09
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!:
35
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
