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

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/[email protected]/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?

Answers:

Answer

You need to use babel standalone script to transcompile the code, and you need to include the script for react and react-dom, use these it will work:

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

Reason why it is working with codepen: check the setting/javascript, there you will find the babel is selected as JavaScript Preprocessor, codepen is including the script automatically, but to run these files locally you need to include the standalone script.

Update:

1- You need to define the script after the div in which you are rendering the react code, otherwise it will throw the error. like this:

<body> 
   <div id="root"></div> 
   <script type="text/babel" src="pomodoro.js"></script>
</body>

2- Use ReactDOM.render instead of React.render.

Check the working code:

<html>

<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js'></script>
</head>
<body>
   <div id='root'></div>
   <script type='text/babel'>
       class SetTimer extends React.Component{    
  render(){
    return (   
      <div className="set-timer">work <br/> session         
          <div className="minus-add">
            <button className="setting-button" id="minus-timer" onClick={this.props.minus}>-</button>
            <button className="setting-button" id="add-timer" onClick={this.props.add}>+</button>
          </div>
      </div>
    );
  }
} 

class SetBreak extends React.Component{
  
  render(){
    return (   
      <div className="set-break"> break<br/> session 
          <div className="minus-add">
            <button className="setting-button" id="minus-break" onClick={this.props.minusbreak}>-</button>
            <button className="setting-button" id="add-break" onClick={this.props.addbreak}>+</button>
          </div>
      </div>
    );
  }
} 

const leftPad = (time)=>{
  return (time<10)? '0'+time :time
}
const TimerDisplay = (props) => (   
  <div className="timer-display"><span className="worklabel">Work session time</span><br/>
      {props.currentTime}
      <div className="breaktime"><span className="breaklabel">break session time</span><br/>{props.breakTime}</div>
    </div>
);
// let baseTime= 25;
class App extends React.Component {
  constructor(){
    super();
    this.state = {
      baseTime:25,
      breakTime:5,
      currentTime: moment.duration(25,'minutes'),
      timer:null,
      startbuttonvisible:true,
      pausebuttonvisible:false,
      resumebuttonvisible:false,
      stopbuttonvisible:false,
    }
    this.minus =this.minus.bind(this);
    this.add =this.add.bind(this);
    this.minusbreak =this.minusbreak.bind(this);
    this.addbreak =this.addbreak.bind(this);
    this.startTimer = this.startTimer.bind(this);
    this.pauseTimer = this.pauseTimer.bind(this);
    this.resumeTimer = this.resumeTimer.bind(this);
    this.stopTimer = this.stopTimer.bind(this);
    this.reduceTimer = this.reduceTimer.bind(this);
    
  }
  add(){
    this.setState({
      baseTime:this.state.baseTime+1
    });
  }
  minus(){
    this.setState({
      baseTime:this.state.baseTime-1
    });
  }
  addbreak(){
    this.setState({
      breakTime:this.state.breakTime+1
    });
  }
  minusbreak(){
    this.setState({
      breakTime:this.state.breakTime-1
    });
  }
  startTimer(){
    this.setState({
      timer: setInterval(this.reduceTimer, 1000), 
      startbuttonvisible:false,
      pausebuttonvisible:true,
      stopbuttonvisible:true,
    });    
  }
  pauseTimer(){
    clearInterval(this.state.timer);
    this.setState({      
      pausebuttonvisible:false,
      resumebuttonvisible:true,
    });    
  }
  resumeTimer(){
    this.setState({
      timer: setInterval(this.reduceTimer, 1000), 
      startbuttonvisible:false,
      pausebuttonvisible:true,
      stopbuttonvisible:true,
      resumebuttonvisible:false,
    }); 
  }
  stopTimer(){
    clearInterval(this.state.timer);
    this.setState({
      baseTime:25,
      timer: null, 
      startbuttonvisible:true,
      pausebuttonvisible:false,
      stopbuttonvisible:false,
      resumebuttonvisible:false,
    });  
  }
  reduceTimer(){ 
    if(this.state.baseTime === 0) return;
    const newTime = this.state.baseTime - 1;
    this.setState({
      baseTime: newTime,
    });
  }
  render() {
    
    return (
      <div className="container">
         <div className="timebox">
            <div className="header">
                    Pomodoro Clock
            </div>
            <TimerDisplay currentTime={this.state.baseTime} breakTime={this.state.breakTime}/>
            <div id="action-title">
                <small>SETTINGS</small>
            </div>
            <div className="actions">
              <SetTimer minus={this.minus} add={this.add}/>
              <SetBreak minusbreak={this.minusbreak} addbreak={this.addbreak}/>
            </div>
           <div className="timer-control">
            {this.state.startbuttonvisible ? <button id="start-timer" onClick={this.startTimer}>
                START
            </button> : null}
           {this.state.pausebuttonvisible ? <button id="pause-timer" onClick={this.pauseTimer}>
                PAUSE
            </button>: null}
           {this.state.resumebuttonvisible ? <button id="resume-timer" onClick={this.resumeTimer}>
                RESUME
            </button>: null}
           {this.state.stopbuttonvisible ? <button id="stop-timer" onClick={this.stopTimer}>
                STOP
            </button>: null}
           </div>
        </div>
      </div>
    );
  }
}

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

   </script>
</body>
</html>

Answer

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/[email protected]/umd/react.production.min.js'></script>
    <script src='https://unpkg.com/[email protected]/umd/react-dom.production.min.js'></script>
    <script src='https://unpkg.com/[email protected]/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>

Answer
<head>
<title>Beginner's Guide to React</title>
<meta charset="UTF-8" />
</head>
<body>
<div id="root"></div>
<script src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js">       </script>
<script src="https://unpkg.com/[email protected]/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>

Answer

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/[email protected]/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/[email protected]/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>

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.