各位，问个问题，react直接在页面中引入的话，一个文件里面的多个components如何单独的分离成各个小的componen组件呢，
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="./bower_components/react/react.min.js" charset="utf-8"></script>
<script src="./bower_components/react/react-dom.min.js" charset="utf-8"></script>
<script src="./bower_components/babel/browser.min.js" charset="utf-8"></script>
<script src="./components/scheduleComponent.js" type="text/babel" charset="utf-8"></script>
<script src="./index.js" type="text/babel" charset="utf-8"></script>
</head>
<body>
<p id="root" class="container"></p>
</body>
</html>var ScheduleComponent = React.createClass({
render () {
return (
<p>Hello</p>
)
}
})function Hello(props) {
return (
<p className="col-md-4">
<ScheduleComponent/>
</p>
)
}
ReactDOM.render(
<Hello/>, document.getElementById('root'))
新手表示为何不能这样做，在线等各位好心人求解
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
在scheduleComponent.js末尾添加：
然后在index.js首部添加：
index导入那个组件
模块化的话你就语言使用模块导出导入，可以使用es6的export和import
既然用了babel你就用es6语法导入导出呗
实在不行你就把模块都仍全局变量好了
推荐你使用webpack2+babel+react 这种模式开发，使用和调试都很方便而且你早晚都会走这一步.
你可以阅读下面的文章:
https://segmentfault.com/a/11...
webpack配置方面，建议看官方文档，安装最新的2.0版本。
可以看:
https://doc.webpack-china.org... --webpack中文文档
https://segmentfault.com/a/11... --webpack2升级文档介绍