Error compiling jsx with Browserify ReactJS

3

Good morning,

I am totally new in the world of ReactJS. I am trying to make a trial app and I find the following. These are my files:

BtnLink.jsx:

    var BtnLink = new React.createClass({


    render : function(){
        return(
            <div>hola</div>
        )
    }
});
module.exports = BtnLink;

index.js

var Boton   = require('./components/BtnLink.jsx');

var app = {
    // Application Constructor
    initialize: function() {
        console.log("here with me");
        ReactDOM.render(<BtnLink>, document.getElementbyId('app'))
    },


    onDeviceReady: function() {
        this.receivedEvent('deviceready');
    },

    // Update DOM on a Received Event
    receivedEvent: function(id) {
        var parentElement = document.getElementById(id);
        var listeningElement = parentElement.querySelector('.listening');
        var receivedElement = parentElement.querySelector('.received');

        listeningElement.setAttribute('style', 'display:none;');
        receivedElement.setAttribute('style', 'display:block;');

        console.log('Received Event: ' + id);
    }
};

app.initialize();

This code is in a file "BtnLink.jsx", which I include, in my index.js file, according to the browserify documentation. But at the moment of running the command for the compilation:

browserify js/src/index.js -o js/dist/index.js

The console tells me that I have an error in the "hello" line in the BtnLink.jsx file. I really do not see any error, checking it with all the declaration examples. I think it's pretty similar. Does anyone know what I'm missing? Thank you very much.

Update: I updated the files, now apart, I'm trying to run it with babel with this command:

 babel --presets es2017 js/src/components --watch --out-dir js/dist/components

The result is the same, both with browserify and with babel returns to me that there is error in the hello :

SyntaxError: js/src/components/BtnLink.jsx: Unexpected token (6:3)
  4 |   render : function(){
  5 |           return(
> 6 |                   <div>hola</div>
    |                   ^
  7 |           );
  8 |   }
  9 | });
    
asked by jrodriguez 04.01.2017 в 06:24
source

1 answer

2

Review your project if you added the necessary transformers, reactify or babelify , among other things these are responsible for interpreting the JSX code fragments, the line where you are giving error is JSX code, it would also help us to provide more details such as the error it gives you and How is Browserify configured to rule out other problems?

If you are not using reactify or babelify, it is advisable to use babelify since reactify was deprecated some time ago.

With babelify you must add the preset ES2015 and react, then use it in this way.

browserify script.js -o bundle.js -t [ babelify --presets [ es2015 react ] ]

in the documentation of the links you will find more details

    
answered by 04.01.2017 / 16:03
source