CODEWITHSUNDEEP
reactjs
Callat
Callat

Reputation: 3044

Simple JSX throws error in console

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?

Upvotes: 0

Views: 204

Answers (1)

Callat
Callat

Reputation: 3044

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.

Upvotes: 1

Related Questions