React App Error 'Uncaught ReferenceError: React is not defined'

Question

我正在尝试使用 React 构建应用程序，但它不起作用，我不明白为什么。一切都使用 babelify 编译，但在执行期间会抛出异常。错误如下：Uncaught ReferenceError: React is not defined.

这是我的组件文件 (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>
    );
  }
});

我的主文件（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`));

我的 grunt 设置文件 (grunfile.js)（我删除了大部分命令，所以这里看起来更小，但是那个文件一切正常）：

'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 React from 'react'

每个使用 React 的文件都需要包含 import 语句。

React App Error 'Uncaught ReferenceError: React is not defined'

React App Error 'Uncaught ReferenceError: React is not defined'

javascript

npm

browserify

gruntjs

reactjs