Reactjs with JSX: Unexpected token '<'

Question

I am a beginner in react. When I render elements with createElement, it works fine. But rendering like below with JSX, it throws and error saying Uncaught SyntaxError: Unexpected token <

const { createElement } = React;
const { render } = ReactDOM; 

const style = {
    fontFamily: 'Arial',
    color: 'White',
    backgroundColor: 'Red',
    padding: '10px',
    border: '10px solid black'
}

render(
    <h1 id="emp-title" className="header" style={style}>Full time Employee</h1>,
    document.getElementById('react-container-jsx')
);

<html>
    <head>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
        <title>React 101</title>
    </head>
    <body>
        <div id="react-container-jsx"></div>
        <script src="index.js"></script>
    </body>
</html>

Attempts: tried but did not work

<script src="index.js" type = "text/babel"></script>

Also

<script src="index.js" type = "text/jsx"></script>

Didn't work. Any help is much appreciated.

Kiran Dash · Accepted Answer · 2019-03-09 16:37:02Z

2

You will need to link babel-standalone as well

And add type="text/babel" to the script tag.

Working snippet:

const { createElement } = React;
const { render } = ReactDOM; 

const style = {
    fontFamily: 'Arial',
    color: 'White',
    backgroundColor: 'Red',
    padding: '10px',
    border: '10px solid black'
}

render(
    <h1 id="emp-title" className="header" style={style}>Full time Employee</h1>,
    document.getElementById('react-container-jsx')
);

<html>
    <head>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
        <script src="https://unpkg.com/[email protected]/babel.min.js"></script>
        <title>React 101</title>
    </head>
    <body>
        <div id="react-container-jsx"></div>
        <script src="index.js" type="text/babel"></script>
    </body>
</html>

edited Mar 9, 2019 at 16:37

Kiran Dash

4,99613 gold badges59 silver badges95 bronze badges

answered Mar 9, 2019 at 16:26

Prithwee Das

5,3162 gold badges18 silver badges28 bronze badges

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

4 Comments

Kiran Dash Over a year ago

Thanks for the answer. Tried Just now. But still does not work. Can you share a working snippet.

Prithwee Das Over a year ago

gist.github.com/kentcdodds/5274dfa1eb31e6d22b9eddd1efc773dc check out this gist

Kiran Dash Over a year ago

Thanks for the link. Along with the babel js, I also had to add the type="text/babel" in order to make it work.

Prithwee Das Over a year ago

Yeah type="text/babel" is needed, I thought you already know that as you mentioned it in your question.

Collectives™ on Stack Overflow

Reactjs with JSX: Unexpected token '<'

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related