使用 browserify 创建反应应用程序有错误答案

【问题标题】：Create react app with browserify has error使用 browserify 创建反应应用程序有错误
【发布时间】：2016-08-08 06:37:11
【问题描述】：

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

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

巴别塔
babel-preset-es2015
babel-preset-react
babelify
浏览
一饮而尽
反应
乙烯基缓冲液
乙烯基源流
反应
反应域

我想将脚本制作成几个文件（例如 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 is not defined

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

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

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

【问题讨论】：

您确定在所有 JSX 文件中都导入了 React 吗？当 JSX 转译为 React.createElement... 并且本地范围内没有 React 时，可能会发生此错误。例如，如果您有<h1>Hello<h1>，它将被转译为React.createElement("h1", null, "Hello")，因此您需要确定您在范围内有React。
感谢尼古拉！我忘了导入 React 每个单独的文件！它有效！
如果您准备就绪，请发布解决方案并将此问题标记为已回答。

标签： javascript reactjs gulp browserify babeljs

【解决方案1】：

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

JSX 将转换为 React.createElement 之类的东西，但没有 React 存在，所以这就是我出现引用错误的原因。

【讨论】：