Mar*_*k A 5 reactjs react-jsx babeljs
Noob与React在这里.我正在玩React.我有一个简单的组件在我的component.js中呈现.它包含在我的index.html文件中.我包括为脚本React,ReactDOM以及babel在头部.我只想看到一个div正确渲染.我还没有使用Node,只是使用React和Babel(使用babel-standalone)练习.我正在使用一个简单的http服务器运行该文件.我在使用React Chrome扩展程序时遇到错误:Waiting for roots to load...to reload inspector click here.
的index.html
<!DOCTYPE html>
<html>
<head>
<!-- React -->
<script src="https://unpkg.com/react@15/dist/react.min.js"></script>
<!-- React DOM -->
<script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>
<!-- babel core-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.4.4/babel.min.js"></script>
</head>
<body>
<div id="machine-box"></div>
<script type="text/babel" src="components.js"></script>
</body>
</html>`
components.js
class MachineBox extends React.Component {
render(){
return ( <div>Hello From React </div> );
}
}
let target = document.getElementById('machine-box');
ReactDOM.render(
<MachineBox />, target
)
你的代码很好,你使用的是旧版本babel-standalone.
// this
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.4.4/babel.min.js"></script>
// should be this
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.17.0/babel.min.js"></script>
和
<script type="text/babel" src="components.js"></script>
// should be
<script type="text/babel" src="components.js" data-presets="es2015,react"></script>
| 归档时间： |
|
| 查看次数： |
3106 次 |
| 最近记录： |