title: How to get ReactJs to work with FullCalendar
body: <p>I'm having a hard time getting <a href="https://fullcalendar.io/" rel="nofollow noreferrer">FullCalendar</a> to work properly with ReactJs. The calendar shows up but it does not look correct and passing in arguments to <code>$("#calendar").fullCalendar()</code> does NOT do anything as you can see from the image below. <em>(should have day 6 - 8 highlighted green)</em>
  <a href="https://i.stack.imgur.com/rIfpG.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rIfpG.png" alt="enter image description here"></a></p>
  
  <p>So I started out with <a href="https://github.com/facebookincubator/create-react-app" rel="nofollow noreferrer">create-react-app</a> that just jump starts the project for me with all of the needed dependencies such as Babel and what not.</p>
  
  <p>Then made 2 very simple React classes like so:</p>
  
  <pre><code>import React, { Component } from 'react';
  import './App.css';
  
  import $ from 'jquery';
  import 'moment/min/moment.min.js';
  
  import 'fullcalendar/dist/fullcalendar.css';
  import 'fullcalendar/dist/fullcalendar.print.min.css';
  import 'fullcalendar/dist/fullcalendar.js';
  
  
  class Calendar extends Component {
  
    componentDidMount(){
      const { calendar } = this.refs;
  
      $(calendar).fullCalendar({events: this.props.events});
    }
  
    render() {
      return (
        &lt;div ref='calendar'&gt;&lt;/div&gt;
      );
    }
  
  }
  
  
  class App extends Component {
    render() {
  
      let events = [
        {
          start: '2017-01-06',
          end: '2017-01-08',
          rendering: 'background',
          color: '#00FF00'
        },
      ]
  
      return (
        &lt;div className="App"&gt;
          &lt;Calendar events={events} /&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default App;
  </code></pre>
  
  <p>I have no clue where the mistake is so I did what anyone would do and google around to see if someone has already ran into this issue and I came across <a href="https://egghead.io/lessons/react-using-react-with-the-fullcalendar-jquery-plugin" rel="nofollow noreferrer">this short video tutorial</a> on exactly this and still does not work properly.</p>
  
  <p>Here is my <strong>package.json</strong> file:</p>
  
  <pre><code>{
    "name": "cal-test",
    "version": "0.1.0",
    "private": true,
    "devDependencies": {
      "react-scripts": "0.8.5"
    },
    "dependencies": {
      "fullcalendar": "^3.1.0",
      "jquery": "^3.1.1",
      "moment": "^2.17.1",
      "react": "^15.4.2",
      "react-dom": "^15.4.2"
    },
    "scripts": {
      "start": "react-scripts start",
      "build": "react-scripts build",
      "test": "react-scripts test --env=jsdom",
      "eject": "react-scripts eject"
    }
  }
  </code></pre>
  
  <p>Iv'e tried everything I could think of and still no luck, help is greatly appreciated.</p>
  
  <p>Thank you so much!</p>