Uncaught SyntaxError: Unexpected token

I am very much new to React. The following is my first script.

But I am getting the following error.

Uncaught SyntaxError: Unexpected token <

I have even searched through google/SO. But I couldn't get it to work.

<!DOCTYPE html>

<html>

<head>

    <title>First React App</title>

    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>

    <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>  

</head>

<body>

    <div id="app">



    </div>

    <script>

        const name = 'John doe'

        const handle = '@john_doe'



        function NameComponent (props){

            return <h1>{props.name}</h1>;//The problem is here using JSX syntax

        }



        function HandleComponent(props){

            return <h3>{props.handle}</h3>;

        }



        function App(){

            return (

                <div id="container">

                    <NameComponent name={name}/>

                    <HandleComponent handle={handle}/>

                </div>

            );

        }





        ReactDOM.render(<App />,document.getElementById('app'));

    </script>

</body>

</html>

edited Jan 1 at 10:14

asked Jan 1 at 10:12

Dushyant Joshi

3,18711637

2

You need to run the script through Babel to transpile the JSX to JS - browsers don't understand JSX even with the React libraries (because, well, JSX isn't JS, and browsers only understand JS)

– CertainPerformance
Jan 1 at 10:13

1

I don't know how you setup reactJs in your local PC but if you're starting from 0 then it'll gone be bad dream for you. so I encourage you to start with this link. github.com/facebook/create-react-app

– Dhaval
Jan 1 at 10:17

@CertainPerformance. thank you

– Dushyant Joshi
Jan 1 at 10:22

@Dhaval, sounds legit

– Dushyant Joshi
Jan 1 at 10:22

add a comment |

I am very much new to React. The following is my first script.

But I am getting the following error.

Uncaught SyntaxError: Unexpected token <

I have even searched through google/SO. But I couldn't get it to work.

<!DOCTYPE html>

<html>

<head>

    <title>First React App</title>

    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>

    <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>  

</head>

<body>

    <div id="app">



    </div>

    <script>

        const name = 'John doe'

        const handle = '@john_doe'



        function NameComponent (props){

            return <h1>{props.name}</h1>;//The problem is here using JSX syntax

        }



        function HandleComponent(props){

            return <h3>{props.handle}</h3>;

        }



        function App(){

            return (

                <div id="container">

                    <NameComponent name={name}/>

                    <HandleComponent handle={handle}/>

                </div>

            );

        }





        ReactDOM.render(<App />,document.getElementById('app'));

    </script>

</body>

</html>

edited Jan 1 at 10:14

asked Jan 1 at 10:12

Dushyant Joshi

3,18711637

2

You need to run the script through Babel to transpile the JSX to JS - browsers don't understand JSX even with the React libraries (because, well, JSX isn't JS, and browsers only understand JS)

– CertainPerformance
Jan 1 at 10:13

1

I don't know how you setup reactJs in your local PC but if you're starting from 0 then it'll gone be bad dream for you. so I encourage you to start with this link. github.com/facebook/create-react-app

– Dhaval
Jan 1 at 10:17

@CertainPerformance. thank you

– Dushyant Joshi
Jan 1 at 10:22

@Dhaval, sounds legit

– Dushyant Joshi
Jan 1 at 10:22

add a comment |

I am very much new to React. The following is my first script.

But I am getting the following error.

Uncaught SyntaxError: Unexpected token <

I have even searched through google/SO. But I couldn't get it to work.

<!DOCTYPE html>

<html>

<head>

    <title>First React App</title>

    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>

    <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>  

</head>

<body>

    <div id="app">



    </div>

    <script>

        const name = 'John doe'

        const handle = '@john_doe'



        function NameComponent (props){

            return <h1>{props.name}</h1>;//The problem is here using JSX syntax

        }



        function HandleComponent(props){

            return <h3>{props.handle}</h3>;

        }



        function App(){

            return (

                <div id="container">

                    <NameComponent name={name}/>

                    <HandleComponent handle={handle}/>

                </div>

            );

        }





        ReactDOM.render(<App />,document.getElementById('app'));

    </script>

</body>

</html>

edited Jan 1 at 10:14

asked Jan 1 at 10:12

Dushyant Joshi

3,18711637

I am very much new to React. The following is my first script.

But I am getting the following error.

Uncaught SyntaxError: Unexpected token <

I have even searched through google/SO. But I couldn't get it to work.

<!DOCTYPE html>

<html>

<head>

    <title>First React App</title>

    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>

    <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>  

</head>

