title: React App Error 'Uncaught ReferenceError: React is not defined'
body: <p>I am trying to build an app using react, but it won't work and I can't understand why. Everything compiles using babelify, but it throws an exception during performance. The error is following: Uncaught ReferenceError: React is not defined.</p>
  
  <p>Here is my Component file (BigCard.jsx):</p>
  
  <pre><code> export var BigCard = React.createClass({
    render: function() {
      var rows = [];
      for (var variable in this.props.pokemon) {
        if (this.props.pokemon.hasOwnProperty(variable) &amp;&amp; variable.toString() !== 'id' &amp;&amp; variable.toString !== 'name' &amp;&amp; variable.toString !== 'image' &amp;&amp; variable.toString !== 'types') {
          rows.push(
            &lt;tr&gt;
              &lt;td class='mdl-data-table__cell--non-numeric'&gt;
                {variable}
              &lt;/td&gt;
              &lt;td&gt;
                {this.props.pokemon[variable]}
              &lt;/td&gt;
            &lt;/tr&gt;
          )
        }
      }
      return (
        &lt;div class='mdl-card mdl-shadow--4dp'&gt;
          &lt;div class='mdl-card__title'&gt;
            &lt;img src={this.props.pokemon.image.src} alt='Pokemon' class='bigCard__img'/&gt;
          &lt;/div&gt;
          &lt;h2 class='mdl-card__title-text'&gt;&lt;/h2&gt;
          &lt;div class='mdl-card__supporting-text'&gt;
            &lt;table class='mdl-data-table mdl-js-data-table'&gt;
              &lt;thead&gt;
                &lt;tr&gt;
                  &lt;th class='mdl-data-table__cell--non-numeric'&gt;Type&lt;/th&gt;
                  &lt;th class='mdl-data-table__cell--non-numeric'&gt;{this.props.pokemon.types}&lt;/th&gt;
                &lt;/tr&gt;
              &lt;/thead&gt;
              &lt;tbody&gt;
                {rows}
              &lt;/tbody&gt;
            &lt;/table&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  });
  </code></pre>
  
  <p>My main file (main.js):</p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import * as DataLogic from './modules/data-logic.js';
  import SmallCard from './components/SmallCard.jsx';
  import BigCard from './components/BigCard.jsx';
  
  //Test Method
  DataLogic.getPokemonById(3).then((result) =&gt; {
    ReactDOM.render(
      &lt;BigCard pokemon={result} /&gt;,
      document.getElementById('bigCard')
    );
  }).catch((error) =&gt; console.log(`${error} in main.js`));
  </code></pre>
  
  <p>My grunt settings file (grunfile.js) (I deleted most of the commands, so it looks more tiny here, but everything's okay with that file):</p>
  
  <pre><code>'use strict'
  module.exports = function(grunt) {
    require('load-grunt-tasks')(grunt);
    grunt.initConfig({
      pkg: grunt.file.readJSON('./package.json'),
      watch: {
        babelify: {
          files: ['./scripts/**/*.js','./blocks/**/*.js','./scipts/components/*.jsx'],
          tasks: ['browserify']
        },
      },
      eslint: {
        options: {
          format: require('eslint-tap'),
          configFile: '.eslintrc'
        },
        target: './scripts/**/*.js'
      },
      browserify: {
        dist: {
          options: {
            transform: [
              ['babelify', {
                presets: ['es2015','react']
              }]
            ],
            browserifyOptions: {
              debug: true
            },
            exclude: ''
          },
          files: {
            './build/main.js': ['./scripts/**/*.js','./blocks/**/*.js','./scipts/components/*.jsx']
          }
        }
      }
    });
    grunt.registerTask('default', ['browserify', 'eslint', 'jade', 'sass', 'cssmin','uglify','watch']);
  };
  </code></pre>
  
  <p>And my package file (package.json) (I also removed most of the refs, but most important are there):</p>
  
  <pre><code>{
    "name": "Pockedex",
    "version": "0.1.0",
    "dependencies": {
      "babel-preset-es2015": "^6.3.13",
      "babel-preset-react": "^6.5.0",
      "babelify": "^7.2.0",
      "react": "^0.14.7",
      "react-dom": "^0.14.7"
    },
    "devDependencies": {
      "babel-preset-es2015": "6.3.x",
      "babelify": "7.2.x",
      "eslint-tap": "1.1.x",
      "grunt": "^0.4.5",
      "grunt-babel": "6.0.x",
      "grunt-browserify": "^4.0.1",
      "grunt-contrib-concat": "^1.0.0",
      "grunt-eslint": "^17.3.2",
      "load-grunt-tasks": "3.4.x"
    }
  }
  </code></pre>
  
  <p>Perhaps, the error is obvious, but I just can't see it. Can you help me with that, please?</p>