How to use React.js in an html development webpage?

Question

I'm trying to get this code to work but it just won't display anything onto my google chrome page. It's saved as a .html file on my computer.

<DOCTYPE! html>
<html>
    <head>
        <script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
        <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
    </head>
    <body>
        <div id="container"></div>
        <script type='text/jsx'>
        ReactDOM.render(
            <h1>Hello World!</h1>,
            document.getElementById('container')
        );
        </script>
    </body>
</html>

check this answer stackoverflow.com/questions/38194585/… for creating a standalone app — Shubham Khatri
– Shubham Khatri, Commented Dec 27, 2017 at 5:48
A webpage is not going to understand JSX without it being transpiled with babel. You will have to use the createElement syntax or use a tool to compile your JSX into native js. — Matt Greenberg
– Matt Greenberg, Commented Dec 27, 2017 at 5:49

rajeev · Accepted Answer · 2017-12-27 06:21:21Z

0

    <!DOCTYPE html>
<html>
    <head>
      <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
      <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
      <script src="https://unpkg.com/[email protected]/babel.min.js"></script>
    </head>
    <body>
        <div id="container"></div>
        <script type='text/babel'>
        ReactDOM.render(<h1>Hello World!</h1>, document.getElementById('container'));
</script>
    </body>
</html>

answered Dec 27, 2017 at 6:21

rajeev

645 bronze badges

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

Collectives™ on Stack Overflow

How to use React.js in an html development webpage?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related