<body>

    <div id="app">



    </div>

    <script>

        const name = 'John doe'

        const handle = '@john_doe'



        function NameComponent (props){

            return <h1>{props.name}</h1>;//The problem is here using JSX syntax

        }



        function HandleComponent(props){

            return <h3>{props.handle}</h3>;

        }



        function App(){

            return (

                <div id="container">

                    <NameComponent name={name}/>

                    <HandleComponent handle={handle}/>

                </div>

            );

        }





        ReactDOM.render(<App />,document.getElementById('app'));

    </script>

</body>

</html>

javascript reactjs

edited Jan 1 at 10:14

asked Jan 1 at 10:12

Dushyant Joshi

3,18711637

edited Jan 1 at 10:14

asked Jan 1 at 10:12

Dushyant Joshi

3,18711637

edited Jan 1 at 10:14

asked Jan 1 at 10:12

Dushyant Joshi

3,18711637

asked Jan 1 at 10:12

Dushyant Joshi

3,18711637

asked Jan 1 at 10:12

Dushyant Joshi

3,18711637

2

You need to run the script through Babel to transpile the JSX to JS - browsers don't understand JSX even with the React libraries (because, well, JSX isn't JS, and browsers only understand JS)

– CertainPerformance
Jan 1 at 10:13

1

I don't know how you setup reactJs in your local PC but if you're starting from 0 then it'll gone be bad dream for you. so I encourage you to start with this link. github.com/facebook/create-react-app

– Dhaval
Jan 1 at 10:17

@CertainPerformance. thank you

– Dushyant Joshi
Jan 1 at 10:22

@Dhaval, sounds legit

– Dushyant Joshi
Jan 1 at 10:22

add a comment |

2

You need to run the script through Babel to transpile the JSX to JS - browsers don't understand JSX even with the React libraries (because, well, JSX isn't JS, and browsers only understand JS)

– CertainPerformance
Jan 1 at 10:13

1

I don't know how you setup reactJs in your local PC but if you're starting from 0 then it'll gone be bad dream for you. so I encourage you to start with this link. github.com/facebook/create-react-app

– Dhaval
Jan 1 at 10:17

@CertainPerformance. thank you

– Dushyant Joshi
Jan 1 at 10:22

@Dhaval, sounds legit

– Dushyant Joshi
Jan 1 at 10:22

You need to run the script through Babel to transpile the JSX to JS - browsers don't understand JSX even with the React libraries (because, well, JSX isn't JS, and browsers only understand JS)

– CertainPerformance
Jan 1 at 10:13

I don't know how you setup reactJs in your local PC but if you're starting from 0 then it'll gone be bad dream for you. so I encourage you to start with this link. github.com/facebook/create-react-app

– Dhaval
Jan 1 at 10:17

@CertainPerformance. thank you

– Dushyant Joshi
Jan 1 at 10:22

@Dhaval, sounds legit

– Dushyant Joshi
Jan 1 at 10:22

add a comment |

2 Answers
2

active

oldest

votes

To make your code work as it is currently, you just need to add type="text/babel" to the script tag that contains the code that you intend to transpile using babel.

From the babel docs:

When loaded in a browser, @babel/standalone will automatically compile and execute all script tags with type text/babel or text/jsx

Working code with just this change

<html>

<head>

    <title>First React App</title>

    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>

    <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>  

</head>

<body>

    <div id="app">



    </div>

    <script type="text/babel">

        const name = 'John doe'

        const handle = '@john_doe'



        function NameComponent (props){

            return <h1>{props.name}</h1>;//The problem is here using JSX syntax

        }



        function HandleComponent(props){

            return <h3>{props.handle}</h3>;

        }



        function App(){

            return (

                <div id="container">

                    <NameComponent name={name}/>

                    <HandleComponent handle={handle}/>

                </div>

            );

        }





        ReactDOM.render(<App />,document.getElementById('app'));

    </script>

</body>

</html>

Though this works, using create-react-app or codesandbox is generally much simpler for beginners.

edited Jan 1 at 10:35

answered Jan 1 at 10:32

Maaz Syed Adeeb

2,49221425

Excellent. While other answers are also correct, this gave me the working script as I am very much newer. Thanks

– Dushyant Joshi
Jan 1 at 10:34

3

@DushyantJoshi - Do take note of the warning in the documentation: "Compiling in the browser has a fairly limited use case, so if you are working on a production site you should be precompiling your scripts server-side."

– T.J. Crowder
Jan 1 at 10:46

@T.J.Crowder, Thank you. That is correct.

– Dushyant Joshi
Jan 1 at 10:49

add a comment |

