react动态创建100个组件

react动态创建100个组件步骤如下：

1、创建一个HelloComponent.js文件，写入组件。并在App.js中调用HelloComponent组件。

2、在HelloComponent.js文件中分别使用三种方式创建组件。

日常在开发中总是会遇到各种奇怪的需求，

最近在开发一个多人合作的项目时变遇到一个奇怪的需求，

对方之前开发了一个react组件，要求在这期迭代中嵌入到vue项目中。

npm i -S vuera

npm install --save react react-dom

这个时候发现第一个问题：

不难发现，这是vue项目中未jsx文件格式的问题所导致

解决办法：

编辑webpack.base.conf.js，加入对jsx的支持

这个时候第二个问题出现了：

原因：

.babelrc文件中默认引入了transform-vue-jsx，此插件将jsx转义成h function的形式供vue调用。

解决办法：

npm install --save-dev babel-plugin-transform-react-jsx

并且在.babelrc文件中

用transform-react-jsx替换transform-vue-jsx

至此，我们便完成了在vue项目中引入react组件的目的

效果：

npm i -S vuera

npm install --save vue

这个应该是React里面最大的一个坑。 目前我们的解决方案就是一个event bus。具体的实现，你可以用node自己的EventEmitter,或者上面提到的EventEmitter2或者Backbone的Events。

---