如何用cdn加载html中的es6、react、babel代码?

新手上路,请多包涵

我有 Codepen 代码,我正尝试使用三个文件(index.html、main.js 和 style.css)在网页上复制这些代码。我尝试将这些脚本加载到 HTML 文件的 head 标签上。

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

但是,它不起作用。我得到的只是这个错误

Uncaught SyntaxError: Unexpected token <

将此反应代码加载到 HTML 需要哪些 CDN 脚本文件?

原文由 anoop chandran 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 585
2 个回答

您需要使用 babel standalone 脚本来反编译代码,并且您需要包含 react and react-dom 的脚本,使用这些它会起作用:

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

它使用 codepen 的原因: 检查设置/javascript,你会发现 babel 被选为 JavaScript Preprocessor ,codepen 自动包含脚本,但要在本地运行这些文件,你需要包含 standalone script

更新:

1-您需要在渲染反应代码的div之后定义脚本,否则会抛出错误。像这样:

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

2- 使用 ReactDOM.render 而不是 React.render

检查工作代码:

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

原文由 Mayank Shukla 发布,翻译遵循 CC BY-SA 3.0 许可协议

这是房间里的极简主义者的一个更简单的例子:

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

原文由 duhaime 发布,翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题