javascript - 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="/[email protected]/dist/btib.min.js"></script>
<script src=".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?

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?

Share Improve this question asked May 12, 2017 at 7:12 anoop chandran 1,4905 gold badges25 silver badges43 bronze badges

Add a comment |

4 Answers 4

Sorted by: Reset to default 30

You need to use babel standalone script to transpile the code, and you need to include the script for react and react-dom. If you include these tags in your <head>, 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 works 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>

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>

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

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

React and ReactDOM which can be copied from official website on page "CDN Links" https://reactjs.org/docs/cdn-links.html
Babel Standalone converts ECMAScript 2015+ into compatible version of JavaScript for your browser, CDN usage is described in official documentation, check babel standalone section: https://babeljs.io/docs/en/next/babel-standalone.html

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>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - How to load es6, react, babel code in html with cdn? - Stack Overflow

4 Answers 4

与本文相关的文章

评论列表(0)