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

Question

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

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

通天塔
babel-preset-es2015
babel-preset-react
babelify
浏览器化
gulp
反应
乙烯基缓冲液
乙烯基源流
反应
反应-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 is not defined

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

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 创建 React 应用程序有错误

Create react app with browserify has error

javascript

browserify

reactjs

gulp

babeljs