リアクションjsアプリケーションフロー（2種類のバージョン - わずか1つの作品）

Question

次の2つのドキュメントフローの違いと、最初のフローと2番目のフローが異なる理由を理解しようとしています。

だから作品のバージョンは単にファイルました：

main.js

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import $ from 'jquery'; 
import fullcalendar from 'fullcalendar'; 
import jqueryUI from 'jquery-ui'; 

'use strict'; 

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } 

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } 

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } 

var Application = function (_React$Component) { 
_inherits(Application, _React$Component); 

function Application() { 
    _classCallCheck(this, Application); 

    return _possibleConstructorReturn(this, _React$Component.apply(this, arguments)); 
} 

Application.prototype.render = function render() { 
    return React.createElement(
     'div', 
     null, 
     React.createElement(External, null), 
     React.createElement(Calendar, null) 
    ); 
}; 

return Application; 
}(React.Component); 

/* 
* A simple React component 
*/ 

var Calendar = function (_React$Component2) { 
_inherits(Calendar, _React$Component2); 

function Calendar() { 
    _classCallCheck(this, Calendar); 

    return _possibleConstructorReturn(this, _React$Component2.apply(this, arguments)); 
} 

Calendar.prototype.render = function render() { 
    return React.createElement('div', { id: 'calendar' }); 
}; 

Calendar.prototype.componentDidMount = function componentDidMount() { 
      var date = new Date(); 
    var d = date.getDate(), 
      m = date.getMonth(), 
      y = date.getFullYear(); 

    $('#calendar').fullCalendar({ 
     defaultView:'agendaWeek', 
     header: { 
     left: 'prev,next today', 
     center: 'title', 
     right: 'month,agendaWeek,agendaDay', 
     }, 
     minTime: "07:00:00", 
     maxTime: "21:00:00", 
     selectHelper: true, 

     buttonText: { 
     today: 'today', 
     month: 'month', 
     week: 'week', 
     day: 'day' 
     }, 
     //Random default events 
     events: [ 
     { 
      title: 'All Day Event', 
      start: new Date(y, m, 1), 
      backgroundColor: "#f56954", //red 
      borderColor: "#f56954" //red 

     }, 
     { 
      title: 'Long Event', 
      start: new Date(y, m, d - 5), 
      end: new Date(y, m, d - 2), 
      backgroundColor: "#f39c12", //yellow 
      borderColor: "#f39c12" //yellow 

     }, 
     { 
      title: 'Meeting', 
      start: new Date(y, m, d, 10, 30), 
      allDay: false, 
      backgroundColor: "#0073b7", //Blue 
      borderColor: "#0073b7" //Blue 
     }, 
     { 
      title: 'Lunch', 
      start: new Date(y, m, d, 12, 0), 
      end: new Date(y, m, d, 14, 0), 
      allDay: false, 
      backgroundColor: "#00c0ef", //Info (aqua) 
      borderColor: "#00c0ef" //Info (aqua) 

     }, 
     { 
      title: 'Birthday Party', 
      start: new Date(y, m, d + 1, 19, 0), 
      end: new Date(y, m, d + 1, 22, 30), 
      allDay: false, 
      backgroundColor: "#00a65a", //Success (green) 
      borderColor: "#00a65a" //Success (green) 
     }, 
     { 
      title: 'Click for Google', 
      start: new Date(y, m, 28), 
      end: new Date(y, m, 29), 
      url: 'http://google.com/', 
      backgroundColor: "#3c8dbc", //Primary (light-blue) 
      borderColor: "#3c8dbc" //Primary (light-blue) 
     } 
     ], 
     editable: true, 
     droppable: true, // this allows things to be dropped onto the calendar !!! 
     drop: function (date, allDay) { // this function is called when something is dropped 

     // retrieve the dropped element's stored Event Object 
     var originalEventObject = $(this).data('eventObject'); 

     // we need to copy it, so that multiple events don't have a reference to the same object 
     var copiedEventObject = $.extend({}, originalEventObject); 

     // assign it the date that was reported 
     copiedEventObject.start = date; 
     copiedEventObject.allDay = allDay; 
     copiedEventObject.backgroundColor = $(this).css("background-color"); 
     copiedEventObject.borderColor = $(this).css("border-color"); 

     // render the event on the calendar 
     // the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/) 
     $('#calendar').fullCalendar('renderEvent', copiedEventObject, true); 

     // is the "remove after drop" checkbox checked? 
     if ($('#drop-remove').is(':checked')) { 
      // if so, remove the element from the "Draggable Events" list 
      $(this).remove(); 
     } 

     } 
    }); 
}; 

return Calendar; 
}(React.Component); 

