結合Visual Studio 2015，gulp，browserify，React.js和JSX

Question

作為一個相當以Microsoft為中心並且主要是后端程序員的公司，一次解決所有這些（很酷的）新技術已被證明是一項艱巨的任務。 我很高興地說，我已經把很多東西連在一起了，我覺得我似乎已經很接近突破最后一個障礙了，我終於可以開始工作並高效地編寫代碼了。這個勇敢的新世界，但是我現在掛了一個主要障礙。 這對我來說是全新的，所以我會盡力解釋：

我正在使用VS 2015，並正在構建DNX ASP.NET 4.5 MVC 6 Web應用程序。 我已經使用NPM安裝了React，Flux和所有形式的支持模塊。 我正在使用flux模式加載數據的第一個全功能JSX屏幕上，當從API服務加載數據時，我正在從商店接收回調。

我喜歡能夠使用require('xxx')語法將依賴項鏈接在一起，因此我已經養成了這種習慣，並且我正在使用gulp任務中的browserify和reactify來管理依賴項，並收集所有輸入文件，然后在大概的時間將我的JSX文件轉換為JS。

我現在遇到的問題是我從未料到的：當我在JS文件中使用require()來包含定義我的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 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 ，從react.createClass傳入'MyComponent'變量，但沒有任何樂趣。

我主要是這樣做的，但是當然要把數據顯示在屏幕上（在這種情況下使用react）是整個問題的重點，因此，我現在具有功能分配器，操作，存儲和API調用的事實令人興奮，但是我不再像以前那樣簡單地組成我的反應組件。

我在這里想念什么？ 必須有一種將這些技術相結合的方法，但是我還沒有找到一個等同於這種特定組合的示例。

提前致謝。

Answer 1

有時我想知道如果我是一個聰明的動物，生活會怎樣。 我剛剛花了一整天-一個周末的日子，沒少，追逐幻影解決方案和可選配置，直到我想哭的時候，其實我的問題是，我會離開的“s”在module.exports在我的組件定義的結尾。 我懷疑，那血腥的事使我喪命了數年。 這就是我在玩弄我幾乎不了解的tings時不復制/粘貼的結果。 我想我在此過程中學到了很多東西，也許我會隨着時間的流逝而恢復工作。

感謝在這里付出努力，甚至根本不琢磨的人。