Question

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

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

巴别
巴别预置-ES2015
巴别预置反应的
babelify
browserify
吞
reactify
乙烯基缓冲
乙烯基源流
反应
反应-DOM

我想将脚本编写成几个文件（比如itemComponent作为React）并将它们合并到实际网站加载的dist / app.js中。为此，我用了gulp！

这是我的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'));
});

Gulp实际上工作得很好，一切都很好，没有错误。但请查看网站，它说：

app.js：19474 Uncaught ReferenceError：未定义React

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

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，所以这就是我引用错误的原因。

使用browserify创建反应应用有错误

1 个答案: