Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by benyoungblood
benyoungblood
10,062 Points

Why is this giving me an error in the console for my React code?

The error is referring to line 6 which is <header>

Here is the error that I am getting in the console:

Uncaught SyntaxError: Unexpected token <

Here is my React code:

const desc = 'I just learned how to create a React node and render it into the DOM.';
const myTitleID = 'main-title';
const name = 'Ben';

const header = (
  <header>
    {/* This is a comment in JSX */}
    <h1 id={myTitleID}>{name}'s First React Element</h1>
    <p className='main-desc'>{desc}</p>
  </header>
);

ReactDOM.render(
  header,
  document.getElementById('root')
);

1 Answer

turaboy holmirzaev
turaboy holmirzaev
19,198 Points

it means the browser does not understand jsx. Just add reference to babel in your html just add these two at the bottom of your index.html <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> <script type="text/babel" src="./app.js"></script>

benyoungblood
benyoungblood
10,062 Points

Thank you!