React App Error 'Uncaught ReferenceError：Reactが定義されていません'

Question

私はreactを使用してアプリケーションを構築しようとしていますが、うまく動作せず、理由を理解できません。すべてがbabelifyを使用してコンパイルされますが、実行中に例外がスローされます。エラーは次のとおりです。Uncaught ReferenceError：Reactが定義されていません。

export var BigCard = React.createClass({ 
    render: function() { 
    var rows = []; 
    for (var variable in this.props.pokemon) { 
     if (this.props.pokemon.hasOwnProperty(variable) && variable.toString() !== 'id' && variable.toString !== 'name' && variable.toString !== 'image' && variable.toString !== 'types') { 
     rows.push(
      <tr> 
      <td class='mdl-data-table__cell--non-numeric'> 
       {variable} 
      </td> 
      <td> 
       {this.props.pokemon[variable]} 
      </td> 
      </tr> 
     ) 
     } 
    } 
    return (
     <div class='mdl-card mdl-shadow--4dp'> 
     <div class='mdl-card__title'> 
      <img src={this.props.pokemon.image.src} alt='Pokemon' class='bigCard__img'/> 
     </div> 
     <h2 class='mdl-card__title-text'></h2> 
     <div class='mdl-card__supporting-text'> 
      <table class='mdl-data-table mdl-js-data-table'> 
      <thead> 
       <tr> 
       <th class='mdl-data-table__cell--non-numeric'>Type</th> 
       <th class='mdl-data-table__cell--non-numeric'>{this.props.pokemon.types}</th> 
       </tr> 
      </thead> 
      <tbody> 
       {rows} 
      </tbody> 
      </table> 
     </div> 
     </div> 
    ); 
    } 
}); 

私のメインファイル（main.js）：ここで

は私のコンポーネントファイル（BigCard.jsx）である

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) => { 
    ReactDOM.render(
    <BigCard pokemon={result} />, 
    document.getElementById('bigCard') 
); 
}).catch((error) => console.log(`${error} in main.js`)); 

私の面倒な設定ファイル（grunfile.js）（Iは削除しましたコマンドのほとんど、それは）ここでは、より小さな見えますが、すべてが大丈夫、そのファイルと：

'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']); 
}; 

そして、私のパッケージファイル（package.json） （私はまた、引用文献のほとんどが削除されますが、最も重要なのがあります）：

{ 
    "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" 
    } 
} 

おそらく、エラーは明白ですが、私はそれを見ることはできません。それで助けてくれますか？

Answer 1

はBigCard.jsx

でそれにimport文を持っているニーズを反応させ使用するすべてのファイルをimport React from 'react'を追加します。