var External = function (_React$Component3) { 
_inherits(External, _React$Component3); 

function External() { 
    _classCallCheck(this, External); 

    return _possibleConstructorReturn(this, _React$Component3.apply(this, arguments)); 
} 

External.prototype.render = function render() { 
    return React.createElement(
     'div', 
     { id: 'external-events' }, 
     React.createElement(
      'h4', 
      null, 
      'Draggable Events' 
     ), 
     React.createElement(
      'div', 
      { className: 'fc-event' }, 
      'My Event 1' 
     ), 
     React.createElement(
      'div', 
      { className: 'fc-event' }, 
      'My Event 2' 
     ), 
     React.createElement(
      'div', 
      { className: 'fc-event' }, 
      'My Event 3' 
     ), 
     React.createElement(
      'div', 
      { className: 'fc-event' }, 
      'My Event 4' 
     ), 
     React.createElement(
      'div', 
      { className: 'fc-event' }, 
      'My Event 5' 
     ), 
     React.createElement(
      'p', 
      null, 
      React.createElement('input', { type: 'checkbox', id: 'drop-remove' }), 
      React.createElement(
       'label', 
       { 'htmlFor': 'drop-remove' }, 
       'remove after drop' 
      ) 
     ) 
    ); 
}; 

External.prototype.componentDidMount = function componentDidMount() { 
    $('#external-events .fc-event').each(function() { 

     // store data so the calendar knows to render an event upon drop 
     $(this).data('event', { 
      title: $.trim($(this).text()), // use the element's text as the event title 
      stick: true // maintain when user navigates (see docs on the renderEvent method) 
     }); 

     // make the event draggable using jQuery UI 
     //$(this).draggable({ 
    //  zIndex: 999, 
    //  revert: true, // will cause the event to go back to its 
     // revertDuration: 0 // original position after the drag 
     //}); 
    }); 
}; 

return External; 
}(React.Component); 

/* 
* Render the above component into the div#app 
*/ 

ReactDOM.render(React.createElement(Application, null), document.getElementById('app')); 

私はフォローの流れにこれを分割すると、それが作業を停止します。

main.js - > routes.js - > app.js

（1）新しいmain.js

import 'whatwg-fetch'; 
import React from 'react'; 
import ReactDOM from 'react-dom'; 
import { Provider } from 'react-redux' 
import { Router, browserHistory } from 'react-router'; 
import configureStore from './store/configureStore'; 
import getRoutes from './routes'; 
import jQuery from 'jquery'; 

const store = configureStore(window.INITIAL_STATE); 

ReactDOM.render(
    <Provider store={store}> 
    <Router history={browserHistory} routes={getRoutes(store)}/> 
    </Provider>, 
    document.getElementById('app') 
); 

（2）routes.js（図示されていないすべてのコード）

return (
    <Route path="/" component={App}> 
    </Route> 
); 
} 

（3）最後の行を除いて、第1の流れからMAIN.JS同じ

を、app.js

から：

ReactDOM.render(React.createElement(Application, null), document.getElementById('app')); 

へ：

エラーが受信

return React.createElement(Application, null); 

は次のとおりです。

$.fn.fullCalendar = function(options) { 
       ^

TypeError: Cannot set property 'fullCalendar' of undefined 

私が反応する新しいですし、まだすべてを学ぶしようとしています。私は本当に小さいものを見落としていると確信しています。

Answer 1

最初のバージョンは、完全なコード（バベルでtranspiledすべてのコードを）持っているあなたの完全なバンドルファイル（main.js）である

第二の流れを1つに変換され、バンドルされなければならES6個々のファイルでありますファイルまたはいくつかのチャンク。

これらのES6ファイルには、main.jsというエントリポイントがあります。このmain.jsは他のファイルをインポートします。 `gulp.task（「反応」、機能（）{ リターンbrowserify（{エントリ：「アプリこれらのファイルはこれが通過飲み込むことにより、すでに行われている