CODEWITHSUNDEEP
javascriptreactjs
Mandar
Mandar

Reputation: 29

Unable to use JSX in <script> tag

I am new to React.js.

Can someone please tell me why this is not working for me?

I created a basic html5 boilerplate and saved it as index.html. But when I open w/ browser, it says - Uncaught SyntaxError: Unexpected token <

    <!doctype html>
    <html lang="">
        <head>
            <meta charset="utf-8">
            <meta http-equiv="x-ua-compatible" content="ie=edge">
            <title>TITLE</title>
            <meta name="description" content="">
            <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

            <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
            <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.js"></script>
            <script>
                const Button = function () {
                    return (
                        <button>Go</button>
                    );
                };

                React.render((<Button/>), document.getElementById('example'));
            </script>
        </head>
        <body>
            <!--[if lte IE 9]>
                <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
            <![endif]-->

            <!-- Add your site or application content here -->
            <p>Hello world! This is HTML5 Boilerplate.</p>

            <div id="example"></div>

        </body>
    </html>

Upvotes: 0

Views: 1188

Answers (1)

John Baker
John Baker

Reputation: 2398

Getting back to your question, the problem that you are facing is that you are using wrong syntax, you are using JSX and in order to be able to actually use that you need babel to parse it.

To parse your code in the browser using Babel. Here its your code fixed with babel (also available on CodePen)

<html lang="">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title>TITLE</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <script src="https://unpkg.com/@babel/standalone/babel.js"></script>
        <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
        <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>

        <script type="text/babel">
            const Button = function () {
                return (
                    <button>Go</button>
                );
            };

            ReactDOM.render((<Button />), document.getElementById('example'));
        </script>
    </head>
    <body>
        <!--[if lte IE 9]>
            <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
        <![endif]-->

        <!-- Add your site or application content here -->
        <div id="example"></div>

    </body>
</html>

What I would recommend you to check the React Hello World Docs. It is a nice introduction to reactjs. The tutorial will give you plenty of information how to get started.

Upvotes: 2

Related Questions