Реакция потока приложений js (2 разных версии - всего 1 работа)

Question

Я пытаюсь понять разницу между следующими двумя потоками документа и почему первый работает, а второй не работает.

Таким образом, версия, которая работает имеет только файл:

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) app.js

же, как MAIN.JS из первого потока, за исключением последней строки

От:

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

To:

return React.createElement(Application, null); 

получил Ошибка:

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

TypeError: Cannot set property 'fullCalendar' of undefined 

Я новичок реагировать и до сих пор пытаются узнать все. Я почти уверен, что я упускаю из виду что-то действительно маленькое, хотел бы любой помощи!

Answer 1

Первая версия ваш полный пакет файлы (main.js), который имеет полный код (весь код transpiled Бабель)

второго потока отдельных файлы ES6, который должен быть преобразован и затолкали в один файл или несколько кусков.

Эти файлы ES6 имеют точку входа, где можно сказать main.js. Этот main.js импортирует другие файлы и так далее. Для запуска в браузере эти файлы должны быть transpiled и укутаны