reactjsチュートリアルを作成しようとすると予期せぬトークンが鳴る

Question

私は、react.jsを学ぼうとしているPacktの "Reactjs Essentials"という本を始めるにあたり、私は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')); 

、これはOKです（HTML） JSXコンパイラがこれを変換することに注意してください。多くの反応要素を作成する必要がありません。

問題は、ULタグの "<"で始まる予期しないトークンについてgulpが文句を言うことです。ここで

は、私の基本的なテスト一気ファイルは本からもです：

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

私はのcreateElement（とOKのタグを作成していた本の中で、この時点まで）。この問題は、この本ではhtmlを追加するとしか書かれていないことから起こっています。

何が間違っているのか誰かが知ることができます。これはかなり最初の章で、私はまだ何が原因か分かりません。オンラインで検索しようとしましたが、喜びはありませんでした。私はそれがgulpファイルのbabelify部分と関係があると思います。これはJSXコンパイラ部分です。

本は古くなっているか、またはタイプミスがありますか？

Answer 1

基本的なgulpファイルに基づいて、あなたはBabelをインポートするのを忘れているようです。

は、あなたの一気のタスクの前に必ず含めてください：

var babelify = require('babelify'); 

コード自体あなたが最初JSXに慣れているとき、それは少し奇妙に見える場合でも、完全に有効です：http://codepen.io/anon/pen/VaNYZL

Answer 2

Babelのように見えますが、あなたのJSXはJSです。多分、この答えは助けになるかもしれません。 https://stackoverflow.com/a/34162856/3478605