Chapter 02 - React doesn't take effect page 22

[Andersrapp]

I run into problem on page 22. It says the html page should be empty and I should open developer tools to find an empty h1-tag. My page is not empty and shows the original text ("I am about to learn the essentials of React.js.") from the index.html file. It hasn't been written over by app.js or anything.

If I run the downloaded code it works fine and shows three list items instead of the original text but I haven't gotten to the end yet. So I tried to copy the code from the example files (except for app.js and snapterest.js) and build again with gulp. I still get the same result. Gulp finishes and I can see the snapterest file is updated. The only difference I can find now is in the versions of babelify and browserify in packages.json. I tried changing them as well and build again. Still no change.

So React doesn't even kick in....

[k-dahl]

I ran into this same issue and it came down to changes made in babelify v7 from v6. So, you can fix it by either using babelify 6.2.0 as in the git repo here, or you can run:

npm install --save-dev babel-preset-react

And modify this line in your gulpfile:

.transform(babelify)

To be this:

.transform('babelify', {presets: ['react']})

...and you should then be good to go on the v7 release of babelify.

[semanio]

@blitzd thanks! I just verified that this fixes the issue.

[mmizutani]

@blitzd, thanks for the tip!

[fedosejev]

@blitzd thanks for supporting your fellow readers!

[edconnor]

Works for me. Thanks!

[mregensberg]

v7 will require something similar to get the later (jsx) tests working as well. I added a .babelrc file for this with:

{
  "presets": ["react"]
}

to get the jsx in the test specs to work correctly.

[racl101]

@blitzd Thank you kindly for the fix sir! Good Karma for you!

[MaynardTool]

thanks, it worked!

[octopustail]

@blitzd Thank you for the tip!
谢谢～