javascript - 使用 browserify 创建 React 应用程序有错误

Question

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

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

• 通天塔
• babel-preset-es2015
• babel-preset-react
• babel化
• 浏览器
• 一饮而尽
• react
• 乙烯基缓冲液
• 乙烯基源流
• react
• react 域

我想将脚本制作成几个文件(如 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 加载，只需使用脚本标签，它就可以工作。但我想包括这样的 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'));

我不知道问题出在哪里，我不想使用脚本标签加载每个 react 文件。我错过了什么吗？

Answer 1

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

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