In order to have a bare minimum setup with react (with no compilation step), you need either to use React.createElement syntax instead of JSX tags (check https://reactjs.org/docs/add-react-to-a-website.html), or use something like htm

Personally I would just use Create React App to help with the initial setup. This will configure babel (among a lot of other things) for you and do the proper JSX transpilation. Although in the future it will be good for you to know exactly whats under the hood of create-react-app and maybe make your own setup.

answered Jan 1 at 10:16

Canastro

1,9012334

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53994629%2funcaught-syntaxerror-unexpected-token-with-react%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

To make your code work as it is currently, you just need to add type="text/babel" to the script tag that contains the code that you intend to transpile using babel.

From the babel docs:

When loaded in a browser, @babel/standalone will automatically compile and execute all script tags with type text/babel or text/jsx

Working code with just this change

<html>

<head>

    <title>First React App</title>

    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>

    <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>  

</head>

<body>

    <div id="app">



    </div>

    <script type="text/babel">

        const name = 'John doe'

        const handle = '@john_doe'



        function NameComponent (props){

            return <h1>{props.name}</h1>;//The problem is here using JSX syntax

        }



        function HandleComponent(props){

            return <h3>{props.handle}</h3>;

        }



        function App(){

            return (

                <div id="container">

                    <NameComponent name={name}/>

                    <HandleComponent handle={handle}/>

                </div>

            );

        }





        ReactDOM.render(<App />,document.getElementById('app'));

    </script>

</body>

</html>

Though this works, using create-react-app or codesandbox is generally much simpler for beginners.

edited Jan 1 at 10:35

answered Jan 1 at 10:32

Maaz Syed Adeeb

2,49221425

Excellent. While other answers are also correct, this gave me the working script as I am very much newer. Thanks

– Dushyant Joshi
Jan 1 at 10:34

3

@DushyantJoshi - Do take note of the warning in the documentation: "Compiling in the browser has a fairly limited use case, so if you are working on a production site you should be precompiling your scripts server-side."

– T.J. Crowder
Jan 1 at 10:46

@T.J.Crowder, Thank you. That is correct.

– Dushyant Joshi
Jan 1 at 10:49

add a comment |

To make your code work as it is currently, you just need to add type="text/babel" to the script tag that contains the code that you intend to transpile using babel.

From the babel docs:

When loaded in a browser, @babel/standalone will automatically compile and execute all script tags with type text/babel or text/jsx

Working code with just this change

<html>

<head>

    <title>First React App</title>

    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>

    <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>  

</head>

<body>

    <div id="app">



    </div>

    <script type="text/babel">

        const name = 'John doe'

        const handle = '@john_doe'



        function NameComponent (props){

            return <h1>{props.name}</h1>;//The problem is here using JSX syntax

        }



        function HandleComponent(props){

            return <h3>{props.handle}</h3>;

        }



        function App(){

            return (

                <div id="container">

                    <NameComponent name={name}/>

                    <HandleComponent handle={handle}/>

                </div>

            );

        }





        ReactDOM.render(<App />,document.getElementById('app'));

    </script>

</body>

</html>

Though this works, using create-react-app or codesandbox is generally much simpler for beginners.

edited Jan 1 at 10:35

answered Jan 1 at 10:32

Maaz Syed Adeeb

2,49221425

Excellent. While other answers are also correct, this gave me the working script as I am very much newer. Thanks

– Dushyant Joshi
Jan 1 at 10:34

3

@DushyantJoshi - Do take note of the warning in the documentation: "Compiling in the browser has a fairly limited use case, so if you are working on a production site you should be precompiling your scripts server-side."

– T.J. Crowder
Jan 1 at 10:46

@T.J.Crowder, Thank you. That is correct.

– Dushyant Joshi
Jan 1 at 10:49

add a comment |

To make your code work as it is currently, you just need to add type="text/babel" to the script tag that contains the code that you intend to transpile using babel.

From the babel docs:

When loaded in a browser, @babel/standalone will automatically compile and execute all script tags with type text/babel or text/jsx

Working code with just this change

<html>

<head>

    <title>First React App</title>

    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>

    <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>  

</head>

<body>

    <div id="app">



    </div>

    <script type="text/babel">

        const name = 'John doe'

        const handle = '@john_doe'



        function NameComponent (props){

            return <h1>{props.name}</h1>;//The problem is here using JSX syntax

        }



        function HandleComponent(props){

            return <h3>{props.handle}</h3>;

        }



        function App(){

            return (

                <div id="container">

                    <NameComponent name={name}/>

                    <HandleComponent handle={handle}/>

                </div>

            );

        }





        ReactDOM.render(<App />,document.getElementById('app'));

    </script>

</body>

</html>

Though this works, using create-react-app or codesandbox is generally much simpler for beginners.

edited Jan 1 at 10:35

answered Jan 1 at 10:32

Maaz Syed Adeeb

2,49221425

To make your code work as it is currently, you just need to add type="text/babel" to the script tag that contains the code that you intend to transpile using babel.

From the babel docs:

When loaded in a browser, @babel/standalone will automatically compile and execute all script tags with type text/babel or text/jsx

Working code with just this change

<html>

<head>

    <title>First React App</title>

    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>

    <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>  

</head>

<body>

    <div id="app">



    </div>

    <script type="text/babel">

        const name = 'John doe'

        const handle = '@john_doe'



        function NameComponent (props){

            return <h1>{props.name}</h1>;//The problem is here using JSX syntax

        }



        function HandleComponent(props){

            return <h3>{props.handle}</h3>;

        }



        function App(){

            return (

                <div id="container">

                    <NameComponent name={name}/>

                    <HandleComponent handle={handle}/>

                </div>

            );

        }





        ReactDOM.render(<App />,document.getElementById('app'));

    </script>

</body>

</html>

Though this works, using create-react-app or codesandbox is generally much simpler for beginners.

<html>

<head>

    <title>First React App</title>

    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>

    <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>  

</head>

<body>

    <div id="app">



    </div>

    <script type="text/babel">

        const name = 'John doe'

        const handle = '@john_doe'



        function NameComponent (props){

            return <h1>{props.name}</h1>;//The problem is here using JSX syntax

        }



        function HandleComponent(props){

            return <h3>{props.handle}</h3>;

        }



        function App(){

            return (

                <div id="container">

                    <NameComponent name={name}/>

                    <HandleComponent handle={handle}/>

                </div>

            );

        }





        ReactDOM.render(<App />,document.getElementById('app'));

    </script>

</body>

</html>

<html>

<head>

    <title>First React App</title>

    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>

    <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>  

</head>

<body>

    <div id="app">



    </div>

    <script type="text/babel">

        const name = 'John doe'

        const handle = '@john_doe'



        function NameComponent (props){

            return <h1>{props.name}</h1>;//The problem is here using JSX syntax

        }



        function HandleComponent(props){

            return <h3>{props.handle}</h3>;

        }



        function App(){

            return (

                <div id="container">

                    <NameComponent name={name}/>

                    <HandleComponent handle={handle}/>

                </div>

            );

        }





        ReactDOM.render(<App />,document.getElementById('app'));

    </script>

</body>

</html>

edited Jan 1 at 10:35

answered Jan 1 at 10:32

Maaz Syed Adeeb

2,49221425

edited Jan 1 at 10:35

answered Jan 1 at 10:32

Maaz Syed Adeeb

2,49221425

answered Jan 1 at 10:32

Maaz Syed Adeeb

2,49221425

answered Jan 1 at 10:32

Maaz Syed Adeeb

2,49221425

Excellent. While other answers are also correct, this gave me the working script as I am very much newer. Thanks

– Dushyant Joshi
Jan 1 at 10:34

3

@DushyantJoshi - Do take note of the warning in the documentation: "Compiling in the browser has a fairly limited use case, so if you are working on a production site you should be precompiling your scripts server-side."

– T.J. Crowder
Jan 1 at 10:46

@T.J.Crowder, Thank you. That is correct.

– Dushyant Joshi
Jan 1 at 10:49

add a comment |

Excellent. While other answers are also correct, this gave me the working script as I am very much newer. Thanks

– Dushyant Joshi
Jan 1 at 10:34

3

@DushyantJoshi - Do take note of the warning in the documentation: "Compiling in the browser has a fairly limited use case, so if you are working on a production site you should be precompiling your scripts server-side."

– T.J. Crowder
Jan 1 at 10:46

@T.J.Crowder, Thank you. That is correct.

– Dushyant Joshi
Jan 1 at 10:49

Excellent. While other answers are also correct, this gave me the working script as I am very much newer. Thanks

– Dushyant Joshi
Jan 1 at 10:34

@DushyantJoshi - Do take note of the warning in the documentation: "Compiling in the browser has a fairly limited use case, so if you are working on a production site you should be precompiling your scripts server-side."

– T.J. Crowder
Jan 1 at 10:46

@T.J.Crowder, Thank you. That is correct.

– Dushyant Joshi
Jan 1 at 10:49

add a comment |

answered Jan 1 at 10:16

Canastro

1,9012334

add a comment |

answered Jan 1 at 10:16

Canastro

1,9012334

add a comment |

answered Jan 1 at 10:16

Canastro

1,9012334

answered Jan 1 at 10:16

Canastro

1,9012334

answered Jan 1 at 10:16

Canastro

1,9012334

answered Jan 1 at 10:16

Canastro

1,9012334

answered Jan 1 at 10:16

Canastro

1,9012334

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

Search This Blog

Ufyukyu