Question

我刚刚开始编写Packt的“Reactjs Essentials”一书，试图学习react.js，我有一切设置，包括用gulp构建我的应用程序。我之前从未使用过这个 - 看起来真的很烦人在代码中的每次更改后都要运行gulp - 但无论如何这里有一些代码来自本书：

var React       = require('react');
var ReactDOM    = require('react-dom');

var listOfItems =   <ul className="list-of-items">
                        <li className="item-1">Item 1</li>
                        <li className="item-2">Item 2</li>
                        <li className="item-3">Item 3</li>
                    </ul>;

ReactDOM.render(listOfItems, document.getElementById('react-application'));

根据这本书，这是好的（HTML）并且JSX编译器将转换它。它节省了必须创建大量反应元素。

问题是gulp抱怨从“＆lt;”开始的意外令牌UL标签。

这是我的基本测试gulp文件，也来自本书：

gulp.task('default', function () {
    return browserify('./source/app.js')
        .transform(babelify)
        .bundle()
        .pipe(source('snapterest.js'))
    .   .pipe(gulp.dest('./build/'));
});

直到本书的这一点，我正在使用createElement（）创建标签。这个问题只发生了，因为书中说添加了html。

任何更有经验的人都可以看到错误，这几乎是第一章，所以我仍然不知道可能是什么原因。我尝试在线搜索，但没有快乐。我猜它与gulp文件的babelify部分有关，因为这是这个JSX编译器部分。

也许这本书已经过时或有拼写错误？

Answer 1

看起来Babel认为你的JSX只是JS。也许这个答案可以帮助你。 https://stackoverflow.com/a/34162856/3478605

Answer 2

根据您的基本gulp文件，您似乎忘记导入Babel。

请务必在您的gulp任务之前加入：

var babelify = require('babelify');

代码本身是完全有效的，即使你第一次习惯JSX时看起来有点奇怪：http://codepen.io/anon/pen/VaNYZL

尝试构建reactjs教程

2 个答案: