javascript - 结合 Visual Studio 2015、gulp、browserify、React.js 和 JSX

Question

作为一个相当以微软为中心、主要是后端的程序员，同时处理所有这些(酷)新技术已经被证明是相当令人畏惧的。我很高兴地说，我已经将很多东西连接在一起，并且我感觉好像我非常接近突破最后一个障碍，到达我最终可以开始工作并有效地生成代码的地步。这个美丽的新世界，但我现在遇到了一个重大障碍。这对我来说是全新的，所以我会尽力解释:

我正在使用 VS 2015 并构建 DNX ASP.NET 4.5 MVC 6 Web 应用程序。我使用 NPM 来安装 React、flux 和各种支持模块。我正在开发第一个功能齐全的 JSX 屏幕，该屏幕使用 Flux 模式来加载数据，并且当从 API 服务加载数据时，我会从我的商店接收回调。

我喜欢能够使用require('xxx')语法将依赖项链接在一起，所以我已经养成了这种习惯，我使用 gulp 任务中的 browserify 和 reactify 来管理依赖项，收集所有输入文件，并将我的 JSX 文件转换为 JS at，呃，gulp -我猜是时候了。

我现在遇到的问题是我从未预料到的:当我使用 require() 时在 JS 文件中包含一个定义我的 React 组件之一的 JSX 源文件，然后尝试使用 ReactDOM.render 和 JSX 语法挂载该组件的实例，我收到以下错误:

Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method of xxx .

到目前为止，在我的应用程序的其他区域中，我始终包含 react 组件:

ReactDOM.render(<MyComponent />, $("#reactTarget")[0]);

这一直有效。但现在我已经进入 browserify 世界，将这些源文件链接在一起，如果我包含该行

var MyComponent = require('./MyComponent.jsx');

...然后继续尝试包含组件的实例:

ReactDOM.render(<MyComponent />, $("#reactTarget")[0]);

我收到上述错误。现在考虑到所有这些对我来说都是新的并且有些模糊，我不能 100% 确定是浏览器方面导致了问题，但感觉确实如此。

我也尝试过react.createClass ，从 require 行传入“MyComponent”变量，但没有什么乐趣。

我的大部分功能都在工作，但是当然将数据放在屏幕上 - 在本例中使用 React - 是事情的全部要点，所以，我现在有一个功能调度程序、操作、存储和 API 调用的事实是令人兴奋，但我不能再像以前那样简单地编写我的 react 组件。

我在这里缺少什么？一定有一种方法可以结合这些技巧和技术，但我还没有找到相当于这种特定组合的示例。

提前致谢。

Answer 1

我有时想知道，如果我是一只更聪明的动物，生活会是什么样子。我刚刚花了一整天的时间 - 周末的一天，不少于，寻找幻影解决方案和替代配置，直到我想哭，而事实上我的问题是我在 module.exports 中遗漏了 's'。在我的组件定义的末尾。我怀疑那该死的让我损失了好几年的生命。这就是当我玩弄我几乎不明白的东西时不复制/粘贴所得到的结果。我想我在这个过程中学到了很多东西，也许随着时间的推移我会重新获得这些时间。

感谢所有在这里付出努力、甚至思考过这个问题的人。