Fehler bei der Kompilierung von jsx mit broserify für reactJS

Question

Ich bin neuer auf ReactJS Welt. Ich versuche, eine Prüfung App zu tun, und ich erhalten die nächste: ich die nächste Komponente haben:

BtnLink.js

var BtnLink = new React.createClass({ 

    getInitialState:function(){ 
     return { 
      class : 'btn btn-primary', 
      label : 'Continuar' 
     } 
    }, 
    changeButton : function(){ 

    }, 
    render : function(){ 
     return(
      <div>hola</div> 
     ); 
    } 
}); 

Dieser Code auf BtnLink.jsx Datei ist, und ist im Preis inbegriffen in meiner index.js Datei, wie in der broserify Dokumentation.

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

}; 

app.initialize();

Aber wen ich versuche, den nächsten wroserify Befehl für erstellen de „js“ Datei auszuführen:

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

Die Konsole zeigen Fehler auf „hola“ Zeile (oder "wenn ich es = Wechsel von BtnLink.. jsx file.wenn ich die Zeile für nur Text ändere, zB "hola" ohne html-Selektoren, läuft der Befehl ok, aber das ist nicht die Idee, weil die Komponenten von React html ohne Probleme zurückgeben können.right? Kann jemand wissen, was der Fehler ist ?

AKTUALISIERT 6.1.2017 Ich habe auch versucht mit babel, mit dem nächsten Befehl

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

und die Antwort ist die gleiche wie browserify

js\src\components\BtnLink.jsx -> js\dist\components\BtnLink.js 
SyntaxError: js/src/components/BtnLink.jsx: Unexpected token (6:3) 
    4 | render : function(){ 
    5 |   return(
> 6 |     <div>hola</div> 
    |     ^
    7 |   ) 
    8 | } 
    9 | }); 

Answer 1

Versuchen Sie, den Kommentar zu entfernen. Innerhalb jsx Datei, diese shouldo gehen Kommentare wie:

{/* Comment */} 

Answer 2

babel --presets es2017 

ES2017 Funktionen umwandeln, und nichts anderes. Wenn Sie JSX verwenden möchten, sollten Sie babel-preset-react verwenden und die Wahrscheinlichkeit ist groß, dass Sie babel-preset-env oder babel-preset-latest neben react verwenden möchten.