gulp unexpected token when trying to build reactjs tutorial

Question

I have just started working through the book "Reactjs Essentials" from Packt trying to learn react.js, I have everything setup including building my app with gulp. I have never used this before - seems really annoying having to run gulp after every change in the code - but anyway here is some code from the book:

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

According to the book, this is ok (the html) and that the JSX compiler will convert this. It saves having to create lots of react elements.

The problem is that gulp complains about an unexpected token that starts at the "<" of the UL tag.

Here is my basic test gulp file also from the book:

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

Up until this point in the book I was creating tags OK with createElement(). This problem has only happened since the book said add the html instead.

Can anyone more experienced see what is wrong, this pretty much the first chapter so I still don't know what could be the cause. I tried searching online but had no joy. I'm guessing it has something to do with the babelify part of the gulp file as that is this JSX compiler part.

Maybe the book is out-of-date or has typos?

score 0 · Answer 1 · edited May 23 '17 at 11:59

0

Looks like Babel believes that your JSX is just JS. Maybe this answer can help. https://stackoverflow.com/a/34162856/3478605

edited May 23 '17 at 11:59

Community

1
1

answered May 12 '16 at 18:45

Valéry

4,574
1
14
25

Sorry, that was my mistake, I just copied the task block. I do have the required includes. Thanks anyway. – Arnold Rimmer May 15 '16 at 06:25

score 0 · Accepted Answer · answered May 12 '16 at 19:07

0

Based on your basic gulp file, it looks like you're forgetting to import Babel.

Be sure to include before your gulp task:

var babelify = require('babelify');

The code itself is perfectly valid, even if it looks a little odd when you're first getting used to JSX: http://codepen.io/anon/pen/VaNYZL

answered May 12 '16 at 19:07

Brad Colthurst

2,515
14
13

Thanks. That link helped me fix the problem: I had to install some presets: npm install --save-dev babel-cli babel-preset-react babel-preset-es2015 – Arnold Rimmer May 15 '16 at 06:24

gulp unexpected token when trying to build reactjs tutorial

2 Answers2