Ошибка компиляции jsx с broserify для реакцииJS

Question

Я новичок в мире ReactJS. Я пытаюсь сделать приложение тестирования и я получаю следующее: У меня есть следующий компонент:

BtnLink.js

var BtnLink = new React.createClass({ 

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

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

Этот код находится на BtnLink.jsx файл, и включен в моем файле index.js, как в broserify документации.

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

Но вэнь я пытаюсь запустить следующую wroserify команду для создания де «JS» файла:

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

Консоль шоу ошибка «Hola» линии (или "если я изменить его = от BtnLink.. jsx.Если я изменяю строку только для текста, например, «hola» без селекторов html, команда запускается нормально, но это не идея, потому что компоненты React могут возвращать html без проблем. Правильно? Кто-нибудь может знать, что такое ошибка ?

ОБНОВЛЕНО 6.1.2017 Я также пробовал использовать babel, используя следующую команду

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

и ответ такой же, как 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

Попробуйте удалить комментарий. Внутри JSX файл, комментарии shouldo идти, как это:

{/* Comment */} 

Answer 2

babel --presets es2017 

ES2017 преобразует функцию, и ничего другого. Если вы хотите использовать JSX, вы бы хотели использовать babel-preset-react, и, скорее всего, вы захотите использовать babel-preset-env или babel-preset-latest вместе с react.