Javascript 使用browserify创建react应用程序时出错

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

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

• 巴别塔
• babel-preset-es2015
• 巴别塔预设反应
• 宝贝
• 粗制滥造
• 吞咽
• 反应
• 乙烯基缓冲液
• 乙烯基源流
• 反应
• 反应dom

我想将脚本制作成几个文件（比如itemComponent作为React），并将它们合并到实际加载网站的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'));
});

事实上，Gulp运行良好，一切正常无误。但看看网站，上面写着：

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

从“React”导入React；
从“react dom”导入react dom；
从“./components/ItemList”导入ItemList；
让项目=[…]；
类应用程序扩展了React.Component{
render（）{
返回(
项目清单：
)
}
}
ReactDOM.render（，document.getElementById（'app'））；

---

我不知道问题出在哪里，也不想使用script标记加载每个react文件。是否有遗漏的内容？

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

---

JSX将传输到React.createElement之类的文件，但React不存在，因此我有引用错误。

您确定要在所有JSX文件中导入

React

？当JSX传输到

React.createElement…

，并且本地范围中没有

React

时，可能会发生此错误。例如，如果您有

Hello

，它将被传输到

React.createElement（“h1”，null，“Hello”）

，因此您需要确保范围内有

React

。谢谢Nikolai！我忘了导入每个单独的文件！它起作用了！如果你已经准备好了，请发布解决方案并将此问题标记为已回答。