Reagieren App Fehler 'Uncaught ReferenceError: Reagieren ist nicht definiert'

Question

Ich versuche, eine App mit Hilfe von reagieren, aber es wird nicht funktionieren, und ich kann nicht verstehen, warum. Alles wird mit babelify kompiliert, aber während der Ausführung wird eine Ausnahme ausgelöst. Der Fehler folgt: Uncaught ReferenceError: React ist nicht definiert.

Hier meine Komponentendatei (BigCard.jsx):

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

Meine Hauptdatei (main.js):

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`)); 

Datei Meine Grunzen Einstellungen (grunfile.js) (I gelöscht die meisten Befehle, so sieht es hier winzig, aber alles in Ordnung ist mit dieser Datei):

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

Und meine Paketdatei (package.json) (I entfernt auch die meisten der Refs, aber am wichtigsten sind):

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

Vielleicht ist der Fehler liegt auf der Hand, aber ich kann es nur nicht sehen. Können Sie mir bitte dabei helfen?

Answer 1

hinzufügen import React from 'react' in BigCard.jsx

Jede Datei, die Bedürfnisse verwendet reagieren in den Import-Anweisung haben.