Simple JSX throws error in console

Question

React noob here, I am working on a simple JSX based component with the code below:

<!DOCTYPE html> <html> <head> <title>React Boot camp Day 1</title> </head> <body> <div id='app'></div> <!--Needed for react code--> <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script> <!--Needed for react dom traversal--> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <script src='https://unpkg.com/babel-standalone@6/babel.min.js'></script> <script> console.log('Test React', window.React) const name = "Callat" const handle = "@latimeks" // create components and use jsx function FirstComponent(props){ return <h1>{props.name}</h1> } function TestJSX(){ return (<FirstComponent name={name}/>) } ReactDOM.render(<TestJSX/>, document.getElementById('app')) </script> </body> </html>

Running this code yields no UI and in dev tools I see this

Uncaught SyntaxError: Unexpected token < index.html:42

Which is the

 function FirstComponent(props){ return <h1>{props.name}</h1> }

What is wrong here? According to everything I've seen online and in the bootcamp instructions my syntax is correct and this should work.

Can anyone give some insight?

How are you packaging and transpiling it? Sounds like you're just loading JSX directly into the browser. That's not how it works. — Dave Newton
– Dave Newton, Commented Apr 10, 2018 at 20:38
There isn't a packaging or transpiling step here. Do I need one even though I have the cdn? — Callat
– Callat, Commented Apr 10, 2018 at 20:41
Yes, this is completely unrelated to a CDN. Browsers cannot parse JSX in <script> tags. — JLRishe
– JLRishe, Commented Apr 10, 2018 at 20:44

Callat · Accepted Answer · 2018-04-10 20:53:07Z

I found an answer to this. Including the CDN was only part of the fix. The second part is to include the following: <script type="text/babel">//My react code</script>

Once that's done reloading the page works. I really should get more used to the native react ecosystem though.

Collectives™ on Stack Overflow

Simple JSX throws error in console

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related