How to load es6, react, babel code in html with cdn?

user_4531869 0
Viewed 27070

I have Codepen code that I'm trying to replicate on an web page using just three files, index.html, main.js, and style.css. I tried loading these scripts on the head tag of HTML file.

<script src="https://npmcdn.com/babel-transform-in-browser@6.4.6/dist/btib.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.min.js"></script>

However, it's not working. All I get is this error

Uncaught SyntaxError: Unexpected token <

what are necessary CDN script files to load this react-code to HTML?

babeljs reactjs javascript
4 Answers

Here's a simpler example for the minimalists in the room:

<!DOCTYPE html>
<html>
  <head>
    <meta charset='UTF-8'>
    <title>Minimal Static React</title>
    <script src='https://unpkg.com/react@16.3.1/umd/react.production.min.js'></script>
    <script src='https://unpkg.com/react-dom@16.3.1/umd/react-dom.production.min.js'></script>
    <script src='https://unpkg.com/babel-standalone@6.26.0/babel.js'></script>
  </head>
  <body>
    <div id='root'></div>

    <script type='text/babel'>
      class App extends React.Component {
        constructor(props) {
          super(props)
          this.state = {count: 1}
          this.increase = this.increase.bind(this)
          this.decrease = this.decrease.bind(this)
        }

        increase() {
          this.setState({'count': this.state.count+1})
        }

        decrease() {
          this.setState({'count': this.state.count-1})
        }

        render() {
          return (
            <div>
              <h1>Count: { this.state.count }</h1>
              <div onClick={this.increase}>+</div>
              <div onClick={this.decrease}>-</div>
            </div>
          )
        }
      }

      ReactDOM.render(<App />, document.querySelector('#root'));
    </script>
  </body>
</html>

user_17273920 
<head>
<title>Beginner's Guide to React</title>
<meta charset="UTF-8" />
</head>
<body>
<div id="root"></div>
<script src="https://unpkg.com/react@16.3.1/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16.3.1/umd/react-dom.production.min.js">       </script>
<script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>

<script type="text/babel">
    const rootElement = document.getElementById('root');

     const element = React.createElement('div',{className:''},'Hello World' );

     ReactDOM.render(element, rootElement);

</script>

user_42596590

You have to provide appropriate scripts to support React and ES6+, mentioned below:

Finally let's summarize mentioned above with simple .html example

<html>
<head>
    <!-- https://reactjs.org/docs/cdn-links.html -->
    <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>
    <!-- https://babeljs.io/docs/en/next/babel-standalone.html -->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
    <div id="react-container"></div>
    <script type="text/babel">
        const App = () => <div>Hello!</div>
        ReactDOM.render(
        <App />, document.getElementById('react-container'))
    </script>
</body>
</html>
user_65093210
Related