创建反应应用程序与浏览器有错误

Question

我正在学习React并尝试创建一个简单的React应用程序。我想使用ES2015模块和一些ES6功能，所以我通过npm安装了Babel和browserify。

这些是我安装的节点模块：

• 巴贝尔
• Babel-preet-es2015
• 巴贝尔-预设-反应
• Babelify
• 浏览器
• 大口喝
• 反应
• 乙烯基缓冲液
• 乙烯基-源-流
• 反应
• report-dom

我想使脚本成几个文件（像itemComponent作为反应），并将它们合并到实际网站加载的dist/app.js。为此，我用了大口大口的！

这是我的gulpfile.js：

var source = require('vinyl-source-stream');
var gulp = require('gulp');
var browserify = require('browserify');
var reactify = require('reactify');
var babelify = require('babelify');

gulp.task('default', function() {
    return browserify('./source/' + file)
    .transform(babelify, { presets: ["es2015", "react"] })
    .bundle()
    .pipe(source(file))
    .pipe(gulp.dest('./dist'));
});

古普实际上工作得很好，一切都很好，没有错误。但是看看网站，上面写着：

app.js:19474未捕获引用错误：未定义React

所以我删除了通过npm安装的react和react dom，只需从HTML下载react和load，只需使用脚本标记，就可以了。但我想包括这样的反应：

import React from 'react';

但它不起作用。这是我的app.js：

import React from 'react';
import ReactDOM from 'react-dom';
import ItemList from './components/itemlist';

let items = [ ... ];

class App extends React.Component {
    render() {
        return (
            <div>
                <h1>List of items:</h1>
                <ItemList items={this.props.items} />
            </div>
        )
    }
}

ReactDOM.render(<App items={items} />, document.getElementById('app'));

我不知道是什么问题，我不想使用脚本标记加载每个反应文件。我错过了什么吗？

Answer 1

此问题的原因是我忘记在子组件中导入React模块。

JSX将传输到React.createElement之类的文件，但React不存在，所以这就是我出现引用错误的原因。