Javascript 如何用cdn加载html中的es6、react、babel代码？_Javascript_Reactjs_Babeljs

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

javascript reactjs

Javascript 如何用cdn加载html中的es6、react、babel代码？,javascript,reactjs,babeljs,Javascript,Reactjs,Babeljs,我有一些代码，我正试图用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.

我有一些代码，我正试图用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 <

未捕获的语法错误：意外标记<

将此react代码加载到HTML需要哪些CDN脚本文件？

您需要使用

babel standalone

脚本来转换代码，并且需要包含

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

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

检查工作代码：


类SetTimer扩展了React.Component{
render（）{
报税表（
工作会话
-
+
);
}
} 
类SetBreak扩展了React.Component{
render（）{
报税表（
中断
会话
-
+
);
}
} 
常量leftPad=（时间）=>{
返回（时间（
工作会话时间

{props.currentTime}
中断会话时间
{props.breakTime}
);
//让baseTime=25；
类应用程序扩展了React.Component{
构造函数（）{
超级（）；
此.state={
基准时间：25，
休息时间：5点，
当前时间：时刻持续时间（25，'minutes'），
计时器：空，
startbuttonvisible:为真，
pausebuttonvisible:false，
resumebuttonvisible:false，
stopbuttonvisible:false，
}
this.减号=this.减号.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）；
}
添加（）{
这是我的国家({
baseTime:this.state.baseTime+1
});
}
减（）{
这是我的国家({
baseTime:this.state.baseTime-1
});
}
addbreak（）{
这是我的国家({
休息时间：此.state.breakTime+1
});
}
minusbreak（）{
这是我的国家({
休息时间：this.state.breakTime-1
});
}
startTimer（）{
这是我的国家({
计时器：设置间隔（此.reduceTimer，1000），
startbuttonvisible:false，
pausebuttonvisible:true，
stopbuttonvisible：正确，
});    
}
pauseTimer（）{
clearInterval（this.state.timer）；
这个.setState（{
pausebuttonvisible:false，
简历按钮可视：是的，
});    
}
resumeTimer（）{
这是我的国家({
计时器：设置间隔（此.reduceTimer，1000），
startbuttonvisible:false，
pausebuttonvisible:true，
stopbuttonvisible：正确，
resumebuttonvisible:false，
}); 
}
停止计时器（）{
clearInterval（this.state.timer）；
这是我的国家({
基准时间：25，
计时器：空，
startbuttonvisible:为真，
pausebuttonvisible:false，
stopbuttonvisible:false，
resumebuttonvisible:false，
});  
}
还原体（）{
如果（this.state.baseTime==0）返回；
const newTime=this.state.baseTime-1；
这是我的国家({
基准时间：新时间，
});
}
render（）{
返回(
波莫多罗钟
设置
{this.state.startbuttonvisible？
开始
：null}
{this.state.pausebuttonvisible？
暂停
：null}
{this.state.ResumeButtonInvisible？
简历
：null}
{this.state.stopbuttonvisible？
停止
：null}
);
}
}
ReactDOM.render(
,
document.getElementById（'root'））
);

初学者反应指南
const rootElement=document.getElementById（'root'）；
const element=React.createElement（'div'，{className:'}，'Hello World'）；
render（元素，根元素）；


这里有一个简单的例子供房间里的极简主义者参考：


最小静态反应
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）
this.state={count:1}
this.increase=this.increase.bind（this）
this.reduce=this.reduce.bind（this）
}
增加{
this.setState（{'count'：this.state.count+1}）
}
减少{
this.setState（{'count'：this.state.count-1}）
}
render（）{
返回(
计数：{this.state.Count}
+
-
)
}
}
ReactDOM.render（，document.querySelector（'#root'）；
您必须提供适当的脚本来支持React和ES6+，如下所述：

React和ReactDOM，可从官方网站“CDN链接”页面复制
Babel Standalone将ECMAScript 2015+转换为适用于浏览器的兼容JavaScript版本，官方文档中描述了CDN的使用情况，请查看Babel Standalone部分：

最后，让我们用简单的.html
示例来总结上面提到的内容
<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>


康斯特应用=（）=>你好！
ReactDOM.render(
，document.getElementById（'react-container'））
我是否应该在js文件中包含从“React”导入React的代码？我仍然没有在浏览器上获得任何信息，并且出现相同的错误。我的index.html
promcode.js是文件名？您需要使用type as'
<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>

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